preface

The biggest worry in the development is that you want to use 2 space indent, colleagues use 4 space indent, more colleagues use 2 space and 4 space indent together, completely by mood to write code, this for obsessive-compulsive disorder, it is unbearable! After repeatedly modifying n files, I decided to learn how to use ESLint in the project. In this article, I wrote my own process for adding ESLint after checking online materials and the official website

The resources

About the origin of eslint configuration may refer to: such as segmentfault.com/a/119000001… Eslint 中文 documentation: eslint.bootcss.com/

Eslint set

1. Download the relevant ESLint installation package

NPM install -d eslint eslint-loader eslint-config-standard eslint-plugin-import eslint-plugin-node install -d eslint-loader eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard npm install -D babel-eslintCopy the code

2. Initialize ESLint

$ eslint --init
Copy the code

After initial eslint, the.eslintrc.js file will be generated automatically, so let’s change the file to:

Module.exports = {// This directory is the root directory and does not look up configurations. Root: true, // Parser types: espima(default), babel-eslint, @typescript-esLint /parse... Parser: 'vue-eslint-parser', // Parser configuration parameters parserOptions: {parser: 'babel-eslint', // code type: script(default), module sourceType: Env: {browser: true, es6: true, node: {env: true, es6: true, node: }, // extends extends directly using the lint rule extends: ['plugin:vue/recommended', // Plugin type, can also be set directly in the plugins property, rule: 'plugin:${pluginName}/${configName}' 'eslint-config-standard' // NPM package extension that must start with eslint-config- Standard], rules: {// specify rules}}Copy the code

In practice, we don’t need to validate the dist and node_modules files, so we need to create an.eslintignore file in the root directory

node_modules
dist
Copy the code

Vscode plug-in

Vscode plug-ins only need to be installed once on the same computer, as long as you don’t reinstall the software. Install eslint

After restarting the project, we can already see the default ESLint error message in the.js and.vue files. You can either use the default rules directly or configure your own rules in the rules file of **.eslintrc.js**

The vscode setting goes with eslint

In real development, thinking about the rules of ESLint and writing code every time would definitely be inefficient (and anti-human!). Therefore, it would be nice to be able to format the current page after writing it, and even better to be able to format the page automatically after writing it and saving it, without having to do other steps manually!! Yes, this is entirely possible as long as vscode is configured properly.

1. Go to the VSCode setting page

File -> Preferences -> Settings -> Workspace Type @Modified and search

2. Configure setting.json

After clicking on the options edited in settings.json, you will see that the current project has an additional.vscode folder. Only configure the setting of the current project is that the benefits of migration project, or in other computer after download program, as long as the corresponding plug-in installed new environment, you configure the contents of the can take effect (so don’t choose the global configuration, or every new environment to reconfigure, and not conducive to different projects set up management)

Our configuration for esLint is configured in the settings.json file. For our need to automatically format when we write and save, add the following code (add and delete as needed)

{ "editor.tabSize": 2, "eslint.autoFixOnSave": True, / / each time you save the code by eslint format repair "javascript. The format. InsertSpaceBeforeFunctionParenthesis" : True, / / function (name) and add a space between the brackets behind the "vetur. Format. DefaultFormatter. HTML" : "Js - beautify - HTML / / format. The vue HTML" vetur. Format. DefaultFormatter. Js ": "Vscode - typescript", / / let the vue of js according to the editor's own ts format to format "vetur. Format. DefaultFormatterOptions" : {" js - beautify - HTML: {"wrap_attributes": "force-aligned" // attributes enforce line-breaking alignment}}, "eslint.validate": [// Enable error checking for.vue files "javascript", "javascriptreact", {"language": "HTML ", "autoFix": true}, {"language": "vue", "autoFix": true } ], "search.exclude": { "**/node_modules": true, "**/bower_components": true, "**/dist": true }, "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, }Copy the code

At this point, you return to the file that reported the error, press Ctrl+ S, and you will see that the code format is automatically formatted according to the rules

conclusion

Eslint rules, when configured correctly, greatly improve code readability and maintainability; There will be a lot of configuration in vscode to improve the efficiency of the coder, we still have a lot to learn, learning the road is always boring and difficult, but keep at it. ‘! Project address: github.com/SaltedFishH…