freks blog

ESLintとPrettierをともに使う

Prettier · Opinionated Code Formatter
を導入してみました
ESlintをすでに使っていたところから始めました

install

Install · Prettier

yarn add prettier --dev --exact

config

Options · Prettier

$ vim .prettierrc

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

$ vim .prettierignore

package.json

ESLintを一緒に使う

Integrating with ESLint · Prettier

を読んで

eslint-plugin-prettier:

ESLintにPrettierを実行してもらうプラグイン
コード整形ルールは、PrettierでやるのでESLintのコード整形のルールは削除する
そのため

eslint-config-prettier

を入れるとESLintのコード整形ルールを無効にしてくれる

yarn add --dev eslint-plugin-prettier eslint-config-prettier

設定はここをみる

$ vim .eslint.json

{
  "extends": [
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

を追加 これでPrettierの整形ルールをみて、ESLintでエラーになる
Prettierの整形ルールでESLintがエラーになってしまう場合、rulesに追記する

既存で使っていたコード整形のルールを.eslint.jsonからは削除した

Prettierのルールを用意

$ vim .prettierrc

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
}

$ vim .prettierignore

package.json

PrettierとESLintで重複した設定があるか見るには

$ eslint --print-config . | eslint-config-prettier-check

CLIでPrettierをかけるなら

$ prettier --write src/**/*.js

とかでかけます

最終的にはReactプロジェクトでeslint-plugin-reactも使っていたので

$ vim .eslint.json

{
  "extends": [
    "plugin:prettier/recommended",
    "plugin:react/recommended",
    "prettier/react"
  ],
  "plugins": [
    "prettier",
    "react"
  ],
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "es6": true
  },
  "rules": {
    "prettier/prettier": "error",
    "react/prop-types": 0
  }
}

となりました