Prettierとは

Prettierはコードフォーマッターの一種で、JavaScript、TypeScript、HTML、CSS、そして他の多くの言語をサポートしています。

パッケージ版のPrettierをインストールすると、コードのスタイルを自動的に整形し、コードの読みやすさを向上させることができます。また、チーム内でのコードの一貫性を保つのにも役立ちます。

環境

Tool	Version
MacOS(Ventura)	13.0
VSCode	1.78.2
npm	9.5.1

インストール

ここでは、パッケージマネージャであるnpmでインストールしていきます。

prettierをインストール

$ npm install --save-dev prettier # --save-devでインストール先を開発環境に指定

設定ファイル

パッケージ版のPrettierの設定ファイルの説明です。
※ファイルが存在しない場合は、手動作成してください。

.prettierrc - コードフォーマット(コード整形)のルール設定
.prettierignore - 指定ファイル・ディレクトリを無視する設定

ルールの設定（.prettierrc）

.prettierrc ファイルは、コードフォーマットのルールを設定します。
このファイルで、行幅、インデントのスペース数、シングルクォートを使うかダブルクォートを使うか、などの設定を行うことができます。
このファイルがプロジェクトのルートディレクトリに存在すると、Prettier はその設定を使用してコードを整形します。

設定例は以下の通りです。
かなり細かくフォーマットルールを設定できます。

.prettierrc（JSONの設定例）※JSONはコメントアウトをサポートしていないので注意

{
  "printWidth": 100, // 1行あたりの最大文字数。この数を超えると改行されます。
  "tabWidth": 2, // インデントのスペースの数。
  "useTabs": false, // タブを使用するかどうか。false の場合、スペースを使用します。
  "semi": true, // 文末にセミコロンを自動挿入するかどうか。
  "singleQuote": true, // シングルクォートを使用するかどうか。false の場合、ダブルクォートを使用します。
  "quoteProps": "as-needed", // オブジェクトのキーを必要に応じてクォートする。
  "trailingComma": "es5", // ES5でサポートされている場所で末尾のカンマを追加する。
  "bracketSpacing": true, // オブジェクトリテラルの中括弧 {} の間にスペースを入れるかどうか。
  "bracketSameLine": false, // オブジェクトリテラルの閉じ中括弧 } を新しい行に配置するかどうか。
  "arrowParens": "always", // (x) => x ではなく、x => x とするかどうか。
  "requirePragma": false, // ファイルの先頭に特定のコメントを書くことでフォーマットを有効にするかどうか。
  "insertPragma": false, // フォーマットされたファイルの先頭に @format を追加するかどうか。
  "htmlWhitespaceSensitivity": "css", // HTMLファイルの空白の扱い方。
  "vueIndentScriptAndStyle": false, // Vueファイルの <script> と <style> ブロックのインデントを有効にするかどうか。
  "endOfLine": "lf", // 改行コードの種類。"lf" は UNIX 形式、"crlf" は Windows 形式。
  "embeddedLanguageFormatting": "auto", // 埋め込み言語（例えば、テンプレートリテラル内の HTML）のフォーマットをどのように扱うか。
  "singleAttributePerLine": false // 一行に一つの属性を配置するかどうか。
}

無視する設定（.prettierignore）

.prettierignore ファイルは、Prettierがフォーマットを適用する際に無視するファイルやディレクトリを指定するためのものです。.gitignore と同じように動作します。

各行には無視したいパス（ファイル名またはディレクトリ名）を記述します。
# で始まる行はコメントとして無視されます。ワイルドカード（*）を使用して一部のパスを一括で無視することも可能です。

例えば以下のような .prettierignore ファイルを作成することができます：
ファイル内に記述した内容はPrettierのフォーマットから除外されます。

.prettierignore（plaintext）

# ディレクトリ内のすべてのファイルを無視：
build
coverage

# すべての Markdown ファイルを無視：
*.md

# すべての HTML ファイルを無視：
*.html

# .で始まるすべてのファイルを無視：
.*

# 現在のディレクトリとそのサブディレクトリに存在する全ての .xxx を無視：
**/.git
**/.svn
**/.hg
**/node_modules

# JSONファイルを無視：
package.json
package-lock.json

この設定ファイルをプロジェクトのルートディレクトリに配置すれば、prettier --write . などのコマンドを実行したときに指定したファイルやディレクトリが無視されます。

コマンドの実行

想定通りの設定ができているかコマンドを実行しましょう。

以下のコマンドを実行するとmain.jsのコードがPrettierのルールに基づいて整形され、その結果が同じmain.jsファイルに保存されます。
（--writeオプションは上書きする）

main.js（実行例）

$ npx prettier main.js # 整形結果がターミナルに表示される（ファイル自体は変更されない）
$ npx prettier --write main.js # --writeでコード整形後、ファイルが上書き保存され

Prettier（パッケージ版）の導入 - .prettierrc(ルール設定) / .prettierignore(無視設定)