ホームページ > 記事 > 開発ツール > 収集する価値のある 10 の VSCode プラグイン (推奨)

収集する価値のある 10 の VSCode プラグイン (推奨)

青灯夜游転載: 2021-04-20 19:09:483676ブラウズ

この記事では、収集する価値のある VSCode プラグイン 10 個を推奨します。一定の参考値があるので、困っている友達が参考になれば幸いです。

【推奨学習:「vscode チュートリアル」】

1 インポートコスト

##開発プロセス中に、プロジェクトに依存関係を追加することがよくあります。モジュール開発は今日のソフトウェア開発の重要な部分となっていますが、それでも入力には注意することが最善です。 JavaScript および TypeScript 用の Import Cost プラグインを使用すると、すべての依存関係についてリアルタイムでアラートを受け取ることができます。

依存関係をコードにインラインで追加すると、対応するサイズが表示されます。これは、予測可能性を提供し、効果的な依存関係の管理に役立つ軽量のプラグインです。プラグインのドキュメントには、プラグインが依存関係のサイズを表示できるようにするさまざまなインポート構文もリストされています。

こちらの記事では、元の作成者がこのプラグインを開発した動機について詳しく説明しています。

2 ファイルユーティリティ

Visual Studio Code の中核となる機能は、処理することです。これはコーディング時にはうまく機能しますが、プロジェクト内の複数のファイルと依存関係を管理する Visual Studio Code の機能を強化する必要がある場合があります。 File Utils 拡張機能を使用すると、コマンドパネルからファイル操作を実行できます。

#コマンドパレットを表示し、ファイルを選択して、そのファイルに対して簡単なファイル操作を実行できます。基本的なフォルダー関連の操作に加えて、ファイルのコピー、移動、削除、名前変更ができます。これは、Visual Studio Code の範囲を離れることなくプロジェクトファイルを管理できる非常に便利なプラグインです。

#3 プロジェクトマネージャー

##File Utils 拡張機能を使用すると、単純なファイル操作を実行できます。また、Project Manager プラグインを使用すると、複数のプロジェクトをさらに管理できます。まず、複数のプロジェクトでの作業をサポートするための新しいサイドバーが追加されます。次に、この拡張機能は、Git、SVN、または Mercurial リポジトリの管理にも役立ちます。これにより、リモートリポジトリをさらに管理できるようになります。

この拡張機能は、GUI ベースの機能に加えて、プロジェクトで使用するコマンドを追加します。設定を調整して、機能を好みに合わせてさらにカスタマイズできます。

リモートリポジトリ管理や対話型コマンドなどの高度な機能を備えたプロジェクトマネージャー拡張機能は、開発サイクルを延長できるツールキット内のツールライブラリを提供します。

4 SVG Viewer

SVG はスケーラブルなベクターグラフィックスを指し、SVG ファイルはテキストファイルです。 Web 用のベクター画像を保存します。 SVG ファイルをテキストエディタで開くと、通常、これらのファイルのテキストコンテンツが表示されます。これらのファイルを直接編集している場合は、Visual Studio Code がこれらのファイルをどのようにレンダリングするかを確認するとよいでしょう。

SVG Viewer プラグインを使用すると、SVG ファイルを視覚化できるため、他のアプリケーションを使用して作業を表示する時間を節約できます。基本的に、SVG ファイルをすばやく編集するときに時間を節約できます。

5 コードスペルチェッカー

開発者が遭遇する多数の例外は、通常、変数、関数、およびパッケージ名のタイプミスを修正して解決しました。さらに、コメント、指示、またはドキュメントを書くときにスペルミスを犯す可能性があります。このパッケージは、ファイル内のエラーを強調表示し、さまざまな一般的なプログラミング言語でのスペルチェックに役立ちます。コードスペルチェッカーが特定のファイルタイプで動作するように設定を調整することもできます。

#インストールすると英語がサポートされますが、8 つの言語と医療用語の追加辞書が利用可能です。全体として、これは、Visual Studio Code 拡張機能の優れたライブラリへの小さいながらも強力な追加です。

6 リモート — SSH

開発の分散的な性質により、次のような場合があります。コードを更新してテストするには、リモートサーバーにログインする必要があります。これらはサードパーティの SSH クライアントを介して簡単に管理できますが、アプリケーションを完全に離れることなくサーバー上でリモート作業できる Visual Studio Code 拡張機能があります。

Microsoft の Remote-SSH プラグインを使用すると、ローカルシステムにコードを含めなくてもリモート開発環境に接続できます。また、複数のリモート環境間で交換できるため、複数のリモートシステム間で複数のタスクを実行できます。さらに、このプラグインは、Linux、Windows、または macOS ベースのリモートシステムへの接続をサポートします。現在、リモートサーバーでの開発は非常に重要であるため、「リモート SSH プラグイン」

は Visual Studio Code に不可欠な拡張機能となっています。

7 末尾空白ビジュアライザー

良いプログラミングの実践は、コードが確実に実行されるようにすることです。 not 末尾のスペースが含まれません。末尾の空白は、改行文字に先行するコード行の最後の非スペース文字の後のスペースまたはタブ文字 (基本的には表示されません) で構成されます。 Trailing Whitespace Visualizer プラグインは、コード内のこのような末尾の空白をすべて強調表示します。

収集する価値のある 10 の VSCode プラグイン (推奨)

末尾のスペースはコードにまったく不要な追加であり、ファイルサイズが増大するため、削除することをお勧めします。このプラグインは、コード内でそれらを強調表示するだけでなく、他のチームメンバーが作成したコードを使用するときにも強調表示します。 ###

8 Chrome 用デバッガー

フロントエンド JavaScript コードを使用している場合は、A をテストしてくださいコードが正しいかどうかを確認する一般的な方法は、ブラウザ上で確認することです。 Chrome Dev Tools は、コンソールを通じて JavaScript をデバッグするための実用的な方法を提供します。 Debugger for Chrome プラグインは、Chrome Developer Tools Protocol をサポートする Chrome または Chromium ベースのブラウザに Visual Studio Code を統合します。

#IDE を離れることなくコード内のエラーを特定できるデバッグ機能が多数あります。つまり、Chrome デバッガー拡張機能を使用すると、通常のデバッグプロセスの時間を節約できます。

9 ESLint

ESLint は、静的 JavaScript コードアナライザーです。コードをスキャンして、構文エラーや非効率なプログラミング方法を検出します。 ESlint Visual Studio この拡張機能は、ESLint を Visual Studio Code IDE と統合し、オンデマンドで JavaScript コードを分析できます。ただし、ESLint がシステムにローカルまたはグローバルにインストールされている必要があります。