Visual Studio Code で Vue を使用する

Name: Visual Studio Code
Author: Microsoft

Vue.jsは、Webアプリケーションやユーザーインターフェースを構築するための人気のあるJavaScriptライブラリであり、Visual Studio Codeは、Vue.jsの構成要素であるHTML、CSS、JavaScriptを組み込みでサポートしています。より充実したVue.js開発環境のためには、IntelliSense、TypeScript、フォーマットなどのサポートを得るために、Vue - Official (旧 Volar)拡張機能をインストールできます。

注意: Vue 2 のサポートは 2023 年 12 月 31 日に終了しました。そのため、Vetur 拡張機能の使用は推奨されません。Vue - Official 拡張機能を使用するには、Vetur を無効にする必要があります。

welcome to Vue

Vueへようこそ

このチュートリアルでは、Viteツールを使用します。Vue.js フレームワークが初めての場合は、vuejs.org ウェブサイトで優れたドキュメントやチュートリアルを見つけることができます。

Vite と Vue.js をインストールして使用するには、Node.js JavaScript ランタイムと npm (Node.js パッケージマネージャー) がインストールされている必要があります。npm は Node.js に含まれており、Node.js のダウンロードからインストールできます。

ヒント: Node.js と npm がマシンに正しくインストールされていることを確認するには、node --version と npm --version と入力します。

まず、プロジェクトを作成する親ディレクトリにいることを確認してください。次に、ターミナルまたはコマンドプロンプトを開き、次のように入力します。

npm create vue@latest

create-vue のインストールを促されます。

Create vue

Vue プロジェクトをスキャフォールドするのに役立つcreate-vueのインストールと実行には数分かかる場合があります。オプション機能のプロンプトに従ってください。オプションについて不明な場合は「No」を選択できます。

Vue app scaffolding

プロジェクトが作成されたら、その中に移動して依存関係をインストールします。依存関係のインストールには数分かかる場合があります。

cd <your-project-name>
npm install

ウェブサーバーを起動し、ブラウザでアプリケーションを開くために、npm run dev と入力して Vue アプリケーションをすばやく実行してみましょう。

npm run dev

ブラウザでhttps://:5173に「Welcome to your Vue.js App」と表示されるはずです。

VS Code で Vue アプリケーションを開くには、ターミナル (またはコマンドプロンプト) から vue-project フォルダーに移動し、code . と入力します。

cd vue-project
code .

VS Code が起動し、ファイルエクスプローラーに Vue アプリケーションが表示されます。

Vue - Official 拡張機能

次に、src フォルダーを展開し、App.vue ファイルを選択します。VS Code が構文強調表示を表示せず、右下のステータスバーに表示されているようにファイルをプレーンテキストとして扱っていることに気づくでしょう。また、.vue ファイルの種類にVue - Official拡張機能を推奨する通知も表示されます。

Vue 拡張機能は、Vue.js 言語機能（構文強調表示、IntelliSense、フォーマット）を VS Code に提供します。

Vue - Official extension

通知から、インストールを押して Vue 拡張機能をダウンロードしてインストールします。拡張機能ビューで Vue 拡張機能がインストール中と表示されるはずです。インストールが完了すると（数分かかる場合があります）、インストールボタンが管理（歯車）ボタンに変わります。

これで、.vue が Vue.js 言語の認識されたファイルタイプになり、構文強調表示、括弧の対応、ホバー説明などの言語機能が利用できるようになります。

Vue language features

IntelliSense

App.vue で入力を開始すると、HTML と CSS の両方だけでなく、Vue の template セクションにある宣言 (v-bind, v-for) のような Vue.js 固有の項目についても、スマートな提案や補完が表示されます。

Vue.js suggestions

また、scripts セクションにある computed のような Vue のプロパティも表示されます。

Vue.js JavaScript suggestions

定義へ移動、定義をピーク

VS Code の Vue - Official 拡張機能は、型定義などの言語サービス機能を提供することで、Vue.js 開発体験を向上させます。これらの機能は以下を使用してアクセスできます。

定義へ移動 (F12): コード内の型定義に直接移動します。
定義をピーク (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)): 現在のコンテキストを離れることなく、型定義をインラインで表示します。

定義をピークを使用するには、次の手順に従います。

App の上にカーソルを置きます。
右クリックし、コンテキストメニューのピークにカーソルを合わせ、定義をピークを選択します。
ピークウィンドウが開き、App.js からの App 定義が表示されます。

Vue.js peek definition

Escape を押してピークウィンドウを閉じます。

Hello World

サンプルアプリケーションを更新して「Hello World!」を表示してみましょう。App.vue で HelloWorld コンポーネントの msg カスタム属性のテキストを「Hello World!」に置き換えます。

<template>
  <header>
    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />

    <div class="wrapper">
      <HelloWorld msg="Hello World!" />
    </div>
  </header>

  <main>
    <TheWelcome />
  </main>
</template>

App.vue ファイルを保存すると (⌘S (Windows、Linux Ctrl+S))、Vite のホットモジュール置換 (HMR) 機能がブラウザに即座に更新を反映し、「Hello World!」と表示されます。Vue.js のクライアントサイドデバッグについて学ぶ間もサーバーは実行したままにしてください。

ヒント: VS Code は自動保存をサポートしており、デフォルトでは遅延後にファイルを保存します。自動保存を有効にするには、ファイルメニューの自動保存オプションをチェックするか、files.autoSave ユーザー設定を直接構成してください。

hello world

Linting

リンターはソースコードを分析し、アプリケーションを実行する前に潜在的な問題について警告することができます。Vue ESLint プラグイン (eslint-plugin-vue) は、Vue.js 固有の構文エラーをチェックし、これらはエディターに赤い波線で表示され、問題パネル (表示 > 問題 ⇧⌘M (Windows、Linux Ctrl+Shift+M)) にも表示されます。

以下は、Vue リンターがテンプレート内で複数のルート要素を検出したときのエラーです。

Vue linting

デバッグ

組み込みの JavaScript デバッガーを使用して、クライアントサイドの Vue.js コードをデバッグできます。Microsoft Edge を使用して Vite/Vue.js 3 プロジェクトを VS Code で使用するには、この会話に従ってください。

現在メンテナンスモードである Vue CLI については、VS Code デバッグレシピサイトのVS Code での Vue.js デバッグレシピを参照してください。

Vue.js のデバッグに人気のある別のツールは、環境に関係なく使用できるvue-devtoolsプラグインです。

その他の拡張機能

vue と入力して拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) で検索すると、他の Vue 拡張機能を見つけることができます。
Vue VS Code Snippets のような拡張機能は、Vue スニペットに便利です。
Vue.js 開発に役立つと他の人が見つけた拡張機能をまとめた拡張機能パックもあります。

07/09/2025