タグ: vscode

まずはこれだけ！GitHub Copilotの使い方

GitHub Copilot を最大限活かせるように基本的な使い方を学びましょう。

本記事では、 Visual Studio Code での操作を中心に説明していますが、ショートカットについてはIntelliJ IDEA や PyCharm などのJetGBrains 系のIDEについても掲載しています。

回答する言語を指定する

英語で回答してほしいときは特に設定変更する必要はありませんが、日本語で回答してほしいときに、毎回「日本語で回答してください」などと書くのは面倒です。GitHub Copilot では、回答する言語を指定することが可能です。

Visual Studio Code の場合は Settings > Extensions > GitHub Copilot で、Github > Copilot > Chat: Locale Overridesの設定を変更することで、指定した言語で回答を求めることができます。

デフォルトはautoになっていると思いますので、日本語で回答してほしければja に変更してください。

IntelliJ IDEA や PyCharm などでは、 Settings > Languages & Frameworks > GitHub Copilot で、Chat欄のNatural Languageを日本語に変更することで、日本語で回答を求めることができます。

3つのツールを状況に応じて使い分ける

ここでは、以下の3つのツールの使い分けについて説明します。

  1. インラインチャット
  2. チャットパネル
  3. ChatGPT などの対話型生成AIサービス

インラインチャット

チャットパネルを起動してもよいのですが、インラインチャットを使うことでより素早くコードを生成したり、改善したりできます。

Visual Studio Code で、インラインチャットを起動するには、Cmd+I（Win+I）のショートカットキーを使用します。

IntelliJ IDEA や PyCharm では、Ctrl+Shift+I（Ctrl+Shift+G）で同様の操作ができます。

チャットパネル

チャットパネルを使用すると、ワークスペースに関する質問ができるため、説明を求めたい場合にはこちらを使用します。後述のChatGPTなどの対話型生成AIサービスでもソースコードを添付すれば似たようなことができますが、手間なくできる点ではこちらを使用するのがよいでしょう。

チャットパネルは、Cmd+Shift+I（Ctrl+Shift+I）で開閉できます。会話後、コードに復帰したいときはチャットパネルを閉じることですぐにコーディングに戻れます。

IntelliJ IDEA や PyCharm では、Ctrl+Shift+C（Windowsも同様）で、チャットパネルの開閉ができます。

ChatGPTなどの対話型生成AIサービス

一方、ワークスペースに依らない問題の解決方法を質問したいとかであれば GitHub Copilot Chat ではなく、 ChatGPT などを使う方が効率的です。これは GitHub Copilot Chat ではコーディングに関する内容にのみ答えてくれるという点が影響しており、会話の途中で答えてくれなくなることはストレスになるので、使い分けをした方がよいのではないかと思います。

現時点ではアプリ版かWeb版を使うことになるかと思います。ChatGPT 以外にもツールはたくさんありますので、使いやすいものを選択してください。

コードを生成する

インラインチャットを含めたコード生成のパターンを考えます。

適切な名称をつけてコードを生成してもらう

もっとも基本的な生成の仕方になります。関数を生成する場合、適切な関数名をつけることでその関数名に沿ったコードを生成してくれます。

たとえば、JavaScriptで2つの数を加算する関数を作成する場合、addTwoNumbersという名前をつけることで2つの引数と加算をするコードが生成されます。

function addTwoNumbers と入力すると、候補が表示されます。TABキーでこれを確定すると関数が完成します。

コメントをつけて生成してもらう

実現したいことをコメントで書いて、その内容にあったコードを生成させます。

コメントを書いてから改行すると、そのコメントにあったコードが生成されます。

生成された内容が問題なければ、TABキーで確定させます。

候補が表示されているとき、マウスカーソルをカーソルをホバーすると、生成するコードの他の候補に切り替えられます。

これを表示しなくても、Option+[（Alt+[）とOption+]（Alt+]）で前の候補と次の候補を行き来でき、生成したい候補でTABキーで確定できます。最初に生成されたコードが期待したコードでなくても別の候補が期待したコードである可能性があるので、切り替えて確認するとよいでしょう。

コードを書きながらコードを生成してもらう

これがもっともよく使われている方法かもしれません。コードを書きながらその次のコードを生成してもらう方法です。

同じようなコードを生成する場合や常套句のようなコードを生成する場合には高い精度のコードを生成してくれますが、意図が正しく伝わっていないと期待したコードを生成してくれないので、後述のインラインチャットでコード生成を指示するのがよいと思います。

インラインチャットでコード生成を指示する

適切な関数名が思いつかなくてもコメントを書かなくてもインラインチャットを使うことでコードの生成を指示できます。

ENTER（RETURN）キーで生成してくれます。

Visual Studio Code では、再生成したければCmd+R（Win+R）、受け入れるならCmd+ENTER（Win+RETURN）を押下します。IntelliJ IDEA や PyCharm ではショートカットは用意されていないようで、マウス操作で再生成し、

受け入れるなら、同様にマウス操作で

エディタに反映します。

インラインチャットでコードを書き換えてもらう

書き換えてほしいコードを選択し、インラインチャットで書き換えてほしい内容を入力することでコードの改善ができます。とりあえず書いたコードにバグがあったり、非効率なコードだったりするときに改善してもらうことができるので便利です。

修正してほしいコードを範囲選択し、インラインチャットを起動、修正後どうなってほしいかを伝えます。

候補が表示されるので、

問題なければCmd+ENTER（Win+RETURN）で確定します。

文章による説明を求める必要がなく、さっさと修正したい場合はチャットパネルではなくインラインチャットを使う方が効率よくコーディングを進められます。

何をするかを指定する

文章で書かなくてもコマンドを使ってやってほしいことを指定することができます。

/generate

実際には文章で書いても手間ではなく、先にコメントを書いておけば生成してくれるので、使う機会はほぼないかもしれませんが、Visual Studio Code ではコード生成をするコマンドがあります。

/generateを使って作成してほしいコードの仕様を伝えると、

以下のようにコードを生成してくれます。

IntelliJ IDEA や PyCharm ではこのコマンドはないようですので、ご注意ください。

/fix

修正についても文章で書いてもそれほど手間ではないので使う機会は多くないですが、/fixコマンドを使うことで修正を指示することができます。

/fixコマンドに続いて修正してほしいことを記述することで、

修正結果を表示してくれます。

このコマンドは IntelliJ IDEA や PyCharm でも使用可能です。

/explain

コードやワークスペースが何を行っているのかを説明・要約してもらうことで、コードを一から読むよりも理解が早くなります。たとえば、業務で自分が関わったことのない古いコードがある場合、そのコードについて説明をしてもらってからコードを読んだ方が理解しやすいと思います。

説明はインラインチャットではなくチャットパネルで聞いた方がわかりやすいです。

チャットパネルを開くと、現在エディタで表示しているファイルが選択済みなので、このまま/explainコマンドを指定します。

説明の中で不明な点や深掘りしたい点があれば、チャットで追加質問してください。

このコマンドは IntelliJ IDEA や PyCharm でも使用可能です。

/doc

これまではクラスやメソッドのコメントを書くこともメンテナンスすることも非常にコストの高い作業だったと思います。生成AIの登場でこのような問題は過去のものとなりつつあります。

関数の先頭で以下のように/docコマンドを使用すると、

以下のようにドキュメントテーションコメントを生成してくれます。

コメントが古くて最新化したい場合でも/docコマンドが使用できます。以下のようにドキュメンテーションコメントが適切にメンテナンスされていない場合でも、コメントと関数を範囲指定して/docコマンドを使うと、

以下のようにコメントを生成し直してくれます。

このコマンドは IntelliJ IDEA や PyCharm でも使用可能です。

/tests

主にGitHub Copilot Chatで使用しますが、テスト対象を選択してテストコードを生成することができます。ただし、注意したいのは、テストの準備にプロジェクト固有の特殊が必要な場合にはうまく生成されないことがあります。

基本的には、最初の１つはコード補完を使いながら自身で作成し、その派生形で記述できる他のバリエーションを指示しながら作成するのがよいでしょう。テストで使用している値についても細かく指示するよりは一旦生成させて自身で修正した方が早い場合があります。

その他のコマンド

上記以外にもいくつかのコマンドがあります。

Visual Studio Code では、コード編集を行うための /edit コマンドが用意されています。

IntelliJ IDEA や PyCharm ではコードをシンプルにするための/simplyfy コマンドが用意されていますが、冗長なコードという点であれば、IDE自体の機能で修正できる場合もありますので、それほど使用頻度は高くないと思います。

何を参照するかを指定する

何を参照するのかを明示的に指定することで、精度の高い回答を得ることができます。これらはVisual Studio Code のみで使用可能ですが、ファイルだけはIntelliJ IDEA や PyCharm でもマウス操作で追加することができます。

@workspace

ワークスペース内のソースコードをすべて参照し、関連性の高いファイルをピックアップしてコードや回答を生成します。説明上、この記事中ではワークスペースという表現に統一していますが、ワークスペースでもプロジェクトでも伝わりますので、特に気にする必要はありません。

@vscode

Visual Studio Code 限定の機能になりますが、Visual Studio Codeの機能に着目した回答をしてくれます。設定やショートカットキーに関する質問をしたい場合は、@vscodeをつけるようにしてください。会話の中で設定に遷移するボタンも出力してくれるので、こちらも活用してみてください。

Show in Settings Editorをクリックすると、

設定が表示されます。

@terminal

コードの話ではなく、コマンドに関する質問をしたい場合は、ターミナルに着目した回答をしてくれる@terminalを使うのがよいでしょう。

#file

参照してほしいファイルを指定します。基本的にはアイコンをクリックしてファイルを選ぶのがよいでしょう。基本的に単独で使用可能ですが、もし効かないようであれば@workspaceと併用してください。

#editor

エディタの表示領域を含めるには#editorを使用します。ただし、現在エディタで表示しているファイルはデフォルトで参照していることがほとんどなので、あまり使う機会はないかもしれません。

#selection

エディタの選択箇所を参照します。IntelliJ IDEA や

#terminalLastCommand

ターミナルで最後に実行したコマンドとその実行結果を参照します。非常に便利な機能ですが、

#terminalSelection

ターミナルの選択箇所を参照します。コマンドを実行していてエラーが出たときに対処方法を聞くときは#terminalLastCommandで構いませんが、もう少しピンポイントで聞きたいときは#terminalSelectionを使うとよいでしょう。

目的別プロンプト集

いくつか、よく使いそうなプロンプト例をまとめてみました。これらはGitHub Copilot Chatで使用します。

ワークスペース全体を説明してもらう

/explainコマンドと@workspaceを組み合わせることで、ワークスペース全体について説明してもらうことができます。

@workspace /explain

新しく参画したメンバーが担当するワークスペースの構造を把握する際にとても有用だと思います。オンボーディング中やオンボーディング後の自習時間に使ってみてはいかがでしょうか。

ワークスペースのディレクトリ構造を明らかにする

ワークスペースのディレクトリ構造に可視化したいときは、以下のように聞くとよいです。

@workspace /explain ワークスペースのディレクトリ構造を教えて

こちらも、どこにどんなファイルがあるのかをディレクトリ構造を把握したい場合に有効な方法です。

コードレビューをしてもらう

作成したコードに対してコードレビューを行ってもらうのも有効な使い方のひとつです。

コードレビューを行う場合は、包括的なレビューをするのか、特定の何かについてレビューをするのかを明確にすることが重要です。

包括的なレビューを行ってほしい場合

たとえば、改善すべて点はありますかと質問するとよりよくするためのアドバイスを回答してもらうことができます。この方法は、最初のレビューや最終的なレビューとして使うとよいでしょう。

特定の観点に基づいてレビューを行ってほしい場合

特定の観点についてレビューをしてもらうことで、改善すべき点をより明確にすることができます。

具体的には、コード品質（命名規則、冗長なコード、可読性）、セキュリティ、パフォーマンスなどの問題を指摘してもらうのがよいと思います。

  • 命名は適切ですか
  • 冗長なコードや簡潔に書けるコードはありますか
  • エラーハンドリングは適切ですか
  • 実装漏れやデバッグコードなどは残っていませんか
  • 脆弱性はありますか
  • パフォーマンスの問題はありますか
  • 不足しているテスト観点はありますか

これ以外にも、プロジェクト固有の観点（特定の機能が実装されているか、など）を確認するのもよいでしょう。

また、レビューア側でも目視によるレビューと併用するのもよいと思います。

まとめ

当然といえば当然ですが、 GitHub Copilotの機能はVisual Studio Codeがもっとも充実しています。ただ、EclipseやIntellJ IDEA など他のIDEでもまったく使えないわけではないため、もし使っているのであれば積極的に活用していくことが重要です。

GitHub Copilotを活用にするには、基本的なショートカットやコマンドなどを理解することももちろんですが、やってほしいことを明確に指示することが大切です。これはインラインチャットで指示するだけでなく、コメントを書いてからコードを書き始めるということも含みます。

Copilot や AI Agent 関連はかなり活発に進化しています。この記事で紹介した機能以外もありますし、今後もっとよいやり方が出てくることも容易に想像できます。コーディングの生産性を高めるため、定期的にキャッチアップが必要だと思います。

Emmetを活用してコーディングのパフォーマンスを向上させよう

EmmetはHTMLやCSSを省略記法で記述できるようにプラグイン・拡張機能です。

最近Youtube動画で、Beginner/JuniorエンジニアとPro/Seniorエンジニアのコーディングの仕方についた動画がよく流れてきたので、使い方をまとめてみました。

Emmetの使い方

Emmetの省略記法からHTMLのタグやCSSのプロパティを作成するにはENTER/RETURNまたはTABを使用します。どちらが使用するかはエディタによって異なっており、Visual Studio CodeはENTER/RETURN、TABのどちらでも変換できますが、WebStormでは[TAB]のみで変換します。

例えば、<div></div>タグを作成するには

div[ENTER/RETURN or TAB]

のように入力します。

HTMLのタグの作成

主にEmmetが使用されるのはHTMLのタグを記述する場合です。少ないタイピング量で素早くタグを作成できます。

よく使われる省略記法について見ていきます。

空タグを作成

単に空タグを作成したい場合はタグ名を入力後、[ENTER/RETURN or TAB]を入力します。

h2[ENTER/RETURN or TAB]
->
<h2></h2>

空タグを作成するとカーソルは<h2>と</h2>の間にあるので、十字キーやマウスでカーソル位置を変えることなくタグ内に入力することができるようになります。

id属性付きの空タグを作成

実際にコーディングしていると、単純に空タグを作成するということはid属性やclass属性がついたタグを作成することがほとんどだと思います。id属性がついた空タグを作成するには、タグ名に続いて#を入力してid属性の名称を入力し、[ENTER/RETURN or TAB]を入力します。

h2#title[ENTER/RETURN or TAB]
->
<h2 id="title"></h2>

ここではHTMLファイル内で一意になるtitleというid属性をもったh2タグを作成しました。

クラス属性付きの空タグを作成

class属性をついた空タグを作成するにはタグ名に続いて.を入力してclass属性の名称を入力し、[ENTER/RETURN or TAB]を入力します。

div.sidebar[ENTER/RETURN or TAB]
->
<div class="sidebar"></div>

2つ以上のクラスを定義したい場合は、.class名を繰り返します。

div.sidebar.active[ENTER/RETURN or TAB]
->
<div class="sidebar active"></div>

BootstrapやTailwind CSSなどのCSSフレームワークを使っている場合はタグにいくつものクラスを定義することになるため、Emmetを使った省略記法でのコーディングは生産性に大きな影響を与えます。

div.mb-3.row[ENTER/RETURN or TAB]
->
<div class="mb-3 row"></div>

子要素をまとめて作成

例えば、ulタグの中にliタグがあるような構造をまとめて作成するには、>を使用します。

ul>li[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
</ul>

作成後のカーソル位置は<li>と</li>の間にあります。

要素を複数まとめて作成

同じタグを複数個まとめて作成したい場合は*に続いて繰り返し回数を入力することでまとめて作成できます。

前述の例で、子要素のliタグをまとめて3個作成したい場合は

ul>li*3[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

のようにします。作成後のカーソル位置は一番最初のliタグの<li>と</li>の間にあり、[TAB]で次のliタグの<li>と</li>の間に移動できるので、

ul>li*3[ENTER/RETURN or TAB]
->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

abc[TAB]
->
<ul>
  <li>abc</li>
  <li></li>
  <li></li>
</ul>

def[TAB]
->
<ul>
  <li>abc</li>
  <li>def</li>
  <li></li>
</ul>

ghi[TAB]
->
<ul>
  <li>abc</li>
  <li>def</li>
  <li>ghi</li>
</ul>

のように十字キーやマウスを使うことなく効率的にコーディングすることができます。

テキスト付きの要素を作成

前述ではh2タグを空タグで作成して、その後にテキストを入力していました。Emmetではテキスト付きの要素を作成することもできます。

h2#title.text-5xl.font-semibold{タイトル}
->
<h2 id="title" class="text-5xl font-semibold">タイトル</h2>

少し注意点すべき点があるとすれば、Copilotなどが有効になっていると、{を入力したあと、CSSのプロパティを候補として提示することがあり、何も考えずに[TAB]を押すと変換できない場合がある点です。初めての場合になりやすいので注意しましょう。

ダミーテキストを作成

デザインを確認するために実際のコンテンツの代わりにダミーテキストを挿入したいということがあります。

このような場合にはloremを入力して[ENTER/RETURN or TAB]を入力すると、

lorem[ENTER/RETURN or TAB]
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nisi facere, velit facilis quo rerum quae eveniet animi alias, voluptate rem, tempora placeat ut. Voluptates saepe earum nesciunt! Repudiandae, earum.

のようにダミーテキストが作成されます。

独自の属性付きの要素を作成

ピュアなHTMLのタグしか生成できないというわけではなく、独自の属性をつけることもできます。

例えば、Vue.jsのv-ifディレクティブをもったdivタグを作成するとします。v-ifディレクティブが真になる条件はisShowがtrueになる場合とします。

div[v-if="isShow"]
->
<div v-if="isShow"></div>

今回はVueのディレクティブの例を示しましたが、aria-*属性などにも使用できるため、利用シーンは多いと思います。

CSSプロパティの作成

あまり知られていないかもしれませんが、CSSのプロパティを省略記法で作成することもできます。

.title {

}

というセレクタがあるとき、

.title {
  mb10[ENTER/RETURN or TAB]
}

のように省略記法をでプロパティを書くと、

.title {
  margin-bottom: 10px;
}

のようにプロパティが作成されます。

HTMLの場合と異なり、省略記法を覚えていないと使えませんが、ある程度法則性があり、Tailwind CSSのクラス名と同じようなルールのものもあるので、よく使うものから覚えていくのがよいと思います。

Emmetチートシート

Emmetの使い方をまとめたチートシートが公開されています。

docs.emmet.io
Cheat Sheet

HTMLとCSSの両方をサポートしていますので、是非ご活用ください。

EmmetとCopilotの使い分け

少ないタイピング量でコードを生成するといえば、CopilotやTabnineなどの生成AIがあります。

生成量という意味では生成AIに軍配が上がりますが、必ずしも意図した内容が生成されるとは限りません。同じような内容を何度も生成する場合、定石のような内容を生成する場合、どう書けばいいかわからない場合などは生成AIを使用し、何を出力したいのかがはっきりしている場合は生成AIが提示する候補を[ESC]でキャンセルしてEmmetの省略記法を使うのがよいと思います。

どちらか一方だけを使うのではなく、それぞれの長所と短所を理解し、適したツールを選択していくことを大切です。

コーディング時の意識をアップデートする

HTMLのコーディング時にEmmetを活用する場合、コーディング時の意識をアップデートするようにしていくことが必要かもしれません。

Emmetを使わないときは、タグの構造だけに着目してタグを作成し、その後にデザインを整えるためにクラスをどこにつけようか、といった流れで書くことができます。

例えば、3つの列を持つテーブルを作成する場合、

<table>
  <thead>
    <th>
      <td></td>
      <td></td>
      <td></td>
    </th>
  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

のようにタグの構造を作成してから、テーブル全体をデザインするためにdata-tableクラスをtableタグにつけて、ヘッダー部分をデザインするためにtheadにtable-headerをつけて、ボディ部分をデザインするためにtbodyにtable-bodyクラスをつけて、といったように後からつけていくことができます。

<table class="data-table">
  <thead class="table-header">
    <th>
      <td></td>
      <td></td>
      <td></td>
    </th>
  </thead>
  <tbody class="table-body">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
</table>

一方、Emmetを活用しようとすると、タグの構造を考えるときにそのタグにどんな意味を持たせるかということを考えながらやった方が効率的に生成できます。

// データテーブルを意味するtableを用意して、
table.data-table
↓
// その中にヘッダーを意味するtheadを用意して、
table.data-table>thead.table-header
↓
// ヘッダータイトルはまだ決めていないけど、3列用意しよう
table.data-table>thead.table-header>tr>td*3
↓
// さらにボディ部分を意味するtbodyを用意して、
table.data-table>thead.table-header>tr>td*3^tbody.table-body
↓
// 同じように3列用意しよう
table.data-table>thead.table-header>tr>td*3^^tbody.table-body>tr>td*3[ENTER/RETURN or TAB]
->
<table class="data-table">
  <thead class="table-header">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

思考の順序と省略記法の書く順序が一致すると、もっとも自然にもっとも効率的にコーディングすることができます。これは慣れが必要となるので、最初は声に出しながら何度もトレーニングするのがよいでしょう。

まとめ

Emmetを活用することで効率的にHTMLやCSSを効率的にコーディングできるようになります。ただし、効率性を高めるにはCopilotとの使い分けをうまくやったり、コーディング時の意識をアップデートする必要があります。

Emmet以外にも効率的にコーディングを効率化するためのプラグイン・拡張機能やツールがあります。少しずつ活用できる幅を広げてコーディングを爆速にしていくのがよいと思います。

参考文献

emmet.io
Emmet — the essential toolkit for web-developers
docs.emmet.io
Cheat Sheet
zenn.dev
Emmetとは？これだけ知っておけばOK！
e-adshin.com
【2023年改訂版】Emmet（エメット）を使ってコーディングを効率化！HTML編 | Adlab
こんにちは。最近アドシンへの復職を果たした林田です。 HTMLやCSSのコーディングに慣れてくると、何度も同じ
webst8.com
Emmet(エメット)とは？エメットを使った基本的な書き方 – WEBST8のコードブログ
Emmet（エメット）とは、コーディングをするとき省略したコードを書いてEnterやTabキーを押すだけで自動変換され記述できる便利な機能です。 いちから…
qiita.com
【よく使うEmmetまとめ】HTMLやCSSを素早く書こう！ #HTML5 – Qiita
Emmetとは HTMLやCSSなどのコーディングを補完してくれる機能 VSCodeは標準でEmmet機能を備えている 使い方 キーワードを入力してTAB（もしくはEnter）を押…

Visual Studio Codeでタグをまるごと選択する

Visual Studio Codeで開始タグから終了タグまでをまるごと選択したいことが多々あります。

これまでは一度対象のタグを閉じて範囲選択をしていたのですが、タグの範囲を見やすくする拡張機能と相性がよくなかったので困っていました。

Emmetショートカットを使う

Emmetショートカットを使用することで、追加の拡張機能なしで実現できます。

コマンドパレットからEmmet: Balance (outward)を見つけ、歯車ボタンを選択します。

任意のショートカットを設定します。

開始タグで設定したショートカットを使用すると、

このように範囲選択できます。

あまり使うことはないかもしれませんが、Emmet: Balance (inward)を使用することで、

選択しているタグの内側を選択することができます。

ChromebookにインストールしたVSCodeがちらつく場合の対処方法

ChromebookにインストールしたVisual Studio CodeのExplorerなどの表示がちらついたり、何も表示されないという事象に遭遇しました。すべてのChromebookで起きるとは限りませんが、私の使用している「ASUS Chromebook Detachable CM3」で発生したため、対処法を共有します。

対処方法

結論から書くと、「--disble-gpu」オプションをつけてVisual Studio Codeを起動すると解消します。

$ code --diable-gpu

もし、カレントディレクトリをcodeコマンドで開く場合は、

$ code . --disable-gpu

とします。

毎回オプションを付けるのが面倒な場合は、エイリアスを使って.bashrcなどに

alias code="code --disble-gpu"

と定義しておくと、毎回オプションを指定しなくて済みます。

何が原因なのか

明確な記述を見つけられませんでしたが、VSCodeとGPUとの相性で発生するようです。ただし、今回のケースではGPU非搭載のマシンでGPUアクセラレーションが有効になっているのが問題だと思われます。

本事象はChromebookでのみ起きる事象ではなく、VirtualBox上でも起きるようですので、リモートデスクトップ環境を含む仮想マシンや低スペックマシンで発生する可能性があります。

また、直接的な影響かわかりませんが、ターミナルの文字描画が遅れます。コピペでは特に問題ありませんが、キーボードで文字を入力していると最後の方の文字が表示されていないことがあります。こちらについては引き続き調査していきます。

Angular向けのVSCode拡張機能をインストールする

Visual Studio CodeでAngularプロジェクトの開発をするために必要な拡張機能をインストールしていきます。

ここで紹介する拡張機能は以下の3つです。

  • Angular Language Service
  • Angular Snippets (Version 16)
  • EditorConfig for VS Code

ここに掲載している拡張機能は必須といえるものを選んでいます。すべての拡張機能がAngularプロジェクトの作成直後から使用可能です。

では、一つずつ見ていきましょう。

Angular Language Service

marketplace.visualstudio.com
Angular Language Service – Visual Studio Marketplace
Extension for Visual Studio Code – Editor services for Angular templates

Angularチーム公式の拡張機能で、テンプレートファイル内でのIntelliSense機能や定義へのジャンプなど、様々な便利な機能を提供しています。

Angularアプリケーションの開発を行う際は必ず入れておきましょう。

Angular Snippets (Version 16)

marketplace.visualstudio.com
Angular Snippets (Version 18) – Visual Studio Marketplace
Extension for Visual Studio Code – Angular version 18 snippets by John Papa

いくつかのバージョン対応版が見つかると思いますが、今回使用するバージョンは16.xですので、対応するバージョンの拡張機能を使用しています。

強力な拡張機能であることは間違いありませんが、人によっては使用する／しないがはっきり分かれると思います。最近ではGitHub CopilotなどのAIを活用したコード生成も手段としてあるので、必要性を感じない場合はインストールしなくても問題ありません。

EditorConfig for VS Code

marketplace.visualstudio.com
EditorConfig for VS Code – Visual Studio Marketplace
Extension for Visual Studio Code – EditorConfig Support for Visual Studio Code

Angularプロジェクトを作成すると、.editorconfigファイルが作成されていますので、これを有効化させるために導入します。

実務のことを考えるとPrettierやESLintを導入する必要がありますが、プロジェクト作成直後では使える状態になっていないため、今回の拡張機能から除外しました。

EditorConfigを使うべきか否か

Prettierを導入する場合、EditorConfigは必要かどうか、という議論があるようです。機能的には重複している部分があるため、EditorConfigを使わずにPrettierのみを使用する、という選択肢もアリという主張はそれなりに筋が通っています。

ただ、PrettierとEditorConfigは共存可能で、VSCode以外のIDEを自由に使用するという選択肢がある場合、多くのIDEでサポートされているEditorConfigの設定ファイルを残しておくことで、Prettierの設定が行われていない場合やGitのpre-commit時にしかPrettierが動作しない状況などにおいても必要最低限のフォーマットが行われるというメリットがあります。

そのため、本記事では必要な拡張機能にEditorConfig for VS Codeを挙げています。

まとめ

今回はAngularプロジェクトの開発に最低限必要なVisual Studio Codeの拡張機能3つをインストールしていきました。

実用面を考えると、PrettierとESLintの導入は必要ですので、次回はPrettierとESLintの導入とHuskyによるpre-commitフックの設定を行っていきましょう。

気になった話題のまとめ（2023/04/07）

dev.to
4 VSCode extensions I use when developing with Tailwind
TL;DR All these extensions are available in this VSCode extension pack TailwindCSS Kit ……

Tailwind CSSの拡張機能、結構増えているんですね。本記事では以下の4つの拡張機能を紹介していますが、tailwindで検索すると、他にも星５の拡張機能はたくさんありました。拡張機能パックでも他の拡張機能がパックされていたりするので、自分に合う拡張機能が他にもあるかもしれません。

marketplace.visualstudio.com
Tailwind CSS IntelliSense – Visual Studio Marketplace
Extension for Visual Studio Code – Intelligent Tailwind CSS tooling for VS Code
marketplace.visualstudio.com
Tailwind Fold – Visual Studio Marketplace
Extension for Visual Studio Code – Improves code readability by folding class attributes
marketplace.visualstudio.com
Tailwind Documentation – Visual Studio Marketplace
Extension for Visual Studio Code – Instant documentation search for Tailwind CSS
marketplace.visualstudio.com
Tailwind Config Viewer – Visual Studio Marketplace
Extension for Visual Studio Code – View Tailwind config for the current workspace

気になった話題のまとめ（2023/04/06）

coliss.com
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみ…

折りたたみ機能は昨今のエディタやIDEには大抵備わっていますが、それをより見やすくするVS Codeの拡張機能です。

折り畳んだ行数が表示されるのと、閉じブラケットも折りたたんでくれるので、より見やすくよりわかりやすくなります。

ショートカットを覚えられたら使いやすいんだろうなとは思いますし、コードを綺麗に保つことでより可読性が向上することが見込めるので、これを機に使ってみようと思います。

Visual Studio Codeでキーボードショートカットが効かなくなった時に確認すること

Visual Studio Codeでいつも使えていたキーボードショートカットが使えなくなったり、新たにキーボードショートカットを使おうとして期待していた動きと違う場合に、どこを確認して、どう対処すればいいかを解説します。

どういったことが起きている可能性が高いのか

まず、キーボードショートカットが効かなかったり、期待した動きをしていない場合、どういったことが起きているかについて説明します。

このような事象が起きている原因には、大きく３つの可能性が考えられます。

  • コマンドに割り当てられていたキーボードショートカットが削除されている
  • キーボードショートカットが別のコマンドに割り当てられている
  • キーボードショートカットが他のキーボードショートカットの一部となっている

次に私が遭遇した具体的な事例をもとに手順を確認していきます。

キーボードショートカットの設定を確認する

まずはキーボードショートカットの設定を確認しましょう。

キーボードショートカットの設定を表示するには、Ctrl+K Ctrl+S（macOSはCommand+K Command+S）を入力します。

キーボードショートカットを確認する

やり方はいくつかありますが、まずはキーボードショートカットが設定されているのかを確認します。

上部にあるテキストボックスの右側にあるキーボードのマークをクリックすると、キーボードショートカットで検索することができるようになります。

テキストボックスでキーボードショートカットを入力すると、対象のキーボードショートカットが割り当てられているコマンドに絞り込まれます。

ここでは、行全体を選択するキーボードショートカットのCtrl+L（macOSではCommand+L）が効かなかったので、調べています。

見たところ、キーボードショートカットは自体は正しく設定されているようです。

キーボードショートカットを修正する

調べた結果を元に、具体的に修正を行なっていきます。

コマンドが見つからなかった場合

キーボードショートカットを入力しても期待していたコマンドがヒットしなかったときは、何らかの理由でキーボードショートカットが解除されたか、別のコマンドに割り当てられています。

その場合は、再度 キーボードショートカットを割り当ててください。

コマンドが見つかった場合

コマンドが見つかった場合、当該キーボードショートカットを一部に持つ別のコマンドが割り当てられてる可能性が高いです。

これを確認するために、キーボードショートカットを再度して、ステータスバーを確認してみてください。他のキーボードショートカットの一部になっている場合は以下のように2番目のキーを待つ表示が現れます。

該当のコマンドが何かもわかりませんし、2番目のキーがわからないとキーボードショートカットでも探せないため、地道ですが目視で探してください。

本例では拡張機能「Live Server」のキーボードショートカットの一部にCtrl+L（macOSの場合はCommand+L）が使われており、これによって本来実行したかった行全体を選択が使用できなくなっていました。

問題を解決するには他のショートカットキーに変更するかキーボードショートカットを削除してください。

対象のキーボードショートカットを右クリックし、変更したい場合は「キー バインドを変更する…」を選択、削除したい場合は「キー バインドを削除」を選択します。
今回は特に使っていないキーボードショートカットだったので、削除することにしました。

動作確認をする

修正が完了したら動作確認をしてみましょう。

問題なくキーボードショートカットが機能していれば問題解決です。

[Python]VSCodeでPythonのフォーマッタを設定する（black等のライブラリをPrettierプラグインと共存させる）

Visual Studio Codeで、Python以外はPrettierプラグインを使用し、PythonはPrettierプラグインを使わずにblackを使用する方法について解説します。

共通の設定

Prettierプラグインを有効化するにはeditor.defaultFormatterを設定します。保存時にフォーマットしたいので、editor.formatOnSaveも設定します。

{

  ・・・
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  ・・・
 }

Pythonの設定

次にPythonの設定です。PythonではPrettierプラグインを使用せずにblackを使用します。ただし、editor.defaultFormatterの設定が有効な場合、editor.defaultFormatterの方が優先されてしまうため、Pythonではこの設定を無効化(null)します。

以下は、blackを使用するように設定している例です。ここではblackを使用していますが、他のライブラリでも構いません。

{
  ・・・
  "[python]": {
    "editor.defaultFormatter": null
  },
  "python.formatting.provider": "black",
  ・・・

}

上記設定により、PythonだけはPrettierプラグインを使用せず、black等のライブラリを使用できます。

モバイルバージョンを終了