はじめに
Vue.jsとTypeScriptでの開発をもっと快適に進めるためには、環境設定が重要です。
特に、コード内を素早く移動したり、型チェックをしっかり行ったりすることができると、作業がグンと効率的になります。今回は、VSCodeを使った開発で、そんな便利な機能を活用するための設定をご紹介します！
最終的にできるようになること
メソッドやコンポーネントへのジャンプ機能ができる状態を目指します。
■コンポーネントのジャンプ機能
Macであれば、コンポーネント名を「⌘ + クリック」でコンポーネントの定義が表示され、ダブルクリックにて該当のコンポーネントに遷移できます。
■メソッドのジャンプ機能
こちらも同様にメソッド名を「⌘ + クリック」でメソッドの定義が表示され、ダブルクリックにて該当のメソッドに遷移できます。
必須の拡張機能
1. Vue - Official
以前は「Volar」という名称拡張機能が使われていましたが、現在は改名され「Vue - Official」に名称変更されています。この拡張機能は、Vue 3とTypeScriptの統合がさらに強化され、メソッドやコンポーネントへのジャンプ、型チェック、補完機能など、開発をスムーズに進めるための機能が備わっています。
2. TypeScriptとJavaScriptの言語機能
「TypeScriptとJavaScriptの言語機能」も有効にすると、TypeScriptプロジェクトでの補完機能や型チェックがより強力になります。これを設定しておくことで、エディタがコードをより賢く理解して、効率的に開発が進められるようになります。
効率的な設定方法
1. Volarの無効化
Vue 2.0以降では、Volarという拡張機能が不要となりました。もし既にインストールされている場合は、無効化しましょう。
- VSCodeの「拡張機能」タブに移動。
- 「Volar」を検索して、無効化します。
2. Vue - Officialのインストール
続いて、「Vue - Official」拡張機能をインストールします。これでVue.jsプロジェクトに最適化されたコード補完やナビゲーション機能が使えるようになります。
- 拡張機能タブで「Vue - Official」を検索してインストール。
- 設定を有効にし、VSCodeを再起動します。
3. TypeScriptとJavaScriptの言語機能を有効化
最後に、「TypeScriptとJavaScriptの言語機能」が有効かどうか確認しましょう。これが有効になっていれば、TypeScriptでのコードジャンプや型チェックがスムーズになります。
TypeScriptとJavaScriptの言語機能とは？
「TypeScriptとJavaScriptの言語機能」（TypeScript and JavaScript Language Features）は、VSCodeに組み込まれているビルトイン拡張機能の一つで、TypeScriptとJavaScriptのサポートを提供します。この拡張機能は、以下のような機能を提供します。
- コード補完：コードを入力している途中で、利用可能なメソッドや変数の候補を表示。
- ジャンプ機能：関数やクラスなどの定義場所に簡単に移動できる。
- 型チェック：TypeScriptの型安全性を保つために、コードが適切かどうかを自動的にチェック。
- エラー表示：コードにエラーや警告がある場合、すぐにハイライトして表示。
これらの機能を活用することで、効率的なJavaScriptおよびTypeScriptの開発が可能になります。VSCodeに標準で含まれているため、特別なインストールは不要ですが、設定で無効化している場合は、再度有効にすることができます。
@builtinとは？
@builtinは、VSCode内で組み込み拡張機能（ビルトイン拡張機能）を検索する際に使用されるフィルタタグです。VSCodeには最初から含まれている拡張機能がいくつかあり、それらを表示したり、設定を変更したりするために@builtinと入力します。このフィルタを使うと、外部の拡張機能ではなく、VSCodeに標準搭載されている機能に関連する拡張機能だけを表示することができます。
使用方法
VSCodeの「拡張機能」タブを開きます。
検索ボックスに@builtinと入力すると、組み込み拡張機能が一覧表示されます。
この中から、拡張機能を見つけて有効化・無効化することができます。
まとめ
VSCodeでのVue.js + TypeScript開発をさらに効率的に進めるためには、適切な拡張機能の設定が重要です。今回ご紹介した手順をぜひ試してみて、快適な開発環境を手に入れてください！