Visual Studio Code (VS Code/VSC) is a free, open source, modern and lightweight Code editor that supports syntax highlighting, intelligent Code completion, custom hotkeys, bracket matching, Code snippets, Code comparison Diff, GIT, and other features in almost all major development languages. Improve the efficiency of software development so that you can spend more time polishing code.

Basic knowledge:

* Theme Settings: 1) Shortcut key: CTRL + Shift + P 2) Select: color Theme

* Shortcut key Settings

  1. Copy and paste the entire line: CTRL + C CTRL + V

  2. CTRL + / comment line

  3. Shift + Alt + A block comment

  4. CTRL + Shift + Enter inserts a line above it

  5. CTRL + Shift + F folder search

  6. Insert a line under CTRL + Enter

  7. Alt + Shift + F formatting code

This paper mainly includes:

1. Common configuration of VSCode

2. Basic requirements

3. Code specification

4. Code management

5. VSCode project practice configuration

First, VSCode common configuration (important)

1, the HTML

  1. Auto Rename Tag – Automatically Rename matching TAGS when modifying HTML tags

  2. HTML Snippets – Code prompts for HTML tags

  3. Path Intellisense – Indicates the file Path

  4. HTML CSS Support HTML prompt CSS automatic completion

  5. Bracket Pair Colorizer – Color matching (can quickly distinguish Bracket position and type)

2, Css,

  1. Beautify CSS/SASS/SCSS/LESS formatting

  2. CSS PEEK HTML is associated with CSS

3. Grammar check

  1. ESLint – Specifies rules for writing JS code

Note: Most problems found by ESLint can be fixed automatically. ESLint will automatically fix the file based on the syntax used in the current file.

  1. Tslint-ts writing specification

  2. Prettier-code formatter Formatting plug-in

Prettier is quite useful plug-ins, can be a key to beautify your JavaScript/TypeScript/CSS code.

4, comments,

  1. KoroFileHeader – a plug-in for header annotations and function annotations

5, Vue

  1. Vetur VUE syntax highlighting (mandatory for VUE developers)

Support a variety of functions, such as syntax highlighting, error detection, formatting, automatic completion, debugger and other practical functions.

  1. VueHelper Vue2 code segment

6. Git code management

  1. Git History tool – View Git commit History

Check the file’s history (Git log) or the line history in the file (Git Blame)

  1. Git Supercharged – Submit information

Note: The author, commit time, commit log and other information of each code line can be seen at a glance.

Second, basic requirements

1. Chinese-editor Localization package

Vscode Editor Chinese package. After the installation and restart, it will automatically become Chinese (Simplified) language, and after the uninstallation and restart, it will automatically become English language.

Knowledge expansion:

After the installation, add “locale”: “zh-cn” to locale.json to load the Chinese (simplified) language package.

Press CTRL + Shift + P

1) Set Chinese to English, enter “Configuration language” to open locale.json, and set “locale”:”en”;

Json “locale”:” zh-cn “;

2. Auto Rename Tag – Automatically renames paired HTML tags

Automatic renaming of paired HTML/XML tags (required).

Such as:

3, HTML Snippets – HTML tag code prompts

HTML code snippets. This plug-in provides code hints for HTML tags without typing Angle brackets.

For example, span becomes

Bracket Pair Colorizer – Bracket Pair color matches

This extension allows matching parentheses to be identified by color. The user can define the characters to match and the colors to use.

Such as:

Pairs of parentheses (braces, braces) are the same color, which is especially important when code is nested with multiple layers of parentheses.

5. Path Intellisense – File Path prompt

Automatic prompt file path, support a variety of quick file introduction.

6. Vetur-vue developers must have

Vue plugin is an official Vue plugin for Vue developers. It contains syntax highlighting, smart tips, Emmet, error tips, formatting, auto-complete, debugger and other useful functions.

7. Split screen function – Project practice

One of the most common scenarios I encounter when writing code is working between different files, and switching between two files can be very troublesome.

In fact, you’ve mastered the split screen of vscode and this is going to make you fly.

Code specification

ESLint – Specifies rules for writing JS code

Code format verification, support custom configuration, error is red wavy line, warning is green

Such as:

If you don’t conform to the rules for configuring ESLint, a red wavy line will appear and mouse over it will show the specific error.

2. Tslint-ts writing specification

This plugin is a family of plugins that also provide TSLint (Deprecated), TSLint Vue, and TSLint VUE-tsx

KoroFileHeader – a plug-in for header annotations and function annotations

Used to add file header comments, function comments.

Comment code to show the result:

<! -- * @Author: zhangsan * @Date: 2019-11-11 19:27:19 * @LastEditors: zhangsan * @LastEditTime: 2021-02-05 13:13:57 * @describe: Describe a great discovery -->Copy the code

Detailed code configuration, such as:

1. Set up automatic comment generation

"Fileheader. configObj": {"autoAdd": true},Copy the code

2. Comments in the file header

"Fileheader. customMade": {"Description":"",// "Author":"huacong",// "Date": "Do not edit",// time "LastEditTime": "Do not edit", "LastEditors": "huacong",},Copy the code

Add a comment to the header of the file. The shortcut keys are: Window: CTRL + Alt + I, MAC: CTRL + CMD + I

3. Function comments

"fileheader.cursorMode": {
    "description":"",
    "param ":"",
    "return":""
  },
Copy the code

Add a function comment at the cursor, window: CTRL + Alt + T, MAC: CTRL + CMD + T

Note: If the shortcut keys do not take effect, check whether the introduction shortcut keys are used.

Iv. Code management

Git History – Check Git commit History

Such as:

See the change history, or need to see who submitted what file.

2. Git Supercharged — Submit information

You can see the author, commit time, commit log and other information of each code line at a glance.

Such as:

This plugin is highly recommended if you’re developing vscode+git, so you can see at a glance who changed your code.

V. VSCode project practice configuration

Setting. Json configuration of VSCode.

{" workbench. Editor. EnablePreview ": false, / / open the file does not cover" search. FollowSymlinks ": False, / / close the rg. Exe process editor. The minimap. "enabled" : false, / / off quick preview "liveServer. Settings. DonotShowInfoMsg" : AutoSave ": "afterDelay", // Open autoSave" editor.fontSize": 16, // Set text size "editor.lineHeight": 24, // Set text line height "editor.lineNumbers": "on", // enable line number prompt "editor.quickSuggestions": {// Enable automatic display suggestions "other": true, "comments": True, "strings": true}, "window.zoomLevel": 0, // adjust the window zoomLevel" editor.tabSize": 2, // TAB symbol eslint // "editor.formatOnSave": true, // # Prettier uses esLint's code format to verify "FileHeader. configObj": {" autoAdd ": true} / / the default open, / / # use quotation marks instead of double quotes" prettier. SingleQuote ": false," vetur. Format. DefaultFormatterOptions ": { "prettier": { "eslintIntegration": true, "semi": false } }, "javascript.format.insertSpaceBeforeFunctionParenthesis": False, / / function (name) and add a space between the brackets behind the "vetur. Format. DefaultFormatter. Js" : "Vscode - typescript", / / let the vue of js according to the editor's own ts format to format / / "vetur. Format. DefaultFormatter. HTML" : "js-beautify-html", "eslint.validate": [// enable error checking for.vue files "javascript", "javascriptreact", "HTML ", "vue"], // "workbench.iconTheme": CustomMade: {"Author": "jiashuangxi", "Date": {"Author": "jiashuangxi", "Date": "Do not edit", "LastEditors": "jiashuangxi", "LastEditTime": "Do not Edit", "Describe": }, // Function annotation "fileHeader. cursorMode": {"Description": "", "param": ""}, "[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { "editor.defaultFormatter": "vscode.typescript-language-features" }, "editor.wordWrap": "Editor. codeActionsOnSave": {" source.fixall.eslint ": true}}Copy the code

* Settings in json

Eslint validation rules are set in setting.json of the VSCode editor

1, the first error:

Auto Fix is enabled by default. Use the single string form.
Copy the code

Original code configuration (error)

"eslint.validate": [
  "javascript",
  "javascriptreact",
  {
    "language": "html",
    "autoFix": true
  },
  {
    "language": "vue",
    "autoFix": true
  }
]
Copy the code

Modern code configuration

"eslint.validate": [
  "javascript",
  "javascriptreact",
  "html",
  "vue"
]
Copy the code

2, the second error:

The setting is deprecated. Use editor.codeActionsOnSave instead with a source.fixAll.eslint member.
Copy the code

This configuration is invalid, use editor.codeActionsOnSave, where the source. fixall. eslint property is configured.

Change “eslint.autoFixOnSave”: true to:

"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
Copy the code