vim、notepad、sublime text3、atom... など、フロントエンド IDE はたくさんありますが、地球上で誰が最強の IDE であるかは誰もが知っているので、当然これ以上言う必要はありません。
私は VSCode を 7 年以上使用しているユーザーです。VSCode が正式にリリースされた最初の年から使用しています。これまで、私は徹底的な上級ユーザーであり、生産性の向上に貢献しています。マニアック。
この記事では、私が長年 VSCode を使用する過程で使用してきた優れたプラグインを主に紹介します。 [推奨学習: "vscode 入門チュートリアル "]
裸の VSCode は裸の Obsidian と同じように使いにくいと不満を言う人がたくさんいます。その本質は拡張にあります (中国人はこう呼ぶのが好きです)それはプラグインであり、以下ではすべてをプラグインと呼びます）。適切にセットアップされた VSCode は、生産性を高めるための成果物であるスイス アーミー ナイフに他なりません。
さて、始めましょう!
魚に触れる
##ナゲット
最初のものはもちろんそれです。
ナゲットの上級プレイヤーとして、VSCode でナゲッツをプレイする方法さえ知らないのに、どうやって自分がフロントエンド サークルの一員であると言える勇気が持てるでしょうか?
これはダークテーマです:
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/614/559/926/166191461384516%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191461384516[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
これはライトテーマです:
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/965/993/429/166191462326572%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191462326572[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
これは記事ページ：
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/121/575/107/166191463252546%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191463252546[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
チャットモードや禅モードなどの機能もありますので、ぜひ体験してみてください！
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/997/984/878/166191464171118%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191464171118[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
リクク
Likou アカウントにログインして、質問を読んで、VSCode で直接解決策を書くことができます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/463/514/225/1661914659981149.gif "1661914659981149.gif")
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
小八王
VSCode でゲームをプレイしたいですか?できるよ！
しかし、私はゲームはしませんし、勤務時間中にゲームをすることはお勧めしません。ナゲッツをブラッシングしたり、ハードにダンクしたりしても問題ありません。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/202/166/267/1661914672794651.gif "1661914672794651.gif")
#ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
コード エクスペリエンス クラス
##copilot
コード プロンプト アーティファクト、私はそれを使用しています以来、私はコードを書くときに基本的に手を使いません。
ほら、f を入力すると、関数名、パラメータ、パラメータの型など、私がやりたいことをすべて考え出してくれました。
欠点は、時々不格好で、料金がかかることです。
ダウンロード アドレス: ![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/894/670/143/166191550165271%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191550165271[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
marketplace.visualstudio.com/items?itemN…
Tabnine
タブナインとコパイロットの機能は非常に似ており、コードの自動完成を支援する AI に基づいています。
ただし、tabnineはcopilotより少し高価ですが、比較的多機能です。
と副操縦士から選べますが、私は両方購入しました。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
##turbo-console-log
JS を書く学生に聞きたいのですが、私たちが最も多く書いたコードは何ですか?そうすれば、console.log は間違いなくリストに含まれます。
このプラグインを使用すると、出力する変数にカーソルを移動し、Ctrl オプション l を押すだけで、次の行に console.log が自動的に入力され、ファイル名、行番号、変数名が表示されます。 、などなど、情報は全部持って行きましたが便利ですよね？
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/820/222/381/166191551079906%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191551079906[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
indent-rainbow
レインボー インデントは、コードの入れ子構造がより複雑な場合、ロックを確認するのに役立ちます。各インデントには、異なる虹色が交互に表示されます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/916/507/665/166191552085689%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191552085689[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
indent-rainbow-パレット
虹色のインデントされたグラデーション カラー パレット。虹のインデントを使用しているが、他のグラデーションカラーも使用したい場合は、このプラグインが必要です。現在 16 色のグラデーションカラーをサポートしています。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/754/859/117/166191553799665%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191553799665[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
highlight-matching- tag
タグが強調表示されます。複雑な DOM 構造がある場合、このプラグインを使用して終了タグを強調表示することで、低レベルの間違いを防ぐことができます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/738/406/625/166191554827889%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191554827889[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
vscode-colorize
カラーハイライト。
色変数を背景色で塗りつぶして強調表示します。
CSS をサポートします:
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/406/415/382/166191587689008%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191587689008[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
JavaScript もサポートします:
![6-[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/142/667/457/166191587228520%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191587228520[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
すべてのファイル タイプもサポートします。設定するだけで済みます。
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
vscode-todo-highlight
To Do 項目が強調表示されています。
コードを書いていると、やるべきことや修正すべきバグが見つかることがよくありますが、今すぐ完成させる時間がないので、コメントを書きます。これらのコメントを無視しにくくするために、このプラグインを使用できます。
デフォルトでは、TODO キーワードと FIXME キーワードが強調表示されます。
他のキーワードを設定したり、ハイライトの色を設定したりすることもできます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/209/824/362/166191588878983%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191588878983[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
better-comments
コメントの強調表示。
このプラグインは、より人道的なコメントをコードに挿入するのに役立ちます。
TODO と FIXME に加えて、コメントのいくつかのタイプを定義することもできます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/805/677/195/166191589935204%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191589935204[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
#他のタイプのコメントもカスタマイズできます。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
vscode-import-cost
インポートされたパッケージのサイズを表示します。
JavaScript プロジェクトを作成するとき、多くのライブラリをインポートします。
このプラグインは、インポートされたパッケージの量を確認するのに役立ちます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/998/390/926/1661915909982580.png "1661915909982580.png")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
自動終了- tag
タグを自動的に閉じます。
<div> と入力すると、次のかっこが自動的に追加されます。 <p>非常にシンプルな機能ですが、必需品です！ </p>
<p><img src="https://img.php.cn/upload/image/191/846/797/166191622632230%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84!" title="166191622632230[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!" alt="[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!"></p>
<p>ダウンロード アドレス: <a href="https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">code-spell- checker</span></strong></p>
<p>#スペル エラー チェック。 </p>
<p>コードを書くときに、単語のスペルが間違っていることがあります。このプラグインは、スペルが間違っている可能性のある単語をチェックし、波線のリマインダーを提供します。 </p>
<p>キャメルケース命名法をサポートしています。 </p>
<p><img src="https://img.php.cn/upload/image/744/455/624/166191670658301%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84!" title="166191670658301[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!" alt="1[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!"></p>
<p>ダウンロード アドレス: <a href="https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…">marketplace.visualstudio.com/items?itemN…</a></p>
<p><strong><span style="font-size: 16px;">path-intellisense</span></strong></p>#インテリジェントなパス認識により、ファイル名を自動的に追加できます。 <p></p>
<p><img src="https://img.php.cn/upload/image/345/662/845/166191673873924%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84!" title="166191673873924[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!" alt="1[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!"></p>ダウンロード アドレス: <p>marketplace.visualstudio.com/items?itemN…<a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense" target="_blank" textvalue="marketplace.visualstudio.com/items?itemN…"></a></p>
<p><strong>引用を切り替え<span style="font-size: 16px;"></span></strong></p>JavaScript 文字列は、一重引用符、二重引用符、および角度の 3 つの形式をサポートできます。文字列を結合する場合、元の一重引用符または二重引用符を変更する必要がある場合があります。ホーンの場合。このプラグインを使用するには、ショートカット キー <p>cmd '<code> を押すだけです。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/195/689/298/1661916745527778.gif "1661916745527778.gif")
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
テンプレート文字列コンバータ#JavaScript テンプレート文字列を自動的に変換できます。
ToggleQuotes との違いは、自動的に完了することです。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
IntelliSense for CSS クラスHTML#クラス内の名前のオートコンプリート スマート ヒント。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
Tailwind CSS IntelliSensetailwind CSS 自動補完のスマート ヒント。
tailwind CSS を使用する場合は、HTML 内の CSS クラス名の IntelliSense を無効にすることができます。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
npm Intellisenseこのプラグ-in これは、インポートされるモジュールをインテリジェントに検出するのに役立ちます。
import と入力すると自動的に完了します。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
change-case ダッシュ、下線、すべて大文字など、変数の命名規則を変更したい場合があります。
このプラグインは変数名の変更に役立ちます。
変数名を変更するだけでは意味がないようです。ただし、その利点は、同時に多くの変数名を変更できることです。
![1[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/835/837/885/166191688314982%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191688314982[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ネストされたコメント
ネストされたコメントは常に問題です。
ネストされたコメントは最初のコメントの先頭と結合されて有効なコメントが形成され、その後の部分は無視されるためです。
![1[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/107/523/302/166191700220068%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191700220068[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
このプラグインは、ネストされたコメントの文字を変換し、外側のコメントを削除するときにネストされたコメントを復元するのに役立ちます。
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
タグの名前を自動変更
タグの名前を自動的に変更します。前後に変更できます。同時に変更されます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/958/795/146/1661916951506888.gif "1661916951506888.gif")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ES7 React/Redux /React-Native スニペット
このプラグインは、ES7/React/Redux/React-Native およびその他のコード スニペットを提供します。
テンプレートコードを素早く作成でき、開発効率が向上します。
たとえば、React の useState Hook を使用すると、setXXX のキャメルケース命名メソッドを自動的に変換し、カーソル位置に自動的にジャンプできます。
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ESLint
このプラグインは ESLint を VSCode に統合し、このプラグインを通じてワークスペースのコードを確認できます。
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Prettier
非常にクラシックなプラグ-in を使用すると、このプラグインはさまざまなファイル コンテンツをフォーマットできます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/684/117/510/1661917024972973.gif "1661917024972973.gif")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Glean
複雑な JSX を個別のコンポーネントまたはファイルに抽出できるため、リファクタリングの際に非常に役立ちます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/875/560/356/1661917044791891.gif "1661917044791891.gif")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
htmltagwrap
このプラグインは、特定の DOM タグをラップする必要がある場合に非常に役立ちます。
DOM タグを選択し、オプション w を押したままにして、外側のレイヤーにタグを作成できます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/271/956/565/166191705574005%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191705574005[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
バージョン レンズ
プロジェクトが依存する npm パッケージの最新バージョンを表示し、最新バージョンにアップグレードできます。
![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/198/683/647/166191706438233%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191706438233[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
##ハングリー削除
このプラグインを使用すると、ワンクリックで複数の空行を削除できます。 Option Delete キーを押し続けると、複数の空白行を削除できます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/343/161/498/166191726443903%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191726443903[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
JSON をコードとして貼り付ける
JSON の一部をコピーし、この JSON の一部に基づいて対応する JSON 構造を生成したい場合は、このプラグインを使用できます。 TypeScript、Python、Go、Java など、多くのプログラミング言語をサポートしています。
![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/992/801/944/166191727385914%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191727385914[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Dot Env
フロントエンド プロジェクトであってもバックエンド プロジェクトであっても、ほとんどのプロジェクトでは .env ファイルを使用して環境変数を保存します。 このプラグインは .env ファイルを強調表示できます。
![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/559/196/165/166191728146707%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191728146707[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
#ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
テーマ カテゴリ
##ドラキュラ公式ドラキュラの公式テーマ。古典的なテーマで私のお気に入りです。
ダウンロード アドレス: ![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/792/903/739/166191729093262%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191729093262[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
marketplace.visualstudio.com/items?itemN…
マテリアル テーママテリアル テーマは、コードの見た目をクールにするマテリアル スタイル テーマを提供します。
ダウンロード アドレス: ![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/558/220/357/166191729850170%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191729850170[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
marketplace.visualstudio.com/items?itemN…
One Dark ProAtom ユーザーまたは Atom テーマが好きな開発者は、このテーマ プラグインを試すことができます。
ダウンロード アドレス: ![2[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/177/412/650/166191730674928%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191730674928[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
marketplace.visualstudio.com/items?itemN…
vscode-icons#フォルダーを参照するときに、ファイルの前にアイコンがあると、ファイルを区別するのに非常に便利です。 VSCode アイコン このプラグインはまさにそれを行うためにここにあります。 VSCode のデフォルトのディレクトリ構造は次のようになります:
VSCode アイコンを使用すると、アイコンは次のようになります: ![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/962/395/250/166191731934724%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191731934724[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
#ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/189/102/589/1661917331718903.gif "1661917331718903.gif")
##file-icons
別のワンアイコンテーマプラグイン。
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
マテリアル アイコン テーマ
ほぼ最も包括的なアイコンテーマプラグインです。
非常に多くの種類のファイルをサポート:
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/231/502/560/166191734638345%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191734638345[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
非常に多くの種類のフォルダーをサポート:
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/173/589/365/166191735599786%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191735599786[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
#ツール カテゴリ
#todo-tree
todo ツリーは、TODO および FIXME コメントを通じてプロジェクトを管理できます。
注釈付きファイルをすぐに表示できます。
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/305/551/288/166191736298137%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191736298137[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
vscode-peacock#複数の VSCode ウィンドウを同時に実行する場合、各ウィンドウに異なる色を設定して、異なるプロジェクトを区別できます。 デフォルトでサポートされる色は、Angular red、Microsoft blue、JS yellow、mandalorian blue、Node green、React blue などです。
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/834/669/380/166191746092826%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191746092826[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/317/971/640/166191746766064%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191746766064[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
##Quokka.js
JS または TS コードの特定の部分をすばやく検証したい場合は、このプラグインを使用できます。 コードのロジックをより適切に検証するための遊び場を提供します。
ダウンロード リンク:
marketplace.visualstudio.com/items?itemN…
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/285/618/546/166191748395604%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191748395604[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
rest-client
API をテストするには、重量のある PostMan や軽量のカールなど、さまざまな方法があります。しかし、VSCode で使用するのにそれほど便利なものはありません。 REST クライアントは、VSCode で API を簡単にテストできる優れたプラグインです。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/713/818/502/166191749182181%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191749182181[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
VS Code の EditorConfig
プロジェクトが複数のエディター ツールを使用して開発されている場合、コード スタイルを統一したい場合は、異なるツールの設定ファイルを設定する必要があります。 このツールを使用すると、.editorconfig を 1 つ記述するだけで、これらのルールをすべてのエディターに適用できます。 ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Git Lens
VSCode ですがGit 機能が組み込まれていますが、十分強力ではありません。 Git Lens は Git の機能を追加します。コードの各行でコミット情報を表示したり、さまざまなコミットの相違点を比較したり、その他の便利な Git 機能を追加したりできます。
ダウンロード アドレス:
marketplace.visualstudio.com/items?itemN…
![3[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/688/689/922/166191749821408%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191749821408[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
GitHub で開く#
Github ではプロジェクト、ファイル、アクション、PR などをすぐに開くことができます。
![[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/553/306/282/166191750572398%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191750572398[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ブラウザで開く
#ブラウザで HTML ファイルをすばやく開くことをサポートします。 HTML ファイルを右クリックすると、メニューに 2 つのオプションが表示されます。または、対応するショートカット キーを使用します。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/730/311/614/166191751310985%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191751310985[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ライブ サーバー
HTML のコンテンツを変更し、ブラウザとコードを一致させるには、このプラグインが必要です。 サーバーをローカルで起動し、ファイルの変更を監視し、ブラウザを更新します。
HTML ファイルを右クリックすると、メニューに 2 つのオプションが表示されます。または、対応するショートカット キーを使用します。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/609/708/338/166191752050181%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191752050181[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ライブ プレビュー
VSCode で HTML をリアルタイムでプレビューできます。 ただし、React や Angular などのフレームワークで開発されたアプリケーションはサポートされていません。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/572/772/120/166191753225798%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191753225798[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
プロジェクト マネージャー
複数のプロジェクトがある場合、このプラグインを通じてプロジェクトを管理し、プロジェクト、タグ、その他の機能をすばやく切り替えることができます。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/579/109/358/166191754023255%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191754023255[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
ライブ シェア
リアルタイムの共同編集やデバッグのためにコードを他の人と共有したいですか?このプラグインは、任意のプログラミング言語または任意の種類のプロジェクトで開発されたプロジェクトを他のユーザーと共有できます。相手は追加の環境や SDK をインストールすることなく、あなたの環境に直接コードを書くことができます。 Web 上で直接共同作業や編集を行うこともできます。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/311/148/955/166191754779493%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191754779493[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Markdown PDF
名前はマークダウン PDF ですが、実際にはマークダウンはさまざまな形式のファイルにエクスポートできます。 非常に多くのエクスポート形式をサポートしています。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/561/305/504/166191755549105%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191755549105[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
Markdown プレビュー Github スタイル
Markdown ファイルを Github スタイルでプレビューします。
![4[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!](https://img.php.cn/upload/image/530/540/707/166191756421376%5B%E6%95%B4%E7%90%86%E3%81%A8%E5%85%B1%E6%9C%89%5D%2050%20%E4%BB%A5%E4%B8%8A%E3%81%AE%E5%AE%9F%E7%94%A8%E7%9A%84%E3%81%AA%20VSCode%20%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%80%81%E3%81%9C%E3%81%B2%E9%9B%86%E3%82%81%E3%81%A6%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%8F%E3%81%A0%E3%81%95%E3%81%84! "166191756421376[整理と共有] 50 以上の実用的な VSCode プラグイン、ぜひ集めて使用してください!")
ダウンロード アドレス: marketplace.visualstudio.com/items?itemN…
概要
これまでたくさん紹介しましたが、最速、最も安定した、最適な IDE を作成してください。 この記事が役に立った場合は、「いいね！」をお願いします。
より実用的で価値のある VSCode プラグインがある場合は、コメント領域にメッセージを残してください。
VSCode の詳細については、vscode チュートリアル をご覧ください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
