ES Lint 在 React Natvie 项目的应用

RN 项目 使用 ES Lint

1，在开始之前，首先看下官网及资料 官网： https://eslint.org/ 官方 Getting Started [https://eslint.org/docs/user-guide/getting-started](https://eslint.org/docs/user- guide/getting-started) 官方规则说明 https://eslint.org/docs/rules/ 配置rule 说明 https://blog.csdn.net/Cy_Shay/article/details/78217381

2，开始我们的工作，安装Eslint 有两种安装方式,全局安装或本地项目安装.(推荐 本地项目安装) 本地项目安装命令:

npm install eslint --save-dev

3，初始化ES lint , 即执行下面指令

    npx eslint --init

然后根据提示符一步步操作，推荐 airbnb 风格的设置。

开始检查，npx 是指运行node_modules下面的指令，我这里指定检查 ./src/app.js 这个文件

npx eslint ./src/app.js

如果遇到一些 字符错误等。可以使用自动修复一些空格缩进等警告。

npx eslint ./src/app.js -- fix  

4，更多配置 ES Lint 通过配置文件设定规则，我们新建一个 .eslintrc.js，修改如下： 文件： .eslintrc.js

module.exports = {
"extends": "airbnb",
"rules": {
    "import/no-named-as-default": 0,
    "import/no-named-as-default-member":0
  }
};

还有些规则要设定，比如箭头表达式等的支持。 a) 添加 插件 babel-eslint ，它能让 ES Lint 识别ES6语法

yarn add babel-eslint --dev

b) 修改 .eslintrc.js

  "parser": "babel-eslint",

查看报告。有时候我们需要查看html文本输出报告，使用下面的指令。

./src -o xxxx.eslint.report.html -f html

5， 扩展

忽略不检查某些文件 a) 创建文件

 .eslintignore

b) 示例，在 .eslintignore 文件中添加一个

  **/node_modules/**

或者 某个文件关闭eslint检查，在文件头部添加声明

/* eslint-disable */

某一行js代码关闭eslint检查

// eslint-disable-next-line
alert('e')

增加配置：eslint-plugin-react a) 执行指令

yarn add eslint-plugin-react --dev

b) 配置修改 .eslintrc.js

添加插件 "react" to the plugins section.

{
  "plugins": [
    "react"
  ]
}
启用 JSX 支持 （    With ESLint 2+ ）

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}
启用规则
Enable the rules that you would like to use.

  "rules": {
    "react/jsx-uses-react": "error",
    "react/jsx-uses-vars": "error",
  }

Prettier插件，Prettier是代码格式化工具，能够统一个人或者团队的代码风格。

Es Lint 在 Jenkins 下的配置： Setp 1.配置好 git 拉取源代码 Setp 2.配置好构建时运行shell

# 查看 node 版本
node -v
#安装 js module
yarn install
# 移除旧的
rm -rf ./build/eslint.report.*.html || true
# 准备报告的名称
cur_dateTime="`date +%Y%m%d%H%m`" 

Setp 3.配置构建完后的 归档 归档： build/eslint.report.*.html

6， 参考：

https://eslint.org/ https://www.jianshu.com/p/1d66a10466d2 https://blog.csdn.net/Cy_Shay/article/details/78217381 关于ReactNative如何配置ESLint，Prettier，Pre-commit Hook https://blog.csdn.net/Ctrl_S/article/details/82633261 这篇文章介绍rule很清晰 http://www.php.cn/js-tutorial-401669.html