Visual Studio Code で Vue を使用する

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 を無効にする必要があります。

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 プロジェクトをスキャフォールディングできます。オプション機能のプロンプトに従ってください。オプションについて不明な場合は「No」を選択できます。

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

cd <your-project-name>
npm install

Web サーバーを起動し、ブラウザでアプリケーションを開くために、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 - 公式拡張機能

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

Vue 拡張機能は、Vue.js の言語機能 (構文ハイライト、IntelliSense、および書式設定) を VS Code に提供します。

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

これで、.vue が Vue.js 言語の認識されたファイルタイプとなり、構文ハイライト、ブラケットマッチング、ホバー説明などの言語機能が利用できるようになります。

IntelliSense

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

および scripts セクションの computed のような Vue のプロパティ

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

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

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

定義をピーク機能を使用するには、以下の手順に従ってください

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

ピーク ウィンドウを閉じるには、Escape キーを押します。

Hello World

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

<template>
  <header>
    <img alt="Vue logo" class="logo" src="/assets/docs/nodejs/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 の Hot Module Replacement (HMR) 機能がブラウザに即座に更新を反映し、「Hello World!」と表示されます。Vue.js のクライアントサイドデバッグについて学ぶ間もサーバーは実行したままにしてください。

ヒント: VS Code は自動保存をサポートしており、既定では遅延後にファイルを保存します。自動保存をオンにするには、**ファイル** メニューの **自動保存** オプションを確認するか、files.autoSave ユーザー 設定を直接構成します。

Linting

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

以下に、Vue リンターがテンプレート内に複数のルート要素を検出した際のエラーが表示されます

デバッグ

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

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

Vue.js のデバッグに広く使われているもう一つのツールは、環境に関係なく使用できる vue-devtools プラグインです。

その他の拡張機能

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

  

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

  

• 他の人が Vue.js 開発に役立つと判断した拡張機能をまとめた拡張機能パックもあります。