はじめに (対象読者・この記事でわかること)

この記事は、JavaScript開発者でVSCodeを使用している方を対象にしています。特に、コードフォーマッタとしてPrettierを使用しているが、保存時に他のフォーマッタが干渉して困っている方に向けています。

この記事を読むことで、VSCodeでファイル保存時にPrettierのみを自動実行する設定方法を理解し、他のフォーマッタとの干渉を防ぐことができるようになります。また、VSCodeの設定ファイルを編集する基本的なスキルも身につけます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - JavaScriptの基本的な知識 - VSCodeの基本的な操作 - Prettierの基本的な使い方

Prettierと他のフォーマッタの干渉問題

JavaScript開発において、コードのフォーマットは可読性とチーム開発の効率を保つために重要です。Prettierは人気のあるコードフォーマッタの一つですが、VSCodeには他にもESLint、TSLint、Veturなどのフォーマッタが存在します。

これらのフォーマッタがすべて有効になっていると、ファイル保存時に複数のフォーマッタが同時に実行され、意図しないフォーマット結果や競合が発生することがあります。特に、Prettierのみを使用したい場合や、特定のフォーマッタの優先順位を設定したい場合に問題となります。

この問題を解決するには、VSCodeの設定でどのフォーマッタが優先的に使用されるかを明示的に指定する必要があります。次のセクションでは、具体的な設定方法を解説します。

Prettierのみを自動実行する設定方法

ステップ1: VSCodeの設定ファイルを開く

まず、VSCodeの設定ファイルを開きます。VSCodeを開き、キーボードショートカット「Ctrl + ,」（Windows/Linux）または「Cmd + ,」（Mac）を押して設定を開きます。

次に、右上の歯車アイコンをクリックし、「設定の開き方」→「settings.jsonを開く」を選択します。これにより、settings.jsonファイルが直接編集可能な状態で開かれます。

ステップ2: Prettierをデフォルトのフォーマッタに設定

settings.jsonファイルに以下の設定を追加します。

Json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

この設定により、JavaScript、TypeScript、React関連のファイルではPrettierがデフォルトのフォーマッタとして使用されます。

ステップ3: ファイル保存時にフォーマットを実行する

次に、ファイル保存時に自動でフォーマットが実行されるように設定します。settings.jsonに以下の設定を追加します。

Json

{
  "editor.formatOnSave": true
}

ステップ4: 他のフォーマッタを無効化

Prettier以外のフォーマッタが干渉しないように、明示的に無効化します。settings.jsonに以下の設定を追加します。

Json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": false
  }
}

ステップ5: 設定の反映

設定が完了したら、VSCodeを再起動するか、コマンドパレット（Ctrl + Shift + P または Cmd + Shift + P）で「Developer: Reload Window」を実行して設定を反映させます。

ハマった点やエラー解決

設定後もPrettier以外のフォーマッタが実行されてしまう場合、以下の点を確認してください。

エラー1: フォーマッタが適用されない

Prettierが正しくインストールされていない可能性があります。VSCodeの拡張機能で「Prettier - Code formatter」がインストールされているか確認してください。

また、プロジェクトルートに.prettierrcや.prettierignoreファイルがない場合、Prettierがデフォルト設定で動作します。プロジェクト固有の設定を適用したい場合は、これらの設定ファイルを作成してください。

エラー2: ファイル保存時にフォーマットが実行されない

editor.formatOnSaveがtrueに設定されているにもかかわらず、フォーマットが実行されない場合は、以下の点を確認してください。

  • ファイルタイプがサポートされているか（.js, .ts, .jsx, .tsxなど）
  • 他の拡張機能が干渉していないか
  • VSCodeの再起動を試みる

エラー3: PrettierとESLintの競合

プロジェクトでESLintも使用している場合、PrettierとESLintのルールが競合することがあります。この問題を解決するには、ESLintにPrettier用のプラグインを追加し、競合を回避します。

まず、必要なパッケージをインストールします。

Bash

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

次に、.eslintrcファイルに以下の設定を追加します。

Json

{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

これにより、ESLintとPrettierの競合が回避され、両者を共存させることができます。

まとめ

本記事では、VSCodeでファイル保存時にPrettierのみを自動実行する設定方法について解説しました。

  • Prettierをデフォルトのフォーマッタとして設定する方法
  • ファイル保存時にフォーマットを実行する設定方法
  • 他のフォーマッタを無効化する方法
  • 設定後に発生する可能性のある問題とその解決策

この記事を通して、VSCodeでPrettierを効率的に使用する方法を理解できたことと思います。これにより、コードのフォーマット作業を自動化し、開発の効率を向上させることができます。

今後は、Prettierの高度な設定方法や、他のツールとの連携についても記事にする予定です。

参考資料