Vimでstylelintを使う

この記事Lint your CSS with stylelintを読んだのがきっかけで、最近CSSのlintツールにstylelintを使い始めました。自分が使っているエディタはVimなのでstylelintをVimで使う際の備忘録。自分、Macです。

stylelintをインストール

まずはstylelintをグローバルにインストールします。

npm i --g stylelint

これでstylelintコマンドが使用できるようになったので、
VimのSyntasticプラグインを使用して、CSSとSASSファイルを保存時にstylelintでチェックが入るようにします。

.vimrcにSyntasticプラグインの設定を追加

~/.vimrcに以下の2行を追記しました。
これで、.cssファイルとSASSの.scssファイルの保存時にチェックが入るようになります。

let g:syntastic_css_checkers = ['stylelint']
let g:syntastic_scss_checkers = ['stylelint']

ここまでで、stylelintをVimから実行できるようになりました。

.stylelintrcにルールを定義する

stylelintでチェックするルールを定義する必要があるので、それを定義していきます。このルールは.stylelintrcというファイルに定義していきますが、まずstylelintはチェックしたファイルが存在するディレクトリ内から.stylelintrcを探します。
.stylelintrcが見つからなければ更に上のディレクトリを、なければ更に上の・・・というように.stylelintrcを探します。今回は全てのプロジェクトで同じルールでチェックできればいいので、~/.stylelintrcにルールを定義することにしました。
.stylelintrcの書き方は以下のようになっています。

{
  "rules": {
     "ルール名": "値"
  }
}

定義できるルールはこちら。http://stylelint.io/user-guide/rules/

以上でVimからstylelintを使えるようになりました。