Stylelint の使い方

Stylelint は、CSS の静的解析ツールです。 名前の通り "Linter" と言った方が正しいのでしょうか。 本来は CSS ファイル用ですが、Sass ファイル（.scss）などでも使用することができます。 CSS ファイルや Sassファイル（.scss）のコードを解析し、問題がある個所を探してしてくれます。

また、コードがちゃんとコーディング規約に沿って記述されているか検査したり、コーディング規約に違反している個所を自動的に修正してくれたりします。 コードをクリーンで一貫性のある状態に保つために役に立ちます。

コーディング規約に違反している個所を手動で1つ1つ直していくことも可能ではありますが、コードが大量にある場合は作業量が膨大になってしまい、現実的ではありません。 自動的に修正できる箇所は、自動的に修正した方が効率的です。 但し、違反している個所の全てを Stylelint で修正できるわけではありません。 あくまで自動的に修正できる箇所のみです。 それ以外の個所は手動で修正する必要があります。

さっそくですがインストールしていきましょう。 Stylelint をインストールするには npm を使用します。 npm の使い方がわからないという方は、まずは「Node.js と npm の使い方（その１：概要）」を参考にしてください。

Stylelint は、Stylelint 本体のパッケージと設定ファイルのパッケージが別になっていまして、 設定ファイルのパッケージを入れ替えれば CSS 以外のファイルでも使用できるようになっています。 最近では CSS ファイルは Sass などのプリプロセッサを使用して作成するのが主流だと思いますので、 今回は Sass ファイル（.scss）で使用することを前提として説明していきます。 Sass の使い方がわからないという方は、まずは「Sass の使い方（その１：概要）」を参考にしてください。

npm install --save-dev stylelint

stylelint --version

stylelint --help

npm install --save-dev stylelint-config-standard-scss

{
	"extends": "stylelint-config-standard-scss"
}

インストールできたので、さっそく使ってみましょう。

stylelint "./src/hoge.scss"

stylelint "./src" "./tests"

stylelint "**/*.scss"

stylelint --fix "./src/hoge.scss"

stylelint --fix "./src" "./tests"

stylelint --fix "**/*.scss"

Stylelint の細かな設定は、設定ファイルを使用して設定します。

設定ファイルのフォーマットとして JavaScript（CommonJS）、JSON、YAML が使用できます。 これらの中からお好きなフォーマットを選んで作成することができます。 いまのところ JavaScript（ES Modules）フォーマットはサポートされていないので注意してください。

{
	"extends": "stylelint-config-standard-scss"
}

{
	"name": "demo-app",
	"version": "1.0.0",
	"devDependencies": {
		"stylelint": "^15.6.1",
		"stylelint-config-standard-scss": "^9.0.0"
	},
	"stylelint": {
		"extends": "stylelint-config-standard-scss"
	}
}

stylelint "**/*.scss" -c config.json

{
	"extends": "stylelint-config-standard-scss",
	"rules": {
		"color-no-invalid-hex": true
	}
}

Stylelint の既定のコーディング規約だといろいろと困ると思いますので、独自のコーディング規約に変更しましょう。 お仕事で開発をしている場合、会社やプロジェクト毎に独自のコーディング規約があったりするものです。

コーディング規約を変更するには、設定ファイルで rules 項目を使用します。 rules 項目に適用したいルールの一覧を記述します。 どんなルールが使用できるかは、ここでは記載しません。 大量にありますので、公式のドキュメントを見てもらった方が良いと思います。

• Rules | Stylelint

Sass ファイル（.scss）用のパッケージ「stylelint-config-standard-scss」で使用されているコーディング規約のルールの一覧はこちらになります。 全部把握するのはかなり大変だと思いますので、問題になったルールを1つずつ修正していく感じで良いと思います。

• stylelint-config-standard/index.js at main · stylelint/stylelint-config-standard · GitHub
• stylelint-config-recommended-scss/index.js at master · stylelint-scss/stylelint-config-recommended-scss · GitHub
• stylelint-config-standard-scss/index.js at main · stylelint-scss/stylelint-config-standard-scss · GitHub

{
	"extends": "stylelint-config-standard-scss",
	"rules": {
		"color-named": "never"
	}
}

{
	"extends": "stylelint-config-standard-scss",
	"rules": {
		"selector-id-pattern": null
	}
}

Stylelint のコーディング規約のチェック対象から、任意のファイルや任意の個所を外したい場合もあるかもしれません。 例えば、違うコーディング規約で開発された CSS ファイルや Sass ファイル（.scss）を組み合わせて使用したい場合などです。

方法は3つあります。

/* stylelint-disable */
a {}
/* stylelint-enable */

stylelint "**/*.scss" --ignore-disables

{
	"extends": "stylelint-config-standard-scss",
	"ignoreDisables": true
}

vendor/**/*.css

{
	"extends": "stylelint-config-standard-scss",
	"ignoreFiles": [
		"vendor/**/*.css"
	]
}

stylelint コマンドですが、各種オプションなどを毎回入力するのは面倒に感じてくると思います。 そこで、よく使うコマンドを npm-scripts に登録しておくと、入力の手間が少なくなって便利です。

npm-scripts では、"./node_modules/.bin" に PATH が通っているので、"./node_modules/.bin" を入力したり、npx コマンドを使用したりする必要はありません。 npm-scripts の使い方がわからないという方は、「Node.js と npm の使い方（その３：npm-scripts）」を参考にしてください。

{
	"name": "demo-app",
	"version": "1.0.0",
	"scripts": {
		"lint": "stylelint ./src ./tests"
	},
	"devDependencies": {
		"stylelint": "^15.6.1",
		"stylelint-config-standard-scss": "^9.0.0"
	}
}

npm run lint

npm run lint -- --fix

最後に、Visual Studio Code（以下、VS Code）と連携する方法を紹介します。

とはいっても、特に難しいことは何もなく、ただ下記の Stylelint 用の拡張機能を VS Code にインストールするだけです。 この拡張機能は Stylelint 公式ですので、安心してインストールすることができます。

• Stylelint - Visual Studio Marketplace

デフォルトでは、Sass ファイル（.scss）は対象外となっているので、Stylelint 拡張機能の設定画面の「Stylelint:Validate」の項目に「scss」を追加します。

すると、VS Code 上に Stylelint のエラーが表示されるようになります。

• Home | Stylelint
• Getting started | Stylelint
• stylelint - npm
• stylelint-config-standard-scss - npm
• Configuring | Stylelint
• Command Line Interface (CLI) | Stylelint
• Rules | Stylelint
• stylelint-config-standard/index.js at main · stylelint/stylelint-config-standard · GitHub
• stylelint-config-recommended-scss/index.js at master · stylelint-scss/stylelint-config-recommended-scss · GitHub
• stylelint-config-standard-scss/index.js at main · stylelint-scss/stylelint-config-standard-scss · GitHub
• "off" to turn off rule [feature request] · Issue #2611 · stylelint/stylelint · GitHub
• Ignoring code | Stylelint
• Stylelint - Visual Studio Marketplace