Vscode Common Plug-ins (front-end Class)

Vscode Common Plug-ins (front-end Class)
1. Open-in-browser
Because Vscode does not provide a built-in interface to open the file directly in the browser, the plugin adds the option to view the file in the default browser in the shortcut menu and open the Command panel option in the Client (Firefox,chrome,ie).
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 can preview the function of variables and the results of computed values. In addition, in the use of JSX or Typescript project, it can be used to open the box.
3. Faker
Use the popular JavaScript library –faker to help you quickly insert use case data. Faker can randomly generate names, addresses, images, phone numbers, or classic random text paragraphs, and each category also contains subcategories, which you can use to suit your own needs.
4. CSS Peek
With this plugin, you can trace to the CSS class and the IDS definition in the style sheet. When you right-click the selector in the HTML file, select the go To Definition and Peek definition option, and it will send you CSS code for the style settings.
5. HTML boilerplate
By using HTML template plug-ins, you get rid of the agony of rewriting the header and body tags for the new HTML file. You can simply enter HTML in 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. Install the plugin, it will be able to automatically apply prettier, and the entire JS and CSS documents quickly formatted into a unified code style. If you still want to use eslint, then there is a Prettier–eslint plug-in, you do not miss it.
7. Color Info
This handy plugin will provide you with information about the colors you use in CSS. You can preview the color model (HEX, RGB, HSL, and CMYK) information in the color swatch by just hovering over the cursor.
8. SVG Viewer
This plugin adds a number of useful SVG programs to your Visual Studio code, and you can open SVG files and view them without leaving the editor. It also includes options for converting to PNG format and to generate a data URI pattern.
9. TODO Highlight
This plugin 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.
Icon Fonts
This is a plugin that can add icon fonts to your project. The plug-in supports more than 20 popular icon sets, including the Font Awesome, Ionicons, Glyphicons, and Material design Icons.
Minify.
This is an application to compress merged JavaScript and CSS files. It provides a number of custom settings, as well as an option to automatically compress saved and exported to. min files. It works with JavaScript, CSS, and HTML, respectively, through Uglify-js, Clean-css, and Html-minifier.
Change case
Although Vscode has built-in, out-of-the-box text conversion options, it can only be converted to uppercase and lowercase text. This plugin adds more named formats for modifying text, including hump naming, underline delimited naming, snake_case naming, and Const_cas naming.
Regex Previewer
This is a practical tool for testing regular expressions in real time. It can apply the regular expression pattern to any open file and highlight all occurrences.
Language and Framework Packs
Vscode default support for a large number of mainstream programming languages, but if you are using the programming language is not included, you can download the expansion pack to automatically add. At the same time, you can add some related WEB development plug-in packages like react Native and Vue.
Themes Themes
16.vscode-path Intellisense------File path hints.

17.vscode-js-css-html formatting------js-css-html format.

18.vscode-csscomb------CSS attribute sorting. (Sublime text also has)

19.vscode-vue 2 Snippets------vue2 syntax highlighting, syntax hints.