JavaScriptの開発効率を向上させる先進的なVSCode拡張機能！

現在、Visual Studio Code は間違いなく最も人気のある軽量コード エディターです。 VS Code の力は間違いなくプラグイン市場から来ています。オープンソース コミュニティのおかげで、VS Code はほぼすべてのプログラミング言語、フレームワーク、開発テクノロジをサポートするようになりました。

このサポートを提供するにはさまざまな方法があります。主に、コード スニペット、構文の強調表示、Emmet および特定のテクノロジ用のスマート プロンプト機能の提供などです。

#次の記事では、JavaScript の開発効率を向上させるためのいくつかの高度な VSCode 拡張機能を推奨します。

Quokka.js

Quokka.js は、JavaScript および TypeScript 用のライブ コード プラットフォームです。これは、入力したコードをリアルタイムに実行し、さまざまな実行結果をエディターに表示することを意味します。

この

拡張機能 をインストールした後、Ctrl/Cmd (⌘) Shift P を押してエディターのコマンド パレットを表示し、「Quokka」と入力して利用可能なものを確認できます。コマンドのリスト。 「新しい JavaScript ファイル」コマンドを選択して実行します。 (⌘ K J) を押してファイルを直接開くこともできます。このファイルに入力された内容はすべて直ちに実行されます。

Quokka.js 同様の拡張機能 –

• Code Runner – C などの複数の言語をサポートします。 C、Java、JavaScript、PHP、Python、Perl、Perl 6 など

• ランナー

ブラケット ペア カラーライザーとインデント レインボー

Cure中括弧と括弧は多くのプログラミング言語に不可欠な部分です。JavaScript などの言語では、コード画面内で中括弧や括弧が複数のレベルで入れ子になっている場合があり、いくつかの括弧はあまり簡単ではありません。どれがどれに対応するのかを識別することはできますが、これらの括弧間の対応関係を識別する簡単な方法はありません。

ブラケット ペア カラーライザーと インデント レインボー。これらは 2 つの異なる拡張子です。しかし、彼らはまるで夫婦のように働き、完璧に連携しています。これらの拡張機能はエディターにさまざまな色を追加し、コード ブロックを見つけやすくします。これらの拡張機能に慣れると、拡張機能なしでは VSCode が味気なく感じられるでしょう。

ブラケットなし カラーライザーとレインボー インデントのペア

##カラーライザー (ブラケット ペア カラーライザー) とレインボー インデントをペアリングした後、ブラケットを使用します (インデントレインボー)

スニペット(コード スニペット)

コード スニペットはエディターのショートコードです。したがって、「import React from 」の代わりに、「imr」と入力して Tab キーを押してスニペットを展開できます。同様に、clg は console.log になります。

JavaScript、React、Redux、Angular、Vue、Jest など、さまざまなフレームワークやライブラリのコード スニペットが多数あります。私は主に JS を使用しているため、個人的には Javascript スニペットが非常に便利であると感じています。

いくつかの優れたコード スニペット拡張機能 –

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

• es6/es7 用の React-Native/React/Redux スニペット

#React 標準スタイルのコード スニペット

TODO ハイライト

コーディング中に、同じ操作を実行するもっと良い方法があるのではないかと考えることがよくあります。この時点で、 // TODO: リファクタリングまたはその他の関連事項を行う必要があるとコメントを残します。ただし、このコメントを忘れてコードをマスターまたは運用環境にプッシュするのは簡単です。ただし、Todo Highlighter を使用すると、Todo Highlighter が強調表示され、注釈が見やすくなります。

コード内の「TODO/FIXME」またはその他のコメントが明るい色で強調表示され、常にはっきりと見えるようになります。もう 1 つの優れた機能は、コンソール内のすべての TODO をリストする、強調表示された注釈のリストです。

Todo Highlighter のような拡張機能を使用する –

• Todo — より多くの機能を備えた、より強力な Todo Highlight 拡張機能。

• Todo パーサー

コストのインポート

この拡張機能を使用すると、次のことが可能になります。 Webpack のバンドラーでインポートされたモジュールのサイズを確認するのに非常に役立ちます。ライブラリ全体をインポートしているのか、特定のユーティリティのみをインポートしているのかを確認できます。

REST クライアント

Web 開発者は、多くの場合、REST API を使用する必要があります。 URL を確認して応答を確認するには、Postman などのツールが使用されます。しかし、エディターで同じタスクを簡単に実行できるのに、なぜ別のアプリケーションを使用するのでしょうか? REST クライアント これを使用すると、HTTP 要求を送信し、Visual Studio Code で直接応答を表示できます。

タグの自動終了とタグの名前の自動変更

React の出現以来、そして過去数年間で注目を集めて以来、 JSX 形式の HTML に似た構文は、現在非常に人気があります。 JavaScript タグを使用してコーディングする必要もあります。 Web 開発者なら誰でも、タグの入力は面倒だと言うでしょう。ほとんどの場合、タグとそのサブタグを迅速かつ簡単に生成できるツールが必要です。 Emmet は VSCode におけるこれの好例ですが、場合によっては単純で単純なものが必要な場合もあります。たとえば、自動更新タグは、開始タグを入力すると終了タグを自動的に生成します。同じタグを変更すると、終了タグが自動的に変更されます。これは、これら 2 つの拡張機能でも行われます。

JSX や XML、PHP、Vue、JavaScript、TypeScript、TSX などの他の多くの言語でも動作します。

ここから 2 つの拡張機能 (Auto Close Tag と Auto Rename Tag) を入手してください。

類似の拡張機能 –

• オートコンプリートタグ — 結合自動的に名前が変更され、タグが自動的に閉じられます。

• #HTML/XML タグを閉じる

##GitLens

その通り作成者にとって、GitLens は Visual Studio Code に組み込まれた Git 機能を強化します。これには、トラッキング コードによるコード作成者の表示、コミット検索、履歴、GitLens Explorer などの強力な機能が多数含まれています。これらの機能の詳細な説明はここで読むことができます。

類似の拡張機能 –

• Git History — コミット履歴などを示す美しいグラフ。推薦する。

• Git Blame — ステータス バーで現在選択されている行の Git Blame 情報を表示できます。 GitLens も同様の機能を提供します。

• Git インジケーター — 影響を受けるファイルと、ステータス バーで追加または削除された行数を確認できます。

• GitHub / Bitbucket / Gitlab / VisualStudio.com で開く ! — 単一のコマンドでブラウザーでリポジトリを開くことができます。

Git プロジェクト マネージャー (Git プロジェクト マネージャー、GPM)

Git プロジェクト マネージャー (Git プロジェクト マネージャー、GPM) を使用すると、VSCode を直接実行できます。 window は、Git リポジトリを対象とする新しいウィンドウを開きます。基本的に、VSCode を終了せずに別のリポジトリを開くことができます。

この拡張機能をインストールした後、gitProjectManager.baseProjectsFolders をリポジトリを含む URL のリストに設定する必要があります。例:

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

同様の拡張機能 –

Project Manager – 個人的に使用したことはありませんが、何百万もの拡張機能があります。インスタレーション。それで、見てみることをお勧めします。

インデンティケーター

現在のインデント番号を視覚的に強調表示するので、簡単に区別できます。さまざまなレベルでインデントされたさまざまなコード ブロック。

#VSCode アイコン

編集をより魅力的にするアイコン!

# 類似の拡張機能 –

VSCode の優れたアイコン

• Studio Icons

• Dracula (テーマ)

#Dracula は私のお気に入りのテーマです。

ショートカット キーを使用すると、テーマをすばやく選択して変更できます。

まず、Ctrl k

を押してから、Ctrl t を押します。

その他の推奨事項

Fira Code

— プログラミング合字を備えた等幅フォント。 Fool's Wharf 注: プロジェクトを複製した後、ttf フォルダーを見つけて、そのフォルダーにフォント ファイルをインストールします。 VSCode を再起動し、[ツール] -> [オプション] -> [フォントと色] を選択し、[Fira Code] を選択します。

• ライブ サーバー - 静的ページと動的ページのライブ リロードを備えたローカル開発サーバー。

• EditorConfig for VS Code

  – このプラグインは、.editorconfig ファイルの設定を使用してユーザー/ワークスペース設定をオーバーライドしようとします。追加のファイルや vscode 固有のファイルは必要ありません。他の EditorConfig プラグインと同様、root=true が指定されていない場合、EditorConfig はプロジェクト外の .editorconfig ファイルを探し続けます。

• Prettier for VSCode

  — コード整形ツール。

• ブックマーク – コード内を移動し、重要な場所間を簡単かつ迅速に移動するのに役立ちます。コードを検索する必要はもうありません。ブックマーク行とブックマーク行の間の領域を選択できる一連の選択コマンドもサポートされており、ログ ファイルの分析に非常に役立ちます。

• Path Intellisense — ファイル名を自動的に入力できる Visual Studio Code プラグイン。

• Version Lens — Visual Studio Code エディターで、npm、jspm、bower、dub、および dotnet core のパッケージ バージョン情報を表示します。

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

以上がJavaScriptの開発効率を向上させる先進的なVSCode拡張機能！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。