Zenn
📏

stylelint + prettier + VSCodeでめっちゃ整ったCSSを描く

2020/10/20に公開
CSS
VS Code
Stylelint
tech

この記事は、

「ESLintとか使ってたけど、もしかしてCSS向けにもあるのでは...？
あるやんけ！あとはこれをESLintみたいな感じでVSCodeでいい感じに保存時にフォーマットかけられれば死角なしや！」

っていう人向けです。

環境

  • VSCode 1.12.2
  • Node.js 14.13.0 (あまり関係ないです)

導入

Nodeのセットアップ

まずは、必要なパッケージをインストールしていきます。
yarn add -D stylelint prettier stylelint-prettier stylelint-config-prettier
OR
npm install --save-dev stylelint prettier stylelint-prettier stylelint-config-prettier

これでリンターのインストールが終わりました。
次に、.stylelintrc.jsを作り、以下を書き加えていきます。

.stylelintrc.js
module.exports = {
  plugins: [
    "stylelint-prettier",
  ],
  extends: [
    "stylelint-prettier/recommended",
    "stylelint-config-prettier",
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
};

VSCodeのセットアップ

まず公式が出している拡張機能をインストールします。

VSCodeのsettings.jsonにsource.fixAll.stylelintを追記します。

settings.json
"editor.codeActionsOnSave": {
  ...なにか,
  "source.fixAll.stylelint": true
},

以上です！あとは適当なCSSファイルで保存時のフォーマットが効いていることでしょう。

補足

公式のstylelint-prettierを使おう

以前は公式から拡張機能が出ていなかったので、サードパーティ製のものを使用するのが主流でしたが、公式から拡張機能が出たようです。

他の拡張を使用していた/インストールしていた場合は、こちらの記事を参考に乗り換えましょう。

orderとかconfigとかたくさんあるけど、どれを使えばいいの？

結論から言うと、おすすめは上述のパッケージらと、stylelint-config-standardとstylelint-config-recess-orderです。
そして、その時点での.stylelintrc.jsはこんな感じです。

.stylelintrc.js
module.exports = {
  plugins: [
    "stylelint-prettier",
  ],
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recess-order",
    "stylelint-prettier/recommended",
    "stylelint-config-prettier",
  ],
  ignoreFiles: [
    '**/node_modules/**',
  ],
};

さて本題に入りますが、stylelintでのconfigやらorderやらは、全て既存のconfigの上書きです。

例えば、stylelint-prettier/recommendedで"max-line-length": nullと指定されていても、extendsのstylelint-prettier/recommended下にstylelint-config-standardがあって、そのパッケージのconfigに"max-line-length": 40と記載されていれば、それは40に上書きされます。

なので、orderは単なる目印でしかなく、感の良い人はおわかりかと思いますが、orderを重複して使うとあとに記述されたものだけが使用され、先に記述されたものは結局上書きされてしまいます。なのでconfig選びには少し気を使いましょう。

...と言いつつ、僕も適当にドキュメントを読んだだけです。

締め

これらは昨日血眼になって調べていた情報で、stylelint自体は全くと言ってよいほどの初心者なので、なにか間違いがあればご指摘ください。
なにか質問等があれば、受け付けます。

参考

Discussion