stylintを使ってみる

Stylusのlintツールが欲しくて調べていたら、stylintというものが見つかりました。使い方をメモっておきます。

インストール

$ npm install -D stylint

実際に動かす

package.jsonにスクリプトを登録します。

{
  ...
  "scripts": {
    "lint": "stylint ./path/to/style.styl"
  }
  ...
}

たとえば、こんな感じのStylusを用意して

div {
  margin 0
  padding 0px
  font-siz 16px
  color: red;
}

実行すると

$ npm run lint

こんな感じに表示されると思います。

> stylint src/style.styl

src/style.styl
1:4   warning  unnecessary bracket                          brackets
2:6   warning  missing colon between property and value     colons
3:7   warning  missing colon between property and value     colons
3:9   warning  0 is preferred. Unit value is unnecessary    zeroUnits
4:8   warning  missing colon between property and value     colons
4     warning  prefer alphabetical when sorting properties  sortOrder
4:2   warning  property is not valid                        valid
5:12  warning  unnecessary semicolon found                  semicolons
5     warning  prefer alphabetical when sorting properties  sortOrder
6     warning  unnecessary bracket                          brackets

Stylint: 0 Errors.
Stylint: 10 Warnings.

こうして指摘された部分を修正すればいいというわけですね。

設定ファイルを書く

stylintはデフォルトでルールが決められていますが、自分なりにルールの変更とかをしたいときは.stylintrcで設定できます。プロジェクトのルートに作成します。

(ルートではなくてもいいみたいだけど、ルートのほうが作成するだけで適用されるので楽)

{
  "blocks": false,
  "brackets": "never",
  "colons": "always",
  "colors": "always",
  "commaSpace": "always",
  "commentSpace": "always",
  "cssLiteral": "never",
  "customProperties": [],
  "depthLimit": false,
  "duplicates": true,
  "efficient": "always",
  "exclude": [],
  "extendPref": false,
  "globalDupe": false,
  "groupOutputByFile": true,
  "indentPref": false,
  "leadingZero": "never",
  "maxErrors": false,
  "maxWarnings": false,
  "mixed": false,
  "mixins": [],
  "namingConvention": false,
  "namingConventionStrict": false,
  "none": "never",
  "noImportant": true,
  "parenSpace": false,
  "placeholders": "always",
  "prefixVarsWithDollar": "always",
  "quotePref": false,
  "reporterOptions": {
    "columns": ["lineData", "severity", "description", "rule"],
    "columnSplitter": "  ",
    "showHeaders": false,
    "truncate": true
  },
  "semicolons": "never",
  "sortOrder": "alphabetical",
  "stackedProperties": "never",
  "trailingWhitespace": "never",
  "universal": false,
  "valid": true,
  "zeroUnits": "never",
  "zIndexNormalize": false
}

デフォルトではこんな感じになっているっぽいです。

各項目についての詳細はこちら

ちなみに、管理人は以下の設定にしてます。コロンつけない派です。

{
  "blocks": false,
  "brackets": "never",
  "colons": "never",
  "colors": false,
  "commaSpace": "always",
  "commentSpace": "always",
  "cssLiteral": "never",
  "depthLimit": false,
  "duplicates": false,
  "efficient": "always",
  "extendPref": "@extends",
  "globalDupe": false,
  "groupOutputByFile": true,
  "indentPref": false,
  "leadingZero": false,
  "maxErrors": false,
  "maxWarnings": false,
  "mixed": false,
  "namingConvention": false,
  "namingConventionStrict": false,
  "none": false,
  "noImportant": true,
  "parenSpace": false,
  "placeholder": "always",
  "prefixVarsWithDollar": "always",
  "quotePref": "single",
  "reporterOptions": {
    "columns": ["lineData", "severity", "description", "rule"],
    "columnSplitter": " ",
    "showHeaders": false,
    "truncate": true
  },
  "semicolons": "never",
  "sortOrder": false,
  "stackedProperties": "never",
  "trailingWhitespace": false,
  "universal": false,
  "valid": true,
  "zeroUnits": "never",
  "zIndexNormalize": false
}

拡張機能

管理人はVSCodeしか使っていないので他のエディタにあるかはわかりませんが、VSCodeにはstylintの拡張機能があります。これをインストールすれば、コマンドを実行しなくてもエディタ上でStylusをチェックしてくれます。こちらも.stylintrcがあれば、それをもとにしてチェックしてくれます。

余談

管理人はStylusを好んで使っているのですが、他のCSSプリプロセッサと比べるとマイナーな分、パッケージの種類が少なかったり、Stylusの使い方の記事とかが少なかったりするので、そこで困ることがあります。Stylusはもっと有名になってほしいです。

この記事と似たような記事をQiitaにも上げています。

参考

• stylint