2024年11月12日 | 1 Minute Tips

はじめに

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

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

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

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

必要な準備

1. VSCodeのインストール

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

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

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

設定手順

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設定の追加

プロジェクトのルートディレクトリに.vscodeフォルダを作成
.vscodeフォルダ内にsettings.jsonファイルを作成
以下の設定を追加：

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

トラブルシューティング

よくある問題と解決方法

自動フォーマットが機能しない
- Prettier拡張機能が正しくインストールされているか確認
- .prettierrcファイルの構文が正しいか確認
- VSCodeを再起動
特定のファイルでフォーマットが効かない
エラーメッセージが表示される
- .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を使用した自動フォーマット設定について解説しました。主なポイントは：

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

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

参考リンク

キーワード

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

日: 2024年11月12日

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