エディタ拡張機能の導入と基本設定

まず、Visual Studio Code の機能拡張画面から以下のサードパーティ製プラグインを導入してください。

• Vue 言語サポート（例：Vetur）
• Prettier - Code formatter
• ESLint

コード保存時に整形を実行するための動作を設定するには、ユーザー設定またはワークスペース設定ファイルである settings.json を編集します。ショートカット Ctrl + , で設定画面を開き、右上の「設定(JSON)」アイコンをクリックすると直接編集可能です。

// settings.json
{
  // 保存時の自動整形を有効化
  "editor.formatOnSave": true,
  // 各言語ごとのデフォルトフォーマッターを指定
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

プロジェクトへの依存パッケージ追加

チーム開発や一貫性を保つために、ローカル環境にフォーマッタ関連のパッケージをインストールする必要があります。ターミナルから以下を実行してください。

npm install --save-dev \
  eslint \
  eslint-config-prettier \
  eslint-plugin-prettier \
  prettier

Prettier コンフィグレーションの作成

プロジェクトルートに .prettierrc.json ファイルを作成し、整形ルールを定義します。既存の設定ファイルがある場合は上書きせず、マージしてください。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "trailingComma": "es5",
  "parser": "babel"
}

主なオプション解説：

• printWidth: 改行を行う最大文字数
• tabWidth: インデントに使用するスペース数
• singleQuote: 引用符としてシングルクォートを使用

ESLint 連携と競合回避

最後に、ESLint の設定ファイルを修正して Prettier と連携させます。.eslintrc.js または .eslintrc.json を確認し、以下の構成を追加または更新します。これにより、ESLint がフォーマットルールと矛盾しないよう制御されます。

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    // Prettier ルール違反をエラーとして扱う
    'prettier/prettier': 'error'
  }
};

以上の設定完了後、ソースコードを保存した際に自動的に整形が適用されることを確認できます。