Vue 3 プロジェクトで ESLint + Prettier + TypeScript を構成する方法

Vue 3 プロジェクトでコード品質を保つには、ESLint と Prettier の導入がとても大切です。特に最近の ESLint v9 からは、従来の .eslintrc.js ではなく eslint.config.js（Flat Config）形式が推奨されています。

この記事では、以下の構成で開発環境を整える方法を詳しく紹介します：

• Vue 3 + Vite
• TypeScript
• ESLint（Flat Config）
• Prettier

必要なパッケージのインストール

まず、開発用の依存関係を一括でインストールしましょう：

yarn add typescript prettier eslint-plugin-vue eslint @vue/eslint-config-typescript @vue/eslint-config-prettier @vitejs/plugin-vue -D

eslint.config.mjs の設定

eslint.config.mjs

// 必要なプラグインや設定をインポート
import pluginVue from 'eslint-plugin-vue'
import vueTsEslintConfig from '@vue/eslint-config-typescript'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default [
  {
    // 対象ファイルの指定
    name: 'app/files-to-lint',
    files: ['**/*.{ts,js,mts,tsx,vue}'],
  },
  {
    // 除外対象（ビルド後のファイルなど）
    name: 'app/files-to-ignore',
    ignores: ['public', '**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
  },
  // Vue の基本的なルールセット（Flat Config用）
  ...pluginVue.configs['flat/essential'],
  {
    // 独自ルールの追加・上書き
    rules: {
      // 単語名のコンポーネント名の警告を無効化
      'vue/multi-word-component-names': 0,
    },
  },
  // TypeScript用の設定をマージ
  ...vueTsEslintConfig(),
  // Prettier に整形を任せる設定
  skipFormatting,
]

.prettierrc.json の設定

.prettierrc.json

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "vueIndentScriptAndStyle": true
}

設定内容

• semi: false → セミコロンなし
• singleQuote: true → シングルクォート使用
• printWidth: 120 → 最大行長120文字
• tabWidth: 2 → インデント2スペース
• trailingComma: "es5" → ES5形式の末尾カンマ
• bracketSpacing: true → 波括弧の中にスペースあり
• vueIndentScriptAndStyle: true → <script>と<style>にもインデント

package.json のスクリプト

package.json

"scripts": {
  "lint": "eslint . --fix",
  "format": "prettier --write \"app/javascript/**/*.{ts,js,vue}\""
}

使い方

yarn lint && yarn format

上記のコマンドを実行すると、プロジェクト内のコードがきれいに整形され、ESLint のルールに従ってチェック＆修正されます。

まとめ

これで、Vue + TypeScript + Prettier + ESLint のモダンな構成が完成です。Flat Config によって、設定ファイルもシンプルで柔軟に。Prettier との役割分担もバッチリです。