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