vscodeフロントエンドプラグイン推奨
5053 ワード
共通プラグイン
Auto Close Tag
HTML/XMLを自動的に追加してラベルを閉じる(必須)
Auto Rename Tag
ペアリングのHTML/XMLラベルの自動名前変更(必須)
Beautify
フォーマットjavascript,JSON,CSS,Sass,HTML
Bootstrap 4 & Font awesome snippets
Bootstrap 4&Font awesomeを含むコードクリップ
Bracket Pair Colorizer
色認識一致かっこ
Class autocomplete for HTML
インテリジェントヒントHTML class=""属性(必須)
Code Runner
非常に強力なプラグインで、多くの言語のコードクリップやコードファイルを実行することができます:C、C++、Java、JavaScript、PHP、Python、Perl、Ruby、Goなど、インストールが完了した後、右上に現れます:このボタンをクリックしてあなたのファイルを実行することができます(必須)
css peek
CSS IDとクラスを表示できる文字列はHTMLファイルに対応するCSS定義(必須)
使用方法:classの中にカーソルを置いたプロパティを右クリックします.
Dash
ドキュメントを调べるのに必要なのは、dash(ただしmac版のみのようです)です.
ショートカットキー
Debugger for Chrome
vscodeにchromeのdebug機能をマッピングさせ、静的ページがvscodeでポイントデバッグを中断できるようにします.
簡単な使用:スタンプ
Document This
アノテーションブロックの追加
設定:
ショートカットキー:Ctrl+alt+dを2回押す
ESLint
EsLintはJavascriptプログラミング時の構文エラーをチェックするのに役立ちます.たとえば、Javascriptアプリケーションでは、漏洩する変数や方法を見つけるのは難しいです.EsLintはJSコードを分析し、バグを見つけ、ある程度のJS文法の正確性を確保するのに役立ちます.
設定:スタンプ
Font-awesome codes for html
html用のFont-awesomeコードクリップ
filesize
下部のステータスバーに現在のファイルサイズが表示されます.クリックすると、詳細な作成、変更時間も表示されます.
Git History
gitログをグラフで表示
command+shift+p(Ctrl+shift+p)を使用してgit logを入力すると表示されます
Git Lens
gitログプラグイン
HTML CSS Support
htmlラベルにclassインテリジェントプロンプトを書く現在のプロジェクトでサポートされているスタイル(必須)
HTML Snippets
htmlコードクリップ(必須)
htmlhint
htmlコード検出
htmltagwrap
HTMLタグを選択すると、表裏にラベルを付けることができます.
使用:大きなセグメントコードを選択し、「Alt+W」を押します.
Indenticator
現在のインデントの深さを強調
IntelliSense for CSS class names
インテリジェントヒントcssのclass名
Image Preview
マウスをパスに移動して画像プレビューを表示
JavaScript (ES6) code snippets
Es 6コードフラグメント(必須)
JavaScript Snippet Pack
jsコードクリップ(必須)
jQuery Code Snippets
jQueryコードフラグメント
Live Sass Compiler
リアルタイムでsassをコンパイルしますが、構成が必要です.私の構成を添付します.
使用
markdownlint
markdown構文チェック
Node.js Modules Intellisense
JavaScript/Type Scriptモジュールは、インポート文で自動的に完了できます.
npm Intellisense
インポート文にnpmモジュールを自動的に入力し、Node.js Modules Intellisenseの差は多くない
open in browser
現在のhtmlファイルはブラウザで開き、webstormのような4つの小さなブラウザアイコン機能は、htmlファイルを保存する必要があることを前提としています.
ショートカットキーalt+b
Output Colorizer
出力プロンプトの文字色に変化があり、重要な情報を入手しやすい
Path Intellisense
パス自動補完(必須)
Prettier
JavaScript/Type Script/CSSをフォーマットします.
Project Manager
プロジェクトが多すぎる場合、shift+cmd+p(shift+ctrl+p)を入力してプロジェクトを入力し、edit Projectを初めて選択して自分のプロジェクトを編集し、その後openを直接選択してプロジェクトを開くことができます.
Sass
書くにはsassが必要です
vscode-faker
偽のデータ、住所、電話、画像などを生成します.
モードshift+cmd+p(shift+ctrl+p))を開いてfakerを入力すれば選択できます
Quokka.js
javascriptの変数の変化をリアルタイムで見る
使用:先にshift+cmd+p(ctrl+shift+p)を入力してnew javascriptを選択すればいいです.
Regex Previewer
正規のプラグインのテスト
TSLint
typescriptプログラミング時の構文エラー構文をチェック
TypeScript Importer
ワークスペースファイルのTypeスクリプト定義を自動的に検索し、すべての既知の記号を完了項目としてコードの完了を許可します.
vscode-icons
ディレクトリツリーアイコン
react
React-Native/React/Redux snippets for es6/es7
reactコードフラグメント、ダウンロード人数超多�
react-beautify
Javascript,JSX,typescript,TSXファイルのフォーマット
vue
vetur
構文ハイライト、スマートセンシング
VueHelper
vueコードクリップ
Vue TypeScript Snippets
vueのtypescriptコードクリップ
Vue 2 Snippets
vue 2コードクリップ
テーマ
Dracula Official
个人の最も好きなテーマ、最も美しいテーマの1つであるべきです�
One Dark Pro
これもきれいです.
Atom One Dark Theme(旧バージョン)
これはOne Dark Proとあまり差がなく、One Dark Proの色のテーマが多いです.
One Monokai Theme
Eva Theme
黒と白のテーマが入っていて、この白のテーマはとてもきれいです.
Boxy Theme Kit
皆さんは他に何か良いプラグインがありますか�
Auto Close Tag
HTML/XMLを自動的に追加してラベルを閉じる(必須)
Auto Rename Tag
ペアリングのHTML/XMLラベルの自動名前変更(必須)
Beautify
フォーマットjavascript,JSON,CSS,Sass,HTML
Bootstrap 4 & Font awesome snippets
Bootstrap 4&Font awesomeを含むコードクリップ
Bracket Pair Colorizer
色認識一致かっこ
Class autocomplete for HTML
インテリジェントヒントHTML class=""属性(必須)
Code Runner
非常に強力なプラグインで、多くの言語のコードクリップやコードファイルを実行することができます:C、C++、Java、JavaScript、PHP、Python、Perl、Ruby、Goなど、インストールが完了した後、右上に現れます:このボタンをクリックしてあなたのファイルを実行することができます(必須)
css peek
CSS IDとクラスを表示できる文字列はHTMLファイルに対応するCSS定義(必須)
使用方法:classの中にカーソルを置いたプロパティを右クリックします.
Dash
ドキュメントを调べるのに必要なのは、dash(ただしmac版のみのようです)です.
ショートカットキー
ctrl + h現在選択されている言語に基づいてdashのドキュメントを検索します.Debugger for Chrome
vscodeにchromeのdebug機能をマッピングさせ、静的ページがvscodeでポイントデバッグを中断できるようにします.
簡単な使用:スタンプ
Document This
アノテーションブロックの追加
設定:
"docthis.includeAuthorTag": true,// @Author
"docthis.includeDescriptionTag": true,// @Description
"docthis.authorName": "shenzekun",// ショートカットキー:Ctrl+alt+dを2回押す
ESLint
EsLintはJavascriptプログラミング時の構文エラーをチェックするのに役立ちます.たとえば、Javascriptアプリケーションでは、漏洩する変数や方法を見つけるのは難しいです.EsLintはJSコードを分析し、バグを見つけ、ある程度のJS文法の正確性を確保するのに役立ちます.
設定:スタンプ
Font-awesome codes for html
html用のFont-awesomeコードクリップ
filesize
下部のステータスバーに現在のファイルサイズが表示されます.クリックすると、詳細な作成、変更時間も表示されます.
Git History
gitログをグラフで表示
command+shift+p(Ctrl+shift+p)を使用してgit logを入力すると表示されます
Git Lens
gitログプラグイン
HTML CSS Support
htmlラベルにclassインテリジェントプロンプトを書く現在のプロジェクトでサポートされているスタイル(必須)
HTML Snippets
htmlコードクリップ(必須)
htmlhint
htmlコード検出
htmltagwrap
HTMLタグを選択すると、表裏にラベルを付けることができます.
使用:大きなセグメントコードを選択し、「Alt+W」を押します.
Indenticator
現在のインデントの深さを強調
IntelliSense for CSS class names
インテリジェントヒントcssのclass名
Image Preview
マウスをパスに移動して画像プレビューを表示
JavaScript (ES6) code snippets
Es 6コードフラグメント(必須)
JavaScript Snippet Pack
jsコードクリップ(必須)
jQuery Code Snippets
jQueryコードフラグメント
Live Sass Compiler
リアルタイムでsassをコンパイルしますが、構成が必要です.私の構成を添付します.
"liveSassCompile.settings.formats":[
// You can add more
{
"format": "compressed",//
"extensionName": ".min.css",//
"savePath": "./css"//
}
],使用
markdownlint
markdown構文チェック
Node.js Modules Intellisense
JavaScript/Type Scriptモジュールは、インポート文で自動的に完了できます.
npm Intellisense
インポート文にnpmモジュールを自動的に入力し、Node.js Modules Intellisenseの差は多くない
open in browser
現在のhtmlファイルはブラウザで開き、webstormのような4つの小さなブラウザアイコン機能は、htmlファイルを保存する必要があることを前提としています.
ショートカットキーalt+b
Output Colorizer
出力プロンプトの文字色に変化があり、重要な情報を入手しやすい
Path Intellisense
パス自動補完(必須)
Prettier
JavaScript/Type Script/CSSをフォーマットします.
Project Manager
プロジェクトが多すぎる場合、shift+cmd+p(shift+ctrl+p)を入力してプロジェクトを入力し、edit Projectを初めて選択して自分のプロジェクトを編集し、その後openを直接選択してプロジェクトを開くことができます.
Sass
書くにはsassが必要です
vscode-faker
偽のデータ、住所、電話、画像などを生成します.
モードshift+cmd+p(shift+ctrl+p))を開いてfakerを入力すれば選択できます
Quokka.js
javascriptの変数の変化をリアルタイムで見る
使用:先にshift+cmd+p(ctrl+shift+p)を入力してnew javascriptを選択すればいいです.
Regex Previewer
正規のプラグインのテスト
TSLint
typescriptプログラミング時の構文エラー構文をチェック
TypeScript Importer
ワークスペースファイルのTypeスクリプト定義を自動的に検索し、すべての既知の記号を完了項目としてコードの完了を許可します.
vscode-icons
ディレクトリツリーアイコン
react
React-Native/React/Redux snippets for es6/es7
reactコードフラグメント、ダウンロード人数超多�
react-beautify
Javascript,JSX,typescript,TSXファイルのフォーマット
vue
vetur
構文ハイライト、スマートセンシング
VueHelper
vueコードクリップ
Vue TypeScript Snippets
vueのtypescriptコードクリップ
Vue 2 Snippets
vue 2コードクリップ
テーマ
Dracula Official
个人の最も好きなテーマ、最も美しいテーマの1つであるべきです�
One Dark Pro
これもきれいです.
Atom One Dark Theme(旧バージョン)
これはOne Dark Proとあまり差がなく、One Dark Proの色のテーマが多いです.
One Monokai Theme
Eva Theme
黒と白のテーマが入っていて、この白のテーマはとてもきれいです.
Boxy Theme Kit
皆さんは他に何か良いプラグインがありますか�