【stylelint-plusがおすすめ?】VS Codeでcssのプロパティをソートする拡張比較!

プログラミング

vs codeで「cssのプロパティをソートする拡張」や「プログラミングを整形する拡張」はいろいろありますので、覚書がてら、いろいろとまとめて紹介します。

後半はその中でも使い勝手がよさそうなstylelint-plusの使い方を紹介しています。

【おすすめは?】vs codeで整形する拡張比較

【CSScomb、CSS Formatter】VS Codeでcssのプロパティをソートする拡張比較!

昔オンラインで少しお世話になった、cssのプロパティをソートするCSScombが利用できなくなっていました。ブログ運営するにあたり、たまたまcssを少し書く機会がありました。

現在、VS Codeを利用しているため、そちらで拡張を入れることにしました。

VS Codeにも実はCSScombの拡張はありますし、Stack OverflowのVisual studio code CSS indentation and formattingに紹介されていたCSS Formatterもあります。

CSScombはちょっとだけ使ったとこころ軽く設定してF1キーで並べ替えできました。デフォルト設定は下記でいけます。

Can be built-in config (csscomb, zen, or yandex), path to a config file, or an object containing custom configuration.

ただ、自分が好きなように並べ替えしたいときはは別途対応が必要です。

しかし、cssだけではなく、もう少し応用が効く方がいいだろうということでStylelintを採用しました。正確にはStylelint Plusを採用。

stylelint-plus – Visual Studio Marketplace

下記の言語に対応しています。

CSS (css)
HTML (html)
Less (less)
JavaScript (javascript)
JavaScript React (javascriptreact)
Markdown (markdown)
Markdown+MathML (source.markdown.math)
PostCSS (postcss)
Sass (sass)
SCSS (scss)
styled-components
Official (source.css.styled)
Userland (styled-css)
Sugarss (sugarss)
Svelte (svelte)
TypeScript (typescript)
TypeScript React (typescriptreact)
Vue (vue, vue-html, vue-postcss)
XML (xml)
XSL (xsl)

整形だけではなく、警告してくれます。

ESLint、Stylelint、Prettier

ESLintとStylelint、Prettierは組み合わせて使う紹介をされているサイトが多いですが、とりあえず、stylelint-plusだけを使いました。

拡張もあります。

ESLint – Visual Studio Marketplace

Prettier – Code formatter – Visual Studio Marketplace

codepenで書いたcssをある程度思った通りにも並べ替えしたかっただけなので。あと、あまりごちゃごちゃしたくなかったです。

Prettierはインストールせず様子見しようと思いますが、便利そうではあるので必要があれば、追加インストールします。

vue.jsですが、eslintもprettierなしでやっている方もいるようです。

もうprettierで消耗したくない人へのvueでのeslint設定 - Qiita
タイトル通り。vscodeとvuejsを使ってのlintの設定を**prettierなし**でやってみた。 ## tl;dr 対象ファイルとpackage.jsonと.eslintrc.jsの対応表👇 |構文チェック・自動フォー...
(後日談を追記)javascript系の言語を使うなら、eslintとprettierが必要かもしれませんよね。cssの並べ替え問題とは別に、Vue.jsを使った際に再検討しました。

Vue.js アプリケーションを構築するためのフレームワークNuxt.jsまで一気に導入を進めました。パフォーマンスがよさそうなことが主な理由ですが、こちらはNuxt.jsをインストールする際に、ESLint, Prettierのオプションをつけられるメリットもありました。オプションをつけると、下記のようなことをやる必要がありません。なぜって最初にインストールしているから。

npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

さくっとプロジェクトを作成し、npm run lintで使えますよ。

なお拡張機能はインストールしていません。

Autoprefixer、Beautify

他にもベンダープレフィックスが必要なものをつけてくれるAutoprefixer。

Autoprefixer – Visual Studio Marketplace

Beautifyもあります。

Beautify – Visual Studio Marketplace

VisualStudioCodeの自動整形機能

VisualStudioCode自体にも自動整形機能があるようですね。

VisualStudioCodeに自動整形機能があった - Qiita
Visual Studio CodeでTypeScriptを書いていて自動整形が欲しくなったので調べたら、 見つかったのでメモ 追記 2018/06/11 同じ設定項目があるのを確認 2019/03/09 いろいろ変わっていたので書...

vscodeでunityの整形【おまけ】

ついでに、C#の整形ツールも見つけました。unityユーザーはこちらも。

https://marketplace.visualstudio.com/items?itemName=Leopotam.csharpfixformat

全部、vscodeで統一できるから嬉しいですね。

CSSのオンライン版の整形

オンライン版はなくなってしまったのかといえば、そんなことはなくいろいろあります。cssauthorでもご覧ください。

20+ CSS Beautifier Tools Worth Trying in 2019
CSS Beautifier tools are used to beautifully format a cultured CSS code for better manageability. These tools can beautify CSS in a matter of seconds.When you a...

ただ、個人的にはもう全部vscodeにいこうしようかなっと。

stylelintとstylelint-plusの違い

保存したときに、並べ替えをするオプションがついただけのようです。

https://marketplace.visualstudio.com/items?itemName=hex-ci.stylelint-plus

最初、stylelintをインストールしてしまったため、アンインストールしてstylelint-plusをインストールしました。

この拡張をインストールするだけでcssの警告はでるようになります。…が並べ替えはできません。

スポンサーリンク

電子書籍のおすすめ比較

vs codeでstylelintの使い方

stylelint-plusの拡張をインストール

あらかじめ、stylelint-plusをインストールしておきます。

画面左のExtensions > stylelintで検索 > stylelint-plusをインストール > 歯車アイコンのConfigure Extension Setting > Stylelint: Auto Fix On Saveのチェックを入れる

npmを使ってstylelintのインストール

新規フォルダにcssファイルを作成。

整形したいcssを書きます(個人的にはcodepenで書いたため、コピペで貼り付けます)。

ターミナルを使ってcdでcssファイルのある場所に移動し、必要なものをインストール。

npm init -y
npm i -D stylelint stylelint-config-standard

その場所にファイルが生成されます。生成されたnode_modulesのフォルダ直下にstylelint-config-standardなどのフォルダが追加されるようです。

stylelintのフォルダ構成

同じ場所に.stylelintrc.jsonを作成。ここまでで構成は以下のようになります。

├──node_modules
├──package.json
├──package-lock.json
├──.stylelintrc.json
├──sort.css
stylelintの設定はpackage.jsonに含めることができますが、他のプロジェクトでも使いまわせるよう独自ファイルにします。

CSSのプロパティをソート方法(stylelint-order)

.stylelintrc.jsonの中身のサンプルです。stylelint-config-recess-orderがソートするものですね。

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
  ],
  "rules": {
    "prettier/prettier": "error",
  }
}

並べ替え方法はいろいろとあります。npmのサイトをみると、stylelint-config-recess-orderはBootstrapの方法のようです。

stylelint-config-recess-order
Recess-based property sort order for Stylelint.

npmのサイトでstylelint-configなどで検索するといろいろとでてきます。

モジュール選定の比較記事はこちらにありました。

stylelintのorderモジュール選定 - Qiita
## やりたいこと CSSのプロパティを自動ソート(reorder)したい ## reorderするメリット - 順番を気にせず書いて楽できる - スタイルの無駄な重複を防げる - 読みやすくなる - gzipサイズが減りや...

個人的にはstylelint-config-recess-orderとstylelint-config-rational-orderで少し迷いましたが、stylelint-config-recess-orderを採用しました。変更は簡単なので気楽に決めましょう。

vs codeでcssファイルを開き、保存するとソートされます。

やりたいことができたため、一旦、よしとしましょう。暫定的な対応なので、必要あればまた再構成します。

stylelintのプロパティソートの参考サイトと公式リファイレンス

今回、主に参考にさせてもらったサイトはこちらです。

VS CodeにPrettier・ESLint・Stylelintを導入してファイル保存時にコードを自動整形させる方法 | WEMO
これまでコーディング規約とは無縁のぐちゃぐちゃコードを書いて過ごしてきましたが、「いい加減ちゃんとするか...」と思い、コードフォーマッターであるPrettier(プリティア)を導入しようと決意。Prettierの導入はある程度スムーズにいったのですが、ついでによく聞くESLintとかStylelintとかも導入しよう...
stylelintの導入とVS Codeの設定の方法 - Qiita
## 追記 2019/10/09 新しいSassのモジュールシステムのための設定を追記 ## 概要 stylelintはCSSのためのLintです。Lintツールは「コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使...

ありがとうございました。

公式リファレンスstylelint user guideもご覧ください。

User guide · stylelint
# User guide

参考になれば幸いです。

人気記事  【比較表あり】安いオンラインプログラミングスクールはおすすめ?【無料あり】
  1. プログラミングスクールは格安に!cssやphpも楽勝に!
  2. 電子書籍並みの価格で買える格安のプログラム動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
プログラミング
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました