開発効率を向上させる 23 個のフロントエンド VSCode プラグイン (集めに来てください)

この記事では、開発効率を向上させ、半分の労力で 2 倍の結果を得るのに役立つ 23 個のフロントエンド VSCode プラグインを紹介します。ぜひ集めてください。

VSCode はフロントエンド開発用の強力な IDE であるため、使いやすいプラグインを選択すると開発効率が向上し、残りの時間を釣りに使うことができます。 。 必要。 [推奨学習: 「vscode 入門チュートリアル 」]

中国語 (簡体字)

vscode Microsoft のオープンソース ソフトウェアであることは知っていますが、英語が苦手な学生にとっては、まず中国語ローカライズを使用する必要があるため、著者は中国語プラグインを推奨しています。

Visual Studio Code の中国語 (簡体字) 言語パック: この中国語 (簡体字) 言語パックは、VS Code のローカライズされたインターフェイスを提供します。

• プラグイン名: Visual Studio Code の中国語 (簡体字) (簡体字中国語) 言語パック
• 正式なアドレス: marketplace.visualstudio.com/items?itemN…
• 使用法: デフォルトの UI 言語は、「表示言語の構成」を使用して VS Code の表示言語を明示的に設定することでオーバーライドできます。 " 指示。 Ctrl Shift P を押してコマンド パネルを表示し、「display」と入力してフィルタリングし、[表示言語の構成] コマンドを表示します。 「Enter」を押すと、ロケールごとにインストールされている言語のリストが表示され、現在の言語設定が強調表示されます。別の「言語」を選択すると、UI言語が切り替わります。詳細については、ドキュメントを参照してください。

#Polacode-2020

##Polacode-2020 : もしあなたが選択したクリップに素晴らしい視覚効果を提供する簡単な方法が必要です。

プラグイン名: Polacode-2020
正式アドレス:
• marketplace.visualstudio.com/items?itemN …
機能:

• スクリーンショットを生成するために必要な範囲を選択します。コード ブロックのスクリーンショット
  希望の影と背景色を設定できます

#使用方法: command SHIFT P、FN F1(Mac) / Ctrl SHIFT P(Window)、Polacode を選択し、スクリーンショットを撮りたい範囲を選択します。

#CodeSnap

CodeSnap : VS Code でコードの美しいスクリーンショットを撮ります。

プラグイン名: CodeSnap

正式アドレス:

marketplace.visualstudio.com/items?itemN…

• 機能:
コードのスクリーンショットをすばやく保存
スクリーンショットをクリップボードにコピー

• 行番号を表示
  その他の多くの構成オプション
  使用法: インターセプトするコード ブロックを選択し、CodeSnap を右クリックします

画像プレビュー

画像プレビュー : エディターの隙間ニュートラルにして画像の上にカーソルを置くと、画像がプレビューされます。

• プラグイン名: 画像プレビュー
• 正式アドレス: marketplace.visualstudio.com/items?itemN…
• 特徴: HTML タグまたはスタイルで導入された画像は、エディター ギャップおよびマウス ホバーでプレビューできます
• 使用法: 画像は、エディターのギャップと、画像リンクの上にマウスを移動すると、

# 画像スプライト

#特定のページを開発する場合、常に多数の小さな画像が必要になることがあります。このとき、スプライト画像を使用すると、サーバー リクエストの数を減らすことができ、帯域幅を節約することができます。 UI ヘルプなしでこのプラグインを使用するのは良い選択です。

画像スプライト: 画像スプライトは、単一の画像に配置された画像のコレクションです。多くの画像を含む Web ページは、ロードして複数のサーバー リクエストを生成するのに時間がかかることがあります。画像スプライトを使用すると、サーバーリクエストの数が減り、帯域幅が節約されます。

プラグイン名: Image Sprites
正式アドレス:
• marketplace.visualstudio.com/items?itemN…
特徴:

##画像スプライトの作成と更新が簡単
• • png、jpg、bmp 画像のサポート
  • 垂直または水平のスプライト レイアウトの構成
  • スプライト画像の位置を使用して生成する量を少なくします、Sass または CSS ファイル
  • さまざまな設定オプションを使用してすべてのスプライトを管理できます
使用法:

Sprite フォルダー内のすべての画像
• • 画像が含まれるフォルダーを右クリックし、 [イメージ スプライトの作成] を選択します

#いくつかのイメージをスプライトします

• 画像を選択し、右クリックして [イメージ スプライトの作成] を選択します

##これら 2 つのメソッドにより、 .sprite ファイルと生成されたデフォルト ファイルを設定します。 image file.css

• Svg プレビュー

適切なsvg画像を見つけたものの、色や形などの理由で不適切な場合、このプラグインを使用して修正することができます。 Svg プレビュー: VSCode の Svg プレビュー。

プラグイン名: Svg Preview

正式アドレス:

• marketplace.visualstudio.com/items?itemN…
• 機能:
• SVG ファイルと SVG の内部ファイルのリアルタイム プレビュー

• プレビューのためのパンとズーム (最大 32767%)
  ##file-size

file-size : 単純な拡張子。現在のテキスト ファイルのサイズをステータス バーに表示します。ファイルを保存するか、アクティブなタブを変更すると、ステータスが更新されます。

プラグイン名: file-size

正式なアドレス:

marketplace.visualstudio.com/items?itemN …
• ライブサーバー

ライブ サーバー: 静的ページと動的ページのライブ リロード機能を備えたローカル開発サーバーを起動します。

• プラグイン名: Live Server
• 正式アドレス: marketplace.visualstudio.com/items?itemN…
• 機能:

• • ## ライブブラウザのリロードを備えた高速開発ライブサーバー。
  • ステータス バーを 1 回クリックするだけでサーバーを起動または停止できます。
  • エクスプローラー メニューからブラウザで HTML ファイルを開きます。 [クイックGIFデモンストレーション]。
  • 変更検出のためのファイルの除外をサポートします。
  • ホットキーコントロール。
  • カスタマイズ可能なポート番号、サーバーのルート ディレクトリ、およびデフォルトのブラウザ。
  • 高度なコマンド ラインを使用するブラウザをサポートします (例: Firefox Nightly)。
  • Chrome デバッグ アドオンのサポート (詳細)。 [クイックGIFデモンストレーション]。
  • Wi-Fi 経由でリモート接続する (例: モバイル デバイスを使用して接続する) [サポートが必要ですか? FAQ セクションを参照してください]
  • 優先ホスト名 * (localhost または 127.0.0.1) * を使用してください。
  • ライブ リロード機能のカスタマイズ可能なサポート タグ。 (デフォルトはボディまたはヘッドです)
  • SVG サポート
  • https サポート。
  • サポートエージェント。
  • CORS を有効にする
  • マルチルート ワークスペースをサポートします。
  • Live Server Web Extension を通じて、あらゆるファイルや動的ページをサポートします。

プロファイル スイッチャー

## プロファイルスイッチャー: この拡張機能を使用すると、多くの設定プロファイルを定義でき、それらを簡単に切り替えることができます。この拡張機能の元々のアイデアは、VS Code をレンダリングをより最適化する設定 (テーマの変更、フォント サイズの拡大など) に簡単に切り替える方法があればいいのにという思いから生まれました。

プラグイン名: Profile Switcher

• 正式アドレス:
• marketplace.visualstudio.com/items?itemN… 機能: この拡張機能では、コマンド パレットから使用できる 4 つの新しいコマンドが導入されています。すべてのコマンドは Profile Switcher で始まります

Project Manager

プロジェクト マネージャーは、vscode でさまざまな性質の多数のプロジェクトを開く必要がある場合に優れたプロジェクト管理プラグインです。

プロジェクト マネージャー :

プロジェクト

がどこにあっても簡単にアクセスできます。

重要な項目をもう見逃さないでください。独自の Projects (Favorites とも呼ばれる) を定義することも、Git、Mercurial、または を自動的に検出することを選択することもできます。 SVN リポジトリ、VSCode フォルダー、または 任意の フォルダー。

• プラグイン名: プロジェクト マネージャー
• 正式なアドレス: marketplace.visualstudio.com/items?itemN…
• 機能: 使用可能なコマンド:

• • プロジェクト マネージャー: プロジェクトの保存 現在のフォルダー/ワークスペースを名前を付けて保存します。新しいプロジェクト
  • プロジェクト マネージャー: プロジェクトの編集プロジェクト (projects.json) を手動で編集します
  • プロジェクト マネージャー: プロジェクトを OpenList にリストし、すべて保存/検出されました
  • プロジェクト マネージャー: 新しいウィンドウで開くプロジェクトをリストする 保存/検出されたすべてのプロジェクトをリストし、新しいウィンドウで 1 つを選択する 開く
  • #プロジェクト マネージャー: タグでプロジェクトをフィルターする 選択したタグでお気に入りのプロジェクトをフィルターする

#使用方法:

• • プロジェクト マネージャー拡張機能には、作業効率を向上させるためのさまざまなコマンドを備えた独自のサイド バーがあります。
  ## カスタム タグを (設定経由で) 定義したり、複数のタグを定義したりできますプロジェクトごとの projectManager.tags と、そのタグでタグ付けされたプロジェクトのフィルター

設定の同期

設定の同期は、コンピューターの変更、システムの再インストール、複数のコンピューター間での VSCode の設定の同期に役立ちます。

設定の同期: Visual Studio Code の設定の同期。

プラグイン名:Settings Sync
正式アドレス:
• marketplace.visualstudio.com/items?itemN…

npm

npm : この拡張機能は、ファイル内で定義された npm スクリプトの実行をサポートします。

プラグイン名: npm
正式アドレス:
• marketplace.visualstudio.com/items?itemN…
機能:

• ##npm は、報告された警告に対する実行中のクイックフィックスを提供します。

スクリプトの実行に使用されるコマンドは、この npm カテゴリにあります利用可能
#ブラウザで開く

ブラウザで開く :この拡張機能を使用すると、HTML ファイルをブラウザで開くことができます。

プラグイン名: ブラウザで開く

• 正式なアドレス: marketplace.visualstudio.com/items?itemN …
• 使用法
##ショートカットを使用して、デフォルトのブラウザで現在の ## を開きますAlt B

#html
• • Shift Alt B ファイルを押すか、ブラウザを選択します。また、図のように右クリックすることもできます:

## いつ いつ「その他のブラウザ」で「oepn」を選択すると、ブラウザのリストが表示され、ブラウザを選択して現在のファイルを開くことができます。

「デフォルトのブラウザで開く」を選択した場合、デフォルトは # です。

##システムのデフォルトのブラウザ

。デフォルトのブラウザを設定したい場合は、次のようにオーバーライドできます:

• • Git のスーパーチャージ

    

    GitLens - Git のスーパーチャージ: GitLens は VS コードで Git を強化し、## のキャプチャをロック解除します。 # 各リポジトリ内の未開発の知識。 直感的に役立ちます コードの作成者を視覚化し、シームレスに移動して探索します Git 比較コメントと CodeLens を使用して Git リポジトリを探索し、豊富な視覚化と強力な比較コマンドで価値を獲得します インサイト など。

    • プラグイン名: GitLens - Git supercharged
    • 正式アドレス: marketplace.visualstudio.com/items? itemN…

    

    Git 履歴

    

    Git 履歴: 表示git log 、ファイル履歴、ブランチまたはコミットのマージ。
    • プラグイン名: Git History
    • 正式アドレス: marketplace.visualstudio.com/items?itemN…

    SVN

    

    SVN: このプラグインはシステムの SVN インストールに依存しているため、次のものが必要です。最初に TortoiseSVN をインストールします。
    • プラグイン名: SVN
    • 正式アドレス: marketplace.visualstudio.com/items?itemN…
    • # 機能: ビュー:
    • ##ソース コード管理ビュー
      ガターの簡単な違い
      ステータス バー
      変更リストの作成
      追加ファイル
      編集を元に戻す
      ファイルを削除
      ブランチを作成
      ブランチの切り替え
      パッチの作成
      変更の差分
      変更のコミット /変更リスト
      • ##コミット メッセージの表示
      郵便番号

    Postcode : Postcode は、単純および複雑な HTTP/s リクエストの作成とテスト、および応答の表示に使用できます。

    #プラグイン名: 郵便番号

    正式アドレス:
    • marketplace.visualstudio.com/items?itemN…
    REST クライアント

    

    ##REST クライアント : REST クライアントを使用すると、次のことが可能になります。 HTTP リクエストを送信し、Visual Studio Code で直接レスポンスを表示します。

    プラグイン名: TEST Client

    正式アドレス:
    marketplace.visualstudio.com/items?itemN…
    • リクエストを行う#cURL リクエストを行う

    #ライブシェア

    Live Share : Live Share を使用すると、使用しているプログラミング言語や構築しているアプリケーションの種類に関係なく、他のユーザーと共同で編集やデバッグをリアルタイムで行うことができます。現在のプロジェクトを即座に (そして安全に) 共有し、必要に応じてデバッグ セッション、ターミナル インスタンス、ローカルホスト Web アプリケーション、音声通話などを共有できます。セッションに参加する開発者は、環境からすべてのエディター コンテキスト (言語サービス、デバッグなど) を受け取り、リポジトリのクローンを作成したり SDK をインストールしたりすることなく、生産的なコラボレーションをすぐに開始できるようになります。

    • プラグイン名: Live Share
    • 正式アドレス: marketplace.visualstudio.com/items?itemN…

    

    Draw.io の統合

    

    ##Draw.io の統合 :この非公式拡張機能は、Draw.io (diagrams.net としても知られる) を VS Code に統合します。
    • プラグイン名: Draw.io Integration
    • 正式アドレス: marketplace.visualstudio.com/items?itemN…
    • 機能:
    • • Draw.io エディターまたは で編集します。ドローイオのドキュメント。 .dio.drawio.svg.drawio.png
    • • • ##宛先 宛先新しい図を作成するには、空の .drawio、.drawio.svg、または *.drawio.png ファイルを作成して開きます。 **
        .drawio.svg.svg は、Github Readme に埋め込むことができる有効なファイルです。エクスポートは必要ありません。
        .drawio.png は有効な .png ファイルです。エクスポートは必要ありません。可能な場合は .svg と一緒に使用することをお勧めします。見た目が非常に良くなります。
        異なる形式間で変換するには、Draw.io: Convert To... コマンドを使用します。
    • デフォルトでは、オフライン バージョンの Draw.io を使用します。
      • 複数の Draw.io テーマが利用可能です。
      • Liveshare を使用して他のユーザーと協力して図を編集します。
      • ノード/エッジはコード スパンにリンクできます。

    Markdown オールインワン

    #Markdown All in One : Markdown に必要なものすべて (キーボード ショートカット、目次、自動プレビューなど)。

    

    プラグイン名: Markdown All in One
    • 正式アドレス: marketplace.visualstudio.com/items?itemN…
    • Markdown PDF

    ##Markdown PDF : この拡張機能は、Markdown ファイルを pdf、html、png に変換します。またはjpegファイル。

    プラグイン名: Markdown PDF

    正式アドレス:
    • marketplace.visualstudio.com/items?itemN…
    • 機能: 次の機能をサポートします:
    • ##構文の強調表示
    • 絵文字
      • ##マークダウンイットチェックボックス
      ##マークダウンコンテナ
      • #値下げには
      • Plant UML
      • ## が含まれます
      markdown-it-plantuml
    • • ##マーメイド
        #Markdown プレビューの強化
    ##Markdown プレビューの強化: Markdown プレビューが強化されました。
    • • プラグイン名: Markdown Preview Enhanced
      • 正式アドレス: marketplace.visualstudio.com/items?itemN…

      

      ##VSCode の詳細については、

      vscode チュートリアル をご覧ください。
      

以上が開発効率を向上させる 23 個のフロントエンド VSCode プラグイン (集めに来てください)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。