Preface:

Keeping the code style consistent for the same project is a very important specification. But in fact, the code verification rules and formatting tools of project team members are usually inconsistent. In order to avoid problems that cannot be maintained in the later stage of the project, it is a good step for project members to use the same set of verification rules and the same formatting method.

Swimming, fitness know about: blog, front-end accumulation of documents, public number, GitHub

Automatic uniform code style when saving:

Start with some simple configuration and then:

  • Ctrl+s / command+sAutomatically fixes formatting errors in code
  • The automatically fixed rule is to read the Eslint rule from the project root directory
  • This ensures that project members follow the same code style of validation rules

Configuration:

1. Install VsCodeEsLintandveturThe plug-in

Install the EsLint plugin as shown:

2. Install for the projectEsLintPackage:

Be sure to install them on a development environment, and if you’re using scaffolding, the Eslint option will come with these packages.

3. Add it in the root directory of the project.eslintrc.js

Used to verify the code format, according to the project situation, can write their own verification rules:

module.exports = {
    / / Eslint rules
}
Copy the code

4. Preference Settings:

Place the following in preference Settings:

"Eslint. autoFixOnSave": true, // Enable auto-fix on save, default only supports.js file "eslint.validate": ["javascript", // Check js files with esLint rules {"language": "vue", // Check vue files "autoFix": }, {"language": "HTML ", "autoFix": true},Copy the code

For more information, it is recommended to check out VsCode’s EsLint plugin

Done and done:

Click on the file and you may see the following error. Instead of correcting each error, just save the file and fix the formatting problems automatically.

Note:

If the whole thing goes red, you’re not going to change it all at once if it’s not formatted properly, you’re going to change a part of it all at once, so you might have to save it a few times.

One-click fix for project format issues:

The following two situations occur:

  • You’ve just introduced this auto-fix, but your project is overloaded with files and you’re lazy.
  • Once in a while, fix formatting problems in your code

You can add a command to the scripts of package.json as follows:

"lint": "eslint --ext .js,.vue src --fix"
Copy the code

.js and.vue are the suffix of the file you want to test, and.vue is the suffix of the file you want to test.

— Fix automatically fixes formatting problems detected based on your configured rules

One-click repair:

Type the following command line to automatically fix all formatting problems detected under your SRC folder based on your configured rules.

npm run lint
Copy the code

.eslintignore does not detect some files:

Create an.eslintignore file in the root of your project to keep EsLint from detecting files.

For example, some other people’s files, plug-ins, etc., such as files:

src/test/* 
src/test2/* 
Copy the code

The contents of the file are written like above, where the first line does not detect all files under the test folder in the SRC directory.

Custom rules:

Module. js = {"rules": {// custom rules" no-console": 0, "no-const-assign": 1, "no-extra-bind": 2,}}Copy the code

Meaning of 0, 1, 2:

  • "off"Or 0 – Turn this rule off
  • "warn"Or 1 – Treat the rule as a warning
  • "error"Or 2 – Treat the rule as an error

conclusion

Use automatic VsCode+EsLint format code, in the team to look at each other’s code, it will be easier to understand, can greatly reduce the team communication cost and improve the mood, set up so convenient, hurry up in the team use it!

I hope the friends can click like/follow, your support is the biggest encouragement to me.

Blog, front-end accumulation of documents, public number, GitHub

The above 2018.9.16