【超おすすめ】VSCode拡張最新まとめ！

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

1. 拡張

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