概要
Prettierはコードフォーマッター(Code formatter)であり、コードのスタイルを一貫性を持たせるために役立ちます。
- Prettier: https://prettier.io/
今回のブログポストではViteを使って生成したTypeScriptベースReactプロジェクトにPrettierを設定してコードフォーマットを一貫性を持たせる方法について説明します。
ブログシリーズ
このブログポストはシリーズで制作されました。以下はViteのシリーズリストです。
- [Vite] TypeScript ベースの React プロジェクトを始める
- [Vite] TypeScript ベース React プロジェクトへテスト環境を構築する
- [Vite] TypeScript ベース React プロジェクトに Prettier を追加する
- [Vite] TypeScript ベース React プロジェクトでに Stylelint(CSS-in-JS)を追加する
Prettier のインストール
Viteを使って生成したTypeScriptベースReactプロジェクトにPrettierを使用するためには、Prettierをインストールする必要があります。次のコマンドを実行してPrettierをインストールします。
npm install --save-dev prettier
# yarn add -D prettier
Prettier の設定
インストールしたPrettierを使うためには、Prettierの設定が必要です。.prettierrcファイルを作成して次のように修正します。
{
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"printWidth": 100
}
"semi": false: 最後のセミコロン(;)を使用しません。"singleQuote": true: 基本的にシングルクォート(')を使用します。"jsxSingleQuote": true: JSX 文法でも基本的にシングルクォート(')を使用します。"printWidth": 100': 1 行に書くことができる文字数を 100 文字に制限します。
Prettierはチームとプロジェクトによってさまざまな設定が可能です。次のリンクから設定可能なオプションを確認できます。
- 公式ドキュメント: https://prettier.io/docs/en/options
スクリプト設定
このように設定したPrettierを使うために、package.jsonファイルを開いて次のようにスクリプトを追加します。
"scripts": {
...
"format": "prettier --check --ignore-path .gitignore .",
"format:fix": "prettier --write --ignore-path .gitignore ."
},
--ignore-pathオプションに.gitignoreファイルを設定することで、Gitで管理していないファイルはチェックしないように設定できます。
実行
次のコマンドを使用して先ほど設定したPrettierの内容でコードをチェックします。
npm run format
# yarn format
もし、設定した Prettier のオプションに違反するファイルがある場合は、次のように表示されます。
Checking formatting...
[warn] .prettierrc.js
[warn] pages/api/hello.ts
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
次のコマンドを実行すると、違反したファイルが自動的に修正されます。
npm run format:fix
# yarn format:fix
全てのファイルが修正されたら、再び次のコマンドを実行してチェックします。
npm run format
# yarn format
全てのファイルが修正されていれば、次のような結果が表示されます。
Checking formatting...
All matched files use Prettier code style!
完了
今回のブログポストではViteを使って生成したTypeScriptベースReactプロジェクトにPrettierを設定する方法について説明しました。皆さんもPrettierを設定して一貫性を持ったコードを書いてみてください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
