The following article will introduce you to commonly used VSCode extensions. I hope it will be helpful to you!

1. Expansion

## Bracket LensIndicates the code at the head of the bracket at the closing bracketBracket Pair Colorizer 2#Highlight matching brackets with different colorsCan I Use##Color PickerCSS-in-JSCSS-in-JS Highlight Tips and Convert##DashDebugger for Chrome# in the code ##ESLint plug-in, highlight promptFile PeekfilesizeFind-JumpFont-awesome codes for html##GitLensDisplay the latest commit and author of the file, and display the commit information of the current lineGraphQL for VSCodegraphql highlights and tips##Guides##Gulp SnippetsQuick wrap html tagInclude HTMLimport grouping, sorting, formatting##ES6 syntax code snippets ##JavaScript Standard StyleJest Runner##JS RefactorJSON to TSJSON Tools##PostCss SortingPrettier - Code formatter##storybook preview plugin, supports reactReact Playground Provides a react component running environment for the editor, which is convenient DebuggingReact Standard Style code snippetsreact standar Style code blockREST ClientSend REST style HTTP requestSasssass pluginSettings SyncVSCode settings synchronized to GistSort linesSort selected linesSort Typescript ImportsString Manipulation##Todo ManagementTodo Todo TreeToggle QuotesTS/JS postfix completion##Volar##View Node PackageOperation database, supports mysql and postgresFile icon, convenient for locating files##vscode-randomRandom String Generator##Wallaby.js Real-time test plug-inWrap Console Log LiteYes Select the code to quickly console.log

2. Theme

##Name	Brief description
Auto Close Tag	Auto-close HTML tag
Auto Import	import prompt
##Auto Rename Tag	When modifying HTML tags, automatically modify the matching tags
Babel JavaScript	babel plugin, syntax highlighting
Babelrc	.babelrc file highlighting tip
Beautify css /sass/scss/less	css/sass/less formatting
Better Align	Align assignment symbols and comments
Better Comments	Write more user-friendly comments
Bookmarks	Add row bookmark


	Browser compatibility check for HTML5, CSS3, and SVG
Code Outline	##Display code structure tree
##Code Runner	Run the selected code segment (supports most languages)
Code Spell checker	Word spell checker
CodeBing	Quickly open Bing and search, configurable search engine
Color Highlight	Color values are highlighted in code
Color Info	The small window displays color values, rgb, hsl, cmyk, hex, etc.
Color Picker

##Integrate Dash
##Debug Chrome	Document This
##Comment document generation	DotENV
##.env file highlighting	Edit csv
Edit CSV file
EditorConfig for VS Code	EditorConfig plugin
Emoji	Enter emoji
##endy	Jump the input cursor to the end of the current line
Error Gutters	##Prompt error code at line number
ESLint
##Quickly locate the file based on the path string
##The status bar displays the current file size
Quickly jump to the specified word position
FontAwesome prompt code snippet	##ftp-sync
Sync files to ftp	##Git Blame
Display the current line of Git in the status bar Information	Git File History
Quickly browse a single file Historical commit changes	Git Graph
Git graphical View for easy browsing and operation	Git History(git log)	View git log
##Git Tree Compare	Git tree comparison, view the differences between different branches
##gitignore	.gitignore file syntax


Highlight indent baseline
Gulp Code Snippet	##Highlight Matching Tag
Highlight matching selected tags	##HTML CSS Class Completion
CSS class tip	##HTML CSS Support
css hint (supports vue)	HTMLHint
HTML Format Tips	##htmltagwrap
	##htmltagwrap
	Import Beautify

Import Cost	The size of the imported (import/require) package is displayed in the line
##Indenticator	##Indent Highlight
IntelliSense for css class names	css class input prompt
JavaScript (ES6) code snippets
Standard Style
Supports executing Jest single test file or single use case
Code reconstruction tool, extraction Functions, variable renaming, etc.
JSON structure converted into typescript interface
Formatting and Compressing JSON	##jumpy
Quickly jump to the specified word position	##language-stylus
Stylus Syntax Highlighting and Tips	Less IntelliSense
less variables and blending tips	Lodash
Lodash Code Snippet	Log Wrapper	Production code for printing selected variables
##markdownlint	Markdown Format Tips
##MochaSnippets	Mocha code snippet
Node modules resolve	Quickly navigate to Node modules
npm	Run npm command
npm Intellisense	When importing the module, it prompts that the installed module name
Output Colorizer	Color output information
Partial Diff	Compare two pieces of code or files
Parameter Hints	Indicate parameter names at function calls
Path Autocomplete	Path Completion Tips
Path Intellisense	Another Path completion prompt
Polacode	Generate the code into a picture
##css sorting
##prettier official plug-in
Prettify JSON	##Format JSON
Project Manager	Quickly switch projects
Quokka.js	No need to run manually, the variable results are displayed in the line
Rainbow CSV	##CSV file uses rainbow colors to render different columns
React Native Storybooks






##typescript import sorting
##String conversion processing (camel case, capital start, underscore, etc. )
stylelint	##css/sass/less code style
SVG Viewer	##SVG Viewer
Syncing	vscode settings synchronized to gist
Test Spec Generator	Test case generation (supports chai, should, jasmine)
TODO Parser
##Collect TODO comments in the code and support quick search
##Toggle quotation marks in JS," -> ' -> `
ts/js suffix prompt	##TSLint
TypeScript syntax check	Types auto installer
Automatic installation @types declares dependencies	TypeScript Hero
TypeScript Auxiliary Plug-ins, manage import, outline, etc.	TypeScript Import
TS automatic import	TypeScript Import Sorter
import sorting	Typescript React code snippets
React Typescript Code Snippet
##TypeSearch	TS declaration file search
Version Lens	The package.json file displays the current version and the latest version of the module
##vetur	Vue Plugin
##Vue plug-in, supports Vue3
Quickly open the homepage and code repository of the selected module	##Visual Studio IntelliCode
AI-based code prompts	##VS Live Share
Real-time multiplayer assistance	##VSCode Great Icons
File icon expansion	##vscode-database
	##vscode-icons

##vscode-spotify	Integrate spotify, play music
##vscode-styled-components	styled-components highlighting support
vscode-styled-jsx	styled-jsx highlighting support
Vue Peek	##Support jumping to Vue component definition file
Vue TypeScript Snippets	Vue Typescript Snippets
##VueHelper	Vue2 code snippet (including Vue2 api, vue -router2, vuex2)

##bluloco-light##Enki Theme#eppz! (C# theme for Unity)

##Name	Preview
Atom One Light Theme
##bluloco-dark


	##Eva Theme
	Flat UI
	#GitHub Theme

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": "&#39;Fira Code&#39;, &#39;Droid Sans Mono&#39;, &#39;Courier New&#39;, monospace, &#39;Droid Sans Fallback&#39;",  "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(&#39;$eSEL&#39;, $SEL)"
  },  "prettier.tslintIntegration": true,  "cSpell.userWords": [    "Unmount"
  ],  "jest.autoEnable": false,
}