VScode commonly used must-have plug-ins

Visual Studio Code("VS Code" for short) is indispensable in the process of front-end development. vscodeAs a code editor, it is open source, free, and looks good. More importantly, rich plug-ins can improve development efficiency, and you deserve it. Most people in our team are using it, and we have also summarized the useful plug-ins. Next, from installation to use, we will learn and enrich your experience in detail VS Code.

VS Code installation and configuration

You can install the latest version here .

switch language

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

Open vscode, click the plug-in icon (or ⌘ + ⇧ + X), enter in the search box chinese, install:

use the shortcut key ⌘ + ⇧ + Pto open vscodethe command box, enter display, click Configure Display Language, switch language:

change theme

If you don’t like VS codeyour own theme color, you can also change the default theme, enter in the command box color theme, press Enter, you will enter the theme list, use the up and down keys to switch the theme, if you are not satisfied, it doesn’t matter, click to install other color themes, on the left will be A variety of theme plugins appear, just choose one to install.

add icon

We recommend an icon plugin vscode-icons. After successful installation, different icon styles will be added according to different file types, which will look more interesting.

Add code snippet

• open 用户片段:
  
• Click 新代码片段and enter the fragment name in the input box:
  
  
• Enter a custom code snippet
  
• Use in the code, enter vue3-template, select the newly created fragment
  
  

VS Code plugin

Auto Close Tag

self-closing HTML/XMLlabel:

Auto Rename Tag

Automatically rename HTML/XMLtags:

Autoprefix

Parses CSS and automatically prefixes:

Bracket Pair Colorizer

Useful for coloring matching brackets to make your code layered more clearly:

Code Runner

Run code snippets or code files in multiple languages

Code Spell Checker

Source code spell checker, prompting for misspelled words in the code

CSS Peek

Allow to view css, and locate from HTML file to css file, file definition jump

DotENV

Support for .envfile syntax, highlighting

Draw.io Integration

Draw a flowchart in VS code, record your idea at any time, don't be too convenient

ESLint

The code format verification tool cooperates with the verification rules in the project to format the code when saving. It is a must for development and you deserve it!

Configuration file, add it in setting.json, you can refer to:

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

Git History

Integrate git tools in VS code, view git records, file history, compare branches and submit code, etc.

Git Graph

Git Graph is a visual version control plug-in similar to SourceTree, which can update and submit code, view submission records, and review code

GitLens - Git supercharged

It is easy to check the submission record of each line of code, including the submitter, submission time, etc. If you don’t know which student modified the code, you can try it, it is clear

Highlight Matching Tag

Highlight matching tags

Image Preview

When you import, a thumbnail of the picture will be displayed on the left for easy preview

Import Cost

Display the size of the referenced package in the editor, so you can better understand the package you imported

Javascript console utils

Help you add console and delete console more quickly, it is really convenient

Selecting your variable, ⌘ + ⇧ + L, will output something like console.log(' test ', test )
⌘ + ⇧ + D, which will remove all console.log statements in the current document

koroFileHeader

The plug-in used to generate file header comments and function comments in vscode, after multiple iterations, the plug-in: supports all mainstream languages, powerful, flexible and convenient, complete documentation, easy to eat!

• ⌃ + ⌘ + i, which 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: 
  -->
  

• ⌃ + ⌘ + t, automatically parse function parameters and generate function parameter comments

  /**
   * @description: 
   * @param {*} 
   * @return {*}
   */
  

npm Intellisense

Code plugin to autocomplete NPM modules in import statements

open in browser

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

⌥ + B, to open the default browser

Path Intellisense

Automatically identify the file path, making it easier to reference

Prettier

A code formatting tool I like very much, you can also configure your own rules in the project

Svg Preview

Convenient svg file preview

All Tree

Tags added in the editor, such as todo and fixme, are quickly searched and displayed in a tree view in the explorer pane. Clicking on a todo in the tree will open the file and place the cursor on the line containing the TODO.

Trailing Spaces

Highlight trailing spaces and remove them quickly!

Volar

Same as vetur, volar is a vscode plugin for vue, which supports syntax support, highlighting, format verification, error detection, etc. of .vue files, but unlike vetur, volar provides more powerful functions

• Editor shortcut split
  
• classtrace back
  
• langGrammar Tips
  
  Just to list some, there are other functions, you must try!

Power Mode

…

If you have any useful plug-ins, you can also recommend them~