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;'>// 文件名别名跳转 "alias-skip.mappings": { "~@/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "common": "/src/common" },</pre><div class="contentsignin">ログイン後にコピー</div></div>
エフェクト表示
パス エイリアス スマート プロンプト
プラグイン名:
path-alias-
シナリオ: コンポーネントをインポートするとき、
エイリアス パスを使用する場合はプロンプトが表示されません (エイリアス パス ジャンプと同時に使用可能、競合なし) - 詳細な使用方法チュートリアル (非常に簡単)
- インストール効果および関数
indent-rainbow
プラグイン名前:
indent-rainbow機能: レインボー インデント
ブラケット ペア カラーライザー 2
プラグイン名:
ブラケット ペア カラーライザー 2- #機能: 対応するブラケット () またはオブジェクト {} に対応する色を追加します。区別するためです。
- タグの自動名前変更
プラグイン名: タグの名前自動変更
- 機能: タグの名前を自動的に変更します
プラグイン名: コード スペル チェッカー
- 機能: 単語のスペルが間違っているかどうかを確認します (英語をサポート)
- コード ランナー
Code Runner
機能: ワンクリックでさまざまな言語コードを実行 (テストによく使用されます)- Debugger for Chrome
Debugger for Chrome
機能: VSCode 側で、デバッグ コード- ##Live ServerPP
プラグイン名:
機能: サーバー側でファイルを開き、変更したコードをリアルタイムで表示します
- WebSocket クライアントのデバッグに使用できる WebSocket メッセージ サービスをサポート
- ##プログラム可能な仮想をサポートファイル (サーバー側 API インターフェイスのシミュレートに使用できます)
- #Svg Preview
Svg Preview
機能: SVG 画像の表示、編集も可能
##Tabnine
- ##プラグイン名: Tabnine
機能: 対象となるコードを予測できるインテリジェントなコード プロンプト
を書いてプロンプトを表示する
テンプレート文字列コンバータ
- プラグイン名:
テンプレート文字列コンバータ
- 機能: トリガーする文字列に $ を入力しますテンプレート文字列に変換された文字列
vscode-pigments
- プラグイン名:
vscode -pigments
- 機能: 設定された色のリアルタイム プレビュー
##パラメーターのヒント
- #プラグイン名:
- パラメータヒント
Quokka.js
- プラグイン名:
- Quokka.js
- CtrlShift p
Enter
Quokka new JavaScr.. 関数を使用できます: 印刷出力のリアルタイム表示、および自己探索のためのその他の関数 (テストによく使用されます) )
一致するタグを強調表示
- プラグイン名:
- 一致するタグを強調表示
人気のプラグイン
- #基本的にすべてインストールされているため、詳細については説明しません
プラグイン
- # #ブックマーク
-
関数: ソース コードを読み取って行をマークしてジャンプするためによく使用されます (コード マーク クイック ジャンプ)
ESLint -
機能: コード仕様チェック
Prettier - コードフォーマッタ -
##機能: コードを美しくし、標準フォーマットに自動的にフォーマットします
- #Project Manager
## 機能: プロジェクト管理プラグイン。複数のプロジェクトを開発するときに、すぐに -
- パス インテリセンス
関数: パス インテリジェント プロンプト -
- 画像プレビュー
関数: インポート パスが画像の場合、現在の画像をプレビューできます -
- GitLens
機能: 強化された - git
関数、VSCode での作成者、変更時刻などの表示をサポートします。
-
ブラウザで開く
関数: 現在のファイルをブラウザで開きます。 -
-
- Vue 開発の推奨事項
vue-component
プラグイン名: vue-component
- 関数:
- コンポーネント名を入力して、見つかったコンポーネントを自動的にインポートし、パスとコンポーネントを自動的にインポートします
-
プラグイン名: Vetur
- Vue 開発の必需品
#プラグイン名: 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
プラグイン名:
- vscode-icons
- フォルダーとファイルのアイコン
その他の推奨事項
プラグイン名:
- 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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック











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

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

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

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

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

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

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

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