添加至项目
eslint初始脚本添加
pnpm i eslint@7.32.0 -D
npx eslint --init
eslint的版本存在差异，并且在selint9修改了配置语法
vue-cli添加
已存在的项目添加
vue add eslint
初始项目
vue create vue-eslint
eslint模块的作用
@eslint/eslintrc
是 ESLint 工具链中不可或缺的一部分，它为 ESLint 提供了配置文件的解析和管理功能，使得 ESLint 能够根据配置文件中的规则和设置来检查代码质量。
eslint主包和插件包
eslint的命令
初始化
npx eslint --init
检测文件
npx eslint .
检测并且修复
npx eslint . --fix
课程笔记
搭建项目
pnpm i eslint@8.3.0 -D
这里需要注意版本
npx eslint --init
常见问题
为什么选择JS文件作为配置文件
会优先读取JS文件的配置文件
为什么建议选择CommonJS
因为在webpack打包中，使用的是node，不用去转换模块类型
配置文件
env节点
因为no-undef规则的原因，在代码中不能使用未声明的变量
虽然变量c我们先去定义，但是其他特殊的全局变量不行**（console、window）**
console.log("hello world");
console是浏览器环境的全部变量，但是默认的eslint是认不到
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['eslint:recommended'],
parserOptions: {
ecmaVersion: 15,
sourceType: 'module'
},
rules: {}
}
这里就可以添加env节点，让eslint初始的时候就认识这些全局 变量
这和globals节点很相似，都可以设置全局变量·，只是env节点更加统一、更统一
globals节点
在使用jquery时，eslint并不知道****是全局变量
并且env节点也不能解决这个问题，因为env节点只能解决一些成套的环境
设置globals节点
module.exports = {
globals: {
$: true
},
};
就可以告诉eslint，**$**是全局变量，并且属性值是布尔类型
true：可以修改
false：不可以修改，适合定义常量
$ = 10
parserOptions节点
eslint默认只能解析JS代码，如需解析其他格式的代码，需要安装对应解析器
eslint校验的原理：根据对应文件的编译器把原始代码转为eslint的AST抽象语法树，然后再根据配置的规则校验eslint的AST抽象语法树节点的内容
JS代码 ===== 默认JS解析器======》eslint的抽象语法树
TS代码 ===== @typescript-eslint/parser解析器======》eslint的抽象语法树
不同的解析器，但是生成最终的eslint的抽象语法树是一样的
plugins节点
预先定义rule规则的组合
module.exports = {
plugins: ['prettier'],
}
prettier对应的eslint-plugin-prettier第三方包，使用时可以省略eslint-plugin- 在rules节点重新定义规则的时候，需要带上前缀，比如
module.exports = {
'prettier/prettier': 'error'
}
rules节点
初始的eslint是没有任何校验规则
- 语法检测
- 代码中不能出现console.log
- 风格统一
- 语句末尾要加上分号
- 空格使用tab
- 最佳实践
- 禁止修改初始类*（Array、Object）*的原型方法
- 禁止使用eveal
- 禁止使用var
extends节点
一个配置的集合
module.exports = {
extends: [
'airbnb-base'
]
}
airbnb-base对应了eslint-config-airbnb-base插件，在使用时候**eslint-config-**可以省略
实践定义规则
no-xunfei-vars
不允许使用xunfe变量i
定义规则
export default {
meta: {
messages: {
errorMsg: "不允许使用变量 xunfei",
},
},
create(context) {
return {
Identifier(node) {
if (node.name === "xunfei") {
context.report({
node,
messageId: "errorMsg",
});
}
},
};
},
};
规则集合成插件
import noXunfeiVars from "../rules/no-xunfei-vars.js";
export default {
rules: {
"no-xunfei-vars": noXunfeiVars,
},
};
使用插件
import xunfeiExlintPlugin from "./eslint/plugins/xunfei-exlint-plugin.js";
export default {
files: ["src/**/*.js"],
plugins: {
xunfei: xunfeiExlintPlugin,
},
rules: {
"xunfei/no-xunfei-vars": "error",
},
};
