Prettier + ESLint + StyleLintの連携

完成形のプロジェクト

https://github.com/asano-yuki/prettier-eslint-stylelint

※ VsCode(エディターの拡張機能)と併用する際の注意点

Prettierとリンターの自動フォーマット機能の競合を防ぐ必要があるので、リンターの拡張機能(EsLint、stylelint-plus)のみ有効にする。

必要なパッケージのインストール

prettier、eslint、stylelint本体と併せて、以下のパッケージをインストールする。

PrettierとESLintの連携

• eslint-plugin-prettier
  Prettier のチェックを同時に実行
• eslint-config-prettier
  Prettier と競合するルールを無効化

PrettierとStyleLintの連携

• stylelint-prettier
  Prettier のチェックを同時に実行
• stylelint-config-standard
  一般的なCSSのコーディング規約集
• stylelint-config-prettier
  Prettier と競合するルールを無効化
• stylelint-order
  CSSプロパティをABC順に並べる

stylelint-plus と stylelint-config-prettier のバージョンによっては、ファイル保存時に「Undefined rule unicode-bom」エラーが発生する。stylelint-config-prettier のバージョンを変更するなどして対応する必要がある。

Git と連携するために必要なツール

• husky
  git hooks を package.json から設定するためのツール。
  git から lint-staged を呼び出すために使用する。
• lint-staged
  ステージングしたファイルに対してコマンドを実行するためのツール。
  設定したリンターがコミット時に実行される。

package.json

{
  ...省略
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.css": "stylelint",
    "*.js": "eslint"
  },
  "devDependencies": {
    "eslint": "^7.17.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "husky": "^4.3.7",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "stylelint": "^13.8.0",
    "stylelint-config-prettier": "7.0.0",
    "stylelint-config-standard": "^20.0.0",
    "stylelint-order": "^4.1.0",
    "stylelint-prettier": "^1.1.2"
  }
}

Prettierの設定例

.prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "endOfLine": "crlf"
}

Prettier とリンターで設定ファイルの中身に矛盾があると、ファイル保存時に期待した動作をしなかったり、永遠にコミットが出来ない場面に遭遇するので注意すること

EsLintの設定例

extends に設定する plugin:prettier/recommended は必ず配列の末尾に追加すること。

.eslintrc.json

{
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "indent": [
      "error",
      2
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}

StyleLintの設定例

.stylelintrc.json

{
  "plugins": [
    "stylelint-order"
  ],
  "extends": [
    "stylelint-config-standard",
    "stylelint-prettier/recommended"
  ],  
  "rules": {
    "prettier/prettier": true,
    "order/properties-alphabetical-order": true,
    "indentation": 2
  }
}