之所以我们项目代码打开项目能够对代码进行eslint规则校验：因为我们的编辑器corsur下载了eslint相关插件，
它们会读取我们当前项目的eslint配置文件，然后对我们的代码进行校验提示。
因此我们要想拥有良好的eslint校验，就离不开下面三个步骤的实践。
第一步:下载包的功能&作用:
1.eslint 这是 ESLint 的核心库，用于静态分析 JavaScript/TypeScript 代码风格、语法和质量
2.prettier 代码格式化工具。专注于代码风格（比如缩进、引号、逗号等），不关心语法错误。
通常搭配 eslint-plugin-prettier 和 eslint-config-prettier 使用，实现 ESLint 与 Prettier 的整合。
3.@typescript-eslint/eslint-plugin
这是 ESLint 用于支持 TypeScript 的规则插件。
它提供了数十个 TS 特有的规则，比如：禁止使用 any、强制类型注解、类型命名规范等。
✅ 如果你在写 .ts、.tsx 文件，必须安装它
4.@typescript-eslint/parser
让 ESLint 能够解析 TypeScript 语法。
它不会改变 ESLint 的行为，但允许 ESLint 读取 .ts/.tsx 文件。
通常搭配上面的 plugin 一起使用。
5.eslint-plugin-react
提供 React 特有的代码校验规则，例如：
JSX 是否正确书写？
key 是否正确使用？
props 类型是否正确定义？
必须用于任何使用 React/React Native 的项目。
6. eslint-plugin-react-hooks
提供 React Hooks 的校验规则，包括两个核心规则：
rules-of-hooks：只能在顶层使用 hook；
exhaustive-deps：useEffect 等 hooks 的依赖是否完整；
React 项目强烈建议开启，否则 hook 很容易用错不报错。
7.eslint-plugin-prettier
将 Prettier 的代码格式检查集成到 ESLint 中。
⚠️ 没有它，Prettier 的检查不能显示为 ESLint 报错。
比如：你写了双引号，Prettier 规定要单引号，就会报 ESLint 错。
8.eslint-config-prettier
关闭 ESLint 中与 Prettier 冲突的代码风格规则，避免两个工具打架。
通常搭配上面的 eslint-plugin-prettier 使用。
放在 extends 的最后一项，效果最好
9.@react-native-community/eslint-config
React Native 官方社区提供的一套默认 ESLint 配置。
包括常用推荐规则，适配 React Native 项目特点，比如支持 .jsx/.tsx 文件、模块导入、StyleSheet 检查等。
如果你用的是 React Native（尤其是 CLI 项目），建议使用它作为 base config。
"lint": "eslint .", // 配置校验命令 . 代表检查根目录下所有文件
第二步: 当前项目下的根目录建立 .eslintrc.js文件，并添加eslint校验配置
中台rn: eslint 配置
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
ecmaFeatures: { jsx: true },
},
extends: [
'@react-native-community',
'eslint:recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended', // 增加对于react-hooks使用校验规则
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
plugins: ['react', 'react-hooks', '@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': 'error',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/no-var-requires': 'off', // 允许require引入模块
'@typescript-eslint/no-require-imports': 'off', // 关闭 require() 导入的限制
'react/react-in-jsx-scope': 'off', // 不需要强制导入React
'@typescript-eslint/no-explicit-any': 'off', // 允许any类型
'react/display-name': 'off', // 不校验组件名字
'@typescript-eslint/no-unused-expressions': [
'error',
{
allowShortCircuit: true, // 允许短路表达式如 onConfirm && onConfirm()
allowTernary: true, // 允许三元表达式
allowTaggedTemplates: false,
},
],
'react/no-unstable-nested-components': ['warn', { allowAsProps: true }], // 允许使用动态定义组件，但只是当作prop传给别人
semi: 0,
// 你可以继续添加其它自定义规则
},
}
配合prettier格式化: 根目录下建立 .prettierrc.js 文件
module.exports = {
// 一行最多多少个字符
printWidth: 120,
// 指定每个缩进级别的空格数
tabWidth: 2,
// 使用制表符而不是空格缩进行
useTabs: true,
// 在语句末尾打印分号
semi: false,
// 使用单引号而不是双引号
singleQuote: true,
// 更改引用对象属性的时间 可选值"<as-needed|consistent|preserve>"
quoteProps: 'as-needed',
// 在JSX中使用单引号而不是双引号
jsxSingleQuote: false,
// 多行时尽可能打印尾随逗号。（例如，单行数组永远不会出现逗号结尾。） 可选值"<none|es5|all>"，默认none
trailingComma: 'es5',
// 在对象文字中的括号之间打印空格
bracketSpacing: true,
// jsx 标签的反尖括号需要换行
jsxBracketSameLine: true,
// 在单独的箭头函数参数周围包括括号 always：(x) => x \ avoid：x => x
arrowParens: 'always',
// 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码
rangeStart: 0,
rangeEnd: Infinity,
// 指定要使用的解析器，不需要写文件开头的 @prettier
requirePragma: false,
// 不需要自动在文件开头插入 @prettier
insertPragma: false,
// 使用默认的折行标准 always\never\preserve
proseWrap: 'preserve',
// 指定HTML文件的全局空格敏感度 css\strict\ignore
htmlWhitespaceSensitivity: 'css',
// Vue文件脚本和样式标签缩进
vueIndentScriptAndStyle: false,
// 换行符使用 lf 结尾是 可选值"<auto|lf|crlf|cr>"
endOfLine: 'lf',
arrowSpacing: true,
}
第三步: 本地编辑器下载eslint 和 prettier ESLint 结合使用。
并在插件设置中eslint 增加适用语言 vue react reactnative tsscript等
设置 Prettier ESLint:
设置Prettier ESLint:（勾选）
设置eslint
- 将扩展用于所有配置文件（启用ESLint插件识别和执行所有配置文件）
- 添加到工作区（将ESLint启用状态集中配置到当前的workspace， 适用于每个目录分别ESLint校验）
- 最终我们可以两个都设置
3.设置（默认 .js, .jsx, .ts, .tsx）可以不用配置
