White Space
WebLife

【Javascript】整形ツール Prettier を導入、設定する方法

  • Javascript

Prettier は HTML, CSS, Javascript などのコードフォーマッタです。コードを一定のルールに従って整形してくれるので、コードの可読性が高まります。今回はこちらを導入してみます。合わせてよく使われる ESLint とその連携については、下記を参照してみてください。

基本的に公式リファレンスの通りに進めます。

prettier をインストールする

yarn add -D -E prettier

※ node のバージョンが低いと失敗するかもしれません

.prettierrc.js で整形ルールを設定する

Prettier の整形ルールを .prettierrc.* で設定します。拡張子は色々選べますが、今回は .js で作ってみます。

.prettierrc.js の例

module.exports = {
  singleQuote: true,
  printWidth: 140,
  trailingComma: 'all',
  arrowParens: 'always',
  semi: true,
  endOfLine: 'lf',
  tabWidth: 2,
};
  • singleQuote: true … シングルクォートを使う
  • printWidth: 140 … 140文字を超えたら改行する
  • trailingComma: 'all' … オブジェクトなどの末尾にカンマを追加する
  • arrowParens: 'always' … アロー関数の引数が1つしかない場合も () で囲む
  • semi: true … 末尾にセミコロンを追加する
  • endOfLine: 'lf' … 改行コードを LF にする
  • tabWidth: 2 … タブはスペース2つ分

.prettierignore で無視するファイルを設定する

もし、prettier を通したくないファイルやフォルダがあれば .prettierignore を作成します。基本的に .gitignore の構文と同じです。

.prettierignore の例

# build した後のディレクトリの中身無視する
build

# html ファイルだけは無視する
*.html

prettier で全ファイル整形する（+ スクリプトを追加する）

下記のコマンドで、プロジェクト内の全ファイルに対して prettier を実行することができます（※整形後の状態が自動保存されるので、バージョン管理などしていない場合は注意して実行してください）。

全ファイル整形

npx prettier --write .

この毎回コマンドを打ち込むのは面倒なので、package.json の scripts に追加しておきましょう。下記の例では format という名前で、合致する拡張子のファイルに対して prettier を走らせます。フォーマットを適用する拡張子は自分の環境に合わせてみてください。

package.json

...,
"scripts": {
    ...,
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    ...,
},
...,

下記で実行することができます。

yarn format

Visual Studio Code でファイル保存時に prettier を実行する

そもそも毎回 npm script を手動実行するのは面倒なので、VSCode でのファイル保存時に Prettier が走るように設定します。

まず、VSCode プラグイン Prettier をインストールし、有効化しておきます。その後、下記のファイルが無ければ作成し、追記しましょう。

.vscode/settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
  • formatOnSave … 保存時に整形する
  • defaultFormatter … esbenp.prettier-vscode（Prettier を使う）

prettier で PHP を整形する

デフォルトでは Prettier は PHP を整形できないため、@prettier/plugin-php パッケージを追加します。

yarn add -D @prettier/plugin-php

エラーなど

実行時に (node:51271) ExperimentalWarning: queueMicrotask() is experimental. と出る

詳しく調べてはいませんが、node のバージョンが古い可能性があります。自分の場合は、node のバージョンを 11.15.0 -> 15.12.0 に上げたらエラーが無くなりました。

(node:51271) ExperimentalWarning: queueMicrotask() is experimental.

onSave（保存時）でフォーマットが実行されない

以上で説明した設定に問題がないなら、Visual Studio Code を再起動するとうまくいくかもしれません。もしくは、Prettier で整形できない拡張子のファイルを整形しようとしている可能性があります。

PHP ファイルの中にある HTML を整形できない

Visual Studio Code のプラグイン、rifi2k.format-html-in-php を入れるなどで対応するしかなさそうです。

https://qiita.com/rubytomato@github/items/d4716c41a2d15c64f791

自分の場合は PHP ファイルの中のタグを正規表現で抜き出している regex のところも整形され、コードが壊れたりしたため、今は入れてません。