css構文チェック｜webpack

  • 投稿日
  • 著者 kngsmym
  • カテゴリー webpack

webpackでstylelintを自動的に実行するため、StylelintWebpackPluginをwebpackに導入。

プラグインのインストール

StylelintWebpackPlugin | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packag…
webpack.js.org
$ npm install stylelint-webpack-plugin --save-dev

stylelintのインストール

$ npm install stylelint --save-dev

webpack.config.jsの設定

webpack.config.jsに以下を追加

const StylelintPlugin = require('stylelint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new StylelintPlugin(options)],
  // ...
};

ルール設定

stylelintの動作にはルール設定の記述が必要。

設定方法はいくつかあるようだが、今回は設定ファイルをプロジェクトフォルダ直下に作成し、適当にルールを入れてみた。（package.jsonとかに直に書いてもいいらしい）

設定ファイル.stylelintrcはjsonファイルでもjsファイルでもいいらしい。下記サンプルはjsonファイルとして記述。その場合に拡張子.jsonをつけてもつけなくても動くが、.jsonをつけるとbuild時にjsonファイルとしてのエラーチェックもされるので、より厳格になるのかも

{
  "rules": {
    "no-extra-semicolons": true,
    "color-hex-length": "short"
  }
}

ここまでの記述で導入は完了。

ルールのリスト

List of rules · stylelint
# List of rules
stylelint.io

スタンダードのルールを組み込むことも可能。

$ npm install --save-dev stylelint stylelint-config-standard
{
  "extends": "stylelint-config-standard"
}

これでbuildしてみたら、以下のエラーを検出。

src/sass/foundation/base.scss
 2:5  ✖  Expected indentation of 2 spaces           indentation                     
 4:1  ✖  Expected empty line before rule            rule-empty-line-before          
 5:5  ✖  Expected indentation of 2 spaces           indentation                     
 6:1  ✖  Unexpected missing end-of-source newline   no-missing-end-of-source-newline

インデントはスペース2つとか、スタイル間には空行入れるとか、最終行には改行入れろとか、記述のフォーマットを揃える的な意味での指摘が組み込まれてるぽい。そのままだとちょっとめんどくさい…

ということでこれにルールを追加する場合には以下のように"rules"を追加してそこに書く。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "string-quotes": "single"
  }
}

自動修正

自動修正オプションあります。

webpack.config.jsでfixをtrueにします。

〜
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/style.css',
      ignoreOrder: true,
    }),
    new StylelintPlugin({
      fix: true,//←これ追加
    })
  ]
};

これやると、強制的に指定したルールで書き換えられます。吐き出すcssだけでなく、もとのscssも。

ルールに沿わない点は特に指摘されず書き換えだけが行われるので、どこが違っていたかを意識することが無いのはうーん、どうだろう。

良し悪しかも。