VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

青灯夜游
リリース: 2021-10-12 19:30:24
転載
3473 人が閲覧しました

この記事では、VSCode のいくつかの実用的なフロントエンド プラグインを要約し、推奨します。皆様のお役に立てれば幸いです。

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

生産性を確実に向上させる、フロントエンド開発に必須のプラグインを多数お勧めします。残りの時間を草刈りに費やすのもいいでしょう。その周り。 [推奨される学習: 「vscode チュートリアル 」]

開発のための包括的な推奨事項

エイリアス パス ジャンプ

##プラグイン名: Alias path Jump

使用説明:

Alias path Jump プラグイン、あらゆるプロジェクトをサポート、

使用シナリオ:ページを開発している場合、クリックする必要があります

エイリアス パス インポートされたコンポーネント (以下のデモ)

設定手順

    ##ダウンロード後にカスタマイズするだけ 一般的に使用されるエイリアス パスをいくつか設定するだけです
  • #プラグインを右クリックして、[拡張設定]-[パス マッピング]を選択し、

    設定で編集します。 json
    • <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 文件名别名跳转 &quot;alias-skip.mappings&quot;: { &quot;~@/&quot;: &quot;/src&quot;, &quot;views&quot;: &quot;/src/views&quot;, &quot;assets&quot;: &quot;/src/assets&quot;, &quot;network&quot;: &quot;/src/network&quot;, &quot;common&quot;: &quot;/src/common&quot; },</pre><div class="contentsignin">ログイン後にコピー</div></div>
  • エフェクト表示

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)パス エイリアス スマート プロンプト

プラグイン名:

path-alias
  • シナリオ: コンポーネントをインポートするとき、エイリアス パスを使用する場合はプロンプトが表示されません
  • (エイリアス パス ジャンプと同時に使用可能、競合なし)
  • 詳細な使用方法チュートリアル (非常に簡単)
  • インストール効果および関数

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)indent-rainbow

プラグイン名前:

indent-rainbow
  • 機能: レインボー インデント

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)ブラケット ペア カラーライザー 2

プラグイン名:

ブラケット ペア カラーライザー 2
  • #機能: 対応するブラケット () またはオブジェクト {} に対応する色を追加します。区別するためです。
  • タグの自動名前変更

プラグイン名: タグの名前自動変更

  • 機能: タグの名前を自動的に変更します
#コード スペル チェッカー

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

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

    機能: 単語のスペルが間違っているかどうかを確認します (英語をサポート)
  • コード ランナー

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

プラグイン名:

Code Runner

機能: ワンクリックでさまざまな言語コードを実行 (テストによく使用されます)
  • Debugger for Chrome

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

プラグイン名:

Debugger for Chrome

機能: VSCode 側で、デバッグ コード
  • ##Live ServerPP

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)プラグイン名:

Live ServerPP

機能: サーバー側でファイルを開き、変更したコードをリアルタイムで表示します

    WebSocket クライアントのデバッグに使用できる WebSocket メッセージ サービスをサポート
  • ##プログラム可能な仮想をサポートファイル (サーバー側 API インターフェイスのシミュレートに使用できます)
    • #Svg Preview
プラグイン名:

Svg PreviewVSCode でおすすめの実用的なフロントエンド プラグイン (概要)

機能: SVG 画像の表示、編集も可能

  • ##Tabnine
  • ##プラグイン名:
  • Tabnine

0-VSCode でおすすめの実用的なフロントエンド プラグイン (概要)機能: 対象となるコードを予測できるインテリジェントなコード プロンプト

を書いてプロンプトを表示する

テンプレート文字列コンバータ

  • プラグイン名: テンプレート文字列コンバータ
  • 機能: トリガーする文字列に $ を入力しますテンプレート文字列に変換された文字列

1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

vscode-pigments

  • プラグイン名: vscode -pigments
  • 機能: 設定された色のリアルタイム プレビュー

1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

##パラメーターのヒント

    #プラグイン名:
  • パラメータヒント
  • 機能: プロンプト関数パラメータのタイプとメッセージ

1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

Quokka.js

    プラグイン名:
  • Quokka.js
  • 使用方法: プラグインのインストール後、
  • CtrlShift pEnterQuokka new JavaScr..
  • 関数を使用できます: 印刷出力のリアルタイム表示、および自己探索のためのその他の関数 (テストによく使用されます) )

1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

一致するタグを強調表示

    プラグイン名:
  • 一致するタグを強調表示
  • 機能: カーソルがタグ上にあると、高輝度の一致するタグが表示されます。

1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

人気のプラグイン

    #基本的にすべてインストールされているため、詳細については説明しません

プラグイン

    # #ブックマーク
  • 関数: ソース コードを読み取って行をマークしてジャンプするためによく使用されます (コード マーク クイック ジャンプ)
  • ESLint
  • 機能: コード仕様チェック
  • Prettier - コードフォーマッタ
  • ##機能: コードを美しくし、標準フォーマットに自動的にフォーマットします
    • #Project Manager
  • ## 機能: プロジェクト管理プラグイン。複数のプロジェクトを開発するときに、すぐに
    • パス インテリセンス
  • 関数: パス インテリジェント プロンプト
    • 画像プレビュー
  • 関数: インポート パスが画像の場合、現在の画像をプレビューできます
    • GitLens
  • 機能: 強化された
  • git関数、VSCode での作成者、変更時刻などの表示をサポートします。
    • ブラウザで開く
  • 関数: 現在のファイルをブラウザで開きます。
    • Vue 開発の推奨事項
  • vue-component

プラグイン名: vue-component

    関数:
  • コンポーネント名を入力して、見つかったコンポーネントを自動的にインポートし、パスとコンポーネントを自動的にインポートします
  • 選択後、コンポーネントを自動的に入力します名前 (必須属性を含む)、インポート ステートメント、およびコンポーネント属性

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

Vetur

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

プラグイン名: Vetur

    Vue 開発の必需品
  • ##Vue 3 スニペット

#プラグイン名: Vue 3 スニペット

    ##基本的な必需品: 多数の
  • Vue

    コード スニペット、開発に非常に便利です

  • React 開発に関する推奨事項
  • React Style Helper

プラグイン名:

React Style Helper

機能: React

でコンテンツを高速に作成します。スタイルを接続し、強力な補助開発機能を提供します。 CSS、LESS、SASS およびその他のスタイル ファイル
  • オートコンプリートスタイルと変数定義の場所にジャンプ
  • JSX /TSX インライン スタイルの作成スタイルと変数の内容のプレビュー
    • ##インライン スタイルは自動的に完成し、同時に SASS 変数のジャンプとプレビューをサポートします。

ES7 Reactsnippets

  • プラグイン名: ES7 React/Redux/React-Native/JS スニペット
  • 機能:多数React コード スニペット、開発に非常に便利です

vscode-styled-components

  • プラグイン名: vscode-styled-components
  • 機能: JS ファイルにスタイルを記述する場合、スマート プロンプト

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

があります。 ## テーマ クラス

Dracula 公式

    プラグイン名:
  • vscode-styled-components

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

#One Dark Pro

プラグイン名:
    One Dark Pro

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

vscode-icons

プラグイン名:
    vscode-icons
  • VSCode
  • フォルダーとファイルのアイコン

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)その他の推奨事項

次のプラグインは一般的に使用されない可能性があります。興味があれば試してみてください。
CSS 初期値

プラグイン名:
    vscode-icons
  • 機能: カーソルが
  • css
  • 属性上にある場合、各 CSS プロパティの初期値を表示します

VSCode でおすすめの実用的なフロントエンド プラグイン (概要)#アートボード描画

プラグイン名:
    Draw.io Integration
  • 機能: # で絵を描く##VSCode
  • 、チャート編集のための複数人コラボレーションをサポート..

Echars スマート プロンプト プラグイン1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

プラグイン名:

echarts-vscode -extension
  • 使用法: プラグインのインストール後、

    ctrlShiftp
  • スマートプロンプトをオンにするには、
  • active Echars

    を入力してください関数:

    Echar の Option
  • のさまざまなプロパティをプロンプトします、非常に強力です

翻訳プラグイン1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

プラグイン名:

A-super-translate
  • 使用法: 行を選択し、Ctrl Shift p 翻訳を入力

  • Ctrl ` を入力してから押しますctrl 1 を押すと、選択した領域を翻訳対象に直接置き換えることができます。

    • 機能: 翻訳識別コード コメントセクションは読むのに影響しません。さまざまな言語、単一行および複数行のコメントをサポート、
  • ユーザー文字列と変数の変換をサポート、キャメルケース分割をサポート

    • ##概要 (すべてのプラグインの写真付き)
  • 必要に応じて、対応するプラグインをインストールできます (プラグインをインストールしすぎると、VSCode が停止します) )

もちろん、コンピューターの構成は十分強力です。私が言わなかったときは、

  • プログラミング関連の知識の詳細については、次のサイトを参照してください。
プログラミングビデオ

! ! 1VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

以上がVSCode でおすすめの実用的なフロントエンド プラグイン (概要)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:juejin.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート