プログラミングスキルを向上させる: Visual Studio Code の生産性向上に役立つ 10 のヒント

Visual Studio Code は、間違いなくプログラミングに最適なテキストエディターです。多くの人にとって、Sublime Text に代わってこのエディタが選ばれるようになりました。これは Electron ベースの JavaScript アプリケーションですが、非常に高速で、多くの JavaScript アプリケーションのようにパフォーマンスの問題に悩まされることはありません。

VS Code はオープンソースであり、GitHub で入手できます。生産性とワークフローを次のレベルに引き上げたい場合は、ここで学ぶべきいくつかの重要な Visual Studio Code のヒントを紹介します。

Visual Studio Code 中国語版

1. VS Codeのコマンドパレットをマスターする

Sublime Text (およびそれ以前の TextMate) と同様に、VS Code にはコマンドパレットと呼ばれるものがあります。この機能を使用すると、マウスでメニューを移動するのではなく、入力するだけでさまざまなコマンドにアクセスできます。

Ctrl + Shift + P (または Cmd + Shift + P) キーボードショートカットを使用して、コマンドパレットを表示できます。実行したいアクション（「閉じる」など）を入力し始めると、オプションがリアルタイムで更新されます。一部のコマンドはカテゴリ（ファイル、Git、ターミナルなど）に分類されているため、見つけやすくなります。

2. 作業プロジェクトフォルダを設定する

ナビゲーションサイドバーの「エクスプローラー」をクリックすると、新しいサブパネルが開きます。このサブパネルは、「開いているエディター」(現在開いているファイルとドキュメント) と「開いていないフォルダー」の 2 つのセクションで構成されています (オプションの 1 つとして表示するには、3 つのドットメニューをクリックして「開いているエディター」を選択する必要がある場合があります)。私たちが興味を持っているのは後者です。

[フォルダーを開く] をクリックし (または、メニューバーで [ファイル] > [フォルダーを開く] に移動して)、システム上の任意のフォルダーを選択します。これにより、そのフォルダーが「現在の作業プロジェクト」として VS Code に読み込まれ、すべてのファイルとサブフォルダーに簡単にアクセスできるようになり、ファイルエクスプローラーを何度も切り替える必要がなくなります。

3. 複数のファイルを同時に表示する

最近のテキストエディターのほとんどは複数のファイルを同時にサポートできるため、タブベースのインターフェイスを使用して開いているファイルを切り替えることができます。より高度なテキストエディターでは、並べてテキストを編集できる場合もありますが、VS Code でもこれが可能です (ただし、水平方向のみです)。

しかし、ラップトップや古いモニターなどの小さな画面では、並べて編集するのは困難です。そこで VS Code が活躍します。

ダイナミックパネルと呼ばれる機能があり、開いているドキュメントパネルの 1 つが狭すぎる場合、そのドキュメントをアクティブ化すると (つまり、カーソルを置くと)、自動的に広くなります。まだ 720p に近い解像度を使用している場合は、この機能が間違いなく役立ちます。

4. 複数の行を一度に編集する

ドキュメント全体で複数のテキストインスタンスを挿入または削除する必要がある場合は、複数のカーソルを作成するだけです。これを行うには、Alt キー (Mac の場合は Option キー) を押しながらテキスト内の任意の場所をクリックします。クリックするたびに新しいカーソルが作成されます。

これは、同じクラスのインスタンスを多数追加したり、複数のハイパーリンクの形式を変更したりする HTML などの場合に特に便利です。学んで愛してください。

5. 定義へ進む

プログラミングやスクリプトの作成をしているときに、認識できない変数やメソッドに遭遇することがよくあります。それであなたは何をしますか？適切なファイルを探すのに数分かかることもありますが、カーソルで変数/メソッドを選択し、F12 キーを押してすぐにその定義にジャンプすることもできます。または、メソッド、関数、または変数を選択し、Ctrl キーまたは Cmd キーを押し、クリックして定義に移動します。

あるいは、Alt + F12 (または Cmd + F12) キーボードショートカットを使用して定義を表示することもできます。これにより、ソースファイルを開く代わりに、カーソルがある行に定義が表示されます。

逆の操作を行うには、定義済みの変数/メソッドを選択し、Shift + F12 キーボードショートカットを使用して、それに対するすべての参照を検索します。カーソルが置かれている行にも表示されます。

6. すべての出現箇所の名前を変更する

リファクタリングは、クリーンなコードの作成と維持に必要な側面ですが、特に大きなモジュールやコードのチャンクをリファクタリングする場合は、非常に面倒な作業になる可能性があります。したがって、変数やメソッドの名前を変更するために何十ものファイルを検索する代わりに、VS Code にその作業を任せましょう。

変数/メソッドを選択して F2 キーを押すと、名前を編集することができ、現在作業中のプロジェクト全体でその変数名のすべてのインスタンスが変更されます。

現在のファイルのみに変更を加えたい場合は、Ctrl/Cmd + F2 キーボードショートカットを使用すると、VS Code によって現在のファイルの各インスタンスにカーソルが生成されます。

7. 複数のファイルを検索する

ソースコードではないファイルで作業している場合、上記のシンボル検索機能 (ヒント #5) は機能しません。では、文章や単語を探す必要があるが、それがどのファイルにあるかわからない場合はどうすればよいでしょうか? 基本的な検索機能に戻ります。

Ctrl/Cmd + F を使用すると現在のファイル内を検索できますが、Ctrl + Shift + F (または Shift + Cmd + F) を使用すると、すべてのサブフォルダーを含む、現在作業中のプロジェクト全体のすべてのファイル内を再帰的に検索できます。

8. VS Code でコマンドラインを使用する

VS Code には統合ターミナルが付属しています。 Windows では、このターミナルはコマンドプロンプトとして表示されます。 Mac および Linux では、Bash プロンプトとして表示されます。どちらの場合も、ターミナルは現在作業中のプロジェクトのディレクトリ（存在する場合）で起動し、存在しない場合はホームフォルダーで起動します。

複数の独立した端末を持つ機能もサポートしています。右上隅のプラス (+) ボタンをクリックすると、さらにターミナルインスタンスが生成されます。また、ゴミ箱をクリックすると、現在のターミナルが閉じられます。ドロップダウンメニューを使用すると、簡単に切り替えることができます (タブベースのインターフェイスほど画面スペースを無駄にしません)。

9. VS Codeに新しいテーマをインストールする

ご想像のとおり、VS Code では、テキストとソースコードの両方の構文の強調表示にテーマを設定できます。残念ながら、インターフェース自体のテーマ設定はできませんが、構文の強調表示は重要なポイントです。優れたテーマは、あなたが思っている以上に生産性を向上させることができます。

新しいテーマは、VS Code マーケットプレイス (無料) で見つけるか、VS Code で直接検索することができます。推奨事項が必要な場合は、最高の VS Code テーマのリストをご覧ください。

10. VS Codeにサードパーティの拡張機能をインストールする

最後に強調する基本的な機能は、サードパーティの拡張機能による VS Code の拡張性です。テーマと同様に、VS Code マーケットプレイスで見つけることができます (はい、これらも無料です)。または、VS Code で検索することもできます。拡張機能パネルにアクセスするには、Ctrl + Shift + X (または Shift + Cmd + X) キーボードショートカットを使用します。

スケーリングは生産性を最大化するための鍵です。ここには、リンター、デバッガー、コードスニペット、VS Code 自体の利便性向上、ビルドツール、さらには ChatGPT を使用して VS Code でのプログラミングを容易にする拡張機能など、さまざまなツールが見つかります。