まーーーたstylelintが止まった。ちょうどいいから設定など見直しました。
あと！！！！！！ 検索すると！！！！！！ まーーーーーーだcssの並べ替えをcsscombにやらせよう、という記事がたくさん出てきて「そんな長らく開発されてねえもんを使うな！ VScodeのプラグインも使うなって書いとる！」と憤ってしまった*1。cssの並び替えをしたい人はcsscombではなく、Postcssやstylelintにやらせましょう。
自分はVScodeでscssをcssにコンパイルしていますが、live sass compilerがベンダープレフィックスやらコンパイルやらはやってくれるので、scssとcssの可読性をよくしてくれるだけでいい。だからstylelintを使っています。ちなみにcssを並べ替えるだけなら、postcss sortingとかでもできますが、どちらにせよnode.jsは必要になります。stylelintならscssもソートできるのでおすすめ。
目的
VScodeとstylelintを使って、scssとcssをいい感じに並べ替える。
結論
VScodeでプロジェクト開いたら、VScodeのターミナル開いて以下を入力する。
npm init npm install -D stylelint stylelint-config-standard-scss stylelint-config-recess-order
そしてプロジェクト直下に.stylelintrc.jsというファイルを作成して、以下を書く。
module.exports = { "extends": [ "stylelint-config-standard-scss", "stylelint-config-recess-order" ], ignoreFiles: [ '**/node_modules/**', ], rules: { "property-no-vendor-prefix": null, "comment-empty-line-before": "always", "media-feature-range-notation": "prefix" } };
VScodeに拡張機能stylelintをいれる。おわり。
解説
目次。
1. package.jsonを作成する
2. npmからモジュールをいれる
3. stylelintの設定をする
4. VScodeで動くように連携する
stylelintはVScodeだけでは動きません。
css並べ替えるだけですけど、今のところVScode単体で動くものがないので仕方がない。npmからインストールする必要があります。npmを利用するので、Node.jsはインストールした状態にしておきましょう。
package.jsonを作成する
プロジェクトにpackage.jsonを作成するために、VScodeでプロジェクトを開いたらVScodeのターミナルに*2以下を入力します。
入力したらいろいろ聞かれるけど、これは別にあとから書き足してもいいので、packege.jsonが作れるまではエンターを推し続けて大丈夫です。
npm init
npmから必要なモジュールをインストールする
stylelintでscssとcssを並べ替えるために必要なモジュールをインストールします。
npm install -D stylelint
この時点でターミナルに以下のコマンドを入力すると、ルールチェックされます。されてない場合は何かがおかしいので、確認しましょう。
npx stylelint "**/*.css"
問題なさそうであれば、必要なモジュールをインストールしていきます。
npm install -D stylelint-config-standard-scss stylelint-config-recess-order
stylelint-config-standard-scss: cssの記述ルールモジュール。scss設定入り。
stylelint-config-recess-order: 並べ替えのモジュール。ABC順ではなくRECESSに基づく。ハッピー。
stylelint-config-standard-scssは、このような入門記事でよく使われているstylelint-config-standardとstylelint-config-recommended-scssの拡張パッケージです。scssにも対応させたい場合はこれだけで大丈夫です。
stylelint-config-recess-orderはプロパティの順序をABC順という不合理極まりない順序ではなく、position→display→margin→…のような、yandexとかに近いプロパティの種類で並べてくれます。探すとstylelintのorderは何種類かあったので、調べてみるといいかもね。
stylelintの設定をする
設定ファイルはインストールしたので、自分用の設定を加えていきます。設定はjsonファイルでも大丈夫ですが、自分はコメントが書きたいので、js方式で書いています。ファイル名は、.stylelintrc.jsです。こちらもプロジェクト直下に配置しましょう。
module.exports = { "extends": [ "stylelint-config-standard-scss", "stylelint-config-recess-order" ], ignoreFiles: [ '**/node_modules/**', ], rules: { // ベンダープレフィックの修正はしない "property-no-vendor-prefix": null, // コメントの整形はさせる "comment-empty-line-before": "always", // メディアクエリの演算子を禁止する（いまはとりあえず） "media-feature-range-notation": "prefix", } };
ルールはさきにnpxしたときに出たアラート目安に組み立てるので最初はいいと思います。
自分は、自分がみたときにいい感じであればいいんですが、オートプレフィクサーでベンダープレフィックスをいれてるとそういうのは確実に消えるので、"property-no-vendor-prefix": nullを入れています。
あと、最近メディアクエリも演算子つきでスマートにかけるようになりましたけど、もうちょい先にしといたほうが安心かなと思って、演算子なしの形式にさせています。
ルールはめちゃくちゃたくさんあり、公式のドキュメントにいろいろ書いてますが、VScodeなど使って書いてる場合は、ほとんどVScodeがいい感じにしてくれるので、それほどぐじゃぐじゃにはならない……。
そしてこの.stylelintrc.jsは適当なスニペットアプリとかに登録しておけば、いちいち「あれ…設定ファイルどこだっけ」とならないです。自分はalfredに登録した。
VScodeにstylelintをインストールする
VScodeの拡張機能のstylelintをインストールして、VScodeの設定（setting.json）にstylelintの設定を書き足す。
Stylelint - Visual Studio Marketplace
{ "css.validate": false, "scss.validate": false, "stylelint.validate": ["css", "scss"], }
設定ファイルにいろいろ書き加えてて、どれがどうなのか自分でもちょっと把握できてないんですが、stylintのソートを有効にするだけならこれで大丈夫のはず。css.validateとscss.validateはVScode内のリンターの設定です。今回stylelintにやってもらうのでオフにします。stylelint.validateでstylelintを適用させれば、あとは保存するだけでstylelintが適宜コードを整形してくれます。
live sass compiler等でコンパイルしている場合は、あらためてcssに保存を書けないといけないので、納品前とかにcssファイルに対して⌘+Sしてやると、かなりいい感じに整形されます。
