Shulou(Shulou.com)06/02 Report--

Xiaobian to share with you which vscode commonly used plug-ins, I hope you have some gains after reading this article, let's discuss it together!

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

vscode installation plug-in just need to click the button shown in the picture, you can enter the expansion, enter the plug-in name in the search box, click install, wait for the installation to click reload restart vscode to make the plug-in effective.

When you don't need a plug-in, just enter the extension, click the gear button in the lower right corner of the plug-in to disable or uninstall the plug-in.

What are vscode plugins?

Plugin Description Remarks Auto Close Tag Auto Add HTML / XML Close Tag Auto Rename Tag Auto Rename Paired HTML / XML Tag Beautify Format Code

Bracket Pair Colorizer Color Recognition Match Bracket Code Runner A very powerful plugin that can run code snippets or code files in multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Ruby, Go, etc.

After installation, the following will appear in the upper right corner: $> change-case Although VSCode has built-in out-of-the-box text conversion options, it can only convert text case. This plug-in adds more naming formats for modifying text, including hump naming, underscore naming, snake_case naming, and CONST_CAS naming. Chinese (Simplified) Language Pack for Visual Studio Code Chinese Language Pack

Color Info is a handy plugin that will give you information about how you use colors in CSS. Just hover over the colors to preview information about the color models (HEX, RGB, HSL, and CMYK) in the color patch. CSS Peek With 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, select the " Go to Definition and Peek definition " option, it will send you CSS code for style settings Debugger for Chrome front-end debugging, see how ESLintEsLint can help us check Javascript programming syntax errors. 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 that some JS syntax is written correctly

filesize Displays the current file size in the status bar at the bottom, and details of how it was created and modified when clicked on Git History View the git log as a graph GitLens-Git supercharged Displays the most recent commit and author of the file, displays the current line commit information HTML Boilerplate By using the HTML template plug-in, you get rid of the trouble of rewriting the header and body tags for new HTML files. All you have to do is type html into an empty file and press Tab to generate a clean document structure HTMLHintHTML code format detection HTML Snippets code auto-fill htmltagwrap a layer of tags around the selected HTML tags

"Alt + W" ("Option + W" for Mac)Image Preview Mouse over path Display image preview Indicator Highlight current indentation depth intelliSense for CSS class names in HTML Put names in css files in project IntelliSense in html JavaScript (ES6) code snippets 6 Code snippets

Live Server browser real-time refresh Node.js Modules Intellisense can autocomplete JavaScript / TypeScript module npm Intellisense package prompt in import statement Path Intellisense autocomplete Quokka.jsQuokka is a debugging tool plugin that provides real-time feedback on the code you are writing

Use: ctrl+shift+p Enter quokka and select new javascript Regex Previewer This is a utility for testing regular expressions in real time. It can apply regular expression patterns to any open file and highlight all matches SVG Viewer This plug-in adds a number of useful SVG programs to Visual Studio code so you can open SVG files and view them without leaving the editor. It also contains options for converting to PNG format and generating data URI patterns VeturVue syntax highlighting, syntax error checking, code autocompletion

(works best with ESLint plug-ins)

vscode-fileheader top comment template, can define the author, time and other information, and will automatically update the last modified time

Ctrl+Alt+i

(Default information can be modified in File → Preferences → Settings) After reading this article, I believe you have a certain understanding of "which vscode plug-in is commonly used". If you want to know more about it, welcome to pay attention to the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.