Zenn
🐥

Prettierとeslintを共存させるとき、eslint-plugin-prettierは非推奨だよという話

に公開
React
VS Code
ESLint
frontend
Prettier
tech

はじめに

甘く見積もっても5年くらい前の話で、既出も既出なのでお恥ずかしい限りですが、自戒も込めて記事に残します。

React や TypeScript を使ったフロントエンド開発ではPrettier と ESLint をよく使用すると思います。
筆者もよく使用しておりますが、その中で eslint-plugin-prettierを入れてprettier側でlintの役割も負わせる問いう事をよくやっておりました。
しかし、現在では eslint-plugin-prettier の利用はPrettier公式から非推奨とされています。

この記事では、

  • 以前よく使われてきた構成
  • それらが見直されている理由
  • 現在のおすすめ構成

について、まとめてみます。

以前よく使われてきた構成

1. eslint-plugin-prettier を使う構成

ESLint に Prettier を組み込む方法です。Prettier のフォーマット違反を ESLint のエラーとして検出できるため、CI やエディターの統合も簡単で、非常に多くのプロジェクトで採用されてきました。

npm install -D eslint-plugin-prettier eslint-config-prettier prettier

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  rules: {
    "prettier/prettier": "error"
  }
};

2. prettier-eslint を使う構成

こちらは Prettier と ESLint の --fix を組み合わせて自動整形を行う CLI ラッパーツールです。昔は便利でしたが、2020年以降メンテナンスが止まっており、現在では非推奨となりつつあります。

npx prettier-eslint src/**/*.js --write

なぜ見直されつつあるのか？

公式が「Prettier は独立したフォーマッターとして使ってほしい」という方針を明言しました。

主な理由：

  • eslint-plugin-prettier を使うと Prettier の実行が遅くなる
  • Prettier の意図（"意見のない整形"）と ESLint のスタイルルールが衝突しやすい
  • VSCode や CI で Prettier を単独実行する手段が一般化してきた

参考：Prettier公式ドキュメント

現時点でのおすすめ構成

1. Prettier と ESLint を分離して使う

※ 紛らわしいですが、eslint-config-prettierについては、現在でもあった方が良いです。eslint側のフォーマットルールの無効化に必要であるため

npm install -D prettier eslint-config-prettier eslint

// .eslintrc.js
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "prettier" // Prettier と競合する ESLint ルールを無効化
  ]
};

// .prettierrc.json
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "es5"
}

2. 実行コマンドも明確に分ける

"scripts": {
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  "format": "prettier --write .",
  "format:check": "prettier --check ."
}

CI では prettier --check . と eslint . をそれぞれ独立して実行するのが推奨されます。
この辺のコマンドはhuskyのpre-commitに組み込んでも良いでしょう。

3. VSCode で保存時整形を有効にする

.vscode/settings.json に以下を設定：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

まとめ

  • 現在はESLint と Prettier を明確に分けて運用するのが現在推奨の構成
  • eslint-plugin-prettier や prettier-eslint のような一体型運用はフェードアウト傾向にある
  • フォーマッターはフォーマッターとして、リンターはリンターとしての役割に徹する構成が◎

Discussion