編集

Visual Studio Code で Vue を使用する

Name: Visual Studio Code
Author: Microsoft

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

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

welcome to Vue

Vue へようこそ

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

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 と入力して Web サーバーを起動し、ブラウザーでアプリケーションを開いて、Vue アプリケーションをすばやく実行してみましょう。

npm run dev

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

Vue アプリケーションを VS Code で開くには、ターミナル (またはコマンドプロンプト) から 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 の上に置きます。
右クリックし、コンテキストメニューのここに表示にカーソルを合わせ、定義をここに表示を選択します。
Peek ウィンドウが開き、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

デバッグ

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

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

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

その他の拡張機能

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

08/07/2025