React-Native工程中ESLint静态检测

React-Native工程中ESLint静态检测

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误

使用ESLint的原因

1. 由于大家从客户端转入到React Native开发过程中，容易出现低级语法错误；
2. 开发者之前从事Android、iOS、前端等工作，因此代码风格不同，导致项目代码风格不统一；
3. React Native更新迭代较快，系统方法和语法更新较快导致老代码维护麻烦；

虽然以上问题可以通过强化自身技术和代码review等方式缓解，但仍面临开发者技术水平不同，个人习惯不同，知识传播缓慢等原因导致开发时间，开发成本增加，这时静态代码检测的作用:

1. 可以检测代码低级语法错误
2. 规范代码风格
3. 根据需要不断完善自定义代码检测规则
4. 快速熟悉代码，追踪信息，定位问题等

ESLint简单介绍

1. ESLint的解释器支持最新的ECMAScript标准，会根据具体情况对和新规则进行更改，以更好地使用语言扩展（如JSX，TS等）
2. 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. 安装

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",
  },
 

2. 配置

在.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 时指定要应用的修复的类型。修复的三种类型是:

1. problem - 修复代码中的潜在错误
2. suggestion - 对改进它的代码应用修复
3. 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 |                 <AppContainer uriPrefix={prefix}/>
  33 |             </ActionSheetProvider>
> 34 |         )
     |          ^
  35 |     }
  36 | }
  37 | 

这样更容易找到问题修复问题。

期望下个版本能在线CI检测

本地进行代码检查的过程也会存在被人遗忘的可能性，通过技术的保障，可以避免人为遗忘，作为代码提交的标准流程，通过CI检查后再合并代码，可以有效避免代码错误的问题。CI系统可以为理解为一个云端的环境，环境配置与本地一致，在这种情况下，可以生成与本地一致的报告，可以通过jenkins自动打包平台生成检测报告或者自有打包平台检测