この記事では、Web 開発に最適な VSCode プラグインを 22 個紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
#22 Visual Studio Code プラグインの共有
1. デバッガークロムの場合
https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
Chrome および Visual Studio Code での JavaScript のデバッグをご覧ください。アドレス: https://scotch.io /tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code
2.JavaScript (ES6) コード スニペット
https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets
 "161793779037192Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
注... es6javascript 機能を使用していない場合は、すぐに使用してください。
3. ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint#より良いコードを書きたいですか?チーム全体が一貫したフォーマットを使用する必要がありますか? ESLintをインストールします。このプラグインは、コードを自動的にフォーマットし、エラーや警告を「警告」するように構成できます。適切な構成を使用する VS Code では、これらのヒントを表示できます。
vscode チュートリアル
」4. ライブ サーバーhttps://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
 "161793780043890Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
5. ブラケット ペア Colorizor
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-ペアカラーライザー
##ブラケットは開発者の生存を妨げる災難です。ネストされたコードが多数ある場合、どの括弧が互いに一致するかを判断することはほとんど不可能です。ブラケット ペア Colorizor は (ご想像のとおり) ブラケットの色を一致させて、コードを読みやすくします。信じてください、あなたはそれを望んでいます！
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-タグの名前変更
HTML 内の要素の名前を変更する必要がありますか?さて、「タグの自動名前変更」を使用すると、開始タグまたは終了タグの名前を変更するだけで、他のタグの名前が自動的に変更されます。シンプルだけど効果的！
7.クオッカ
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
8. パス Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path -intellisense
 "161793782456659Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
9. プロジェクト マネージャー
https://marketplace .visualstudio.com/items?itemName=alefragnani.project-manager##me私が嫌いなことの 1 つは、VS Code でプロジェクトを切り替えることです。毎回ファイルエクスプローラーを開いてコンピューター上の項目を見つける必要があります。しかし、これはプロジェクト マネージャーのアプリケーションによって変わります。このプラグインを使用すると、プロジェクトのサイド メニューに追加のメニューを開くことができます。プロジェクトをすばやく切り替えたり、お気に入りを保存したり、ファイル システムから Git プロジェクトを自動的に検出したりできます。
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Editor Config は、主要なテキスト エディタで使用されるいくつかのコーディング スタイルの標準です。 / は IDE でサポートされています。その仕組みは次のとおりです。構成ファイルは、エディターがサポートするリポジトリに保存します。この場合、これらのプロファイルを尊重するように VS Code に拡張機能を追加する必要があります。セットアップは非常に簡単で、チームプロジェクトに最適です。
https://marketplace.visualstudio.com/items?itemName=ms-vscode。 sublime-keybindings
12. ブラウザ プレビュー
https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser -preview
##Live Server 拡張機能拡張機能 (前述) が気に入っていますが、この拡張機能は利便性の点でさらに一歩前進しています。 VS Code 内でライブ リロード プレビューが表示されます。小さな変化を確認するためにブラウザを見る必要はもうありません。
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens 14.ポラコード 15.Prettier 16. より良いコメント ##このプラグインは、さまざまなタイプのコメントを異なる色でマークします。それらは異なる意味を持ち、コードの残りの部分より目立ちます。これをヒントに使ってみました。やり残した仕事があることを知らせる大きなオレンジ色のプロンプトを無視するのは困難です。 https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink Github で作業中のファイルを見たい場合は、このプラグインあなたにぴったりです。インストールしたら、ファイルを右クリックするだけで、Github でファイルを開くオプションが表示されます。 Git Lens プラグインを使用しない場合、このプラグインは履歴やブランチのバージョンなどを確認するのに最適です。 https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-アイコン VS Code でアイコンをカスタマイズできることをご存知ですか?設定を見ると、「ファイルアイコンのテーマ」のオプションが表示されます。そこから、プリインストールされたアイコンから選択するか、アイコン パックをインストールできます。このプラグインはとてもかわいいアイコン パックを提供し、1,100 万人が使用しています。 https://marketplace.visualstudio.com/items?itemName=PKief.material- icon-theme 20. 設定の同期 https://marketplace.visualstudio.com/items?itemName=Shan.code-settings -sync 開発者 (私自身も含めて) は、開発環境、特にテキストのカスタマイズに多くの時間を費やします。編集者。 「Settings Sync」プラグインを使用すると、設定を Github に保存できます。その後、単一のコマンドを使用して、新しいバージョンの VS Code にロードできます。 21. より良い配置 https://marketplace.visualstudio.com/items?itemName=wwm.better-align 22.VIMM プログラミング教育をご覧ください。 ！ https://marketplace.visualstudio.com/items?itemName=pnp.polacode
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
#コードのフォーマットに時間を費やす必要はありません...これで完了です。前に、書式設定と検査を提供する ESLint について説明しました。 lint チェックが必要ない場合は、Prettier を使用してください。セットアップは非常に簡単で、保存時にコードを自動的にフォーマットするように構成できます。
https://marketplace.visualstudio.com/items?itemName=vscodevim.vim
原著者: James Quick 原アドレス: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web -開発
プログラミング関連の知識については、
以上がWeb 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
 "161793778456716Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793779616632Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793780750964Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793781990939Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793783059681Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793783851975Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793787079040Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793787520363Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793788146855Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793789323951Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793790015151Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793790675036Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793791359646Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793791953254Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "16179379262851Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
 "161793793154743Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)")
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
