eslint配置与使用

ESLint 是一个 JavaScript 代码检查工具，它可以用于检查代码的风格和潜在错误，并提供规范化和代码质量控制。下面是 ESLint 配置文件中常见的配置选项：

一、安装 ESLint

首先，在命令行中执行以下命令，全局安装 ESLint：

npm install -g eslint

然后，在项目根目录下执行以下命令，初始化 ESLint 配置：

eslint --init

二、常用配置选项

1. parser

指定解析器，默认使用 Espree。例如，使用 Babel 解析器：

module.exports = { parser: 'babel-eslint' }

2. extends

扩展已有的配置规则集。可选值有：

• eslint：默认规则
• airbnb： Airbnb 风格规则
• google：Google 风格规则
• standard：JavaScript Standard Style 规则
• vue：Vue.js 规则

例如，使用 airbnb 规则：

module.exports = { extends: 'airbnb-base' }

3. rules

指定自定义的规则或修改已有的规则。规则可以指定警告级别和错误级别，分别为 "warn" 和 "error"。

例如，禁止多余的分号：

module.exports = { rules: { 'no-extra-semi': 'error' } }

4. env

指定环境，与全局变量有关。可选值有：es6、browser、node、commonjs、amd、mocha、jquery、prototypejs、shelljs、mongo、jasmine、phantomjs、protractor。

例如，使 ES6 环境可用：

module.exports = { env: { es6: true } }

5. globals

定义全局变量：

module.exports = { globals: { Vue: false } }

三、示例配置文件

下面是一个示例配置文件，使用 airbnb 规则并修改了一些自定义规则：

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 } }

在项目根目录下创建 .eslintrc.js 文件，并将上述内容拷贝到该文件中。然后，在编辑器中安装并启用 eslint 插件，就可以实现代码检查功能了。

vscode配置ESlint

 在vscode扩展中下载

点击插件设置按钮，选择扩展设置

在搜索框中输入 "eslint.enable"，选中 "工作区" 或 "用户" 选项，将其设为 true。

然后点击右上角按钮（看截图）

setting.json：

 1 //配置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      //为了符合eslint的两个空格间隔原则
14      "editor.tabSize": 2

 这样每次保存文件（ctrl+s）时，eslint插件会自动对当前文件进行eslint语法修正！

.eslintrc.cjs 文件代码示例（把一下代码复制到.eslintrc.cjs 文件里）

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', // 禁止出现console

'no-debugger': 'warn', // 禁止出现debugger

'no-duplicate-case': 'warn', // 禁止出现重复case

'no-empty': 'warn', // 禁止出现空语句块

'no-extra-parens': 'warn', // 禁止不必要的括号

'no-func-assign': 'warn', // 禁止对Function声明重新赋值

'no-unreachable': 'warn', // 禁止出现[return|throw]之后的代码块

'no-else-return': 'warn', // 禁止if语句中return语句之后有else块

'no-empty-function': 'warn', // 禁止出现空的函数块

'no-lone-blocks': 'warn', // 禁用不必要的嵌套块

'no-redeclare': 'warn', // 禁止多次声明同一变量

'no-return-assign': 'warn', // 禁止在return语句中使用赋值语句

'no-return-await': 'warn', // 禁用不必要的[return/await]

'no-self-compare': 'warn', // 禁止自身比较表达式

'no-useless-catch': 'warn', // 禁止不必要的catch子句

'no-useless-return': 'warn', // 禁止不必要的return语句

'no-multiple-empty-lines': 'warn', // 禁止出现多行空行

'no-useless-call': 'warn', // 禁止不必要的.call()和.apply()

'no-var': 'warn', // 禁止出现var用let和const代替

'no-delete-var': 'off', // 允许出现delete变量的使用

'no-shadow': 'off', // 允许变量声明与外层作用域的变量同名

'dot-notation': 'warn', // 要求尽可能地使用点号

'default-case': 'warn', // 要求switch语句中有default分支

'eqeqeq': 'warn', // 要求使用 === 和 !==

// 'curly': 'warn', // 要求所有控制语句使用一致的括号风格

'space-infix-ops': 'warn', // 要求操作符周围有空格

'space-unary-ops': 'warn', // 要求在一元操作符前后使用一致的空格

'switch-colon-spacing': 'warn', // 要求在switch的冒号左右有空格

'arrow-spacing': 'warn', // 要求箭头函数的箭头前后使用一致的空格

'array-bracket-spacing': 'warn', // 要求数组方括号中使用一致的空格

'brace-style': 'warn', // 要求在代码块中使用一致的大括号风格

'max-depth': ['warn', 4], // 要求可嵌套的块的最大深度4

'max-statements': ['warn', 100], // 要求函数块最多允许的的语句数量20

'max-nested-callbacks': ['warn', 3], // 要求回调函数最大嵌套深度3

'max-statements-per-line': ['warn', { max: 1 }], // 要求每一行中所允许的最大语句数量

"vue/require-default-prop": 0, // 关闭属性参数必须默认值

"vue/singleline-html-element-content-newline": 0, // 关闭单行元素必须换行符

"vue/multi-word-component-names":"off",

"vue/multiline-html-element-content-newline": 0, // 关闭多行元素必须换行符

// 要求每一行标签的最大属性不超五个

'vue/max-attributes-per-line': ['warn', { singleline: 5 }],

// 取消关闭标签不能自闭合的限制设置

"vue/html-self-closing": ["error", {

"html": {

"void": "always",

"normal": "never",

"component": "always"

},

"svg": "always",

"math": "always"

}]

}

}