昨日は「stylelintとは何か」ということと、既存のCSSリンターと比べたときの特徴、CLIからstylelintを実行する方法について述べました。今日は、stylelintの数多くあるルールを組み合わせて設定ファイルを作る方法について述べます。
stylelintの設定ファイル
stylelintの設定のオブジェクトは cosmiconfig というパッケージを使って読み込まれます。stylelintの場合、以下のファイル名、形式で設定ファイルを作成できます。僕は、JSON形式で .stylelintrc という名前で作ることが多いです。
-
package.json内のstylelintプロパティに記述する -
.stylelintrcファイル（JSON or YAML） - JSオブジェクトとして
module.exportsされたstylelint.config.jsファイル
.stylelintrc 例:
{
"rules": {
"color-hex-length": "short",
"color-no-invalid-hex": true,
"custom-property-no-outside-root": true,
"indentation": 2,
"length-zero-no-unit": true,
"media-feature-name-no-vendor-prefix": true,
"number-leading-zero": "never",
"selector-root-no-composition": true,
"string-quotes": "single"
}
}
次に設定オブジェクトのプロパティを見てみましょう。stylelintのルール名とそのオプションを、上記のように rules の中に指定します。
stylelintの設定ファイル集
npmで、stylelint-config のキーワードを付けて登録されているパッケージは、stylelintの設定集です。その中でも、以下のパッケージが有名です。
- stylelint-config-standard: 最も一般的なCSSのコーディング規約集
- stylelint-config-suitcss: SUIT CSSのコーディング規約
- stylelint-config-primer: GitHubのCSSのコーディング規約
stylelintのルールは今約170個あり、それらを1つずつ調べて自分で1から設定ファイルを作るのは骨が折れます。
そこで、 stylelint-config-* パッケージを継承することで、公開されている設定ファイル集をベースに自分のプロジェクトでの調整を加えることができます。
{
"extends": "stylelint-config-primer",
"rules": {
"indentation": 2,
"string-quotes": "double"
}
}
上記の例では、stylelint-config-primerを extends し、インデントサイズと文字列のクォーテーションを変更しています。
stylelintのプラグイン
stylelintのルールは、全てPostCSSのプラグインとして実装されています。そこで開発者は、独自のstylelintのルールを作って、それをstylelintのプラグインとして公開することができます。
例として、SassのSCSS記法のための、stylelint-scss というプラグインがあります。
{
"plugins": [
"stylelint-scss"
],
"rules": {
"scss/dollar-variable-pattern": "^foo",
"scss/selector-no-redundant-nesting-selector": true
}
}
plugins プロパティで使いたいプラグインを指定することで、rules の中でその設定をすることができます。
ちなみに、facebookはstylelintの独自のルールを作って、CSSコードのクオリティを担保しているそうです。
今日はstylelintの設定ファイルの作り方について説明しました。設定ファイル集やプラグインを使うことで、さらにカスタマイズしやすくなっています。