stylusのlintを導入

stylusでのlintについて stylus-supremacyのここの部分に記載されていたので、自分の環境構築しているものに導入してみたのでその時のメモです。 今回の場合だと入れただけで、運用してみてどうとかこの使い方で使いやすいのかはまだ検証は行っていないです。

また、主に stylus-supremacyのここの部分かstylintのnpmページを参考にしています。

npmのインストール

stylintのnpmページ

コマンド

npm i 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
}

stylus-supremacyのここの部分の画像の部分でも記載されていますが、 を貼り付けてjs上に貼り付けていろいろ触ってみるとわかりやすかった。

RunJSを使って少し触ってみた様子

現状実際のプログラムを使って実装などについてはとくに行っていないので、自分で細かく設定してしまうと予期せぬエラーが起こる&時間がかかるという点からstylint-stylishを使ってルールの設定を行いました。

自分の.stylintrc設定

{
  "reporter": "stylint-stylish",
  "reporterOptions": {
    "absolutePath": false
  },
  "noImportant": true,
  "semicolons": {
    "expect": "never",
    "error": true
  }
}

自分のルールとして仮ですが、 - ファイル読み込みは絶対参照にしない - !importantは使用しない - セミコロンは使わない にしています。

また、コマンドなどについては

"scripts": {
  "supremacy": "stylus-supremacy format ./src/**/*.styl -p ./stylus-supremacy.json -r", //stylusの整形
  "stylint": "stylint src/assets/stylus", //stylusのlint
  "commit:stylint": "yarn run supremacy && yarn run stylint" // stylusを整形した後にlint
},
"lint-staged": {
  "*.styl": [
    "yarn run commit:stylint", //commit時に整形&lintを行うため
    "git add"
  ]
}

にすることで整形&lint漏れは無くなるのかなと思います。（実際に運用して懸念点があった場合、追記していきます。）