第七章-安装ESLint

1.说明

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

2.安装ESLint

yarn add eslint --dev

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

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

2.1.原代码

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  parserOptions: {},
  extends: [],
  rules: {},
};

7.1.2.带注解代码

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文件。这个匹配文件没什么好解释的。

*.sh
node_modules
*.md
*.woff
*.ttf
.vscode
.idea
dist
/public
/docs
.husky
.local
/bin
Dockerfile

上一章

第六章-配置TS

下一章

第八章-安装eslint-plugin-vue

# vben  ESLint 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×