Prettier まとめ

概要

• prettierというコードフォーマッターがあり、何気なく使用している
• ESLintでもコードのフォーマットができるらしいが、併用する理由が気になったので調べたことをまとめる

参考資料：Prettier 入門 ～ESLintとの違いを理解して併用する～

prettierとは

• JavaScript,TypeScript,JSX,JSON,HTML,CSS,YAML,Markdown,etc...様々な形式のフォーマットに対応している

(そもそも)なぜコードフォーマッターが必要なのか

• 同じチームの中でスタイルがバラバラでは困るため
• (フォーマッターがなければ)各自が独自の整形ルールを適用していると、更新するたびに余計な差分が発生し、本来の修正箇所がぼける
• ソースが整形されている前提で話せるので、レビューの際にはより本質的な内容にフォーカスできる
• 設定した後は特に何も考えていなくてもツールが自動で整形してくれる(品質が一定に保たれる)

prettierの導入

1. 必要なプラグインのインストール

必要なプラグイン

• prettier(prettier本体)
• eslint-config-prettier(Prettierと競合するeslintのルールを無効にする)

yarn add -D prettier eslint-config-prettier
typesync #typescriptテンプレートの場合に必要なコマンド
yarn

2. .eslintrc.jsonに設定を追加

• extendsに追加したパッケージのルールが適用されるように設定を追加する
• eslintの設定に上書きされないように一番下に追加すること

.eslintrc.json

extends:[

  ...
  'prettier',
],...

3. デフォルト設定を変更したい場合に追加するファイルを作成する

• これだけでもprettierのフォーマットはできる
• デフォルトルールを変更したい場合は.prettierrcを作成してルールを設定する
• デフォルトルールはこちら

touch .prettierrc

singleQuote: true
trailingcomma: "all"

4. npm-scriptsにエイリアスを追加する

• eslint --fixとprettierのフォーマットが一緒に実行されるようにする

package.json

"scripts":{
  "fix": "npm run -s format && npm run -s lint:fix"
  "format": "prettier --write --loglevel=warn 'src/**/*.{js,jsx,ts,tsx,gql,graphql,json}'",
  "lint:conflict": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
{

コードエディターにVSCodeを使用している場合

• VSCodeと連携させることでさらなるDX向上することができる

1. VSCode拡張をインストール

• prettier code-formatter拡張を入れる

2. 設定を追加する

• プロジェクトで使用するsettings.jsonに以下を追記する
• ここで設定した形式について自動フォーマットを走るようにする

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
  },

まとめ

• ESLintでは静的解析、Prettierではフォーマッティングを行わせる
• Prettierを使うことで個人だけでなく、チームで開発するときも利点が多くあることが分かった