Prettierをサクッと使ってみる

絶賛シェア拡大中の人気コードフォーマッター「Prettier」に乗り換えてみました。

設定

下記の設定でできるようになること

  • エディタ上で、Prettier のルールに沿っていないコード部分に警告を表示
  • エディタ上で、必要に応じてコードを自動成形
  • yarn prettier コマンドで、特定フォルダ内の特定拡張子を持つファイルを一発で整形

手順

  1. 関連パッケージをインストール
    2. yarn add prettier eslint-config-prettier eslint-plugin-prettier
  2. 設定ファイルをルートフォルダに作成

    3. .eslintrc.yml （例）

    extends: prettier
parser: babel-eslint
rules:
 prettier/prettier: error
plugins:
 - prettier

    .prettierrc.yml （例）

    trailingComma: all
singleQuote: true
  3. お好みで npm script を作成します。下記の例では、yarn prettierを実行したときに、src フォルダ内の(js|jsx|ts|tsx|css)の拡張子を持つファイルを整形し、上書きします。
    4. "scripts": {
  "prettier": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css}\""
},
  4. お好みでエディタの機能拡張をインストールします。私は VSCode を使っているので、VSCode 用の拡張機能をインストールしました。Ctrl + Shift + Pを押した後、Format Document(全体を成形)かFormat Code（選択範囲を成形）を選べばエディタ上で整形が行われます。

所感

Prettier はセットアップが簡単なので、特にこだわりがなければプロジェクトの最初から組み込んでおくのがよいと思います。

私は、Prettier に加え、Airbnb Style Guideを組み合わせて使うことにしました。一部の設定が Airbnb と Prettier でバッティングするので、下記のように.eslint.ymlのルールで調整しています。

.eslintrc.yml

extends: airbnb
parser: babel-eslint
rules:
  arrow-parens: 0
  function-paren-newline: 0
  linebreak-style: 0
  object-curly-newline: 0
  prettier/prettier: 2

plugins:
  - prettier

参考

  • (Prettier) Install
  • (Prettier) Integrating with ESLint
  • (Prettier) Config Options