ホームページ >開発ツール >VSCode >フロントエンド用に一般的に使用される 20 以上の vscode プラグイン (推奨事項の概要)

フロントエンド用に一般的に使用される 20 以上の vscode プラグイン (推奨事項の概要)

青灯夜游転載: 2021-05-07 10:55:2141250ブラウズ

この記事では、一般的に使用される 20 以上のフロントエンド vscode プラグインを要約して共有します。一定の参考値があるので、困っている友達が参考になれば幸いです。

1. vscode の概要

vscode は Microsoft によって開発されたコードエディターです。 , vscode はコードエディターを再定義しました。 [推奨学習: "vscode チュートリアル "]

現在市場で一般的に使用されている

軽量コードエディタ は主に、sublime、notepad、editplus、atom です。

notepad や editplus と比較すると、vscode は

IDE だけが持つ多くの機能を統合しており、それらよりもコードエディターに似ています;

sublime と比較すると、vscode

見た目が良くなりました、プラグインのインストールと設定がより便利になりました;

atom と比較して、vscode

は起動が速く、さまざまな大きなファイルを遅延なく開くことができます。

vscode は自由度が高いだけでなく、パフォーマンスが高く、見た目も良いと言えます。最も重要なことは、vscode は無料のコードエディターであり、迅速に更新し続けるチームが存在することです。。デバイス。

コードエディターの第一候補はvscodeであると言えます。フロントエンドコードを作成するときは、 コードエディターに vscode を選択し、IDE に WebStorm を選択することを個人的にお勧めします。

vscode プラグインをインストールするには、図に示されているボタンをクリックして拡張機能を入力するだけです。検索ボックスにプラグイン名を入力し、クリックしてインストールします。インストールが完了したら、Reload

をクリックして vscode を再起動し、プラグインを有効にします。

特定のプラグインが必要ない場合は、拡張子を入力し、対応するプラグインの右下隅にある歯車ボタンをクリックして選択してくださいプラグインを無効にするかアンインストールします。

2. 一般的なフロントエンドプラグイン (追記: 必須> 推奨> 理解)

必要なものをインストールする必要があります。推奨されるものはニーズに応じて異なります。理解しているものをインストールする必要はありません!!!

1.自動終了タグ (必須)

HTML /XML タグを自動的に閉じる

##2.タグの自動名前変更 (必須)

反対側のタグの同期変更

#3. 美化 (必須)

HTML の書式設定、 js, css

vueでの設定方法とショートカットキー設定はこちら

# もう一つPrettier

JavaScript / TypeScript / CSS のフォーマット

設定チュートリアルはここをクリック

## 4.ブラケットペアカラーライザー (必須)

括弧を付ける異なる色を追加すると、異なるブロックを区別しやすくなります。ユーザーは異なる括弧の種類と異なる色を定義できます

##5.Chrome 用デバッガー (推奨) )

デバッグを容易にするために、vscode のブレークポイントを Chrome にマッピング

# デバッグ方法はここです

#6 . ESLint (推奨)

js 構文エラー修正、設定をカスタマイズできますが、設定はより複雑です。インターネットで広く使用されているいくつかの eslint 設定を使用することをお勧めします。また、書きます将来的には、eslint の構成に特化した記事を作成する予定です。

7.GitLens (gitを使うのに必須)

gitのログを見るのに便利で、gitのヘビーユーザーには必須です

使用方法のチュートリアル

#8.HTML CSS サポート (必須) #

インテリジェントプロンプト CSS クラス名と ID

9.HTML スニペット (必須)

インテリジェントプロンプト HTMLタグとタグの意味

10.JavaScript(ES6) コードスニペット (必須) )

ES6 構文のスマートプロンプトとクイック入力は、.js だけでなく、.ts、.jsx、.tsx、.html、.vue もサポートしているため、js コードファイルを含むさまざまな Time をサポートするように設定する必要がなくなります。

11.jQuery コードスニペット (推奨)

jQuery コードインテリジェンスのヒント

12.Markdown Preview Enhanced (推奨)

リアルタイムプレビューマークダウン。 markdown ユーザー

#13.markdownlint (推奨)

マークダウン構文エラー修正

14.マテリアルアイコンテーマ (推奨)

vscode アイコンテーマ、さまざまな色のアイコンの変更をサポートしています。指摘する価値があります。このプラグインは非常に頻繁に更新され、基本的に vscode の更新頻度と一致します。

ミニマリズムは必要ありません

別のディレクトリツリーアイコンテーマ vscode-icons のセット

使用方法は、次の json を設定します

#15.ブラウザで開く (必須)

Vscode は IDE のようにブラウザで HTML を直接開くことはできませんが、このプラグインはショートカットキーとマウスの右ボタンでブラウザで HTML ファイルをすばやく開き、Firefox、Chrome、Opera、IE、Safari などの指定したブラウザのカスタマイズされた開き方をサポートします。

##デフォルトのブラウザを設定します