【React / TypeScript】ESLint と Prettier を設定する(Prettier 編)
周知
2023/07 にリンクを修正しました、が、2021/06/20 の記事のため、かなり古い情報があります。
いずれ新しい記事書きます。古い情報であることを踏まえて読んでいただければ助かります。
概略
前回の記事で, Linter(ESLint)を設定した React アプリに, Formatter(Prettier)を適用します。
なお, 現在までの流れは以下の記事です。
- Create React App(TypeScript)でアプリを起動して Material UI ちょこっと触るまで
- 【React / TypeScript】 ESLint と Prettier を設定する(ESLint 編)
Formatter はインデントのサイズとか改行とか諸々を揃えてくれるコード整形のツールですね。
(余談ですが, チーム開発においての Formatter 導入は, 諸々の宗教論争が容赦無く静まる感じがつよつよです)
本記事では, Formatter は Prettier を導入します。(著名なやつですね)
Prettier の導入
npm install する
公式 に従って進みます。
まず, 設定したいプロジェクトのディレクトリへ移動します。
% cd my-app
prettier を npm install
します。(余談:--save-exact
すると Version 固定で package.json
) に入ります
% npm install --save-dev --save-exact prettier
package.json
に Prettier の記載が追加されました。
"devDependencies": {
"prettier": "2.2.1"
}
prettier の設定ファイルを用意する
公式通り, 以下を実行して Prettier の設定ファイル .prettierrc.json
(空)を用意します。
echo {}> .prettierrc.json
Prettier の除外ディレクトリやファイルを指定するように, .prettierignore
も追加します。
touch .prettierignore
.prettierignore
の中身は適宜設定どうぞという形ですが, いったん公式通り以下な感じにしておきます
# Ignore artifacts:
build
coverage
ESLint との共存のための設定をする
上記, npm install
と設定ファイルの用意で動かせるのですが, ESLint を入れている関係で, ESLint と Prettier で競合するルールがあります。
なので, 戦いが始まらないように, ESLint 側に設定を追加します。
やり方の大筋
さて, 前までは eslint-plugin-prettier
を用いて ESLint で Prettier を実行する感じが多かったようなのですが, Prettier 公式がそのやり方を非推奨としています。(理由などは公式を参照)
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。
では, 公式で指示されている通りに設定していきます。
eslint-config-prettier を設定する
公式 で案内されている通り, eslint-config-prettier
は, ESLint と Prettier で競合するルールを, ESLint 上でオフにするために使うものです。
では, eslint-config-prettier の公式 に従って設定を進めます。
まず npm install
します。
npm install --save-dev eslint-config-prettier
続いて, ESLint の設定ファイル .eslintrc.json
内の extends
末尾に prettier を追加します。
公式のコメント通り, Eslint の何の Plugin を使っているかによって, 必要な Prettier の記載を追加します。
"prettier"
は基本として入れます。そして, 僕の現状の場合は plugin:react
, plugin:@typescript-eslint
を利用しているので, "prettier/@typescript-eslint"
と "prettier/react"
も入れます。
"extends": [
"... ...",
"plugin:react/recommended",
"airbnb",
"plugin:@typescript-eslint/recommended",
"plugin:@typescript-eslint/recommended-requiring-type-checking"
"... ...",
"prettier", // 追加
"prettier/@typescript-eslint", // 追加
"prettier/react" // 追加
]
ESLint の各種ルール(airbnb
とかの)を, prettier
系で上書きして競合ルールをオフにするため, 末尾にいれる必要がある感じです。(後に書かれたもので手前の設定を上書きます)
Prettier を動かす
さて, Prettier の動作のための設定はおわったので, 動かします。
実行した場合にどうなるかを先にみる方法
ファイル名の指定のみで prettier
を実行すると, 整形後をみることができます。
% ./node_modules/.bin/prettier src/App.tsx
例えば以下のような src/App.tsx
に対して実施すると,
import React from 'react';
const App: React.FC = () => (
<div>
Hello World
</div>
);
export default App;
コンソールに以下のように出力されます(prettier 適用後の様子です)
% ./node_modules/.bin/prettier src/App.tsx
import React from "react";
const App: React.FC = () => <div>Hello World</div>;
export default App;
整形を実行する
--write
を指定して prettier
を実行すると, 整形して書き換えられます。簡単ですね。
% ./node_modules/.bin/prettier --write src/App.tsx
全部に対してやるなら .
指定です。
% ./node_modules/.bin/prettier --write .
整形のスクリプトを npm scripts に追加する
前回の記事で ESLint を動かすように npm scripts に書きましたが, Prettier 用にも追加します。
package.json
の scripts
に追加します。以下は src
配下すべてを整形する感じにしていますが, .ts .tsx
などに絞るなどは良い感じにご指定ください。
"scripts": {
// ... ...
"lint": "eslint --ext .jsx,.js,.tsx,.ts src/", // ESLint 用
"fmt": "prettier --write src/**/*" // Prettier 用
}
これで, 以下を実行すれば OK です。
% npm run fmt
そして最初の方の以下の話に戻ると,
さて, 前までは
eslint-plugin-prettier
を用いて ESLint で Prettier を実行する感じが多かったようなのですが, Prettier 公式がそのやり方を非推奨としています。(理由などは公式を参照)
つまるところ, ESLint で静的コード解析を実行して, Prettier でコード整形をするような単純な感じにするとよいとのことです。
ESLint と Prettier は以下な感じで, fmt して lint する感じで動かすようになります。(npm scripts に追加した方がよいかな)
% npm run fmt && npm run lint
言い残し
最初の方で空で作って放置している .prettierrc.json
ですが, 公式の設定例 とか設定できる内容 とか見つつ良い感じに入れると良いと思います。
Discussion