stylelint: モダンCSSリンター

CSSにおいても、JavaScriptのような一般的なプログラミング言語と同様に、コードをリントすることで、チーム開発において記述を統一することができたり、実行時のエラーを事前に防ぐことができます。今日は、PostCSS製のモダンなCSSリンターである、stylelintについて説明します。

- [公式サイト](http://stylelint.io/)
- [GitHub](https://github.com/stylelint/stylelint)

## stylelintのルール

stylelintで設定できるルールの一覧を見てみましょう。

http://stylelint.io/user-guide/rules/


| ルール名          | 説明  |
|-------------| -----|
| `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をインストールします。

```bash
$ npm install -D stylelint
```

stylelintもPostCSSのプラグインとして実装されていますが、Autoprefixerと同様に単体でも実行することができます。僕はstylelintは実行するPostCSSのプラグインの一部としてではなく、それ単体で（コマンドラインツールとして）使うことが多いです。コードリントという行為は、PostCSSによるビルドフローの中に入るものではなく、ファイル保存や `git commit` などをフックにそれだけで自動で実行してほしいからです。

`package.json` に以下のような `script` を追加して実行しています。

```json
{
  "scripts": {
    "stylelint": "stylelint --config .stylelintrc --ignore-path .stylelintignore 'src/styles/**/*.css'"
  }
}
```

stylelintのオプション:

```bash
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の設定ファイルの書き方を説明します。