The introduction

The project is not very busy these days, so I take time to talk about my experience and experience of using VScode in the project.

For programmers, the most popular editor is the editor. They have used Webstorm, Atom and SublimeText before, and now Vscode is the most widely used one. Compared with the first three, Vscode is more lightweight and has a wider ecological range of plug-ins.

Every time you use a new editor, you always want to adjust to the most ideal use state. The following will introduce the four aspects of appearance configuration, code specification check and function enhancement respectively:

Appearance of the configuration

vscode-icons

Vscode file icon theme color;

Linux & Windows: File > Preferences > File Icon Theme > VSCode Icons

MacOS: Code > Preferences > File Icon Theme > VSCode Icons

Code specification inspection

EditorConfig for VS Code

It is mainly used to set a uniform code specification for the project, which is supported by almost all major ides to avoid formatting problems caused by everyone on the team using a different editor.

Here are some of the configurations I use:

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Copy the code

eslint

Eslint has the following functions:

  • Find and fix syntax errors before executing code, reducing debugging time and potential bugs
  • Ensure uniform coding style of the project and improve maintainability
  • Urge team members to adhere to agreed best practices when coding to improve code quality
/ / eslint installation
npm install eslint --save-dev
// Use eslint --init to generate.eslintrc files
eslint --init
Copy the code

It can be configured as a separate.eslintrc file, specifying the configuration directly in the eslintConfig field of the package.json file

Prettier – Code formatter

  • beautifyjavascript,typescript,cssCode;
  • It can be created in the root directoryprettier.config.jsFile for manual configuration
module.exports = {
    singleQuote: true,
    trailingComma: 'es5',
    endOfLine: 'lf'
};
Copy the code

Document This

Generate jsDoc comments by pressing Ctrl + Alt + D;

enhancements

GitLens — Git supercharged

Enhance VSCode’s built-in Git capabilities to show code authorship at a glance, seamlessly navigate and connect to Git repositories, and get valuable information through powerful compare commands.

Auto Rename Tag

HTML tags are automatically renamed, which I’m sure you’ve installed without much explanation;

Auto Close Tag

HTML tags automatically close without much explanation;

Path Intellisense

Automatic path completion;

Build Git into Vscode terminal

Add the following code to the user Settings -> settting.json file

 // Build git into vscode terminal
"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe".Copy the code