React-Native工程中ESLint静态检测
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误
使用ESLint的原因
- 由于大家从客户端转入到React Native开发过程中，容易出现低级语法错误；
- 开发者之前从事Android、iOS、前端等工作，因此代码风格不同，导致项目代码风格不统一；
- React Native更新迭代较快，系统方法和语法更新较快导致老代码维护麻烦；
虽然以上问题可以通过强化自身技术和代码review等方式缓解，但仍面临开发者技术水平不同，个人习惯不同，知识传播缓慢等原因导致开发时间，开发成本增加，这时静态代码检测的作用:
- 可以检测代码低级语法错误
- 规范代码风格
- 根据需要不断完善自定义代码检测规则
- 快速熟悉代码，追踪信息，定位问题等
ESLint简单介绍
- ESLint的解释器支持最新的ECMAScript标准，会根据具体情况对和新规则进行更改，以更好地使用语言扩展（如JSX，TS等）
- ESLint可以结合Prettier代码格式化和ESLint来捕获可能的错误
由于ESLint是官方推出的规则，是最基础的标准规则包，有时我们在项目的规则配置过程中需要自定义一些规则，为避免麻烦，直接使用eslint-config-airbnb规则包
ESLint规则配置
你可以使用npm安装
npm install eslint --save-dev
运行eslint --init之后，.eslintrc会在文件夹中自动创建，会有如下规则
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}
规则说明：
"semi" （分号）和 "quotes"（引号） 是 ESLint 中 规则 的名称
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)
具体可去官网查看https://www.npmjs.com/package/eslint
eslint-config-airbnb配置
eslint-config-airbnb是基础规则配置的一个扩展包
- 安装
1. 这个命令可以列出每个安装包的正确版本:
npm info "eslint-config-airbnb@latest" peerDependencies
2. npm 5+，使用如下命令
npx install-peerdeps --dev eslint-config-airbnb
"devDependencies": {
"babel-eslint": "^10.1.0",
"eslint": "^7.2.0",
"eslint-config-airbnb": "^18.2.0",
"eslint-formatter-pretty": "^4.0.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.21.5",
"eslint-plugin-react-hooks": "^4.0.0",
"eslint-plugin-react-native": "^3.10.0",
},
- 配置
在.eslintrc文件中添加
"extends": ["airbnb", "airbnb/hooks"]
具体可去npm官网查看https://www.npmjs.com/package/eslint-config-airbnb
.eslintrc配置
除了在.eslintrc中配置，也可以直接在package.json中eslintConfig字段指定配置，当然eslint的配置远不止如下js环境配置,具体可以去官网查看https://cn.eslint.org/docs/user-guide/configuring
module.exports = {
"root": true,
"env": {
"browser": true, // 浏览器环境中的全局变量
"commonjs": true, // CommonJS 全局变量和 CommonJS 作用域
"es6": true, // 启用除了 modules 以外的所有 ECMAScript 6 特性
"node": true // Node.js 全局变量和 Node.js 作用域。
}, // 浏览器环境
"extends": ["airbnb", "airbnb/hooks"], // 配置js风格/标准，这里遵循爱彼迎的标准
"parser": "babel-eslint", // babel解释器，优化 Parsing error: Unexpected token ..
"parserOptions": {
"ecmaFeatures": {
"jsx": true, // 启用JSX
"modules": true,
// "experimentalObjectRestSpread": true
},
"ecmaVersion": 6, // ES6 默认（3，5）
"sourceType": "module" // ECMAScript 模块
},
"plugins": [
"react",
"react-native",
"import",
"jsx-a11y",
// "@babel"
],
"rules": {
// //关闭换行符操作系统格式问题
// "linebreak-style": [
// "off",
// "unix"
// ],
// //使用单引号和双引号
// "quotes": [
// 0,
// "double"
// ],
// "object-curly-spacing": [
// 1,
// 'never'
// ],
// //使用分号
// "semi": [
// "error",
// "always"
// ],
// // 禁止缩进错误
// "indent": 0,
}
};
本地检测操作
如果使用的是webStorm，可在当前Terminal下或者使用终端在当前工程目录下运行
eslint .
会自动检测全部文件
运行指定文件,如果指定文件和.eslintrc在同级，直接运行
eslint [文件名]
如：
eslint App.js
运行指定文件，和.eslintrc不在同级，运行
eslint [文件夹名]/[文件名]
如：
eslint js/Main.js
同理，多层级eslint [文件夹名]/[文件夹名]/.../[文件名]
如果你想忽略某文件的运行，在package.json中添加
"eslintIgnore": [
"index.js"
]
如果你运行检测了某忽略文件，会提示你：
0:0 warning File ignored because of your .eslintignore file. Use --no-ignore to override.
使用 eslint index.js --no-ignore 继续检测，会检测忽略的文件
自动fix问题
--fix
该选项指示 ESLint 试图修复尽可能多的问题。修复只针对实际文件本身，而且剩下的未修复的问题才会输出。不是所有的问题都能使用这个选项进行修复
--fix-type
此选项允许你在使用 --fix 或 --fix-dry-run 时指定要应用的修复的类型。修复的三种类型是:
- problem - 修复代码中的潜在错误
- suggestion - 对改进它的代码应用修复
- layout - 应用不改变程序结构 (AST) 的修复
输出检测文件
很多时候终端检测文件的输出看起来很麻烦，这个时候就需要我们将检测的文件输出成文档以便找到位置并修改
eslint [指定文件] -o [文件位置]
eslint index.js -o /Users/tongle/Desktop/eslint/eslint.txt
如下提示：
�[0m �[2m7:37�[22m �[31merror�[39m Missing semicolon
会自动将index.js的检测结果以文本格式输出到指定位置，还可以添加格式化组件eslint-formatter-pretty，通过npm安装
npm install eslint-formatter-pretty
当指定之后，给定的格式就输出到控制台。如果你想将输出保存到一个文件，你可以在命令行上这样操作：
eslint -f compact index.js > /Users/tongle/Desktop/eslint/index.txt
如下报错提示：
error: Missing semicolon (semi) at App.js:34:10:
32 |
33 |
> 34 | )
| ^
35 | }
36 | }
37 |
这样更容易找到问题修复问题。
期望下个版本能在线CI检测
本地进行代码检查的过程也会存在被人遗忘的可能性，通过技术的保障，可以避免人为遗忘，作为代码提交的标准流程，通过CI检查后再合并代码，可以有效避免代码错误的问题。CI系统可以为理解为一个云端的环境，环境配置与本地一致，在这种情况下，可以生成与本地一致的报告，可以通过jenkins自动打包平台生成检测报告或者自有打包平台检测