stylus + jsの整形ルール

stylus + eslint の整形メモ

stylus

本当はstylelint入れたかったけど。。（scssでは対応していると書いてあったけどstylusまではわからなかった。）

stylusでいい感じに設定してくれるとのことでstylus-supremacyを使用。lintというよりは整形を行ってくれるもの

インストール

$ npm i stylus-supremacy

使う

srcの中にあるファイルを対象とした場合

"scripts": {
   "supremacy": "stylus-supremacy format src/**/*.styl -p stylus-supremacy.json -r"
  }

設定用のjsonの中身

詳しくは stylus-supremacyのページでも見ることができます。

{
  "stylusSupremacy.insertColons": false,
  "stylusSupremacy.insertSemicolons": false,
  "stylusSupremacy.insertBraces": false,
  "stylusSupremacy.insertNewLineAroundImports": "root",
  "stylusSupremacy.insertNewLineAroundBlocks": "root",
  "stylusSupremacy.insertNewLineAroundProperties": false,
  "stylusSupremacy.insertNewLineAroundOthers": false,
  "stylusSupremacy.preserveNewLinesBetweenPropertyValues": false,
  "stylusSupremacy.insertSpaceBeforeComment": true,
  "stylusSupremacy.insertSpaceAfterComment": true,
  "stylusSupremacy.insertSpaceAfterComma": true,
  "stylusSupremacy.insertSpaceInsideParenthesis": false,
  "stylusSupremacy.insertParenthesisAfterNegation": false,
  "stylusSupremacy.insertParenthesisAroundIfCondition": false,
  "stylusSupremacy.insertNewLineBeforeElse": false,
  "stylusSupremacy.insertLeadingZeroBeforeFraction": true,
  "stylusSupremacy.selectorSeparator": "\n",
  "stylusSupremacy.tabStopChar": "\t",
  "stylusSupremacy.newLineChar": "\n",
  "stylusSupremacy.quoteChar": "'",
  "stylusSupremacy.sortProperties": "grouped",
  "stylusSupremacy.alwaysUseImport": false,
  "stylusSupremacy.alwaysUseNot": false,
  "stylusSupremacy.alwaysUseAtBlock": false,
  "stylusSupremacy.alwaysUseExtends": false,
  "stylusSupremacy.alwaysUseNoneOverZero": false,
  "stylusSupremacy.alwaysUseZeroWithoutUnit": true,
  "stylusSupremacy.reduceMarginAndPaddingValues": true,
  "stylusSupremacy.ignoreFiles": []
}

js

eslintでチェックを行い、prettierで整形を行う eslint, eslint-config-prettier, eslint-loader, eslint-plugin-prettier を使う

インストール

$ npm i eslint eslint-config-prettier eslint-loader eslint-plugin-prettier

使い方

srcの中にあるファイルを対象とした場合

"scripts": {
   "eslint": "eslint --fix src",
  }

設定用のファイルの中身

{
  "root": true,
  "env": {
    "es6": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "window": true,
    "document": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120,
        "singleQuote": true,
        "trailingComma": "es5",
        "semi": false
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module"
  }
}

上記の2つをcommitしたら反応するようにする

毎回 npm run eslint とか打ちたくないので、

lint-staged と husky を使用する

インストール

$ npm i husky lint-staged

使い方

"lint-staged": {
    "*.styl": [
      "stylus-supremacy format src/**/*.styl -p stylus-supremacy.json -r",
      "git add"
    ],
    "*.js": [
      "eslint --fix src",
      "git add"
    ]
  },

を設定して、あとはコミットするだけ。 stylusについてはコミットしたら整形を行うだけなので、 コミットの宣言 → 整形 → コミットの反映になるが、 eslintはエラー修正も行うので、 コミットの宣言 → 整形(エラーがあったらコミットしない) → コミットの反映 になる。

最後に

導入してみたら自動的に整形を行ってくれるのでコードを書くのが少し楽になった。 メモとして最低限書いただけなので、時間のある時にもう少しまとめていきたい。