Visual Studio Code (referred to as “VS Code”) is essential in the process of front-end development, VS Code as the Code editor, open source, free, high appearance level. More importantly, a rich set of plugins that can improve development efficiency is something you deserve.

Most of us on the team are using it, and we’ve summarized some useful plug-ins. Let’s go from installation to use to learn more about and enrich your VS Code.

VS Code installation and configuration

You can install the latest version here.

To switch between languages

After the installation is complete, English is displayed by default. We can install the Chinese language pack plug-in to display Chinese, as follows:

Open vscode, click the plug-in icon (or ⌘ + ⇧ + X), type “Chinese” in the search box, and install

⌘ + registering + P open the VScode command box, type display, and click Configure Display Language to switch the Language

Replace the topic

If you don’t like VS Code’s theme color, you can also change the default theme. Type color Theme in the command box, press Enter, and the theme list will be displayed.

Add ICONS

I recommend vscode-icons as an icon plugin. Once installed, different ICONS will be added according to different file types to make them look more interesting.

Adding snippets

  • Open theThe user segment

  • Click on theNew snippet, enter the segment name in the input box

  • Enter custom code snippets

  • Used in code, inputvue3-template, select the newly created fragment

VS Code plug-in

Auto Close Tag

Automatically close HTML/XML tags

Auto Rename Tag

Automatically renames HTML/XML tags

Autoprefixer

The CSS is parsed and prefixed automatically

Bracket Pair Colorizer

Use to color matching brackets to make your code more layered

Code Runner

Run code snippets or code files in multiple languages

Code Spell Checker

Source code spell checker, indicating that words in the code are misspelled

CSS Peek

Allows you to view CSS and navigate from HTML files to CSS files that define jumps

DotENV

Support. Env file syntax, highlighted

Draw.io Integration

Draw a flow chart in VS Code to record your idea at any time

ESLint

Code format verification tool, with the verification rules in the project, save the implementation of formatting code, development necessary, you deserve to have!

The configuration file is added in setting.json for reference

"editor.codeActionsOnSave": {
    "source.fixAll": true
},
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
],
Copy the code

Git History

Integrate git tools with VS Code to view Git records, file history, compare branches, commit code, and more

Git Graph

Git Graph is a visual version control plug-in similar to SourceTree that allows you to update and commit code, view commit records, and review your code

GitLens – Git supercharged

Easy to view the submission record of each line of code, including the submitter, submission time, etc., do not know which students modify the code, you can try, clear and clear

Highlight Matching Tag

Highlight matching labels

Image Preview

A thumbnail of the image will be displayed on the left when you import it for easy preview

Import Cost

Display the size of the reference package in the editor to give you a better idea of the package you are importing

Javascript console utils

Help you quickly add and remove console, really convenient

  • ⌘ + ⇧ + L, which will output, e.g. Console. log(‘ test ‘, test)
  • ⌘ + ⇧ + D will delete all console.log statements in the current document

koroFileHeader

In vscode used to generate file header annotations and function annotations plug-in, after multiple iterations, plug-in: support all mainstream languages, powerful, flexible and convenient, complete documentation, simple to eat!

  • ⌃ + ⌘ + I, can generate file header comments
<! -- * @Author: your name * @Date: 2021-11-18 18:08:32 * @LastEditTime: 2021-11-19 11:29:00 * @LastEditors: your name * @Description: * @FilePath: -->Copy the code
  • ⌃ + ⌘ + t, automatically parses function parameters, generates function parameter comments
/**
 * @description: 
 * @param {*} 
 * @return {*}
 */
Copy the code

npm Intellisense

Code plug-in that automatically completes the NPM module in import statements

open in browser

Allows you to open the current file in the default browser or application.

  • ⌥ + B, open the default browser

Path Intellisense

Automatic identification of file path, more convenient reference

Prettier

You can also configure your own rules in a project

Svg Preview

Easy to preview SVG files

Todo Tree

Quickly search for tags added in the editor, such as Todo and Fixme, and display them in a tree view in the Explorer pane. Clicking todo in the tree opens the file and places the cursor on the line containing the todo.

Trailing Spaces

Highlight trailing Spaces and remove them quickly!

Volar

Like vetur, volar is a vscode plug-in for vue. Vue files support syntax, highlighting, formatting verification, error detection, etc. Volar, unlike vetur, provides much more powerful features

  • Editor quick segmentation

  • classtrace

  • langGrammar tip

Just to name a few, there are other features you must try!

There are some plug-ins

Power Mode

Your code is powerful, free it!

.

What do you have to use plug-ins, can also recommend ha ~