二、ESLint的console报错是怎么回事？

发表于 | 分类于 |

console报错

事实上在新版本中已经不存在了，但对于初学者来说是很常见的而且会觉得很奇怪（如果使用的是较早版本），同时这个问题解决起来也非常之容易，所以我们还是来说一下这个问题，以此为契机展开对eslint配置的学习。

​ (在新版本中no-console已经被取消默认了)

先建立项目：

1
2
3
$ mkdir lesson03
$ cd lesson03
$ yarn init -y&&yarn add -D eslint

同样的进行初始化，npx eslint --init

这次配置文件我选择用json格式。

很多时候我们使用eslint会报console有错误。

1
2
// ./src/test.js
console.log(123)

这究竟是怎么回事？

解决办法

原因是eslint的配置中使用的是"extends": "eslint:recommended",的推荐配置，它会默认console语句报错。怎么办？

修改规则，添加"no-console": "off"即可👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
        "no-console": "off"
    }
}

之后再npx eslint ./src/test.js就不会报错了。

ESlint检测整个项目

这部分和上面讲的console报错就没关系了，我借个楼插个队。

我们要检测一个js文件就要使用命令npx eslint ./src/xxx.js来进行检测，如果要检测src下的文件夹components下的文件index.js，这条指令就变成了npx eslint ./src/components/index.js，这很麻烦。

能不能使用npx eslint ./src/*.js来企图检测src下的所有文件？不行，这条命令只能检测到src下一层的所有js文件，./src/components/index.js处于src的下一层的下一层，检测不到。

我们可以直接使用命令npx eslint ./src来检测，这样就能检测到src下的所有层级的所有js文件了。

同样的，可以将该命令配置在package.json：

1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "lesson03",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "eslint": "eslint ./src"
  },
  "devDependencies": {
    "eslint": "^6.8.0"
  }
}