第七章-安装ESLint

1.说明

ESLint简单的来说就是去判断你的JS代码写的格式对不对的一个依赖。没有它你的代码也能运行，有了它你的代码可以写的更漂亮。ESLint还支持插件，第三方框架会基于ESLint写出自己的代码检查插件。比如Vue3对应eslint-plugin-vue。其他的不过多探讨，直接手撕Vben的代码。

ESLint官网
ESLint-快速入门
配置ESLint
ESLint的配置规则

2.安装ESLint

1
yarn add eslint --dev

配置ESLint：根目录下创建：.eslintrc.js文件。

这里可以使用eslint的init。但是我不清楚Vben的初始化操作是怎么选的，所以直接拷贝Vben的配置算了，知道的朋友也可以指教这里怎么init。

2.1.原代码

1
2
3
4
5
6
7
8
9
10
11
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parserOptions: {},
  extends: [],
  rules: {},
};

2.2 带注解代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = {
  // ↓默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果你想要你所有项目都遵循一个特定的约定时，这将会很有用，但有时候会导致意想不到的结果。为了将 ESLint 限制到一个特定的项目，在你项目根目录下的 package.json 文件或者 .eslintrc.* 文件里的 eslintConfig 字段下设置 "root": true。ESLint 一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
  // ↓此项是用来告诉eslint找当前配置文件不能往父级查找
  root: true,
  // ↓指定你想启用的环境
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  // ↓设置解析器
  parser: "",
  // ↓解析器选项
  parserOptions: {},
  // ↓扩展项
  extends: [],
  // ↓自定义规则配置
  rules: {},
};

3.配置ESLint忽略文件

根目录下创建：.eslintignore文件。这个匹配文件没什么好解释的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile