実際には不要になった 8 つの非常に人気のある VS Code 拡張機能

in tech

拡張機能をインストールするたびに起動時間が増加し、メモリが使用され、更新後に機能が停止する可能性が 1 つ増えます。長年にわたり、VS Code は、かつては必須だった多くの拡張機能を組み込み機能に置き換えることによって吸収してきました。つまり、VS Code がすでにネイティブで実行できる機能の拡張機能を実行している可能性があり、セットアップが必要以上に乱雑になっている可能性があります。

別の拡張機能をインストールする前に、今すぐ廃止できる人気のある拡張機能のリストを確認し、VS Code が単独で同じことをどのように実行できるかを確認してください。

ブラケットペアカラーライザー

VS Code の組み込み括弧の色は、この拡張機能を時代遅れにするのに十分です

[ブラケット ペア カラー化]が有効になり、背景にブラケット ペア カラーライザー拡張機能が表示されます。” data-img-url=”https://static0.howtogeekimages.com/wordpress/wp-content/uploads/wm/2026/10/enable-bracket-pair-colorization-settings.jpg?q=70&fit=crop&w=825&dpr=1″ src=”https://static0.howtogeekimages.com/wordpress/wp-content/uploads/wm/2026/10/enable-bracket-pair-colorization-settings.jpg?q=70&fit=crop&w=825&dpr=1″ class=”img-brightness-opt-out”/>

間違いなく、Bracket Pair Colorizer (バージョン 1 および 2) は 2016 年から 2021 年までの定番であり、何百万ものインストールが行われました。これは、VS Code をインストールした瞬間に劇的に使い心地が良くなった、多くの開発者にとって頼りになる拡張機能でした。対応する括弧に色を付けて、深くネストされたコードを非常に理解しやすくしました。

VS Code はバージョン 1.60 でネイティブの括弧ペアの色付けを追加し、1.67 ではデフォルトでオンになったため、もう必要ありません。最終的に、組み込みバージョンの方がはるかに高速であるため、拡張機能の作成者はそれを非推奨にしました。

まだある場合はアンインストールするだけで、ブラケットの色はデフォルトで有効になっているため、すでに機能しているはずです。そうでない場合は、次の場所に進んでください [設定]>[テキスト エディタ]>[ブラケット ペアの色付け] 設定が有効になっていることを確認してください。また、必要に応じて、 settings.json ファイルに次の行を追加します。

"editor.bracketPairColorization.enabled": true

設定の同期

VS Code はサードパーティの拡張機能なしでセットアップ全体を同期できます

Settings Sync (Shan Khan によって開発) は、コンピュータ間を定期的に移動するユーザーにとって必須の拡張機能でした。 2015 年から 2020 年半ばまで人気があり、ユーザーは GitHub Gists を使用して VS Code 設定を同期できるため、セットアップを手動で再作成する手間が省けます。

その後、VS Code には組み込みの機能が導入されました。 設定の同期 2019 年後半にプレビューとしてリリースされ、2020 年にバージョン 1.48 で安定しました。設定、キーバインド、スニペット、拡張機能、UI 状態を同期し、プロファイルとも連携します。

設定の同期を有​​効にするには、 アカウント アイコンを選択して バックアップと同期の設定をクリックし、同期するものを選択して、 サインインしてオンにする。選択 GitHub でサインインする ブラウザで認証するか、すでにサインインしている場合は、単に アカウント アイコンと 設定の同期をオンにする。有効にするとメニューが表示されます 設定の同期がオンになっています。この設定をオンにすると、どの VS Code が正確に同期するかを選択できます。

Chrome用デバッガ/Edge用デバッガ

ブラウザのデバッグは、拡張機能なしで VS Code によって処理されるようになりました。

[実行とデバッグ]メニューの[デバッガーの選択]に[Web アプリ (Chrome)]および[Web アプリ (Edge)]オプションが表示されます。

Microsoft 自体が、エディター内から Web アプリをデバッグするための Debugger for Chrome や Debugger for Edge などの拡張機能を提供していたことを覚えていますか?どちらもインストール数は数百万に達しましたが、現在は非推奨になっています。

VS Code は、2020 年から 2021 年頃にそれらを組み込みの JavaScript デバッガーに置き換えました。これを使用すると、JavaScript および Typescript アプリケーションをエディターから直接デバッグできます。

デバッガーを選択するには、 実行とデバッグ アイコンをクリックし、 実行とデバッグ ボタン。選ぶ ウェブアプリ(Chrome) または Webアプリ(エッジ) からの デバッガの選択 リスト。

自動終了タグ

VS Code は、HTML タグを閉じる必要があるタイミングをすでに認識しています。

VS Code 設定の検索では、HTML、JavaScript、TypeScript の自動終了タグ オプションが表示されます。

HTML を作成している場合は、数年前に自動終了タグをインストールした可能性が高くなります。開始タグを入力すると、終了タグが自動的に追加されます。これを置き換えるために、VS Code はバージョン 1.16 で組み込みの HTML 自動終了タグを導入しました。その後、JSX の自動終了タグのネイティブ サポートも追加されました。

この機能はデフォルトでオンになっています。オフにした場合は、次の場所に進みます。 設定 > 拡張機能 そして検索してください 自動終了タグ HTML、JavaScript、TypeScript に対して有効にするか、設定します。 html.autoClosingTags、 javascript.autoClosingTags、 そして typescript.autoClosingTags に 真実 あなたの中で settings.json ファイル。

タグの自動名前変更

リンク編集により、一致する HTML タグの同期が維持されます

VS Code の設定ページには、テキスト エディターの下にリンク編集オプションが表示されます。

Auto Rename Tag も、HTML の経験がある人なら一度は使ったことがある、または聞いたことがあるはずの人気のある拡張機能です。開始タグを編集すると、終了タグの名前が変更されます。 VS Code は 2019 年に同じ機能を別の名前で導入しましたが、後に VS Code とブランド名が変更されました。 リンク編集 バージョン 1.44 (2020) で。

リンク編集機能は、プレーンな HTML に対して適切に機能します。 JSX と TSX では、サポートは TypeScript のバージョンと設定に依存するため、拡張機能をアンインストールする前に独自のプロジェクトでテストしてください。

デフォルトではオフになっていますが、次の手順で有効にできます。 設定 > 拡張機能 そして探しています リンク編集、または次の行を settings.json ファイル:

"editor.linkedEditing": true

地元の歴史

VS Code は、組み込みのローカル履歴機能を使用して古い編集を復元できます

ローカル履歴設定は、VS Code 設定のワークベンチの下に表示されます。

Local History 拡張機能は、ファイルのスナップショットを保持し、Git に依存せずに以前のバージョンを復元できるため、人気がありました。

ローカル ヒストリーは Git に代わるものではありません。最近の変更を復元するのに便利です。

VS Code は、バージョン 1.66 (2022) で独自のローカル ヒストリーを追加しました。デフォルトではオンになっています。で見つけることができます。 タイムライン エクスプローラーのサイドバーの下部にあるビューで、保存されたバージョンと現在のファイルを比較したり、ファイルを復元したりできます。無効にした場合は、次から管理できます。 設定 > ワークベンチ。

HTML 定型文

Emmet は数回のキーストロークで HTML ボイラープレートを生成できます

[Emmet]に[Emmet 言語を含める]オプションが表示されます。” data-img-url=”https://static0.howtogeekimages.com/wordpress/wp-content/uploads/wm/2026/10/emmet-include-languages-settings.jpg?q=70&fit=crop&w=825&dpr=1″ src=”https://static0.howtogeekimages.com/wordpress/wp-content/uploads/wm/2026/10/emmet-include-languages-settings.jpg?q=70&fit=crop&w=825&dpr=1″ class=”img-brightness-opt-out”/>

かつて、HTML ファイルを作成するには、ボイラープレートを手で入力するか、HTML ファイルを生成するための拡張機能をインストールする必要がありました。ただし、VS Code は、短い式から HTML と CSS を生成できる強力な略語エンジンである Emmet (2016 年頃) を導入しました。

おそらくあなたも知らずに Emmet を使ったことがあるでしょう。入力を忘れないでください ! 基本的な HTML ドキュメント構造を生成するには?それはエメットです。短い略語から複雑な構造を生成することもできます。

Emmet は、HTML ファイルに対してデフォルトで有効になっています。別の言語で使用するには、設定します 言語を含める 下 設定 > 拡張機能 > Emmet。

Gitの歴史

組み込みのソース管理とタイムラインはほぼ同じ領域をカバーします

VS Code では、ソース管理ビューとタイムライン ビューが両側に開いた状態でエディターにコードが表示されます。

Git History が人気になったのは、VS Code ユーザーが常にコマンド ラインにジャンプしなくても、Git のコミット、ブランチ、およびファイル履歴を簡単に探索できる方法が提供されたためです。

VS Code は、2 つの組み込みビューでそのほとんどをカバーするようになりました。の タイムライン ビュー (2020 年に登場) はファイルごとの履歴を表示しますが、 ソース管理グラフ (2023 年に追加) を使用すると、コミット、ブランチ、比較を探索できます。

Git History は VS Code の組み込み機能に完全に置き換えられるわけではありませんが、拡張機能を廃止するほど十分にワークフローをカバーしているかどうかを確認してください。

セットアップをクリーンアップする必要があるかもしれません

すべてを一度にアンインストールする必要はありません。 1 つの拡張機能を削除し、その組み込みの置き換えを試して、次の拡張機能に進みます。何かが動作しない場合は、いつでも再インストールできます。 VS Code は機能の追加と改善を続けているため、別の拡張機能に手を伸ばす前に、その組み込み機能を参照する価値があります。

このテーマについてさらに詳しく知りたい方は以下をご覧ください

公式情報はこちら

関連記事

前の投稿
これらの Garmin フォアランナーは 10 月のプライムデー以降もセール中です
次の投稿
10 月のプライムデー以降もアジャスタブル ダンベルのベストセールはまだ続く

関連記事