ESLint is a JavaScript code inspection tool that can be used to check code style and potential errors, and provide standardization and code quality control. The following are common configuration options in ESLint configuration files:
1. Install ESLint
First, execute the following command on the command line to install ESLint globally:
npm install -g eslint
Then, execute the following command in the project root directory to initialize the ESLint configuration:
eslint --init
2. Common configuration options
1. parser
Specify the parser, Espree is used by default. For example, using the Babel parser:
module.exports = { parser: 'babel-eslint' }
2. extends
Extend an existing configuration rule set. Optional values are:
- eslint: default rules
- airbnb: Airbnb Style Rules
- google: Google Style Rules
- standard: JavaScript Standard Style rules
- vue：Vue.js guide
For example, using airbnb rules:
module.exports = { extends: 'airbnb-base' }
3. rules
Specify custom rules or modify existing rules. Rules can specify warning and error levels, "warn" and "error" respectively.
For example, disallow extra semicolons:
module.exports = { rules: { 'no-extra-semi': 'error' } }
4. env
Specifies the environment, related to global variables. Optional values are: es6, browser, node, commonjs, amd, mocha, jquery, prototypejs, shelljs, mongo, jasmine, phantomjs, protractor.
For example, to make an ES6 environment available:
module.exports = { env: { es6: true } }
5. globals
Define global variables:
module.exports = { globals: { Vue: false } }
3. Sample configuration file
Here is a sample configuration file using airbnb rules and modifying some custom rules:
module.exports = { extends: 'airbnb-base', rules: { 'no-console': 'off', 'no-unused-vars': 'error', 'no-extra-semi': 'error', 'semi': ['error', 'never'] }, env: { es6: true, node: true }, globals: { Vue: false } }
Create the .eslintrc.js file in the project root directory and copy the above content into the file. Then, install and enable the eslint plug-in in the editor to implement the code inspection function.
vscode configure ESlint
Download in vscode extension
Click the plug-in settings button and select extension settings
Enter "eslint.enable" in the search box, select the "Workspace" or "User" option, and set it to true.
Then click the button in the upper right corner (see screenshot)
setting.json：
1 //Configure eslint
2 "eslint.autoFixOnSave": true,
3 "files.autoSave":"off",
4 "eslint.validate": [
5 "javascript",
6 "javascriptreact",
7 "html",
8 { "language": "vue", "autoFix": true }
9 ],
10 "eslint.options": {
11 "plugins": ["html"]
12 },
13 //In order to comply with eslint's two-space separation principle
14 "editor.tabSize": 2
In this way, every time you save a file (ctrl+s), the eslint plug-in will automatically correct the eslint syntax of the current file!
.eslintrc.cjs file code example (copy the following code into the .eslintrc.cjs file)
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"plugin:prettier/recommended",
"eslint-config-prettier"
],
"overrides": [
],
"parserOptions": {
"ecmaVersion": "latest",
"sourceType": "module",
"ecmaFeatures": {
"modules": true,
'jsx': true
},
"requireConfigFile": false,
'parser': '@babel/eslint-parser'
},
"plugins": [
"vue",
"prettier"
],
"rules": {
'no-console': 'warn', // Disable console appearance
'no-debugger': 'warn', // Disable debugger
'no-duplicate-case': 'warn', // prohibit duplicate cases
'no-empty': 'warn', // Empty statement blocks are prohibited
'no-extra-parens': 'warn', // prohibit unnecessary parentheses
'no-func-assign': 'warn', // Prohibit reassignment of Function declaration
'no-unreachable': 'warn', // Disable the code block after [return|throw]
'no-else-return': 'warn', // Prohibit the else block after the return statement in the if statement
'no-empty-function': 'warn', // Disable empty function blocks
'no-lone-blocks': 'warn', // Disable unnecessary nested blocks
'no-redeclare': 'warn', // Do not declare the same variable multiple times
'no-return-assign': 'warn', // Do not use assignment statements in return statements
'no-return-await': 'warn', // Disable unnecessary [return/await]
'no-self-compare': 'warn', // Disable self-compare expressions
'no-useless-catch': 'warn', // Disable unnecessary catch clauses
'no-useless-return': 'warn', // prohibit unnecessary return statements
'no-multiple-empty-lines': 'warn', // Disable multiple empty lines
'no-useless-call': 'warn', // Disable unnecessary .call() and .apply()
'no-var': 'warn', // prohibit var and replace it with let and const
'no-delete-var': 'off', // Allow the use of delete variables
'no-shadow': 'off', // Allow variable declarations to have the same name as variables in the outer scope
'dot-notation': 'warn', // Require the use of dots whenever possible
'default-case': 'warn', // Requires a default branch in the switch statement
'eqeqeq': 'warn', // Requires === and !==
// 'curly': 'warn', // Require all control statements to use consistent bracket style
'space-infix-ops': 'warn', // Require spaces around operators
'space-unary-ops': 'warn', // Require consistent spaces before and after unary operators
'switch-colon-spacing': 'warn', // Requires spaces around the colon of switch
'arrow-spacing': 'warn', // Require consistent spaces before and after arrow functions
'array-bracket-spacing': 'warn', // Require consistent spacing in array brackets
'brace-style': 'warn', // Require consistent brace style within code blocks
'max-depth': ['warn', 4], // Requires a maximum depth of 4 for nestable blocks
'max-statements': ['warn', 100], // The maximum number of statements allowed in the function block is 20
'max-nested-callbacks': ['warn', 3], // Requires a maximum nesting depth of 3 for callback functions
'max-statements-per-line': ['warn', { max: 1 }], // Request the maximum number of statements allowed in each line
"vue/require-default-prop": 0, // Close property parameters must have default values
"vue/singleline-html-element-content-newline": 0, // A newline character is required to close a single-line element
"vue/multi-word-component-names":"off",
"vue/multiline-html-element-content-newline": 0, // A newline character is required to close multiline elements
// It is required that the maximum attributes of each row of labels do not exceed five
'vue/max-attributes-per-line': ['warn', { singleline: 5 }],
// Cancel the restriction setting that the closing label cannot self-close
"vue/html-self-closing": ["error", {
"html": {
"void": "always",
"normal": "never",
"component": "always"
},
"svg": "always",
"math": "always"
}]
}
}