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

ホームページ

開発ツール

VSCode

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

青灯夜游

Oct 11, 2021 am 10:34 AM

vscodeフロントエンドプラグイン

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

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

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

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

エイリアスパスジャンプ

##プラグイン名: Alias path Jump
使用説明:
Alias path Jump プラグイン、あらゆるプロジェクトをサポート、
使用シナリオ:ページを開発している場合、クリックする必要があります
エイリアスパスインポートされたコンポーネント (以下のデモ)

設定手順

#プラグインを右クリックして、[拡張設定]-[パスマッピング]を選択し、
設定で編集します。 json
- <pre class='brush:php;toolbar:false;'>// 文件名别名跳转 "alias-skip.mappings": { "~@/": "/src", "views": "/src/views", "assets": "/src/assets", "network": "/src/network", "common": "/src/common" },</pre>

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

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

##プログラム可能な仮想をサポートファイル (サーバー側 API インターフェイスのシミュレートに使用できます)
- #Svg Preview

プラグイン名:

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

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

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

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

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

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

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

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

vscode-pigments

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

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

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

パラメータヒント

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

Quokka.js

Quokka.js
CtrlShift pEnterQuokka new JavaScr..

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

一致するタグを強調表示

一致するタグを強調表示

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

プラグイン名: vue-component

コンポーネント名を入力して、見つかったコンポーネントを自動的にインポートし、パスとコンポーネントを自動的にインポートします

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

Vetur

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

プラグイン名: Vetur

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

Vue
コードスニペット、開発に非常に便利です
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

プラグイン名:

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

vscode-icons

プラグイン名:

フォルダーとファイルのアイコン

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

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

CSS 初期値

プラグイン名:

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

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

プラグイン名:

機能: # で絵を描く##VSCode

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

プラグイン名:

echarts-vscode -extension

使用法: プラグインのインストール後、
ctrlShiftp
active Echars
を入力してください関数:
Echar の Option

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

プラグイン名:

A-super-translate

使用法: 行を選択し、Ctrl Shift p 翻訳を入力
Ctrl ` を入力してから押しますctrl 1 を押すと、選択した領域を翻訳対象に直接置き換えることができます。
- 機能: 翻訳識別コードコメントセクションは読むのに影響しません。さまざまな言語、単一行および複数行のコメントをサポート、
ユーザー文字列と変数の変換をサポート、キャメルケース分割をサポート
- ##概要 (すべてのプラグインの写真付き)

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

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

プログラミングビデオ

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

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

声明

この記事は掘金社区で複製されています。侵害がある場合は、admin@php.cn までご連絡ください。

Visual Studioはまだ無料ですか？可用性を理解するApr 18, 2025 am 12:05 AM

はい、VisualStudioの一部のバージョンは無料です。具体的には、VisualStudioCommunityeditionは、個々の開発者、オープンソースプロジェクト、学術研究、および小規模組織にとって無料です。ただし、VisualStuprofessionや企業などの有料バージョンもあり、大規模なチームや企業に適しており、追加機能を提供しています。

Visual Studioの使用：プラットフォーム全体のソフトウェアの開発Apr 17, 2025 am 12:13 AM

VisualStudioを使用したクロスプラットフォーム開発は実現可能であり、.NetcoreやXamarinなどのフレームワークをサポートすることにより、開発者は一度にコードを作成して複数のオペレーティングシステムで実行できます。 1）.Netcoreプロジェクトを作成し、クロスプラットフォーム機能を使用します。2）モバイルアプリケーション開発にXamarinを使用します。

vscodeを使用してJSONをフォーマットする方法Apr 16, 2025 am 07:54 AM

VSコードでJSONをフォーマットする方法は次のとおりです。1。ショートカットキーを使用します（Windows/Linux：Ctrl Shift I; MacOS：CMD Shift I）; 2。メニュー（ "edit"＆gt; "format document"）; 3。JSONフォーマッタ拡張機能（プレシエなど）をインストールします。 4。手動でフォーマットします（ブロックをインデント/抽出するためにショートカットキーを使用するか、ブレースとセミコロンを追加します）。 5。外部ツール（JsonlintやJson Formatterなど）を使用します。

vscodeをコンパイルする方法Apr 16, 2025 am 07:51 AM

VSCODEのコンパイルコードは5つのステップに分割されます。C拡張子をインストールします。プロジェクトフォルダーに「main.cpp」ファイルを作成します。コンパイラ（MINGWなど）を構成します。ショートカットキー（「Ctrl Shift B」）または「ビルド」ボタンでコードをコンパイルします。コンパイルされたプログラムをショートカットキー（「F5」）または「実行」ボタンで実行します。

VSCODEをインストールする方法Apr 16, 2025 am 07:48 AM

Visual Studioコードをインストールするには、次の手順に従ってください。公式Webサイトhttps://code.visualstudio.com/;オペレーティングシステムに従ってインストーラーをダウンロードします。インストーラーを実行します。ライセンス契約を受け入れ、インストールパスを選択します。インストールが完了した後、VSCODEは自動的に開始されます。

VSCODEでフォントを拡大する方法Apr 16, 2025 am 07:45 AM

Visual Studioコードでフォントを拡大する方法は次のとおりです。設定パネル（CTRL、またはCMD）を開きます。「フォントサイズ」を検索して調整します。適切なサイズの「フォントファミリ」を選択します。適切なサイズを提供するテーマをインストールまたは選択します。キーボードショートカット（CTRLまたはCMD）を使用して、フォントを拡大します。

VSCODEを使用してリモートサーバーに接続する方法Apr 16, 2025 am 07:42 AM

VSCODEを介してリモートサーバーに接続する方法は？リモート-SSH拡張構成SSH VSCODEで接続を作成する接続情報の入力情報：ホスト、ユーザー名、ポート、SSHキーリモートエクスプローラーの保存された接続をダブルクリックします

VSCODEでVUEを実行する方法Apr 16, 2025 am 07:39 AM

VSCODEでVUEプロジェクトを実行するには、次の手順が必要です。1。Vue CLIをインストールします。 2。VUEプロジェクトを作成します。 3.プロジェクトディレクトリに切り替えます。 4.プロジェクトの依存関係をインストールします。 5.開発サーバーを実行します。 6.ブラウザを開いてhttp：// localhost：8080にアクセスします。

See all articles