l12a

白ウサギを追え

Vue.js + Scss + Webpack + IntelliJ 環境で CSS を Lint しながらコードを書く

stylelint できるように環境を整えました。

なるべく薄く設定していきたいです。

この手の作業は、適用前のコードの状態によっては、変更差分がものすごい出るので、
なんかのついでにやらないでブランチを分けて作業することをお勧めしたいです。

各モジュールを追加する。

local にモジュールをインストールします。

$ yarn add -D stylelint stylelint-config-standard stylelint-scss stylelint-webpack-plugin

最終的に入れたのは、

stylelint

www.npmjs.com

これが本体です。

stylelint-scss

www.npmjs.com

scss 用の拡張です。これがないと、 @extend などの scss 構文を解釈できません。

stylelint-config-standard

www.npmjs.com

stylelint 本家による、標準ルール設定です。自分でゼロから設定してもいいけど、要されているものがあればそれを適用します。
設定時に楽であることよりも「ぼくがかんがえたさいきょうのこんふぃぐ」をチームメイト全員にに読んで理解してもらったり
個人の主観にしか過ぎないもので行う議論にかける工数を省略したいのがモチベーションです。
他にも、 stylelint-config-recommended とかもあります。

stylelint-webpack-plugin

www.npmjs.com

webpack 用の拡張です。Stylelint を Webpack で使うために必要です。

そんな感じ。

設定ファイルを書く

stylelint の設定ファイルを書きます。特に理由がなければルートディレクトリに .stylelintrc を作って、

{
  "plugins": ["stylelint-scss"],
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
  }
}

設定を書きます。 "at-rule-no-unknown": null"scss/at-rule-no-unknown": true はオリジナルルール設定ではなくて、
plugin で導入している stylelint-scss による、 scss 独自の構文( @extend などがそうです)に対応させるための記述です。

webpack config に組み込む

webpack の設定ファイルを開き、

import StyleLintPlugin from 'stylelint-webpack-plugin'

module.exports = {
  (中略)
  plugins: [
    new StyleLintPlugin({
      files: ['**/*.{vue,css,scss}'],
    })
  ],
  (中略)
}

plugin を読み込みます。
パラメータで渡しているのは拡張子ですのでプロジェクトに合わせます。
ここまででコードのビルド工程に stylelint がかかるようになります。

あとは、僕は IntelliJ で開発しているので、最適化していきます。

IntelliJプラグイン導入

IntelliJ にはこれを使いました。

github.com

そもそもあまり選択肢がなく、検索してもこれぐらいしか出て来ません。
インストールしたら、環境設定から Languages & Flameworks > Stylesheets > Stylelint と辿り、
Enable にチェックをしておきます。なぜか最初は有効になっていませんでした。

stylelint の実行と修正

webpack でビルドするときに怒られたい

ここまでの設定で、エラーがあれば webpack のビルドは通らなくなっています。
エラー箇所もターミナルに表示されるので、適宜修正します。

リアルタイムにコードをチェックして欲しい

IntelliJ ならここまでの設定で他の linter と同様に怒ってくれます。

個別のファイルを検査したい

特定のファイルを調べたければターミナルで、

$ stylelint ./path/to/your/target.vue

このようにファイルパスを渡して実行します。網羅的にやるには

$ stylelint "./**/*.vue"

このように馴染みの記法が使えます。

IntelliJ の機能で検査したい

Command + Shift + Aキー を押してアクション検索を出し、 Inspect Code... を選択します。
任意のスコープを設定してコード解析を実行すれば、 stylelint の結果が表示されます。
ターミナルでコマンドで実行したり、 webpack のビルド過程で行われる全検査に対する利点は

  • 出力がターミナルではなく GUI なので該当箇所へのジャンプやコンテキストメニューの使用が便利
  • 件数などのサマリが出る

ことです。

引っかかった項目を修正したい

これはターミナルでやります。

$ stylelint --fix ./path/to/your/target.vue

これか、

$ stylelint --fix "./**/*.vue"

これで、ファイル個別に修正するか、網羅的にやるかを選択します。

例えば、インデントの調整や空行を入れるルールなど、ルールセットの挙動に影響がない部分に関してはこれで1発で修正がかかります。
逆に、記載順序の違いに対する指摘など、 CSSセレクタアルゴリズムやカスケーディングによって結果が変わりうるものに関しては、自動修正されません。
まず自動修正でざっと直してから、特殊なものは影響範囲をよく吟味して手動で修正していくのが良いでしょう。

そんな感じ。