Share 15 practical VSCode plug-ins, come and collect them!

Recommended study: "vscode tutorial"

Visual Studio Code is a free, cross-platform text editor developed by Microsoft. It has excellent performance and rich features. VSCode also has an extension and theme market. In order to help you choose plug-ins worth downloading, we have collected some practical and interesting plug-ins to share with you.

1. Open-In-Browser

Because VSCode does not provide direct opening in the browser Built-in interface for files, so this plugin adds the option to view files in the default browser in the shortcut menu, as well as in the client (Firefox, Chrome, IE ) to open the command panel options.

2. Quokka

Quokka is a debugging tool plug-in that provides real-time feedback based on the code you are writing. It is easy to configure and provides the ability to preview functions and calculated value results of variables. Additionally, it works out of the box in projects using JSX or TypeScript.

3. Faker

Use the popular JavaScript library – Faker, It can help you quickly insert use case data. Faker can randomly generate names, addresses, images, phone numbers, or classic random fake paragraphs, and each category also contains various subcategories. You can use these data according to your own needs.

4. CSS Peek

Using this plugin, you can trace the CSS class in the style sheet and where ids are defined. 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.

5. HTML Boilerplate

By using the HTML Boilerplate plugin, you get rid of the need to rewrite headers and headers for new HTML files The trouble with body tags. You just type html into an empty file and press the Tab key to generate a clean document structure.

6. Prettier

Prettier is currently the most popular code formatter in web development. With this plugin installed, it automatically applies Prettier and quickly formats entire JS and CSS documents into a unified code style. If you still want to use ESLint, then there is a Prettier – Eslint plug-in, don’t miss it

7. Color Info

This convenient plug-in will provide you with relevant information about the colors you use in CSS. You can preview the color model (HEX, RGB, HSL and CMYK) information in the color block by simply hovering the cursor over the color.

8. SVG Viewer

This plug-in adds many practical to Visual Studio code ## SVG Program that allows 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 patterns.

9. TODO Highlight

This plug-in can mark all TODO comments in your code to make it easier to track Any unfinished business. By default, it looks for the

TODO and FIXME keywords. Of course, you can also add custom expressions.

10. Icon Fonts

This is a plug-in that can add icon fonts to the project. The plugin supports over 20 popular icon sets, including

Font Awesome, Ionicons, Glyphicons and Material Design Icons.

11. Minify

This is an application for compressing and merging JavaScript and CSS files. It provides a large number of customizable settings, as well as the option to automatically compress and save and export to .min files. It can pass uglify-js, clean-css and html-minifier respectively, and JavaScript, CSS Works with HTML .

12. Change Case

Although VSCode has built-in text conversion options out of the box, it can only convert text Case conversion. 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.

13. Regex Previewer

This is a practical tool for testing regular expressions in real time. It applies regular expression patterns to any open file and highlights all matches.

14. Language and Framework Packs

VSCode supports a large number of mainstream programming languages ​​by default, but if the programming language you are using Not included, it can also be added automatically by downloading the expansion pack. At the same time, you can also add some related Web development plug-in packages like React Native and Vue.

15. Themes

Of course, among the many practical plug-ins, how can there be no beautiful themes? You come into close contact with your VSCode editor every day, so why not make it look prettier? Here are some themes to help you change the color scheme of your sidebar, as well as icons to share with you:

• One Monokai

• Aglia

• One Dark

• Material Icon

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of Share 15 practical VSCode plug-ins, come and collect them!. For more information, please follow other related articles on the PHP Chinese website!