効率的な開発のために必ずインストールすべき 10 個の VSCode プラグイン

この記事では、ソフトウェア開発の効率を大幅に向上させるために、フロントエンド開発で最も人気のある開発ツールである VSCode の必須インストール開発プラグイン 10 個を紹介します。

VSCode (Visual Studio Code) は、Microsoft によって開発された無料のオープンソースのクロスプラットフォーム テキスト (コード) エディターです。フロントエンド開発ツール。

公式 Web サイトは次のとおりです: https://code.visualstudio.com/

10 の必須インストール エディター プラグイン

ビデオ チュートリアルの補足アップデートに相当するもので、ここではすべての人がインストールする必要がある 10 個の VSCode エディター プラグインを紹介します。エディターの基本的な使用方法とプラグインのインストールについては、上記のビデオ チュートリアルを直接参照できます。

1. ファイル アイコン vscode-icons

プラグイン名: vscode-icons
プラグイン アドレス: https://marketplace.visualstudio.com /items?itemName =robertohuertasm.vscode-icons

まず第一に、コーディング時に効率的で使いやすいインターフェイスを実現するには、いくつかの不明瞭なコンポーネントを美しくする必要があります。

vscode-icons プラグインは、さまざまなファイル タイプのファイルの前にあるアイコンの表示を最適化できるため、長いファイル リストを表示するときに、ファイルのアイコンから直接ファイルをすぐに知ることができます。 . ファイルの接尾辞を見るのではなく、入力します。

#2. ダーク テーマ One Dark Pro

プラグイン名: One Dark Pro

プラグイン アドレス: https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.material-theme

長時間コーディングを行った後、暗い色のコーディング環境では目が疲れる可能性が低くなります。より集中力を高めます。

One Dark Pro プラグインをインストールすると、ワンクリックで VSCode エディターの色を暗い色に調整できるようになり、コーディングがより快適になります。

3. コード美化 Beautify

プラグイン名: Beautify

プラグイン アドレス: https:// marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify プラグインは、コードをすばやくフォーマットし、コードを作成するときに乱雑なコード構造を即座に非常に規則的なものにすることができます。これは、コードにこだわる人にとって必須の機能です。 -強迫性障害、より良い コード形式は、後でメンテナンスしたり、他の人が読んだりするのに非常に便利です。

プラグインは多くの言語をサポートしており、基本的に現在のすべての言語をカバーしており、コードのフォーマット構造をカスタマイズすることもできます。

4. コードチェックツール ESLint

プラグイン名: ESLint

プラグインアドレス: https:/ /marketplace.visualstudio .com/items?itemName=dbaeumer.vscode-eslint

ESLint は文法ルールとコード スタイルのチェック ツールで、正しい文法と統一されたスタイルのコードが記述されていることを確認するために使用できます。 。

VSCodeのESLintプラグインは、ESLintの機能を直接統合したもので、インストール後すぐに使用でき、コード形式や仕様の詳細もカスタマイズでき、チームで同じ設定ファイルを共有できるため、チームの全員が作成したコードは同じコード仕様を使用でき、コードがチェックインされる前に全員が独自のコード仕様チェックを完了できます。

5. 必須のデバッグ ツール Debugger for Chrome

プラグイン名: Debugger for Chrome

プラグイン アドレス: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome

このツールはフロントエンド開発に必須であり、開発とデバッグのモードを大きく変えます。 。

これまで、フロントエンドのデバッグは主に JavaScript のデバッグでした。Chrome コンソールで対応するコード部分を見つけてブレークポイントを追加し、Chrome コンソールでデバッグをステップ実行して値を表示する必要がありました。変化します。

Debugger for Chrome を使用した後、Chrome でコードが実行されているときに、VSCode にブレークポイントを直接追加できます。[実行] をクリックすると、VSCode が表示されるまで Chrome のページが実行され続けます。ブレークポイントを追加した後、 VSCode で直接シングルステップ デバッグを実行できます。

Chrome デバッグ ツールの使用については、Knowledge Planet で共有したオリジナルのビデオ チュートリアル「50 Essential Chrome Developer Tools Tips」を参照してください。このコースでは、フロントエンド開発に必須のブラウザーが共有されています。デバッグ ツール Chrome デベロッパー ツールを使用する際の 50 の重要な使用法とデバッグ スキル。これらの知識は、資格のあるフロントエンド開発者になるために不可欠なスキルです。

6. ユニバーサル言語実行環境コードランナー

プラグイン名: Code Runner
プラグインのアドレス: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

学習する必要がある場合、または学習する必要がある場合さまざまな開発言語に公開されている場合、Code Runner プラグインを使用すると、さまざまな言語の開発環境をセットアップすることなく、このプラグインを通じて対応する言語のコードを直接実行できます。さまざまな開発言語の学習やテストに非常に適しています。 。

サポートされる言語: C、C、Java、JavaScript、PHP、Python、Perl、Perl 6、Ruby、Go、Lua、Groovy、PowerShell、BAT/CMD、BASH/SH、F# Script、 F# (.NET Core)、C# スクリプト、C# (.NET Core)、VBScript、TypeScript、CoffeeScript、Scala、Swift、Julia、Crystal、OCaml スクリプト、R、AppleScript、Elixir、Visual Basic .NET、Clojure、Haxe、Objective - C、Rust、Racket、AutoHotkey、AutoIt、Kotlin、Dart、Free Pascal、Haskell、Nim、D、およびいくつかのカスタム コマンド。

#機能

● 現在アクティブなテキスト エディターからコード ファイルを実行します

#● ファイル エクスプローラーのコンテキスト メニューからコード ファイルを実行します

● 選択したコード セグメントをテキスト エディタで実行します。

##● Shebang ごとにコードを実行します。

##● ファイル名 glob ごとにコードを実行します。

● カスタム コマンドを実行します

● コードの実行を停止します

##● 出力ウィンドウで出力を表示します

##● デフォルト言語を実行に設定します

##● 実行言語を選択します

● 統合ターミナルでコードを実行することで REPL をサポートします

7、クイック コメント Document This

プラグイン名: Document This

Plug -in アドレス: https://marketplace.visualstudio.com/items?itemName=joelday.docthis

優れたパフォーマンスと標準化された形式に加えて、優れたコードも不可欠であり、コメントも不可欠です。特に JavaScript などの言語の場合、アノテーション メソッドの標準セットになります。 ドキュメント これは、コメントをすばやく生成するのに役立ちます。たとえば、一部の関数のコメントは、パラメータの定義を抽出するのにも役立ちます。これは、標準化されたコードを作成するために不可欠なツールです。

8. HTML 内の CSS クラス名用 IntelliSense

プラグイン名: HTML 内の CSS クラス名用 IntelliSenseプラグイン アドレス: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

HTML で定義されたスタイル名を呼び出す場合、頻繁にHTML ファイルと CSS ファイルを切り替える 前後に切り替えて、定義した CSS クラス名を表示します。 IntelliSense for CSS class names in HTML プラグインを使用すると、HTML 内の必要な場所で CSS クラス名を呼び出すことができ、プラグインは定義された CSS クラス名の入力を求めるプロンプトをインテリジェントに表示します。 。

機能

● ワークスペース内で見つかる CSS クラス定義 (CSS ファイルまたは"「言語モード」セクションにリストされているファイル タイプで定義されたサポート)

linkHTML ファイル内の要素を通じて参照される外部スタイルシートのサポート

オートコンプリートで使用されるクラスの手動再キャッシュに使用されます 定義されたコマンド

● ユーザー設定は、どのフォルダーとファイルをキャッシュ プロセスから考慮または除外するかを上書きします。

9. コード スペル チェッカー

##プラグイン名:コード スペル チェッカー

プラグイン アドレス: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

このプラグインをインストールした後は心配する必要はありません。コード内にスペルミスの単語がある場合、その利点が分かるでしょう。結局のところ、私たちは多数の英単語の変数定義を含むコードを記述しており、プラグインはスペルミスの単語についての提案も提供することができるからです。

#10. メモプラグイン TODO ハイライト

プラグイン名: TODO ハイライト

プラグインアドレス: https://marketplace .visualstudio.com/items?itemName=wayou.vscode-todo-highlight

他の多くのコード エディターには TODO アノテーション機能があります。たとえば、コードの特定の部分を記述するとき、その部分関数は後で実装する必要があります。こうすることで、対応するコードに TODO タイプのコメントを追加することができ、すぐにこの部分にジャンプして後で書き続けることができます。また、プロジェクトが大規模になると、TODO の重要性が高まります。場合によっては数十の TODO が存在する可能性があるため、実装または最適化する必要がある機能をマークするのに役立ちます。

まとめ

もちろん、ここで紹介するプラグインは必要なプラグインのほんの10個です。実は、開発する言語によっては、開発効率を大幅に向上させるインストールが必要なツールが多数あり、VSCode のプラグイン センターで確認、ダウンロード、インストールすることができます。

推奨チュートリアル: vscode チュートリアル

以上が効率的な開発のために必ずインストールすべき 10 個の VSCode プラグインの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。