+-
eslint报错整理与解决办法

最近项目打包时,出了一溜儿的错误:

image

这些错误本可以避免的,前面把编辑器卸载重装忘记设置了,真是自己坑了自己 o(╥﹏╥)o

我们在项目中使用ESLint校验,附带了大量的规则,ESLint的官方rules文档,我们可以自定义规则设置,但设置规则时必须将值设置为以下值之一:

"off" or 0:停用这个规则 "warn" or 1:启用规则,当不满足规则时发出警告,不会导致程序退出 "error" or 2:启用规则,当不满足规则时报错,会导致程序退出

1. 'Expected indentation of 2 spaces but found 4' 期望缩进两个空格,但找到4个空格。eslint默认是不认可tab的,习惯了用tab键来打空格,就会出现这个问题。在eslint的配置文件.eslintrc.js中做如下配置:

module.exports = {
    rules: {
        ... ... 'no-tabs': 'off' //停用tab缩进
    }
}

也可以对编辑器的缩进进行设置,我用的是vscode,打开管理 -> 设置 -> 搜索 tab size 然后修改保存

image

注意:eslint配置文件修改了一定要重新手动编译运行。

2. 'Trailing spaces not allowed' 这个是行尾有多余的空格,删除就可以了

3. 'no-unused-vars' 声明的变量没有使用

以上这些问题我们可以选择手动修复,也可以通过配置启动eslint进行自动错误修复的功能。打开vscode管理 -> 设置 -> 搜索 eslint 然后勾选

image

如果提示这种设置不推荐,可以通过管理 -> 设置,然后在setting.json中使用 editor.codeActionsOnSave代替:

image

这样自动修复功能就打开了,可以打开错误页面,执行保存操作,就不用一个一个手动去改了。

附部分规则配置说明:

"no-alert": 0, //禁止使用alert confirm prompt

"no-console": 2, //禁止使用console

"no-debugger": 2, //禁止使用debugger

"for-direction": 2, //禁止for无限循环

"no-multi-spaces": 1, //不能有多余的空格

"no-var": 0, //禁用var,用let和const代替

"no-redeclare": 2, //禁止重复声明变量

"camelcase": 2, //要求驼峰法命名

"no-dupe-args": 2, //禁止在函数或表达中出现重名参数

"no-extra-semi": 2, //禁止不必要的分号

"require-await": 2, //禁止使用不带 await 表达式的 async 函数

像console和debugger都是在生产环境比较常用的,其他还有很多官网都有详细说明,大家可自行查阅。