eslint-config-prettierの使い方（VS Codeとの連携）

はじめに

eslint-config-prettier は、ESLintとPrettierを併用する際の競合を避けるための設定集です。特にVS Codeで開発する場合、保存時に自動でコードフォーマットされるように設定することで、より快適な開発が可能になります。

1. 必要なパッケージをインストール

以下のコマンドを実行して、ESLint、Prettier、および関連パッケージをインストールします。

1npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier
2

2. ESLintの設定ファイルを編集

eslint.config.js または eslint.config.mjs に以下のように記述して、Prettierと競合しないようにします。

1import prettier from 'eslint-config-prettier';
2import eslintPluginPrettier from 'eslint-plugin-prettier';
3
4/** @type {import("eslint").Linter.FlatConfig[]} */
5export default [
6  {
7    plugins: {
8      prettier: eslintPluginPrettier
9    },
10    rules: {
11      'prettier/prettier': 'warn'
12    }
13  },
14  prettier
15];
16

3. Prettierの設定ファイルを作成

任意で .prettierrc を作成して、Prettierのルールを明示的に指定できます。

1{
2  "singleQuote": true,
3  "semi": true,
4  "printWidth": 80,
5  "tabWidth": 2
6}
7

4. VS Codeの設定

VS Codeで保存時に自動整形されるよう、.vscode/settings.json を以下のように設定します。

1{
2  "editor.formatOnSave": true,
3  "editor.defaultFormatter": "esbenp.prettier-vscode"
4}
5

また、ESLintの警告もリアルタイムで表示されるように、ESLint拡張機能（dbaeumer.vscode-eslint）をインストールしておくと便利です。

まとめ

• eslint-config-prettier でPrettierとESLintの競合を回避
• 保存時の整形をVS Codeに設定
• eslint-plugin-prettier を使えばESLint上でPrettierの警告を確認できる