次の記事では、よく使われる VSCode 拡張機能を紹介します。

1. 拡張

#インポートプロンプト ##タグの名前を自動変更 Babel JavaScript Babelrc CSS /sass/ を美しくするscss/less Better Align ##より良いコメントブックマーク ##一致するブラケットを異なる色で強調表示します ##カラー情報 ##ダッシュの統合 #Chrome 用デバッガー #絵文字 ##endy エラーガッター ##パス文字列に基づいてファイルをすばやく見つけます ##filesize #Git ファイル履歴単一ファイルをすばやく参照するコミットの変更履歴 Git グラフ Git グラフィカルビュー簡単な閲覧と操作のための Git 履歴 (git log) ##Git ツリーの比較、さまざまなブランチ間の違いを表示 ##gitignore ##GitLens 一致する選択したタグを強調表示 ##HTML CSS クラスの補完 CSS クラスのヒント ##htmltagwrap HTML を含める Beautify のインポートグループ化、並べ替え、書式設定のインポート #CSS クラス名の IntelliSense #JavaScript (ES6) コードスニペット JSON 構造を TypeScript インターフェイスに変換しました JSON のフォーマットと圧縮 ##jumpy すぐにジャンプ指定された単語の位置 MochaSnippets が表示されます。 # # 2 つのコードまたはファイルを比較します #パラメータのヒント関数呼び出し時にパラメーター名を指定します #Prettier - コードフォーマッタ ##CSV ファイルは虹色を使用してさまざまな列をレンダリングします React Native Storybooks React Playground #React 標準スタイルのコードスニペット REST クライアント Sass Settings Sync 行の並べ替え Typescript インポートの並べ替え ##SVG ビューア同期中 ##テストスペックジェネレーター TODO パーサー ##JS の引用符の切り替え、" -> ' -> ` TS/JS 後置補完 #TypeScript インポート TS 自動import TypeScript インポートソーターインポートソート Typescript React コードスニペット ##バージョンレンズ ##Vue プラグイン、Vue3 をサポート #選択したモジュールのホームページとコードリポジトリをすばやく開きます ##操作データベース、mysql と postgres をサポート ##vscode-icons ##vscode-random ##VueHelper

##名前

簡単な説明

自動終了タグ

自動終了 HTML タグ

自動インポート

HTML タグを変更するとき、一致するタグを自動的に変更します

#babel プラグイン、構文ハイライト

.babelrc ファイルの強調表示のヒント

css/sass/less 書式設定

代入記号とコメントの整列

よりユーザーフレンドリーなコメントを書く

行ブックマークを追加

## ブラケットレンズ

#括弧の先頭のコードを閉じ括弧で示します

##ブラケットペアカラーライザー 2

## ＃＃＃＃＃使ってもいいですか＃＃＃＃＃＃

HTML5、CSS3、SVG のブラウザ互換性チェック

コード概要

コード構造ツリーの表示

コードランナー

選択したコードセグメントを実行します (ほとんどの言語をサポートします)

コードスペルチェッカー

単語スペルチェッカー

#CodeBing

Bing をすばやく開いて検索、構成可能な検索エンジン

##色のハイライト

##コード内で色の値が強調表示されます

小さなウィンドウには、RGB、HSL、CMYK、HEX などのカラー値が表示されます。

#カラーピッカー

##カラーピッカー

CSS-in-JS

CSS-in-JS ハイライトのヒントと変換

ダッシュ

##Chrome のデバッグ

#これを文書化します

##コメント文書の生成

DotENV

##.env ファイルの強調表示

csv の編集

CSV ファイルの編集

#VS Code の EditorConfig

EditorConfig プラグイン

##絵文字

#をコードに入力してください

入力カーソルを現在の行の末尾にジャンプします

##プロンプトエラーコード行番号

#ESLint

##ESLint プラグイン、ハイライトプロンプト

ファイルピーク

##ステータスバーには現在のファイルサイズが表示されます

##Find-Jump

指定した単語の位置にすばやくジャンプします

HTML 用の Font-awesome コード

FontAwesome プロンプトコードスニペット

ftp-sync

ファイルを ftp に同期します

##Git Blame

Git の現在行をステータスバーに表示します。

#git ログの表示

##Git ツリーの比較

.gitignore ファイル構文

ファイルの最新のコミットと作成者を表示し、現在の行のコミット情報を表示します

# VSCode 用 GraphQL

graphql のハイライトとヒント

##ガイド

インデントベースラインを強調表示

##Gulp スニペット

Gulp コードスニペット

##一致するタグを強調表示

##HTML CSS サポート

css ヒント (vue をサポート)

HTMLHint

HTML 形式のヒント

htmlタグラップ

クイックラップ HTML タグ

#インポートコスト

インポート (インポート/必須) パッケージのサイズは次のとおりです。

##インデンティケータ

インデントハイライト

の行に表示されます。

#CSS クラス入力プロンプト

##ES6 構文コードスニペット

JavaScript 標準スタイル

標準スタイル

Jest Runner

Jest の単一のテストファイルまたは単一のユースケースの実行をサポートします。

##JS リファクタリング

コード再構築ツール、抽出関数、変数の名前変更など

#JSON から TS

#JSON ツール

##言語スタイラス

スタイラス構文の強調表示とヒント

IntelliSense の削減

変数とブレンディングの削減ヒント

Lodash

Lodash コードスニペット

ログラッパー

##選択した変数を出力するためのプロダクションコード

##markdownlint

##Markdown 形式のヒント

#Mocha コードスニペット

ノードモジュールの解決

ノードモジュールにすばやく移動

npm

npm コマンドの実行

npm Intellisense

インポート時モジュールを選択すると、インストールされているモジュール名

#Output Colorizer

#カラー出力情報

部分差分

##Path Autocomplete

#パス補完のヒント

Path Intellisense

別のパス補完プロンプト

Polacode

コードを生成します。写真

##PostCss の並べ替え

##CSS の並べ替え

##prettier 公式プラグイン

#JSON を整形する

##JSON をフォーマットする

プロジェクトマネージャー

プロジェクトをすばやく切り替える

Quokka.js

手動で実行する必要はありません。変数の結果は次の行に表示されます

レインボー CSV

##ストーリーブックプレビュープラグイン、react をサポート

エディターに React コンポーネントの実行環境を提供しますこれは便利です。デバッグ

react 標準スタイルコードブロック

REST スタイルの HTTP リクエストを送信

sass plugin

VSCode の設定が Gist に同期されました

選択した行の並べ替え

##typescript インポートの並べ替え

文字列操作

##文字列変換処理 (キャメルケース、大文字スタート、アンダースコアなど) .)

#stylelint

##css/sass/レスコードスタイル

SVG ビューア

#vscode 設定が gist に同期されました

テストケースの生成 (chai、 should、jasmine をサポート)

##Todo 管理

#Todo Todo ツリー

##コード内の TODO コメントを収集し、クイック検索をサポート

#引用符の切り替え

#ts/js 接尾辞プロンプト

#TSLint

## TypeScript 構文チェック

Types 自動インストーラー

自動インストール @types が依存関係を宣言します

#TypeScript Hero

TypeScript 補助プラグイン、インポートの管理、アウトラインなど

#React Typescript コードスニペット

#TypeSearch

TS 宣言ファイルの検索

##package.json ファイルには、モジュールの現在のバージョンと最新バージョンが表示されます

##vetur

Vue プラグイン

##Volar

##View Node Package

##Visual Studio IntelliCode

AI ベースのコードプロンプト

##VS Live Share

リアルタイムマルチプレイヤーアシスタンス

##VSCode の優れたアイコン

##ファイルアイコンの展開

vscode-database

#ファイルの検索に便利なファイルアイコン

ランダム文字列ジェネレーター

##vscode-spotify

Spotify の統合、音楽の再生

##vscode-styled-components

サポートを強調するスタイル付きコンポーネント

vscode-styled-jsxx

styled-jsx ハイライト表示のサポート

Vue Peek

##Vue コンポーネント定義ファイルへのジャンプのサポート

#Vue TypeScript スニペット

##Vue TypeScript スニペット

Vue2 コードスニペット (Vue2 API、vue -router2、vuex2 を含む)

##Wallaby.js

リアルタイムテストプラグ-

#Wrap Console Log Lite

Yes を選択します。 console.log へのコード

2. テーマ

##ブルーロコダーク # #bluloco-light ##GitHubテーマ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

名前	プレビュー
#Atom One Light テーマ

	##エンキのテーマ
	##eppz! (Unity 用 C# テーマ)
エヴァのテーマ
フラット UI

Monokai Pro
New Moon VSCode
One Dark Pro
Plastic
spacegray-vscode
Splus

三、个人首选项配置（仅供参考）

{ "breadcrumbs.enabled": true, "editor.tabSize": 2, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "editor.fontLigatures": true, "explorer.confirmDragAndDrop": false, "extensions.autoUpdate": false, "files.insertFinalNewline": true, "git.autofetch": true, "git.path": "F:\\Program Files\\Git\\cmd\\git.exe", "search.exclude": { "**/node_modules": true, "**/dist": true }, "typescript.locale": "en", "window.titleBarStyle": "custom", "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "window.zoomLevel": 1, "workbench.activityBar.visible": true, "workbench.colorTheme": "Plastic - deprioritised punctuation", "workbench.iconTheme": "vscode-great-icons", "workbench.startupEditor": "newUntitledFile", "eslint.autoFixOnSave": true, "eslint.validate": ["javascript", "javascriptreact", "vue"], "vsicons.projectDetection.autoReload": true, "vsicons.dontShowNewVersionMessage": true, "tslint.autoFixOnSave": true, "debugwrapper.wrappers": { "default": "console.log('$eSEL', $SEL)" }, "prettier.tslintIntegration": true, "cSpell.userWords": [ "Unmount" ], "jest.autoEnable": false, }

ログイン後にコピー

以上が【超おすすめ】VSCode拡張最新まとめ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。