🚀 VS Code で で入手しましょう!

Visual Studio Code での Vue の使用

Vue.js は、Web アプリケーションとユーザーインターフェースを構築するための一般的な JavaScript ライブラリであり、Visual Studio Code には、HTML、CSS、および JavaScript の Vue.js 構成要素に対する組み込みサポートがあります。より豊富な 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 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

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

Vue app scaffolding

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

cd <your-project-name>
npm install

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

npm run dev

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

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

cd vue-project
code .

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

Vue - 公式拡張機能

次に、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)): 現在のコンテキストを離れることなく、型定義をインラインで表示します。

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

  1. カーソルを App の上に置きます。
  2. 右クリックし、コンテキストメニューで ピーク にカーソルを合わせ、定義をピーク を選択します。
  3. ピークウィンドウ が開き、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

Lint

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

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

Vue linting

デバッグ

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

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

Vue.js のデバッグのためのもう 1 つの一般的なツールは、環境に関係なく使用できる vue-devtools プラグインです。

その他の拡張機能

  • vue と入力して拡張機能ビュー (⇧⌘X (Windows、Linux Ctrl+Shift+X)) で検索して、他の Vue 拡張機能を見つけてください。

    Vue.js extensions

  • Vue VS Code Snippets のような拡張機能は、Vue スニペットに役立ちます。

    Vue VS Code Snippets

  • また、他のユーザーが Vue.js 開発に役立つと判断した拡張機能をバンドルした拡張機能パックもあります。

    Vue.js Extension Pack

04/03/2025