WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： いっちー
カテゴリー： マークアップ >作業効率化

Visual studio codeの拡張機能にはWeb制作やフロントエンド開発を効率化するための拡張機能は数多く存在します。今回はその中でもミスを減らせたり作業を効率化することができる拡張機能を2つご紹介いたします。

htmltagwrap

htmltagwrapは、選択したテキストやコードを一瞬で任意のHTMLタグで囲める拡張機能です。たとえば「この部分だけstrongで強調したい」「複数箇所を一気にspanで囲みたい」という時に大活躍します。

使い方

まずは囲みたい要素を範囲選択します。

その次に「Alt + W」（Macは「Option + W」）を押すと、タグ入力モードになります。ここで「strong」や「span」など好きなタグ名を入力するだけで囲むことができます。
またタグや細かな設定（スペース入力で閉じタグの選択を解除するかなど）をカスタマイズすることも可能です。

GitHub Copilot

「GitHub Copilot」は、AIがあなたのコーディングをリアルタイムでサポートしてくれる拡張機能です。コメントや関数名を書くだけで、続きのコードや関数全体の実装例をAIが自動で提案してくれます。

無料版と有料版の違い

無料版

月2,000回までのコード補完やCopilot Chatも月50回まで利用可能となります。回数制限があるので、「ちょっとAI補完を試してみたい」「スニペット提案だけで十分」というライトユーザーや学習者向けのプランです。

有料版

有料版では、コード補完などを制限なく使用することができます。さらにGemini 1.5 Proなどの高度なAIモデルや新機能も続々対応しています。月額10ドルで使用できます。

導入方法

まずは、拡張機能「Github Copilot Chat」をインストールします。
その次にVisual studio codeの左下にある下記アイコン(設定アイコンの上)をクリックし，Githubアカウントでログインします。

下記写真が表示されたら、画面中央の「Use Copilot Free」をクリックします。

以上で導入は完了です。次は機能について説明します。

補完機能

改行やコードの一部を入力するだけで、次に書くべきコードの候補が自動的に表示されます。
表示された際にタブを押すとそのままコードを生成できるので、効率的にコーディングが行えます。

チャット AI機能

画面右上の方にある、下記アイコンをクリックし、「チャットを開く」をクリックすることでチャットを立ち上げることができます。

その後、下記赤枠からAIに質問をすることができます！開いているフォルダのコードを直接修正することができるので大変便利です！

まとめ

今回は、私が使用してみてコーディングする際に役立ったVisual studio codeの拡張機能をご紹介いたしました。
少し使えるようになるだけで効率的に作業することができるようになるので、ぜひ試してみてください。