VS Codeで「保存時にソースコードを自動フォーマット」する設定方法

タケトロ

2025年1月13日 17:22

インデントを揃えるために、Tab連打している民へ

インデントを揃えるために、Tabキーを連打していませんか？
私も連打していました。

そんなあなたに、VS Codeで「保存時にソースコードを自動フォーマット」する設定方法について解説していきます！
ぜひ楽しんでください。

Prettierって何？

Prettierは、コードのフォーマットを自動的に整えてくれるツールで、JavaScript、TypeScript、HTML、CSS、Markdownなど、多くの言語をサポートしています。

この記事では、以下の内容について解説します。

1. Prettierのインストール

① プロジェクトにインストール（推奨）

npm install --save-dev prettier

--save-devオプションを使うことで、開発環境にのみPrettierを導入できます。

② グローバルにインストール（オプション）

npm install -g prettier

グローバルインストールすると、どのプロジェクトでもPrettierコマンドを直接使用できます。ただし、プロジェクトごとに異なるバージョンを使用する可能性があるので、プロジェクトごとのインストールを推奨します。

2. Prettierの基本設定

Prettierは、デフォルトの設定で動作しますが、プロジェクトに応じて好みの設定を追加するのが一般的です。

設定ファイルの種類

Prettierの設定ファイルには、以下のような形式が使えます。

ファイル名フォーマット .prettierrc JSON形式 .prettierrc.js JavaScript形式 prettier.config.js JavaScript形式 .prettierrc.yaml YAML形式

例：.prettierrc（JSON形式）

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

主なオプションの説明

オプション説明デフォルト printWidth 1行の文字数の制限 80 tabWidth タブの幅 2 useTabs インデントにタブを使用するか false semi 行末にセミコロンを付けるか true singleQuote シングルクォートを使用するか false trailingComma 末尾のカンマの扱い "es5" bracketSpacing オブジェクトの中括弧内のスペース true

3. VS Codeとの連携

① VS CodeにPrettier拡張機能をインストール

VS Codeの拡張機能マーケットプレイスで「Prettier - Code formatter」を検索してインストールします。

② Prettierをデフォルトのフォーマッターに設定

VS Codeの設定ファイル（settings.json）を編集

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

editor.defaultFormatter でPrettierをデフォルトフォーマッターに設定
editor.formatOnSave を true に設定すると、保存時に自動フォーマットされます。

4. 設定ファイルの作成

プロジェクトのルートディレクトリに、.prettierrcファイルを作成します。

touch .prettierrc

.prettierrc の例

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 100
}

5. プロジェクト全体に適用

① Prettierを手動で実行

npx prettier --write .

--write オプションをつけることで、プロジェクト内のすべてのファイルにフォーマットを適用します。

💡 補足：タケトロの一言

🍣「Prettierを使えば、コードがピシッと整うタケ！フォーマットを整えるのは、職人が寿司を美しく盛り付けるのと同じタケよ！」

これでPrettierの設定はバッチリです！😊