What are the commonly used plug-ins for vscode?

vscode (Visual Studio Code) is a free and open source modern lightweight code editor that supports syntax highlighting, intelligent code completion, custom hotkeys, bracket matching, and code snippets for almost all mainstream development languages. , code comparison Diff, GIT and other features, supports plug-in extensions, and is optimized for web development and cloud application development.

vscode To install the plug-in, you only need to click the button shown in the picture to enter the extension. Enter the plug-in name in the search box, click Install, and wait for the installation to complete. Click Reload to restart vscode to make the plug-in take effect.

When you don’t need a certain plug-in, you only need to enter the extension and click the gear button in the lower right corner of the corresponding plug-in to choose to disable or uninstall the plug-in.

What are the commonly used plug-ins for vscode?

##Auto Close TagAutomatically add HTML/XML closing tagsAuto Rename TagAutomatically rename paired HTML/XML tags ##BeautifyBracket Pair ColorizerCode Runner After the installation is completed, the upper right corner will appear: ▶change-caseChinese (Simplified) Language Pack for Visual Studio CodeColor InfoCSS PeekDebugger for ChromeView usage##ESLintEsLint can help us check syntax errors in Javascript programming. For example: in Javascript applications, it is difficult to find variables or methods that you leak. EsLint can help us analyze JS code, find bugs and ensure a certain degree of correctness of JS syntax writing##HTMLHint HTML code format detectionHTML SnippetsCode auto-fillhtmltagwrapWrap a layer of tags outside the selected HTML tagImage PreviewMove the mouse to the path to display the image previewIndenticatorHighlight the current indentation depth##intelliSense for CSS class names in HTMLJavaScript (ES6) code snippetsLive ServerNode.js Modules Intellisensenpm IntellisensePath IntellisenseQuokka.jsUsage: ctrl shift p Enter quokka and select new javascript##Regex PreviewerThis is a real-time test Utilities for regular expressions. It applies regular expression patterns to any open file and highlights all matchesSVG ViewerThis plug-in adds many useful SVG programs to Visual Studio Code, allowing you to open SVG files and view them without leaving the editor. It also includes options for converting to PNG format and generating data URI patternsVeturVue Syntax High Highlight display, syntax error checking, code auto-completion##vscode-fileheaderShortcut key: Ctrl Alt iRelated recommendations:

Plug-in	Instructions	Remarks
Formatting code
Color identification matching brackets
A very powerful plug-in , able to run code snippets or code files in multiple languages: C, C, Java, JavaScript, PHP, Python, Perl, Ruby, Go, etc.
Although VSCode has built-in text conversion options out of the box, it can only convert text to upper and lower case. This plug-in adds more naming formats for modifying text, including camel case naming, underscore separated naming, snake_case naming and CONST_CAS naming, etc.
中文Simplified Language Pack
This handy plugin will provide you with information about the colors you use in CSS. You only need to hover the cursor over the color to preview the relevant information of the color model (HEX, RGB, HSL and CMYK) in the color block
Using this plugin, you can trace to where CSS classes and ids are defined in the style sheet. When you right-click the selector in the HTML file and select the "Go to Definition and Peek definition" option, it will send you the CSS code for the styling
Front-end debugging,
filesize	The current file size is displayed in the status bar at the bottom. After clicking, you can also see the detailed creation and modification time
Git History	View git logs as graphs
GitLens — Git supercharged	Display the latest commit and author of the file, and display the commit information of the current line
HTML Boilerplate	By using With the HTML template plug-in, you get rid of the trouble of rewriting header and body tags for new HTML files. You just need to enter html in the empty file and press the Tab key to generate a clean document structure
	”Alt W” (“Option W” for Mac)
Put it in the css file in the project Name snippets in html
es6 code snippets
Browser real-time refresh
can autocomplete JavaScript/TypeScript modules
require in the import statement Package prompt
Path auto-completion
Quokka is a debugging tool plug-in that provides real-time feedback based on the code you are writing
	(Better effect with ESLint plug-in)
The top comment template can define author, time and other information, and will automatically update the last modification time	(The default information can be modified in File→Preferences→Settings)

vscode introductory tutorial

The above is the detailed content of What are the commonly used plug-ins for vscode?. For more information, please follow other related articles on the PHP Chinese website!