stylintでStylusをlintチェックする

stylintを使って、stylusの構文チェックをします。

ディレクトリ構成

root/
  ├ node_modules
  ├ src/
  │  └ style.styl
  ├ .stlintrc
  └ package.json

インストール

$ npm install -D stylint

実際に動かす

npm run lintのコマンドで実行できるように、package.jsonにスクリプトを登録します。

package.json

{
  ...
  "scripts": {
    "lint": "stylint src/style.styl"
  }
  ...
}

例として、下記のようなStylusを用意します。

style.styl

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を作成すれば、そのルールを自分で設定できます。

.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
}

.stylintrcを作成し実行すれば、それをもとにしてチェックしてくれます。

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

VSCodeの拡張機能

VSCodeにstylintの拡張機能があります。これをインストールすれば、コマンドを実行しなくてもエディタ上でStylusをチェックしてくれます。プロジェクト内に.stylintrcがあれば、それをもとにしてチェックします。

参考

• stylint