これら 5 つの VS Code 機能は私の仕事のやり方を完全に変えました

Visual Studio Code (VS Code) は疑いの余地のないコーディング エディターの王様であり、2025 年のスタック オーバーフロー調査では回答者の 75% が定期的に使用するツールとして Visual Studio Code (VS Code) を挙げています。 Vim、Cursor、Notepad++ などの強力な競合他社よりも優れているだけでなく、より充実した機能を備えた親プロジェクトである Visual Studio よりも優れています。

VS Code はテキスト エディターとして優れていますが、これらの追加機能によりさらに優れた機能が得られるため、見逃したり見落としたりしがちです。

コマンドパレットとファイル検索

よく模倣される素晴らしいアイデア

VS Code のどこにいても、何をしていても、 を押すことで任意のコマンドを実行できます。 Ctrl+シフト+P (Windows) または シフト+コマンド+P (macOS)。

このドロップダウン パネルには、VS Code で使用できるすべてのコマンド、つまりメニューやボタンの後ろに埋もれているコマンドが一覧表示されます。パレットに統合されたあいまい検索を使用して、興味のあるコマンドを見つけることができますし、使用する必要があります。また、最近使用したアイテムが強調表示され、キーボード ショートカットが表示されるため、学習を進めながら学習できます。

使用する Ctrl+P / コマンド+Pを使用すると、同様のクイック オープン パレットを開くことができ、プロジェクト内のファイルと最近開いたファイルが表示されます。繰り返しますが、組み込みのあいまい検索は優れており、慣れてしまえばファイルにすばやくアクセスできる方法です。

これらの機能はどちらも広く借用されており、特に Zed や Sublime Text などのエディターのコマンド パレットがそうです。

素早く便利なナビゲーション

もう二度と自分の場所を失うことはありません

コードベースを飛び回っていると道を見失いがちですが、VS Code のナビゲーション ショートカットを使用すると、ファイル間の移動がこれまでより簡単になります。プレス F12をクリックすると、カーソルの下にあるものの定義にすぐにジャンプします。しかし、それではどうでしょうか？

道に迷った場合は、便利なキーボード ショートカットを備えた「戻る」コマンドと「進む」コマンドを試してみてください。 代替+左/右矢印 Windows と Ctrl+ハイフン または シフト+Ctrl+ハイフン macOS上で。

これらのショートカットは、Web ブラウザの「戻る/進む」に相当するコーディングであり、同様に便利です。他のキーボードの組み合わせと同様、筋肉の記憶に定着するには数回の操作が必要かもしれませんが、一度定着すると、これなしでどうやってやっていたのか不思議に思うでしょう。

自信を持って名前を変更する

すべての検索と置換に似ていますが、さらに便利です

関数または変数の名前を変更する必要がある場合は、対応するすべての呼び出しと参照も変更する必要があります。これは骨の折れる手動タスクであるか、グローバルな検索と置換を使用してわずかに軽減できるタスクです。問題は、単純なテキストの置換が必ずしも希望通りであるとは限らないため、正しいことを行っているかどうかを確認するために、各インスタンスをステップ実行する必要があることです。

VS Code は、この状況がどれほど愚かであるかを認識し、修正します。プレス F2 変数名や関数名など、変更したいシンボル内にカーソルがあるとき。置換を入力すると、VS Code がファイルをリファクタリングし、オプションのプレビューで適用前に何が起こるかを確認します。

エディターは、単純な変更を明確に適用できる場合、すぐに適用します。それ以外の場合は、VS Code が行うべきと考える変更とすべきではないと考える変更がプレビューで表示され、デフォルトで適切な変更が選択されます。

たとえば、IDE は、文字列内の一致するテキストを置換する必要があるかどうかを認識できるほど賢いです。

この機能を数回使用すると、標準の検索と置換にはもう戻れなくなります。

ファイル間の違いを調べる

何が変更されたのかをエディターで直接確認

コードの差分処理は長い間コマンド ラインの領域でしたが、編集者がその仕事を引き受け始めており、うまくやっています。 2 つのファイルを比較するのに、すでに使用しているエディター以上に適した場所はありません。

VS Code では、ファイルを右クリックして選択します 比較対象として選択、次に別の項目を右クリックして選択します 選択したものと比較する。 2 つのファイルが並べて表示され、変更は削除として赤、追加として明確に強調表示されます。

もちろん、git で制御されているファイルのタイムライン ビューや、作業ツリー内のファイルの git 変更を確認すると、同様の差分ビューが表示されます。

Emmet を使用した簡単な定型コード

HTML、CSS、XML などの強力なマクロ

Emmet は、プリインストールされている拡張機能の 1 つですが、探してみないとその存在を知ることはできません。これもかなりニッチな用途のツールですが、私にとってはすぐに不可欠なものになりました。

私は Web 開発全般において HTML と CSS を大量に書く傾向があり、VS Code が登場するまでは、常に多くの定型文を繰り返すことになります。 Emmet を使用すると、CSS セレクターに似た略語を使用して、手動でのタグ入力をすべて自動化できます。たとえば、エメットの略語は次のとおりです。

ul#todo>li*5

Emmet 構文では、これは 5 つの空の li 要素を含む ID「todo」を持つ ul を表します。 VS Code の HTML ファイルにその略語を入力すると、Emmet の略語として認識されます。

次に、 を押します。 入力 または タブ Emmet の展開を受け入れると、エディターで即座に同等の完全なマークアップが得られます。

豊富な機能を備えた簡素化された IDE

VS Code は、Visual Studio の無料で軽量な代替手段として導入されました。本格的な IDE というよりは、強力なテキスト エディターです。しかし、その高速なパフォーマンスと使いやすさには、仕事のやり方を大きく変える多くの高度な機能が備わっています。重要な拡張機能エコシステムと最新の AI 機能を備えた VS code は、間違いなく、最適なエディターとしての地位を正当化しています。