Contents
Vue Language Features 拡張機能のインストールと概要
Vue の公式拡張 「Vue - Official (Vue Language Features)」 は、Volar が提供していた言語サービスを VS Code 本体に統合したパッケージです（正確な統合時期は拡張機能のリリースノートをご確認ください）。インストールするだけで .vue ファイルに対する構文ハイライト、型推論、コード補完が利用可能になるため、Vue 3・TypeScript プロジェクトの開発効率を大幅に向上させます。本節では Marketplace からの導入手順と、従来の拡張機能との差異について簡潔に解説します。
Marketplace からのインストール手順
以下の手順で公式拡張を VS Code に追加できます。操作はすべて UI 上で完結するので、コマンドラインの知識は不要です。
-
拡張機能ビューを開く
Ctrl+Shift+X（Mac は⌘⇧X）で左サイドバーの「拡張機能」パネルを表示します。 -
検索ボックスにキーワード入力
「Vue Language Features」と入力すると、一覧に 「Vue - Official (Vue Language Features)」 が現れます。 -
インストール実行
拡張のカード内の 「インストール」 ボタンをクリックします。ダウンロードと有効化が自動で完了し、完了後に VS Code を再起動すれば設定が反映されます。
ポイント：公式拡張は
vueファイル専用の言語サーバーを内部で起動するため、別途 Volar や Vetur を残したままだと競合が発生します。次節で旧拡張の無効化手順をご紹介します。
旧拡張機能（Volar・Vetur）の無効化／削除方法
従来から利用されていた Volar と Vetur は、同一ファイルに対して別々の言語サービスを提供するため、公式拡張と併用すると補完や型チェックが不安定になることがあります。ここでは安全に無効化または完全に削除する手順を示します。
拡張機能パネルでの無効化とアンインストール
-
対象拡張を検索
「Volar」または「Vetur」と入力し、該当拡張のカードを表示させます。 -
無効化（一時的に使用停止）
カード右上の歯車アイコン → 「無効化」 を選択します。VS Code の再起動後も自動で有効になりません。 -
アンインストール（完全削除したい場合）
同じメニューから 「アンインストール」 を実行すると、拡張本体が削除されます。 -
ウィンドウのリロード
Ctrl+Shift+Pでコマンドパレットを開き、「Developer: Reload Window」 を選択します。これにより設定変更が即座に反映され、競合が解消されたことを確認できます。
注意：プロジェクトごとに拡張機能の有効化状態は共有されますので、チーム全員で同様の手順を実施すると環境差異を防げます。
推奨設定：Takeover Mode と TypeScript/JavaScript Language Features の有効化
公式拡張は takeOverMode（テイクオーバーモード）をオンにすることで、VS Code 標準の TypeScript/JavaScript Language Features とシームレスに統合されます。これにより .vue ファイル内の <script lang="ts"> が標準サーバーで解析され、補完速度とエラーレポートが向上します。本節では設定方法と確認手順をまとめます。
settings.json に takeOverMode を有効化する例
以下の JSON を ユーザー設定 または ワークスペース設定 の settings.json に追記してください。コメントは VS Code が無視するため、実際に保存するときは削除しても問題ありません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ // Vue 用言語サービスを VS Code が全面的に管理 "vue.languageFeatures.takeOverMode": true, // TypeScript/JavaScript の標準バリデーションはそのまま有効化 "typescript.validate.enable": true, "javascript.validate.enable": true, // Vue ファイルの拡張子認識が外れている場合の保険設定（任意） "files.associations": { "*.vue": "vue" } } |
- 効果：
takeOverModeが有効になると、Volar 系列の機能は無効化され、VS Code 標準サーバーが.vue内のスクリプトを直接解析します。 - メリット：別途 Volar を保持する必要がなくなるため、拡張間の競合リスクが根本的に解消します。
TypeScript・JavaScript Language Features が有効か確認する方法
-
設定画面を開く
Ctrl+,で「設定」パネルを表示し、検索欄に 「TypeScript and JavaScript Language Features」 と入力します。 -
拡張が有効になっていることを確認
表示された項目のスイッチが オン になっていれば有効です。オフの場合はクリックしてオンに切り替えてください。 -
動作検証
.vueファイルを開き、未定義変数や型ミスマッチに対してハイライトが表示されるか確認します。補完ポップアップが期待通り出れば設定は正しく反映されています。
プロジェクトルートの tsconfig.json / jsconfig.json 基本設定
TypeScript を利用した Vue プロジェクトでは、VS Code が言語サービスを起動する際に tsconfig.json（または jsconfig.json）の情報が必須です。適切に設定しないと .vue ファイル内の型チェックがスキップされてしまいます。本節では最低限必要な項目と、JavaScript プロジェクト向けのポイントを解説します。
推奨する tsconfig.json の内容
以下は Vue 3 + TypeScript 推奨設定です。include に .vue を明示的に入れることで、Vue ファイルも型チェック対象になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
{ "compilerOptions": { "target": "ES2022", "module": "ESNext", "moduleResolution": "Node", "strict": true, "jsx": "preserve", "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "sourceMap": true, "resolveJsonModule": true }, "include": [ "src/**/*.ts", "src/**/*.vue" ], "exclude": [ "node_modules", "**/dist" ] } |
- ポイント解説
strictを有効にすると型安全性が最大化され、潜在的バグの早期検出につながります。"jsx": "preserve"は Vue のテンプレートコンパイルと相性が良く、.vue内の JSX/TSX 使用時にも問題が起きにくい設定です。
jsconfig.json を使う場合のポイント
JavaScript プロジェクトでも同様に言語サービスは jsconfig.json から情報を取得します。TypeScript 用設定をベースに以下項目だけ追加すれば完了です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
{ "compilerOptions": { "allowJs": true, "checkJs": false, // 必要なら true にして JS の型チェックも有効化 "target": "ES2022", "module": "ESNext" }, "include": [ "src/**/*.js", "src/**/*.vue" ], "exclude": [ "node_modules", "**/dist" ] } |
- 留意点：
allowJsを true にしないと.jsファイルが解析対象外になるため、必ず設定してください。
ESLint・Prettier 連携とベストプラクティス
コード品質と自動整形は大規模開発での保守性向上に不可欠です。公式拡張と組み合わせることで .vue ファイル全体（ <template>、 <script>、 <style> ）に対して統一されたルールが適用できます。
ESLint と Prettier の統合設定例
.eslintrc.js（抜粋）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
module.exports = { root: true, env: { node: true }, extends: [ 'plugin:vue/vue3-recommended', '@vue/typescript/recommended', 'eslint:recommended', 'prettier' ], parserOptions: { ecmaVersion: 2022, sourceType: 'module' }, plugins: ['@typescript-eslint'], rules: { // プロジェクト固有の調整例 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', '@typescript-eslint/no-explicit-any': 'off' } }; |
VS Code 設定（settings.json）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
{ "editor.formatOnSave": true, "eslint.enable": true, "eslint.validate": [ "javascript", "typescript", "vue" ], "prettier.requireConfig": true, // Vue ファイルの言語識別が外れているときの保険設定 "files.associations": { "*.vue": "vue" } } |
- 結論：
formatOnSaveにより保存時に自動で Prettier が走り、ESLint がコード品質をチェックします。公式拡張が提供する型情報と併せて利用すれば、開発中のエラー検出とスタイル統一が同時に実現できます。
.vue ファイルで補完・型チェックが機能しないときの対処法
| 症状 | 主な原因 | 推奨対策 |
|---|---|---|
| 補完が全く出てこない | 拡張子が *.vue として認識されていない |
設定 → "files.associations": {"*.vue":"vue"} を追加し、ウィンドウをリロード |
| 型エラーが表示されない | takeOverMode が無効、または旧拡張（Volar/Vetur）が残っている | settings.json に "vue.languageFeatures.takeOverMode": true を再確認し、不要な拡張を無効化・アンインストール |
| 設定変更後も挙動が変わらない | VS Code のキャッシュが残存している | コマンドパレットで 「Developer: Reload Window」 を実行、または F1 → Reload Window で再起動 |
補足：上記対策を行っても解決しない場合は、
.vueファイルの先頭に<!-- @ts-nocheck -->が付与されていないか確認してください。これが入っていると TypeScript のチェック全体が無効化されます。
まとめと次のステップ
- 公式拡張のインストール：Marketplace から「Vue - Official (Vue Language Features)」を追加し、VS Code を再起動。
- 旧拡張の整理：Volar と Vetur を無効化またはアンインストールして競合リスクを排除。
- Takeover Mode の有効化：
settings.jsonに"vue.languageFeatures.takeOverMode": trueを設定し、標準 TypeScript/JavaScript 拡張と統合。 - tsconfig / jsconfig の整備：
includeにsrc/**/*.vueを必ず入れ、基本的なコンパイラオプションを設定。 - ESLint・Prettier 連携：保存時自動フォーマットと lint を有効化し、コード品質とスタイルの一貫性を確保。
- トラブルシューティング：拡張子関連付けやウィンドウリロードで多くの不具合は解消できるので、まずはそれらを試す。
以上の手順を完了すると、Vue 3（特に TypeScript）プロジェクトにおいて快適かつ安定した開発環境が構築できます。ぜひ本ガイドを参考に、実際のプロジェクトで設定を適用し、開発効率の向上を体感してください。