目次
開発のための包括的な推奨事項
エイリアス パス ジャンプ
テンプレート文字列コンバータ
vscode-pigments
React Style Helper
ES7 Reactsnippets
vscode-styled-components
もちろん、コンピューターの構成は十分強力です。私が言わなかったときは、
ホームページ 開発ツール VSCode VSCode でおすすめの実用的なフロントエンド プラグイン (概要)

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

Oct 11, 2021 am 10:34 AM
vscode フロントエンドプラグイン

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

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

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

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

エイリアス パス ジャンプ

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

使用説明:

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

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

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

設定手順

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

    設定で編集します。 json
    • <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

vscode で Word ドキュメントを表示する方法 vscode で Word ドキュメントを表示する方法 vscode で Word ドキュメントを表示する方法 vscode で Word ドキュメントを表示する方法 May 09, 2024 am 09:37 AM

まず、コンピュータ上で vscode ソフトウェアを開き、図の①に示すように、左側の [拡張機能] アイコンをクリックし、図の②に示すように、拡張機能インターフェイスの検索ボックスに「officeviewer」と入力します。次に、図の③のように検索結果からインストールする「officeviewer」を選択し、最後に以下のようにdocxやpdfなどのファイルを開きます。

vscode でフローチャートを描く方法_visual_studio コードでフローチャートを描く方法 vscode でフローチャートを描く方法_visual_studio コードでフローチャートを描く方法 Apr 23, 2024 pm 02:13 PM

まず、コンピューターで Visual Studio コードを開き、左側にある 4 つの四角形のボタンをクリックし、検索ボックスに「draw.io」と入力してプラグインをクエリし、インストール後に新しい test.drawio ファイルを作成して [インストール] をクリックします。 test.drawioファイルを選択し、左側にある編集モードに入ります。 描画後、「ファイル」→「埋め込み」→「svg」をクリックし、「svgをコピー」を選択します。コピーした SVG コードを HTML コードに貼り付けます。HTML Web ページを開くと、Web ページ上の画像をクリックして、フローチャートを拡大または縮小できます。ここでは、右下隅の鉛筆パターンをクリックして Web ページにジャンプします。

Vscode で Maude を記述する方法_Vscode で Maude を記述する方法 Vscode で Maude を記述する方法_Vscode で Maude を記述する方法 Apr 23, 2024 am 10:25 AM

まず、vscode プラグイン マネージャーで Maude プラグインを検索します。次に、maude のコード スニペットと構文の強調表示を使用するために、拡張子が maude の新しいファイルを作成します。 [ターミナル] -> [新しいターミナル] を選択すると、現在のフォルダーにある vscode 組み込みターミナルを開いて、モードまたはフルモード プログラムを実行できます。 maude の公式チュートリアルには、図に示すように呼び出して実行できる http クライアントの例もあります。ファイルを fm 拡張子に関連付ける場合は、設定を開き、ユーザー設定でファイルの関連付けを検索し、settings.json を開きます。ファイルの関連付けにエントリ、つまり *.fm から maude へのエントリを追加するだけです。でもいっぱい

カリフォルニア工科大学の中国人がAIを使って数学的証明を覆す!タオ・ゼシュアンの衝撃を5倍にスピードアップ、数学的ステップの80%が完全に自動化 カリフォルニア工科大学の中国人がAIを使って数学的証明を覆す!タオ・ゼシュアンの衝撃を5倍にスピードアップ、数学的ステップの80%が完全に自動化 Apr 23, 2024 pm 03:01 PM

テレンス・タオなど多くの数学者に賞賛されたこの正式な数学ツール、LeanCopilot が再び進化しました。ちょうど今、カリフォルニア工科大学のアニマ・アナンドクマール教授が、チームが LeanCopilot 論文の拡張版をリリースし、コードベースを更新したと発表しました。イメージペーパーのアドレス: https://arxiv.org/pdf/2404.12534.pdf 最新の実験では、この Copilot ツールが数学的証明ステップの 80% 以上を自動化できることが示されています。この記録は、以前のベースラインのイソップよりも 2.3 倍優れています。そして、以前と同様に、MIT ライセンスの下でオープンソースです。写真の彼は中国人の少年、ソン・ペイヤンです。

vscode でバックグラウンド更新を有効にする方法 vscode でバックグラウンド更新を有効にする方法 vscode でバックグラウンド更新を有効にする方法 vscode でバックグラウンド更新を有効にする方法 May 09, 2024 am 09:52 AM

1. まず、インターフェースを開いた後、左上隅のファイルメニューをクリックします。 2. 次に、設定列の設定ボタンをクリックします。 3. ジャンプした設定ページで、アップデートセクションを見つけます。最後に、マウスをクリックしてチェックして有効にし、Windows のバックグラウンドで新しい VSCode バージョンのボタンをダウンロードしてインストールし、プログラムを再起動します。

vscode ワークスペースにファイルを追加する方法 vscode ワークスペースにファイルを追加する方法 vscode ワークスペースにファイルを追加する方法 vscode ワークスペースにファイルを追加する方法 May 09, 2024 am 09:43 AM

1. まず、vscode ソフトウェアを開き、エクスプローラー アイコンをクリックして、ワークスペース ウィンドウを見つけます。 2. 次に、左上隅にあるファイル メニューをクリックし、フォルダーをワークスペースに追加オプションを見つけます。 3. 最後に、フォルダーの場所を見つけます。ローカルディスク、追加ボタンをクリックします

vscode で wsl 設定ファイルを無効にする方法 vscode で wsl 設定ファイルを無効にする方法 vscode で wsl 設定ファイルを無効にする方法 vscode で wsl 設定ファイルを無効にする方法 May 09, 2024 am 10:30 AM

1. まず、設定メニューで設定オプションを開きます。 2. 次に、よく使用されるページでターミナル列を見つけます。 3. 最後に、列の右側にある usewslprofiles ボタンのチェックを外します。

VScode でアニメーションのスムーズな挿入を設定する方法 アニメーションのスムーズな挿入を設定する VScode チュートリアル VScode でアニメーションのスムーズな挿入を設定する方法 アニメーションのスムーズな挿入を設定する VScode チュートリアル May 09, 2024 am 09:49 AM

1. まず、インターフェースを開いた後、ワークスペースインターフェースをクリックします。 2. 次に、開いている編集パネルで、「ファイル」メニューをクリックします。 3. 次に、「環境設定」列の下にある「設定」ボタンをクリックします。 4. 最後に、マウスをクリックして CursorSmoothCaretAnimation を確認します。ボタンを押して保存するだけです

See all articles