CSSにおいても、JavaScriptのような一般的なプログラミング言語と同様に、コードをリントすることで、チーム開発において記述を統一することができたり、実行時のエラーを事前に防ぐことができます。今日は、PostCSS製のモダンなCSSリンターである、stylelintについて説明します。
stylelintのルール
stylelintで設定できるルールの一覧を見てみましょう。
| ルール名 | 説明 |
|---|---|
at-rule-name-case |
@ルール名が大文字か小文字か |
color-hex-length |
HEX指定のカラーコードを短縮するかどうか |
color-no-invalid-hex |
invalidなHEXカラーコードを許可するかどうか |
indentation |
インデントサイズ |
selector-max-specificity |
セレクタの最大詳細度 |
など、これらのルールを細かく指定することで、より自分好みのコーディング規約に違反しているかどうかを機械的に検知することができます。コードレビューの負担を減らすためにも、リンターの導入は検討されるべきです。
現在の最新バージョンである v7.6.0 には、172個のルールがあります。CSS、またはSassなどのプリプロセッサーのためのリンターはいくつかありますが、その中でもstylelintのルールセット数が圧倒的に多く、JavaScriptのコードリンターであるESLintのように、カスタマイズ性に富んでいることがわかります。
CSSリンターのルール数:
| stylelint | CSS Lint | scss-lint | CSSComb |
|---|---|---|---|
| 172 | 38 | 62 | 26 |
また、stylelintはPostCSS製（パーサーとしてPostCSSを使っている）ため、CSSだけでなく、SassやLESS等のPostCSSがパース可能なシンタックス全てに対してリントすることが可能なのも特徴です。
stylelintの使い方
まずは、npmからstylelintをインストールします。
$ npm install -D stylelint
stylelintもPostCSSのプラグインとして実装されていますが、Autoprefixerと同様に単体でも実行することができます。僕はstylelintは実行するPostCSSのプラグインの一部としてではなく、それ単体で（コマンドラインツールとして）使うことが多いです。コードリントという行為は、PostCSSによるビルドフローの中に入るものではなく、ファイル保存や git commit などをフックにそれだけで自動で実行してほしいからです。
package.json に以下のような script を追加して実行しています。
{
"scripts": {
"stylelint": "stylelint --config .stylelintrc --ignore-path .stylelintignore 'src/styles/**/*.css'"
}
}
stylelintのオプション:
Options:
--config
Path to a specific configuration file (JSON, YAML, or CommonJS), or the
name of a module in node_modules that points to one. If no --config
argument is provided, stylelint will search for configuration files in
the following places, in this order:
- a stylelint property in package.json
- a .stylelintrc file (with or without filename extension:
.json, .yaml, and .js are available)
- a stylelint.config.js file exporting a JS object
The search will begin in the working directory and move up the directory
tree until a configuration file is found.
--config-basedir
An absolute path to the directory that relative paths defining "extends"
and "plugins" are *relative to*. Only necessary if these values are
relative paths.
--ignore-path, -i
Path to a file containing patterns that describe files to ignore. The
path can be absolute or relative to process.cwd(). By default, stylelint
looks for .stylelintignore in process.cwd().
--syntax, -s
Specify a non-standard syntax. Options: "scss", "less", "sugarss".
If you do not specify a syntax, non-standard syntaxes will be
automatically inferred by the file extensions .scss, .less, and .sss.
--custom-syntax
Module name or path to a JS file exporting a PostCSS-compatible syntax.
--stdin-filename
A filename to assign stdin input.
--ignore-disables, --id
Ignore styleline-disable comments.
--formatter, -f [default: "string"]
The output formatter: "json", "string" or "verbose".
--custom-formatter
Path to a JS file exporting a custom formatting function.
--quiet, -q
Only register warnings for rules with an "error"-level severity (ignore
"warning"-level).
--color
--no-color
Force enabling/disabling of color.
--report-needless-disables, --rd
Report stylelint-disable comments that are not blocking a lint warning.
If you provide the argument "error", the process will exit with code 2
if needless disables are found.
--version, -v
Show the currently installed version of stylelint.
今日はstylelintとは何かということと、その実行方法について述べました。
明日はstylelintの設定ファイルの書き方を説明します。