RN 項(xiàng)目 使用 ES Lint

1，在開(kāi)始之前，首先看下官網(wǎng)及資料
官網(wǎng)：
https://eslint.org/
官方 Getting Started
[https://eslint.org/docs/user-guide/getting-started](https://eslint.org/docs/user- guide/getting-started)
官方規(guī)則說(shuō)明
https://eslint.org/docs/rules/
配置rule 說(shuō)明
https://blog.csdn.net/Cy_Shay/article/details/78217381

2，開(kāi)始我們的工作，安裝Eslint
有兩種安裝方式,全局安裝或本地項(xiàng)目安裝.(推薦 本地項(xiàng)目安裝) 本地項(xiàng)目安裝命令:

npm install eslint --save-dev

3，初始化ES lint , 即執(zhí)行下面指令

    npx eslint --init

然后根據(jù)提示符一步步操作，推薦 airbnb 風(fēng)格的設(shè)置。

開(kāi)始檢查，npx 是指運(yùn)行node_modules下面的指令，我這里指定檢查 ./src/app.js 這個(gè)文件

npx eslint ./src/app.js

如果遇到一些 字符錯(cuò)誤等?？梢允褂米詣?dòng)修復(fù)一些空格縮進(jìn)等警告。

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

4，更多配置
ES Lint 通過(guò)配置文件設(shè)定規(guī)則，我們新建一個(gè) .eslintrc.js，修改如下：
文件： .eslintrc.js

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

還有些規(guī)則要設(shè)定，比如箭頭表達(dá)式等的支持。
a) 添加 插件 babel-eslint ，它能讓 ES Lint 識(shí)別ES6語(yǔ)法

yarn add babel-eslint --dev

b) 修改 .eslintrc.js

  "parser": "babel-eslint",

查看報(bào)告。有時(shí)候我們需要查看html文本輸出報(bào)告，使用下面的指令。

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

5， 擴(kuò)展

忽略不檢查某些文件
a) 創(chuàng)建文件

 .eslintignore

b) 示例，在 .eslintignore 文件中添加一個(gè)

  **/node_modules/**

或者 某個(gè)文件關(guān)閉eslint檢查，在文件頭部添加聲明

/* eslint-disable */

某一行js代碼關(guān)閉eslint檢查

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

增加配置：eslint-plugin-react
a) 執(zhí)行指令

yarn add eslint-plugin-react --dev

b) 配置修改 .eslintrc.js

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

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

{
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  }
}
啟用規(guī)則
Enable the rules that you would like to use.

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

Prettier插件，Prettier是代碼格式化工具，能夠統(tǒng)一個(gè)人或者團(tuán)隊(duì)的代碼風(fēng)格。

Es Lint 在 Jenkins 下的配置：
Setp 1.配置好 git 拉取源代碼
Setp 2.配置好構(gòu)建時(shí)運(yùn)行shell

# 查看 node 版本
node -v
#安裝 js module
yarn install
# 移除舊的
rm -rf ./build/eslint.report.*.html || true
# 準(zhǔn)備報(bào)告的名稱
cur_dateTime="`date +%Y%m%d%H%m`" 

Setp 3.配置構(gòu)建完后的 歸檔
歸檔： build/eslint.report.*.html

6， 參考：

https://eslint.org/
http://www.itdecent.cn/p/1d66a10466d2
https://blog.csdn.net/Cy_Shay/article/details/78217381
關(guān)于ReactNative如何配置ESLint，Prettier，Pre-commit Hook
https://blog.csdn.net/Ctrl_S/article/details/82633261
這篇文章介紹rule很清晰
http://www.php.cn/js-tutorial-401669.html