2022年4月29日 りあクト！ 第6章 特別なフォーマッタ 『Prettier』 （p.６７~)
Prettier
Prettierはフロントエンドのメジャーどころをほぼ網羅しているフォーマッタです。 TypeScript、HTML、CSS、Vue、Angular、GraphQL、CSS in JS の styled-components など
コードフォーマッタとは
インデントや改行などの記述スタイルのフォーマットを統一して整形するツールを指します。
導入するメリット
開発者がコードの書き方のスタイルをめぐる論争をやめさせる目的で開発されているので、新人からベテランまで一律のコードに直してくれるところです。(無駄な言い争いがなくなります) 具体的には以下になります。
- ソースコードの品質を保つため（コードのスタイルの一貫性を保つため）
- コードレビュー時に、設計や命名などの重要な箇所に集中するため（コードのスタイルの指摘に時間を割くのを防ぐため）
- 複数のメンバーが各自の整形ルールを適用し、更新する度に余計な差分が発生することを防ぐため
- ソースコードを綺麗にするための労力（スタイル定義の議論や時間）を費やさなくて済むため
- ツールに任せられることはツールに任せてしまった方が今後楽になるため
ESLintとPrettierを併用する理由
Prettier 入門 ～ESLintとの違いを理解して併用する～に、ESLintとPrettierを併用する理由が詳しく記載されているので、以下に引用します。
ESLint でもeslint --fixでコード整形ができるが、Prettier の方がコード整形が優れているから。
具体的には以下の点が優れている。
・ESLint では整形できないコードを整形できる
・ESLint と比べて手軽で確実に整形できる
但し、PrettierはESLintのような構文チェック機能がない
そのため、コードの整形は Prettier が行い、コードの構文チェックは ESLint が行うように併用する必要があります。
Prettierの環境を作る
パッケージの導入
ESLintの環境にPrettierを加えるには、以下の2つのパッケージを導入します。
- prettier
- Prettier本体
- eslint-config-prettier
- Prettierと競合する可能性のあるESLintの各種ルールを無効にする共有設定
パッケージをインストールしたら.eslintrc.jsのextendsオプションの最後に'prettier'を追加します。
.prettierrcでPrettierのオプションを設定
設定オプション一覧はドキュメントに記載があります。 https://prettier.io/docs/en/options.html
書籍では以下の3項目の設定を変更していました。
{ "singleQuote": true, "trailingComma": "all", "endOfLine": "auto" }
カスタマイズした設定以外はデフォルト値が適用されます。
ESlintで設定したルールとPrettierで設定したルールが衝突していないかをチェックする
$ npx exlint-config-prettier 'src/**/*.{js,jsx,ts,tsx}'
No rules that are unnecessary or conflist with Prettier were found.
上記は衝突していない場合に表示されます。
衝突した場合
The following rules are unnecessary or might conflict with Prettier: - @typescript-eslint/indent
この場合は@typescript-eslint/indentの設定が不要なので .eslintrc.js から削除します。
Prettierがnpmのscriptsで実行されるようにpackage.jsonに登録する
"scripts": {
︙
"eject": "react-scripts eject",
+ "fix": "npm run -s format && npm run -s lint:fix",
+ " f o r m a t " : " p r e t t i e r - - w r i t e - - l o g l e v e l = w a r n
'{public,src}/**/*.{js,jsx,ts,tsx,html,gql,graphql,json}'",
"lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
"lint:fix": "eslint --fix 'src/**/*.{js,jsx,ts,tsx}'",
+ "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
"preinstall": "typesync"
},
衝突ルールの検出もしています。
VSCodeの設定
settings.jsonに追記します。
"editor.defaultFormatter": "esbenp.prettier-vscode", "[graphql]": { "editor.formatOnSave": true }, "[javascript]": { "editor.formatOnSave": true }, "[javascriptreact]": { "editor.formatOnSave": true }, "[json]": { "editor.formatOnSave": true }, "[typescript]": { "editor.formatOnSave": true }, "[typescriptreact]": { "editor.formatOnSave": true },
VSCodeのデフォルトのフォーマッタにPrettierを設定して各種言語の保存時に自動整形できるようにしています。
保存時に自動整形できるようになりました。
メモ
パスを通すとは
コマンド検索パス(コマンドサーチパス) を追加することです。
パスを通す理由
コマンド名と同じファイル名を持つ実行ファイルを探索できるようにするためです。パスを通すことで、実行ファイルのパスを入力しなくても、コマンドで実行ファイルを実行できます。
source
パスの内容をその場で反映させるためのコマンドです。
echo
画面にメッセージを表示させるためのコマンドです。 「echo $変数名」など環境変数やシェル変数を表示する際にも使用します。
