1 Minute Tips

VSCodeでPrettierを使った自動フォーマット設定：完全ガイド【2024年版】

Written by

sumito.tsukada

in

はじめに

「コードレビューでインデントの指摘ばかり…」「チーム内でコーディングスタイルがバラバラ…」こんな経験はありませんか？ 本記事では、VSCodeでPrettierを使用した自動フォーマット設定について、初心者にもわかりやすく解説します。

自動フォーマットが必要な理由

コードの自動フォーマットには、以下のようなメリットがあります：

  • チーム内でコーディングスタイルを統一できる
  • コードレビューで本質的な議論に集中できる
  • 開発効率が向上する
  • コードの可読性が向上する

必要な準備

1. VSCodeのインストール

まだVSCodeをインストールしていない場合は、公式サイトからダウンロードしてください。

2. Prettier拡張機能のインストール

  1. VSCodeを開く
  2. 左サイドバーの拡張機能アイコンをクリック
  3. 検索バーで「Prettier – Code formatter」を検索
  4. インストールボタンをクリック

設定手順

1. プロジェクトにPrettierをインストール

# npmの場合
npm install --save-dev prettier

# yarnの場合
yarn add -D prettier

2. 設定ファイルの作成

プロジェクトのルートディレクトリに.prettierrcファイルを作成し、以下の内容を追加します：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

3. VSCode設定の追加

  1. プロジェクトのルートディレクトリに.vscodeフォルダを作成
  2. .vscodeフォルダ内にsettings.jsonファイルを作成
  3. 以下の設定を追加：
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

トラブルシューティング

よくある問題と解決方法

  1. 自動フォーマットが機能しない
    • Prettier拡張機能が正しくインストールされているか確認
    • .prettierrcファイルの構文が正しいか確認
    • VSCodeを再起動
  2. 特定のファイルでフォーマットが効かない
  3. エラーメッセージが表示される
    • .prettierrcファイルにコメントや不要な内容が含まれていないか確認
    • JSON形式が正しいか確認

応用設定

ESLintとの併用

ESLintも使用している場合は、以下の設定を追加することで、保存時にESLintの自動修正も実行できます：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

カスタム設定例

プロジェクトの要件に応じて、.prettierrcの設定をカスタマイズできます：

{
  "semi": true,           // セミコロンを強制
  "tabWidth": 4,         // インデントを4スペースに
  "printWidth": 120,     // 1行の最大文字数を120に
  "useTabs": true,       // スペースの代わりにタブを使用
  "bracketSpacing": false // オブジェクトリテラルの括弧内のスペースを削除
}

まとめ

本記事では、VSCodeでPrettierを使用した自動フォーマット設定について解説しました。主なポイントは：

  1. Prettier拡張機能のインストール
  2. .prettierrcファイルでの基本設定
  3. .vscode/settings.jsonでのVSCode設定
  4. ESLintとの連携方法

これらの設定を行うことで、効率的な開発環境を構築できます。

参考リンク

キーワード

#VSCode #Prettier #JavaScript #TypeScript #開発環境設定 #自動フォーマット #コーディング規約 #フロントエンド開発 #Web開発 #プログラミング

More posts