VS CodeでVueを快適に開発するおすすめ拡張機能｜コード補完・Lint・デバッグまで徹底解説

「VS CodeでVue.jsの開発をしているけど、どうも作業効率が悪い…」

.vue ファイルで補完が効かない
Lintエラーが出ないのでコードミスに気づけない
デバッグがしづらい
TypeScriptとの連携がうまくいかない

こんな悩みはありませんか？

VS Codeは拡張機能を適切に導入することで、Vueの開発体験が劇的に向上します。プロの開発者が普段使っている、本当に効果的な拡張機能を厳選してご紹介します。

この記事を読んで設定すれば、明日からVueの開発が驚くほど快適になりますよ。

まず入れるべき基本のVue拡張機能
1. 1. Volar（Vue Language Features）- Vue 3の決定版
2. 2. Vetur – Vue 2の信頼できる相棒
コード品質を向上させる拡張機能
HTML・CSS・フレームワーク対応拡張機能
デバッグとテストの拡張機能
1. 9. Vue DevTools – 公式デバッグツール
2. 10. Jest Runner – テストの実行とデバッグ
Git・バージョン管理の拡張機能
1. 11. GitLens – Gitの可視化
2. 12. Git Graph – ブランチの視覚的管理
パフォーマンスと最適化
1. 13. Import Cost – インポートサイズの可視化
2. 14. Bundle Analyzer – バンドル分析
TypeScript開発の強化
1. 15. TypeScript Importer – 自動インポート
プロジェクト管理とワークフロー
1. 16. Project Manager – プロジェクト切り替え
2. 17. Todo Tree – TODOコメントの管理
開発効率を上げる追加拡張機能
推奨VS Code設定
1. 総合的な設定ファイル
トラブルシューティング
1. よくある問題と解決法
まとめ
1. 必須拡張機能（最優先で導入）
2. 開発効率アップ（推奨）

まず入れるべき基本のVue拡張機能

1. Volar（Vue Language Features）- Vue 3の決定版

現在、Vue 3で最も推奨されている拡張機能がVolarです。

主な機能

強力なTypeScriptサポート：

.vue ファイルでのTypeScript完全対応
Composition APIの型推論
Propsの型チェック
Emitsの型安全性

高度なコード補完：

<template>
  <!-- コンポーネント名、プロパティ、イベントの補完 -->
  <MyComponent :user-name="userName" @click="handleClick" />
</template>

<script setup lang="ts">
// 自動インポート、型推論、補完すべてが効く
const userName = ref<string>('John')
const handleClick = () => {
  // ここで関数の型も推論される
}
</script>

エラー検出とLint：

リアルタイムエラー検出
未使用変数の検出
TypeScriptエラーの詳細表示
テンプレート内の式の型チェック

インストールと基本設定

インストール方法：

VS Codeの拡張機能パネルを開く（Ctrl+Shift+X）
「Vue Language Features (Volar)」を検索
インストールボタンをクリック

重要な注意点： VolarとVeturは競合するため、Vue 3プロジェクトでVolarを使う場合は、Veturを無効化してください。

Volarの高度な設定

workspace設定（.vscode/settings.json）：

{
  "vue.codeActions.enabled": true,
  "vue.complete.casing.tags": "kebab",
  "vue.complete.casing.props": "camel",
  "vue.inlayHints.missingProps": true,
  "vue.inlayHints.inlineHandlerLeading": true,
  "vue.inlayHints.optionsWrapper": true
}

2. Vetur – Vue 2の信頼できる相棒

Vue 2のプロジェクトをメインで開発している場合は、Veturが依然として便利です。

Veturの特徴

安定したVue 2サポート：

Options APIに最適化
Vue 2のエコシステムとの高い互換性
豊富な実績と安定性

主な機能：

.vue ファイルのシンタックスハイライト
テンプレート内の補完
Prettier連携によるフォーマット
基本的なLint機能

Veturの設定例

vetur.config.js（プロジェクトルート）：

module.exports = {
  // プロジェクト内のVueファイルを指定
  projects: [
    './src',
    {
      root: './packages/admin',
      package: './package.json',
      tsconfig: './tsconfig.json'
    }
  ]
}

settings.json設定：

{
  "vetur.useWorkspaceDependencies": true,
  "vetur.experimental.templateInterpolationService": true,
  "vetur.format.defaultFormatterOptions": {
    "prettier": {
      "semi": false,
      "singleQuote": true
    }
  }
}

コード品質を向上させる拡張機能

3. ESLint – コード品質の守護神

Vue開発においてESLintは必須の拡張機能です。

ESLintの主要な役割

コードの一貫性維持：

コーディングスタイルの統一
潜在的なバグの早期発見
ベストプラクティスの強制

Vue固有のルール：

// .eslintrc.js
module.exports = {
  extends: [
    '@vue/eslint-config-typescript',
    'plugin:vue/vue3-essential',
    'plugin:vue/vue3-strongly-recommended',
    'plugin:vue/vue3-recommended'
  ],
  rules: {
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'vue/no-unused-vars': 'error',
    'vue/require-default-prop': 'error',
    'vue/no-v-html': 'warn'
  }
}

プロジェクトセットアップ

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

# Vue 3 + TypeScript
npm install -D eslint @vue/eslint-config-typescript eslint-plugin-vue

# Vue 2
npm install -D eslint eslint-plugin-vue @vue/eslint-config-prettier

VS Code設定：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

4. Prettier – コードフォーマットの統一

Prettierはコードの自動整形を担当し、チーム開発での統一性を保ちます。

Prettierの設定とカスタマイズ

基本設定（.prettierrc）：

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

VS Code設定での連携：

{
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

ESLintとPrettierの連携

競合回避の設定：

// .eslintrc.js
module.exports = {
  extends: [
    // 他の設定...
    'prettier' // 必ず最後に配置
  ]
}

5. StyleLint – CSSの品質管理

Vue.jsでスタイルを書く際、StyleLintが大いに役立ちます。

StyleLintの設定

設定ファイル（.stylelintrc.json）：

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier"
  ],
  "rules": {
    "selector-pseudo-element-no-unknown": [
      true,
      {
        "ignorePseudoElements": ["v-deep"]
      }
    ],
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["deep"]
      }
    ]
  }
}

HTML・CSS・フレームワーク対応拡張機能

6. Auto Rename Tag – HTMLタグの自動リネーム

Vue.jsのテンプレートでHTMLタグを編集する際に非常に便利です。

機能：

開始タグを変更すると終了タグも自動で変更
.vue ファイルのテンプレート部分で動作
入れ子構造の深いコンポーネントでも正確に動作

7. Tailwind CSS IntelliSense – TailwindCSSの強力な補完

主な機能：

クラス名の自動補完
ホバー時のCSS値プレビュー
未使用クラスの検出
カスタムクラスの対応

Tailwind CSS IntelliSenseの設定

VS Code設定：

{
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "class:\\s*?[\"'`]([^\"'`]*)[\"'`]",
    "className:\\s*?[\"'`]([^\"'`]*)[\"'`]"
  ]
}

8. CSS Peek – CSSの定義ジャンプ

Vue.jsでスタイルを管理する際に便利な拡張機能です。

機能：

クラス名から定義元のCSSファイルにジャンプ
ホバーでCSSルールをプレビュー
複数ファイルにまたがるスタイル管理に有効

デバッグとテストの拡張機能

9. Vue DevTools – 公式デバッグツール

ブラウザ拡張機能と連携して、VS Code内でVueアプリケーションをデバッグできます。

設定方法

launch.json設定：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

10. Jest Runner – テストの実行とデバッグ

Vue.jsプロジェクトでのユニットテストを効率化します。

機能：

テストファイル内で個別テストの実行
デバッグモードでのテスト実行
テスト結果のリアルタイム表示

Jest設定例

jest.config.js：

module.exports = {
  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
  testEnvironment: 'jsdom',
  transform: {
    '^.+\\.vue$': '@vue/vue3-jest'
  },
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ]
}

Git・バージョン管理の拡張機能

11. GitLens – Gitの可視化

Vue.jsプロジェクトでのチーム開発において、コードの変更履歴を追跡するのに便利です。

主な機能：

行ごとのコミット情報表示
ファイル履歴の可視化
ブランチ間の比較
コミット詳細の表示

12. Git Graph – ブランチの視覚的管理

機能：

ブランチ構造のグラフィカル表示
コミットの関係性の把握
マージ履歴の確認

パフォーマンスと最適化

13. Import Cost – インポートサイズの可視化

Vue.jsアプリケーションのバンドルサイズ最適化に役立ちます。

機能：

インポートしているライブラリのサイズを表示
重いライブラリの特定
バンドルサイズの最適化支援

14. Bundle Analyzer – バンドル分析

Webpack Bundle Analyzer連携：

バンドルの詳細分析
不要なコードの特定
最適化の指針提供

TypeScript開発の強化

15. TypeScript Importer – 自動インポート

Vue 3 + TypeScript開発で威力を発揮します。

機能：

型定義の自動インポート
未使用インポートの自動削除
パスの自動解決

設定例

tsconfig.json：

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

プロジェクト管理とワークフロー

16. Project Manager – プロジェクト切り替え

複数のVue.jsプロジェクトを扱う場合に便利です。

機能：

プロジェクトのお気に入り登録
高速なプロジェクト切り替え
ワークスペースの管理

17. Todo Tree – TODOコメントの管理

開発中のタスク管理に役立ちます。

設定例：

{
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\*|\\+|\\d+\\.))\\s*($TAGS)",
  "todo-tree.general.tags": [
    "BUG",
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "[ ]",
    "[x]"
  ]
}

開発効率を上げる追加拡張機能

18. Auto Import – ES6/CommonJS/TypeScript

Vue.jsで使用する外部ライブラリの自動インポートを支援します。

19. Path Intellisense – パスの自動補完

機能：

ファイルパスの自動補完
相対パス・絶対パスの両対応
Vueコンポーネントのインポート支援

20. Bracket Pair Colorizer – 括弧の色分け

**注意：**VS Code 1.60以降は標準機能として組み込まれているため、拡張機能は不要です。

標準機能の有効化：

{
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true
}

推奨VS Code設定

総合的な設定ファイル

settings.json（完全版）：

{
  // Vue.js関連
  "vue.codeActions.enabled": true,
  "vue.complete.casing.tags": "kebab",
  "vue.complete.casing.props": "camel",
  
  // ESLint
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  
  // Prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // TypeScript
  "typescript.suggest.autoImports": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  
  // エディタ
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  
  // Tailwind CSS
  "tailwindCSS.includeLanguages": {
    "vue": "html",
    "vue-html": "html"
  },
  
  // ファイル関連
  "files.associations": {
    "*.vue": "vue"
  },
  "emmet.includeLanguages": {
    "vue-html": "html",
    "vue": "html"
  }
}

トラブルシューティング

よくある問題と解決法

1. VolarとVeturの競合

症状：

補完が重複する
エラーが正しく表示されない

解決法：

// settings.json
{
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

2. TypeScriptの型エラーが表示されない

確認項目：

tsconfig.jsonの設定
Volarの有効化状況
WorkspaceのTypeScriptバージョン

解決法：

// settings.json
{
  "typescript.preferences.useAliasesForRenames": false,
  "typescript.suggest.autoImports": true
}

3. パフォーマンスの問題

大規模プロジェクトでの設定：

{
  "vue.splitEditors.layout.left": ["script", "scriptSetup", "styles"],
  "vue.splitEditors.layout.right": ["template", "customBlocks"],
  "typescript.disableAutomaticTypeAcquisition": true
}