今回はwebpackでStylelintを導入する方法についてまとめていきたいと思います。StylelintとはCSSにおけるエラーの検知やコーディングルールの統一のために使われるツールで、設定したルールに基づきチェックしてくれるツールになります。webpackではSassのコンパイル時に合わせてStylelintを使えるようにしていきます。   webpackにおいてStylelintを使う上でTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。また、SassやCSSを扱うため「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」の記事でまとめている内容を構築している前提で今回は進めていきます。 【参考記事】 webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでBabelを使ったJavaScriptトランスパイルの環境構築   それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。まずは「stylelint」本体に、Stylelintをwebpackで使う際に必要となる「stylelint-webpack-plugin」を、そしてSassのシンタックスに対応させるための「stylelint-scss」のパッケージをインストールします。

$ npm install --save-dev stylelint stylelint-scss stylelint-webpack-plugin

  インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。 【package.json】

{
  .......
  "devDependencies": {
    .......
    "stylelint": "^13.13.1",
    "stylelint-scss": "^3.19.0",
    "stylelint-webpack-plugin": "^2.1.1",
    .......
  },
  .......
}

  Stylelintを使う際には、Stylelintの設定ファイルである「.stylelintrc.json」が必要になります。この設定ファイルのフォーマットですが、json以外でもJavaScriptでオブジェクトとして記述する形でもいいですし、YAML形式でも使えるそうです。今回はこのような構成で、.stylelintrc.jsonをルートディレクトリ直下に配置しておきます。

node_modules
dist
  ┣（main.js）
  ┗（main.css）
src
  ┣ main.ts
  ┗ main.scss
.stylelintrc.json
webpack.config.js
tsconfig.json

  それでは引き続きwebpackの設定をしていきます。ここでは過去記事「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」で作成しているものをベースにStylelintを使えるように追記しています。まずは、stylelint-webpack-pluginを読み込んでいきます。そして、プラグインの設定で設定ファイルのパスを指定していきます。基本的にはこれだけでOKです。 【webpack.config.js】

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const cssInline = false;
if(cssInline) {
  styleLoader = 'style-loader';
} else {
  styleLoader = { loader: MiniCssExtractPlugin.loader };
}
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          styleLoader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [ 'autoprefixer', { grid: true } ],
                  [ 'cssnano', { preset: 'default' } ]
                ]
              },
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'main.min.css' }),
    new StylelintPlugin({ configFile: `${path.resolve(__dirname, '')/.stylelintrc.json`}),
  ]
}

  引き続き、Stylelintの設定ファイルを作成していきます。今回はSassを使う前提となっているので「stylelint-scss」のプラグインを指定しておきます。そして「rules」で任意のルールを記述していきます。 【.stylelintrc.json】

{
  "plugins": [ "stylelint-scss" ],
  "rules": {
    "color-no-invalid-hex": true,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    .....
  }
}

  ルールは様々なものがありますが、いくつか例を挙げると下記のようなものがあります。必要なものを適宜追加していくような感じですが、たくさんあるので基本的なものや、よく使われるものをまとめたルールセットをモジュールとしてインストールする方法もあるようですね。  

color-no-invalid-hex	16進数でのカラーコード指定をチェック
function-calc-no-invalid	calc関数内にある式をチェック
unit-no-unknown	不明な単位が使われていないかのチェック
property-no-unknown	不明なプロパティが使われていないかのチェック
at-rule-no-unknown	不明な@ルールが使われていないかのチェック

  その他のルールについて詳しくは公式のドキュメントを参考にしてみてください。 【List of rules】 https://stylelint.io/user-guide/rules/list/   これで設定ファイルの作成が完了したら、実際にコンパイルして確認してみます。そうすると下記のようにStylelintが働いてくれて、エラーを検知してくれるようになります。

ERROR in src/scss/foundation/_color.scss
48:15 ✖ Unexpected invalid hex color "#FF" color-no-invalid-hex

  ちなみにSCSSではなくSASS記法を使った場合に「Please check validity of the block starting from line #*** CssSyntaxError」というエラーがなぜか出力されるようですが、調べてみるとどうやらバグのようで、現状は解決は難しいようですね。。SASS記法をよく使うので少し気になりますが、、  

---

  今回はwebpackでStylelintを導入する方法についてまとめてみました。コーディングの品質を保つためにもこのようなツールは必要になってくると思いますので、是非忘れずに導入しておきたいですね！