先日 TypeScript プロジェクトに ESLint を導入 したのに加え、 Prettier をコードフォーマッタとして導入したのでそのときのメモです。

Prettier · Opinionated Code Formatter

インストール

Prettier 本体に加えて、 eslint 用のプラグインも併せてインストールします。

$ npm install --save-dev prettier eslint-plugin-prettier eslint-config-prettier
# インストールされたバージョン
├── eslint-config-prettier@6.12.0 
├── eslint-plugin-prettier@3.1.4 
└── prettier@2.1.2

パッケージ名ではわかりづらいですが、うしろの2つには以下の違いがあるようです。

• eslint-plugin-prettier ... Prettier を ESLint ルールとして動作させるためのプラグイン
• eslint-config-prettier ... Prettier と競合する ESLint ルールを無効化するための設定集

設定

.eslintrc.js の extends に以下を追加します。
他のルールを override するため、末尾に設定を追加する必要があります。

  extends: [
    ... 既存の設定 ...
    "prettier",
    "prettier/@typescript-eslint",
    "prettier/react",
  ],

これで通常通り eslint を実行すれば、 prettier の設定が適用されます。

不必要な設定のチェック

不必要な設定をチェックするツールを eslint-config-prettier が提供してくれています。

$ npx eslint --print-config {.eslintrcのパス} | npx eslint-config-prettier-check