Web 開発に適した 22 の VSCode プラグイン (共有)

この記事では、開発者が開発効率を向上させるのに役立つ、Web 開発における 22 個の優れた VSCode プラグインを紹介します。

[推奨学習: 「vscode チュートリアル 」]

1. chrome 用デバッガー

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

信じてください、JavaScript をデバッグしてくださいconsole.log() だけを書かないでください (これが最も一般的な方法ですが)。 Chrome には、デバッグ エクスペリエンスを向上させるためのいくつかの機能が組み込まれています。このプラグインを使用すると、VS Code でこれらのデバッグ機能のすべて (またはほぼすべて) を使用できるようになります。

さらに詳しく知りたい場合は、

Chrome および Visual Studio Code での JavaScript のデバッグを参照してください。

https://scotch.io/tutorials /debugging-javascript-in-google-chrome-and-visual-studio-code

2.JavaScript (ES6) コード スニペット

https://scotch.io/tutorials/debugging-javascript-in-google-chrome-and-visual-studio-code

# Snippets プラグインが気に入っています。同じコードを何度も入力する必要はないと思います。このプラグインは、一般的な (ES6) JavaScript コード スニペットを提供します。

注... es6javascript 機能を使用していない場合は、すぐに使用してください。

3. ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

より良いコードを書きたいですか?チーム全体が一貫したフォーマットを使用する必要がありますか? ESLintをインストールします。このプラグインは、コードを自動的にフォーマットし、エラーや警告を「警告」するように構成できます。適切な構成を使用する VS Code では、これらのヒントを表示できます。

4. ライブサーバー

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

コード エディターで変更を加え、ブラウザに切り替え、更新して変更を確認します。これは開発者にとって無限ループですが、変更を加えたときにブラウザが自動的に更新されたらどうでしょうか?ここでライブサーバーが登場します。

また、アプリケーションをローカル サーバー上で実行します。いくつかのことは、アプリケーションがサーバー上で実行されているときにのみテストできるため、それは利点です。

5. ブラケット ペア Colorizo​​r

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

ブラケットは開発者の生存を妨げる災難です。ネストされたコードが多数ある場合、どの括弧が互いに一致するかを判断することはほとんど不可能です。ブラケット ペア Colorizo​​r は (ご想像のとおり) ブラケットの色を一致させて、コードを読みやすくします。信じてください、あなたはそれを望んでいます！

6. タグの自動名前変更

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

HTML 内の要素の名前を変更する必要がありますか?さて、「タグの自動名前変更」を使用すると、開始タグまたは終了タグの名前を変更するだけで、他のタグの名前が自動的に変更されます。シンプルだけど効果的！

#7.クオッカ

##https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

#JavaScript を簡単にテストできる場所が必要ですか?以前は Chrome でコンソールを開いてコードを入力していましたが、欠点はたくさんあります。 Quokka は、VS Code で JavaScript (および TypeScript) のスクラッチパッドを提供します。これは、お気に入りのエディターでコードの一部をテストできることを意味します。

8. パス インテリセンス

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

#大規模なプロジェクトでは、特定のファイル名とそのファイルが配置されているディレクトリを覚えるのが面倒になることがあります。このプラグインは賢いヒントを提供します。パスを引用符で囲んで入力し始めると、ディレクトリ名とファイル名のスマート プロンプトが表示されます。これにより、ファイルの閲覧に多くの時間を費やすことがなくなります :)

9. プロジェクト マネージャー

##https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

私が嫌いなことの 1 つは、VS Code でプロジェクトを切り替えることです。毎回ファイルエクスプローラーを開いてコンピューター上の項目を見つける必要があります。しかし、これはプロジェクト マネージャーのアプリケーションによって変わります。このプラグインを使用すると、プロジェクトのサイド メニューに追加のメニューを開くことができます。プロジェクトをすばやく切り替えたり、お気に入りを保存したり、ファイル システムから Git プロジェクトを自動的に検出したりできます。

複数の異なるプロジェクトを開発する場合、これは整理整頓を維持し、効率を高めるための優れた方法です。

10. エディター構成

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

Editor Config は、主要なテキスト エディタ/IDE でサポートされているいくつかのコーディング スタイルの標準です。その仕組みは次のとおりです。構成ファイルは、エディターがサポートするリポジトリに保存します。この場合、これらのプロファイルを尊重するように VS Code に拡張機能を追加する必要があります。セットアップは非常に簡単で、チームプロジェクトに最適です。

11. サブライム テキスト キーマップ

https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings

あなたは熱心な Sublime ユーザーですが、VS Code に切り替えるつもりはありませんか?この拡張機能を使用すると、すべてのショートカットを Sublime のショートカットに一致するように変更することで、切り替えをシームレスに行うことができます。では、切り替えを行わない理由は何でしょうか?

#12. ブラウザ プレビュー

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

#私は Live Server 拡張機能 (前述) が気に入っていますが、これは利便性の点でさらに一歩進んでいます。 VS Code 内でライブ リロード プレビューが表示されます。小さな変化を確認するためにブラウザを見る必要はもうありません。

13. Git レンズ

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

git プラグインはたくさんありますが、そのうちの 1 つは最も強力で、最も多くの機能を備えています。警告、行とファイルの履歴、コミット検索などに関する情報が得られます。 Git ワークフローに関するサポートが必要な場合は、このプラグインから始めてください。

14.ポラコード

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

ブログや Twitter で見かける美しいコードのスクリーンショットをご存知ですか?おそらく、それらは Polacode から来ていると思われます。使い方はとても簡単です。コードの一部をクリップボードにコピーし、拡張機能を開いてコードを貼り付け、[画像を保存] をクリックします。

15.Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

#コードのフォーマットに時間を費やす必要はありません...これで完了です。前に、書式設定と検査を提供する ESLint について説明しました。 lint チェックが必要ない場合は、Prettier を使用してください。セットアップは非常に簡単で、保存時にコードを自動的にフォーマットするように構成できます。

16. より良いコメント

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

このプラグインは、さまざまな種類のコメントに色を付けて、異なる意味を与え、コードの残りの部分より目立たせます。これをヒントに使ってみました。やり残した仕事があることを知らせる大きなオレンジ色のプロンプトを無視するのは困難です。

質問、アラート、ハイライトの色コードもあります。独自のカスタムを追加することもできます。

17. Git リンク

https://marketplace.visualstudio.com/items?itemName=qezhu.gitlink

Github で作業中のファイルを表示したい場合は、このプラグインが最適です。インストールしたら、ファイルを右クリックするだけで、Github でファイルを開くオプションが表示されます。 Git Lens プラグインを使用しない場合、このプラグインは履歴やブランチのバージョンなどを確認するのに最適です。

18. VS Code アイコン

https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons

VS Code でアイコンをカスタマイズできることをご存知ですか?設定を見ると、「ファイルアイコンのテーマ」のオプションが表示されます。そこから、プリインストールされたアイコンから選択するか、アイコン パックをインストールできます。このプラグインはとてもかわいいアイコン パックを提供し、1,100 万人が使用しています。

19. マテリアル アイコンのテーマ

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

あなたは Google マテリアル デザインのファンですか?さて、この「マテリアルテーマ」アイコンパックをチェックしてください。何百もの異なるアイコンがあり、見た目も素晴らしいです。

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

コード内で完璧な位置合わせを好む人には、Better Align が必要です。複数の変数宣言、末尾のコメント、コード スニペットなどを整列させることができます。このプラグインの素晴らしさを知るには、インストールして試してみる以外に方法はありません。

22.VIM

https://marketplace.visualstudio.com/items?itemName=vscodevim.vim

あなたは VIM の詳しいユーザーですか?そうであれば、おめでとうございます。すべての VIM トリックを VS Code で直接使用できるようになります。私は個人的にこれが得意ではありませんが、VIM の可能性を最大限に活用してより多くの機能を提供すると、どれほど生産性が高くなるかは知っています。

元のアドレス: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development
元の著者: James Quick

プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！

以上がWeb 開発に適した 22 の VSCode プラグイン (共有)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。