本記事では、Prettierをインストールし、Visual Studio Code (VS Code)に統合する方法を説明する。
インストールするバージョンは、Prettier 3.2.5 (2024/05/03時点で最新)
Prettierとは？
以下の特徴があるコードフォーマッタ。
- 多くの開発言語ををサポート ※公式サイト参照
- 様々なエディタに統合可能
- オンライン版と、本記事で説明するオフライン版(インストール版)がある
インストール環境
- Windows 11 Home 23H2
- Node.js v20.12.2
- Visual Studio Code 1.88
インストール方法
Prettier (3.2.5)
手順1. Prettierをインストール
以下のコマンドを実行し、Prettierをバージョン固定でインストールする。
(フォーマット方法はバージョン毎に微妙に変わるので、バージョン統一した方がチームで作業し易い)
>npm install prettier -D --save-exact // バージョン固定でインストール手順2. 設定ファイルを作成
.prettierrcファイルを作成し、エディタやツールにPrettierを認識させる。
>node --eval "fs.writeFileSync('.prettierrc','{}\n')"手順3. [任意] 無視リストを作成
フォーマット対象外になるファイルを、.prettierignoreファイルに無視リストとして記述。
// .prettierignore
# Ignore artifacts:
build
coverage手順4. 動作確認
Prettierの実行を試して動作確認する。
>npx prettier <ファイル|フォルダ> --write // 指定したファイルやフォルダをフォーマット具体的には、以下のようなファイルを作成して、
// index.js
for (let i = 0; i < 10; i++){
// 以下のPrettierオプションに抵触
// * Tab Width(タブのスペース文字数が2より大きい)
// * Print Width(行内文字数が80より大きい)
// * Semicolons(行末セミコロンがある)
console.log("01234567890123456789012345678901234567890123456789012345678901234567890123456789")
}Prettierを実行すると、キレイにフォーマットされることを確認。
>npx prettier . --write // カレントフォルダをフォーマット// index.js
for (let i = 0; i < 10; i++) {
console.log(
"01234567890123456789012345678901234567890123456789012345678901234567890123456789",
);
}ここからは、VS CodeにPrettierを統合し、その機能をVS Codeから使用する方法について記述する。
VS Code Extension (Prettier – Code formatter)
手順1. VS CodeでExtensionビューを開く(Ctrl+Shift+X)
手順2. “Prettier – Code formatter”を検索し、[インストール]
手順3. Extensionの設定
.vscode/settings.jsonを編集し、保存時の自動フォーマットの有効無効を変更することができる。
settings.jsonを編集するには、コマンドパレット(Ctrl+Shift+p)で[基本設定: ワークスペース設定を開く (JSON)]を選択すれば良い (存在しない場合は自動生成される)
// .vscode/settings.json
{
// デフォルトの一括設定
"editor.defaultFormatter": "esbenp.prettier-vscode", // Prettierをデフォルトフォーマッタに指定
"editor.formatOnSave": true, // すべての言語で保存時自動フォーマットを無効化
}以下のようにデフォルト設定を言語固有の設定で上書くことも可能。
// .vscode/settings.json
{
// デフォルトの一括設定
"editor.defaultFormatter": "esbenp.prettier-vscode", // Prettierをデフォルトフォーマッタに指定
"editor.formatOnSave": false, // すべての言語で保存時自動フォーマットを無効化
"[javascript]": {
"editor.formatOnSave": true // JavaScriptで保存時自動フォーマットを有効化
}
}主な使用方法
ファイル全体フォーマット
コマンドパレット(Ctrl+Shift+P) -> ドキュメントのフォーマット (Format Document)
適用範囲フォーマット
コマンドパレット(Ctrl+Shift+P) -> 選択範囲のフォーマット (Format Selection)
ショートカットキー
Keyboard Shortcutsのユーザ設定に従う。
設定はコマンドパレット(Ctrl+Shift+P) -> 基本設定: キーボードショートカット (Preferences: Open Keyboard Shortcuts)で確認可能で、デフォルトは下表の通り。
| Command | Key | Command id |
|---|---|---|
| Format Document | Shift+Alt+F | editor.action.formatDocument |
| Format Selection | (範囲選択した後)Ctrl+K Ctrl+F | editor.action.formatSelection |
保存時の自動実行
Ctrl+Sで実行可能。
PrettierとLinterの違いは？
Prettierはあくまでフォーマット、Linterはバグ検知が目的。
- Linterにもフォーマット規則(max-len, no-mixed-spaces-and-tabs, keyword-spacing, comma-style…)はあるが、Prettierがコードを書き換えるので必要性は薄れる。
- 一方で、Linterのコード品質規則(no-unused-vars, no-extra-bind, no-implicit-globals, prefer-promise-reject-errors…)は、Prettierではカバーできない。
参考
