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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1. eslint、prettier eslintESLint是一个语法规则和代码风格的检查工具,提高代码质量。p...
    boyrt阅读 11,228评论 0 7
  • This project was bootstrapped with Create React App. Belo...
    unspecx阅读 10,587评论 0 2
  • 佛度海生的随笔(一) 不为写作而写作,只为记录,并还原那些触动灵魂的瞬间。 午睡刚起的时候,总有一种恍如隔世的感觉...
    海生国学智慧阅读 2,405评论 0 3
  • 【精华解读】 这本《影响力》从影响力武器出发,主要讲了三方面的内容。 第一方面,讲别人是怎么应用影响力武器说服你的...
    尔朵_b6ba阅读 1,586评论 0 0
  • 第二天,一群人走在去三鑫网吧的路上,一个个都阴沉着脸在一看不是别人正是VC战队的成员。 要问他们是怎么同意参加的,...
    央俊公子阅读 2,548评论 0 2