【Javascript】ESLint と Prettier を連携させる

  • Javascript

Prettier、ESLint を連携させる方法です(連携と言うほどのものではないですが)。そのため、この二つが入っていることを前提とします。Prettier と ESLint の設定については下記を参照してみてください。

必要なパッケージをインストールする

If you use ESLint, install eslint-config-prettier to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier. There’s a similar config for Stylelint: stylelint-config-prettier

https://prettier.io/docs/en/install.html#eslint-and-other-linters

を使うと、eslint, stylelint それぞれ競合しないようにナイスな感じにしてくれるとのことです。要は、これを入れると .prettierrc に書いてある設定は無視してくれるようになります(Prettier のルールで整形されることが前提になるので、同じルールで lint を通す必要がない)。今回は eslint だけナイスな感じにしてみましょう。

eslint-config-prettier をインストール

yarn add -D eslint-config-prettier

.eslintrc.* の extends に追記する

.eslintrc の拡張子は js, yaml, json と人によって違うので指定してませんが、設定ファイルのextends の配列の最後に prettier を追加します。

{
  "extends": [
    ...,
    ...,
    "prettier" // <- 最後に追加
  ]
}

注意点、備考など

eslint-plugin-prettier は非推奨

よく eslint と prettier の連携で紹介されているパッケージである eslint-plugin-prettier は非推奨とのこと。