Vscode code formatting and eslint

Time:2019-9-11

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

vscode
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.
https://cn.eslint.org/

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": [
    "javascript",
    "javascriptreact",
    {
      "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

Conclusion:

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

Hadoop MapReduce Spark Configuration Item

Scope of application The configuration items covered in this article are mainly for Hadoop 2.x and Spark 2.x. MapReduce Official documents https://hadoop.apache.org/doc…Lower left corner: mapred-default.xml Examples of configuration items name value description mapreduce.job.reduce.slowstart.completedmaps 0.05 Resource requests for Reduce Task will not be made until the percentage of Map Task completed reaches that value. mapreduce.output.fileoutputformat.compress false […]