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

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

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

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

エイリアス パス ジャンプ

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

使用説明:

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

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

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

設定手順

##ダウンロード後にカスタマイズするだけ 一般的に使用されるエイリアス パスをいくつか設定するだけです

• #プラグインを右クリックして、[拡張設定]-[パス マッピング]を選択し、

  設定で編集します。 json
  • <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>
エフェクト表示

パス エイリアス スマート プロンプト

プラグイン名:

path-alias

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

indent-rainbow

プラグイン名前:

indent-rainbow

• 機能: レインボー インデント

ブラケット ペア カラーライザー 2

プラグイン名:

ブラケット ペア カラーライザー 2

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

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

• 機能: タグの名前を自動的に変更します

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

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

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

プラグイン名:

Code Runner

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

• Debugger for Chrome

プラグイン名:

Debugger for Chrome

機能: VSCode 側で、デバッグ コード

• ##Live ServerPP

プラグイン名:

Live ServerPP

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

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

プラグイン名:

Svg Preview

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

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

機能: 対象となるコードを予測できるインテリジェントなコード プロンプト

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

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

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

vscode-pigments

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

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

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

Quokka.js

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

一致するタグを強調表示

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

人気のプラグイン

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

プラグイン

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

プラグイン名: vue-component

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

Vetur

プラグイン名: 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 ファイルにスタイルを記述する場合、スマート プロンプト

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

Dracula 公式

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

#One Dark Pro

プラグイン名:

One Dark Pro

vscode-icons

プラグイン名:

vscode-icons
VSCode
• フォルダーとファイルのアイコン

その他の推奨事項

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

CSS 初期値

プラグイン名:

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

#アートボード描画

プラグイン名:

Draw.io Integration

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

Echars スマート プロンプト プラグイン

プラグイン名:

echarts-vscode -extension

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

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

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

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

翻訳プラグイン

プラグイン名:

A-super-translate

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

• Ctrl ` を入力してから押しますctrl 1 を押すと、選択した領域を翻訳対象に直接置き換えることができます。
  • 機能: 翻訳識別コード コメントセクションは読むのに影響しません。さまざまな言語、単一行および複数行のコメントをサポート、

• ユーザー文字列と変数の変換をサポート、キャメルケース分割をサポート

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

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

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

プログラミングビデオ

! ！

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