Vscode code formatting and eslint


brief introduction

Today, after looking at more and more code written, I find it a little hard to read. Haha, I look at the pain in my eyes, and I am ready to rectify it. After all, this project has to be maintained for a long time. It took me an hour and a half to find solutions and test solutions, and I seriously began to doubt my IQ. The following goals make the code look Fair

Code Editor

Version: Version 1.35.1 (1.35.1) Updated from 2019-06-12T14:19:05.197Z

Vscode code formatting

Because the company is my back end, the project is not big, so we use this program, simple, fast and rough.

1. Click code - > Preferences - > settings and click {} in the upper right corner.
User-defined settings (/User/settings.json)
Add code
"editor.formatOnType": true,
"editor.formatOnSave": true

ESLint configuration

ESLint not only has code specification, but also has some function of grammar checking. ex: command specification (hump) a==b warning prompt a===b…
ESLint can effectively standardize code, and will continue to adopt it in the future to cultivate their own coding habits.

1. vscode installs ESLint

Here’s an example of configuring eslint-config-aribnb
Vscode installs ESLint in extensions

2.npm installation

npm install -g eslint

3. Create. eslintrc file

softwaredeMacBook-Pro:koa-pro software$ "eslint --init"
? How would you like to configure ESLint? "Use a popular style guide"
? Which style guide do you want to follow? "Airbnb" (https://github.com/airbnb/javascript)
? Do you use React? "No"
? What format do you want your config file to be in? "JSON"
Checking peerDependencies of [email protected]
The config that you have selected requires the following dependencies:

[email protected] [email protected]^4.19.1 || ^5.3.0 [email protected]^2.14.0
? Would you like to install them now with npm? "Yes"
Installing [email protected], [email protected]^4.19.1 || ^5.3.0, [email protected]^2.14.0
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
+ [email protected]
updated 3 packages and audited 7469 packages in 23.559s
found 370 vulnerabilities (1 low, 367 moderate, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details
Successfully created .eslintrc.json file in /Users/software/workspace/Me/huafu/koa-pro

An eslintrc. JSON file will be generated under the project directory

    "extends": "airbnb-base"
Add the settings you want, my node environment here
{"env": {
    "node": true,
    "es6": true
  "ParserOptions": {# Resolves import export lint error reporting
    "ecmaFeatures": {
      "legacyDecorators": true
    "extends": "airbnb-base"

4. Relevant eslint and vscode

1. code - > Preferences - > settings into seetings of user
2. Add the following code

"Eslint.autoFixOnSave": true, // save auto-repair eslint error
  "eslint.validate": [
      "language": "vue",
      "autoFix": true
  "Eslint. options": {// specify eslint configuration file location I
    "ConfigFile": ". eslintrc. json" // Specify the eslint configuration file in the project root directory

This completes the configuration of vscode and eslink association, and a lot of errors will be reported unexpectedly. Good lucky


Mainly stuck in eslint. options, not looking at the README of eslint of extensions of vscode, but believing Baidu, not adding eslint. options, then it has been unable to take effect. Lessons learned. Good lucky for me

Recommended Today

The construction tool of C ා

What’s the motivation for writing this article? Why do you want to study the build tool (see. Csproj), create a new C project with visual studio IDE, and click build to run it? A: please refer to this_minutes_before_coding. I call it “engineering.”. Engineering development is not just about opening IDE and creating new projects. It […]