Visual Studio Code is a free, cross-platform text editor developed by Microsoft. Because of its excellent performance and rich features, it soon became popular.

Like most ides, VSCode has an extension and theme marketplace that contains thousands of plug-ins of varying quality. Here is a list of VSCode front-end must-have plugins, complete with illustrations, to see if you can use them.

VS Code installation and Localization

Download from: VS Code official website link select the appropriate version and install

The plug-in

Settings Sync: Settings Sync

1.Open-In-Browser

Since VSCode does not provide a built-in interface for opening files directly in the browser, the plug-in adds the option to view files in the default browser in the shortcut menu and the option to open the command panel in the client (Firefox, Chrome, IE).

2.Quokka

Quokka is a debugging plugin that provides real-time feedback on the code you are writing. It is easy to configure and has the ability to preview the results of functions and computed values for variables. In addition, it works out of the box in projects that use JSX or TypeScript.

3.Faker

Use the popular JavaScript library, Faker, to help you quickly insert use-case data. Faker can generate random names, addresses, images, phone numbers, or classic random paragraphs, and each category contains subcategories that you can use to your advantage.

4.CSS Peek

Using this plugin, you can track where CSS classes and IDS are defined in your stylesheet. When you right-click on 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 style Settings.

5.HTML Boilerplate

By using the HTML template plugin, you get rid of the pain of rewriting header and body tags for new HTML files. You simply type HTML into an empty file and press the Tab key to generate a clean document structure.

6.Prettier / Prettier Now

Prettier is the most popular code formatter in Web development. After installing the Prettier plug-in, it automatically applies Prettier and quickly formats the entire JS and CSS document into a uniform code style. If you still want to use ESLint, there’s an Prettier — ESLint plugin for you, so don’t miss it!

The prettier-now file is installed, which does not need to be configured. The prettierrc file is easier to use. Install one of these two

7.Color Info

This handy plugin will give you information about how to use colors in your CSS. You can preview the HEX, RGB, HSL, and CMYK color models in the color block by hovering the cursor over the color.

8.SVG Viewer

This plugin adds a number of useful SVG programs to 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 generating data URI patterns.

9.TODO Highlight

This plugin marks all TODO comments in your code to make it easier to track any unfinished business. By default, it looks for TODO and FIXME keywords. Of course, you can also add custom expressions.

10.Icon Fonts

This is a plugin that can add icon fonts to your 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 number of custom Settings, as well as the option to automatically compress save and export as. Min files. It works with JavaScript, CSS, and HTML via Uglify-JS, clean-CSS, and HTmL-Minifier, respectively.

12.Change Case

Although VSCode has built-in text conversion options out of the box, it can only convert text case. This plugin adds more naming formats for changing text, including camel humps, underscore separated names, snake_case names, and CONST_CAS names.

13.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.

14.Language and Framework Packs

VSCode supports a large number of major programming languages by default, but if your programming language is not included, it can be added automatically by downloading an extension pack. You can also add related Web development add-ons like React Native and Vue.

15.Themes

Of course, among the many useful plug-ins, how can there be less beautiful themes? You get close to your VSCode editor every day, so why not spruce it up a bit? Here are some related topics to help you change the color scheme of the sidebar, as well as the ICONS:

16.vscode-icons

All kinds of beautiful ICONS

17.filesize

The lower left corner shows the plug-in for the file size

18.GitLens

Displays the author of each line of code and when it was submitted.

19.Git history

Git history

20.Vetur

Vue multi-function integration plug-in, including: syntax highlighting, intelligent hint, Emmet, error message, formatting, autocomplete, debugger. Vue plug-in, Vue developers must have.

21.React/Redux/react-router Snippets

React/Redux/ React-router Indicates syntax intelligence

22.Path Intellisense

Automatic prompt file path, support all kinds of fast import files

23.JavaScript(ES6) code snippets

ES6 syntax smart hints, and fast input, not only support.js, but also.ts,.jsx,.tsx,.html,.vue, save the time to configure it to support various files containing JS code

24.HTML Snippets

Smart tips for HTML tags, as well as tag meaning

25.HTML CSS Support

Intelligent prompt CSS class name and ID

26.Debugger for Chrome

Map breakpoints from vscode to chrome for easy debugging

27.Auto Close Tag

Automatically closes HTML/XML tags

28.Auto Rename Tag

Automatic completion of the other side of the label synchronization modification

29.Markdown Preview Enhanced

Live preview of MarkDown is a must for markDown users

30.markdownlint

Markdown syntax correction

31.KoroFileHeader (header annotation and function annotation plug-in)

Click on the Settings button in the lower left corner of vscode, select “Settings”, and type “fileheader”,

Json. Enter the following Settings to save, then restart vscode to update the Settings:

// KoroFileHeader // File header comments - Shortcut keys CRTL + Alt + I (window), CTRL + CMD + T (MAC)"fileheader.customMade": {
    "Descripttion": ""."version": ""."Author": "voanit"."Date": "Do not edit"."LastEditors": "voanit"."LastEditTime": "Do not Edit"}, // Function comments - shortcut keys CTRL + Alt +t(window), CTRL + Alt +t(MAC)"fileheader.cursorMode": {
    "name": ""."test": "test font"."msg": ""."param": ""."return": ""
  }
Copy the code

32.Vue VSCode Snippets

  

VUE code autocomplete plug-in

33.VueHelper

Snippet

34.Document This(js and typescript comment templates)

CTRL + Alt +D, twice (note: new vscode is natively supported, type /** TAB on function)

35.Project Manager

Project management tools

To solve this problem, vscode provides the Project Manager plug-in to manage and develop frequently used projects

(1) Command + Shift + p to open the configuration file, enter Project Manager: Edit Projects

[{"name": "nuxtest"."rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",// Add your local project"paths": []."group": ""
	},
	{
		"name": "vuetest"."rootPath": "/Users/tianer/WebstormProjects/sales-crm-web",// Add your local project"paths": []."group": ""}]Copy the code

Paths can hold subprojects

36.Live Server

Local development builds temporary services

37.Path Intellisense

Path completion plug-in

At the end of eggs

Welcome to pay attention to the front stage of the public number, get more front-end knowledge, join the front group, make friends with the famous Internet tycoon, open a new chapter of learning together!