Web 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)

この記事では、Web 開発に最適な VSCode プラグインを 22 個紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#22 Visual Studio Code プラグインの共有

1. デバッガークロムの場合

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://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

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

注... 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

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

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

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

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-ペアカラーライザー

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

6. タグの自動名前変更

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-タグの名前変更

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

7.クオッカ

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

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

8. パス Intellisense

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

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

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

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

##me私が嫌いなことの 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 ユーザーですが、Sublime に切り替えるつもりはありません。 VSコード？この拡張機能を使用すると、すべてのショートカットを 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-アイコン

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.VIMM

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

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

原著者: James Quick

原アドレス: https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web -開発

プログラミング関連の知識については、

プログラミング教育をご覧ください。 ！

以上がWeb 開発速度を向上させる 22 個の VSCode プラグイン (収集する価値あり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。