Prettier

Prettierの設定オプションと使い方

Prettierは、コードフォーマッターとして広く使用されているツールで、コードの整形を自動化してくれるため、プロジェクトのコーディングスタイルを統一し、可読性を向上させます。Prettierはシンプルで使いやすく、設定可能なオプションも多数提供しており、プロジェクトに合わせたカスタマイズが可能です。 この記事では、Prettierの設定オプションとその使い方について説明します。

#1. Prettierのインストール

まず、Prettierをプロジェクトにインストールする必要があります。以下のコマンドでインストールできます。

npm install --save-dev prettier

または、yarnを使っている場合は：

yarn add --dev prettier

#2. Prettierの基本設定

Prettierの設定は、プロジェクトのルートディレクトリに.prettierrcというファイルを作成するか、package.jsonファイル内に設定を追加することで行います。基本的な設定ファイルの例は次のようになります。

.prettierrc ファイル


{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false}

この設定ファイルを使うことで、Prettierがどのようにコードを整形するかを決定できます。次に、主な設定オプションについて説明します。

#3. 主な設定オプション

3.1 semi

コード行の末尾にセミコロンを付けるかどうかを指定します。

  • true: セミコロンを常に付けます（デフォルト）。
  • false: セミコロンを付けません。

"semi": true // セミコロンあり
"semi": false // セミコロンなし

3.2 singleQuote

文字列にシングルクォートを使うかダブルクォートを使うかを指定します。

  • true: 文字列にシングルクォートを使用します。
  • false: 文字列にダブルクォートを使用します（デフォルト）。

"singleQuote": true // シングルクォートを使用
"singleQuote": false // ダブルクォートを使用

3.3 trailingComma

配列やオブジェクトの末尾にカンマを付けるかどうかを指定します。

  • "none": 末尾にカンマを付けません。
  • "es5": ES5の構文において末尾にカンマを付けます（配列やオブジェクトの最後の要素に）。
  • "all": すべての要素に末尾のカンマを付けます（配列やオブジェクトの最後の要素に限らず）。

"trailingComma": "none" // 末尾のカンマなし
"trailingComma": "es5"  // ES5スタイルで末尾のカンマあり
"trailingComma": "all"  // すべての要素に末尾のカンマあり

3.4 printWidth

コードの1行あたりの最大文字数を指定します。これを超えると、Prettierは自動的に改行を挿入します。


"printWidth": 80 // 1行の最大文字数を80に設定

3.5 tabWidth

インデントに使うスペースの数を指定します。

  • 数値（例えば、2や4）で指定します。

"tabWidth": 2 // インデント幅を2スペースに設定
"tabWidth": 4 // インデント幅を4スペースに設定

3.6 useTabs

インデントにタブ文字を使用するか、スペースを使用するかを指定します。

  • true: タブ文字を使用します。
  • false: スペースを使用します（デフォルト）。

"useTabs": true  // タブ文字を使う
"useTabs": false // スペースを使う

3.7 arrowParens

アロー関数の引数を括弧で囲むかどうかを指定します。

  • "always": 引数が1つであっても括弧を使います。
  • "avoid": 引数が1つの場合は括弧を使いません（例: (x) => x → x => x）。

"arrowParens": "always" // 常に括弧を使用
"arrowParens": "avoid"  // 引数が1つの場合は括弧なし

3.8 endOfLine

改行コードの形式を指定します。

  • "auto": OSの改行コードを使用します。
  • "lf": Unix系（LF）改行コードを使用します。
  • "crlf": Windows系（CRLF）改行コードを使用します。

"endOfLine": "auto"  // 自動的に改行コードを設定
"endOfLine": "lf"    // Unixスタイル（LF）改行
"endOfLine": "crlf"  // Windowsスタイル（CRLF）改行

4. 設定を**.prettierignore**で管理する

特定のファイルやディレクトリをPrettierによる整形から除外したい場合、.prettierignoreファイルを使います。このファイルには、整形を無視したいパスを記述します。

例えば、以下のように記述できます：

# .prettierignore
node_modules
dist
public

これにより、node_modulesやdist、publicディレクトリ内のファイルはPrettierで整形されなくなります。

#5. PrettierをVSCodeで使用する

VSCodeでは、Prettierを拡張機能としてインストールし、設定することができます。以下の手順でインストールできます：

  1. VSCodeで「拡張機能」タブを開き、Prettier - Code formatterを検索してインストールします。
  2. settings.jsonに以下の設定を追加して、保存時にPrettierが自動で実行されるようにします：
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

#6. まとめ

Prettierは、コードの整形を簡単に自動化し、コーディングスタイルを統一するための強力なツールです。設定オプションを使って、プロジェクトのスタイルに合わせた整形ができるため、チーム全体でのコードの一貫性を保つのに非常に役立ちます。上記の設定オプションを理解し、プロジェクトに最適な設定を選びましょう。

タグ一覧