投稿日 2020/09/18

VSCodeにPrettierを入れる

VSCodePrettier

だんだん整形するのが面倒になってきたので、Prettier にお任せすることにしました。 チーム開発だとよく使うけど、個人で使ってもソースのばらつきがなくなるし、整形することに脳を使わなくてよくなるので、どこでも入れておいて損はないかな、と思います。
VSCode だと、インストールもすぐ終わるのでお勧め。

VSCode に Prettier プラグインをインストールする

  1. 画面左にあるアイコンリストから「拡張機能」をクリックして「Prettier」で検索
  2. 「Prettier – Code formatter」が該当です。クリック。
  3. インストールをクリック
  4. 終わり！

ルール設定

プロジェクトルートに.prettierrc ファイルを作成して、そこに記載します。 一例だけど私はこんな感じ。

.prettierrc 
{
  "arrowParens": "avoid",
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

ファイル保存時に実行するには

VSCode の「設定」→ 検索から「save」→「Format On Save にチェック」でできます。

全体のフォーマットを一気にそろえるには

package.json に prettier コマンドを用意すると、.prettier を編集するたびにプロジェクト全体に実行できるので便利です。
（開発初期段階とか、タブとかコーテーションとかがふらついてる場合は特に有効）
ちなみにこれは Gatsby に入っていたもの。

package.json 
...
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "clean": "gatsby clean",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
  }
...

以下のコマンドで実行できます。

yarn format

参考