VScode補完機能紹介

VS Codeの補完機能を強化するためには、いくつかの拡張機能をインストールし、設定を調整することが重要です。ここでは、補完機能を向上させるためのおすすめ拡張機能と設定を紹介します。

おすすめの拡張機能

1. IntelliSense for CSS class names in HTML

HTMLファイルで使用するCSSクラス名を補完してくれます。

• IntelliSense for CSS class names in HTML – Visual Studio Marketplace

2. JavaScript (ES6) code snippets

JavaScriptのコード補完機能を強化します。

• JavaScript (ES6) code snippets – Visual Studio Marketplace

3. Path Intellisense

ファイルパスの補完機能を提供します。

• Path Intellisense – Visual Studio Marketplace

4. Auto Import

JavaScriptやTypeScriptのモジュールを自動でインポートする補完機能を提供します。

• Auto Import – Visual Studio Marketplace

5. HTML CSS Support

HTMLファイル内でのCSS補完機能を強化します。

• HTML CSS Support – Visual Studio Marketplace

settings.jsonの設定

補完機能をさらに向上させるための設定を追加します。

jsonコードをコピーする{
  "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": true
  },
  "editor.suggestSelection": "first",
  "editor.acceptSuggestionOnEnter": "on",
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "path-intellisense.autoSlashAfterDirectory": true,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "html-css-class-completion.enableEmmetSupport": true
}

インストールと設定の手順

1. 拡張機能のインストール
   • サイドバーの拡張機能アイコン（四角形のアイコン）をクリックし、検索バーに各拡張機能の名前を入力してインストールします。
2. settings.jsonの編集
   • VS Codeの設定画面を開きます。
   • 右上の {} アイコンをクリックしてsettings.jsonを開きます。
   • 上記の設定をsettings.jsonに追加し、保存します。

補完機能の使用方法

• コードを書き始めると、補完候補がポップアップ表示されます。
• 候補を選択するには、TabキーまたはEnterキーを使用します。
• モジュールの自動インポートやパス補完など、特定のシナリオで拡張機能が自動的に動作します。

これらの設定と拡張機能を活用することで、VS Codeの補完機能を大幅に向上させることができます。これにより、コーディングの効率が向上し、開発作業がスムーズに進むでしょう。