无星的RN学习之旅（九）-ESLint引入

刚刚从简书迁移，结果不知道怎么批量上传文件，有知道的老哥麻烦私信告诉我一下。。。简书的文章都下到本地了不知道怎么批量上传到掘金。。。

这篇是写给原生老哥们看的，毕竟若是是作js的老哥确定是不用说了。。。

背景：你们代码写的格式都不同，但愿统一块儿来，因此引入ESLint

这东西是啥应该不用我多说，至于怎么引入，说实话，看了官网教程，也看了各类博客，反正最后我是搞得一团糟。。。。万幸最后引入仍是成功了。

我是打算每一个项目的标准都不一样（由于有的是rn，有的是h5），因此我都是局部引入，没有全局引入。因此我接下来讲的都是局部引入，会让你卸掉全局的，想全局引入的同窗本身注意一小下，有些步骤就不要照作了。 目前airbnb的标准是最受推崇的，我就引入它了

环境和工具：Mac，webstrom，npm，yarn

1、检查本地是否全局安装过相关的包

打开终端

npm ls -g --depth 0
复制代码

看看全局是否安装过ESLint相关的包，若是有，卸载掉。

2、进入项目根目录

npm info "eslint-config-airbnb@latest" peerDependencies
复制代码

查看目前最新的airbnb标准

好，那目前你看到了这些库，没错，这都是要加入的库=。= （我比较喜欢多敲点命令，其实有一步操做，可是我不想作=。=）

接下来你要作的就很蠢了，一步步把这些库都加进去。 注意，这个自己只是开发要用的辅助工具，所以没有必要加到正式环境上去，记得加--dev

yarn add --dev eslint@^4.19.1 || ^5.3.0
yarn add --dev eslint-plugin-import@^2.14.0
yarn add --dev eslint-plugin-jsx-a11y@^6.1.1
yarn add --dev eslint-plugin-react@^7.11.0
复制代码

3、这时候你的ESLint就装好了，并且是局部的

开始新建你的标准

./node_modules/eslint/bin/eslint.js --init
复制代码

接下来就是一大堆问题，这一大堆问题想必大伙都能看得懂，像我就是选了继承自airbnb标准的，各位也能够选别的或者按本身项目来。 最后确定就在项目根目录生成了.eslint的js或json之类的文件。

4、开始检查

./node_modules/eslint/bin/eslint.js  xx.js
复制代码

由于你是局部引入的，因此必定要用项目的eslint才能识别 例如：

很明显。。。错误比较多。。。不过问题不大，慢慢改就完事了，不会影响项目的正常运行

5、给webstrom设置检查

好了，如今你的项目应该是能够生效了，不过你确定仍是不爽，由于你发现cmd+alt+l格式化并不能帮助你适应eslint定下的规则。因此我会告诉你如何让webstrom帮助你快速完成这件事。

Edit-Macros-Start-Marcos-Recording
复制代码

开始录屏

随便选中一个你要修复的文件

前面的步骤会让你的webstrom的右键中多了一个eslint fix的快捷键，这里只须要选中它，修复当前文件 中止录屏之后，输入这段录屏操做，并取个名字，例如：ESlint-Fix

为它设置一个快捷键，而后点击ok，之后这个快捷键就会为你进行代码缩进换行方面的格式化修复了，能够用这个替代你的代码格式化。

6、快速检查全部文件

你能够在你的

package.json-scripts
复制代码

中写入快捷命令，例如个人js文件都在src文件夹下，因此我要检查的文件也就这些。

"lint": "eslint --ext .js src"
复制代码

因此我要执行检查命令也只须要输入

npm run lint
复制代码

各位能够适当改动一下，使得其能检查大家的文件，毕竟能少敲一些代码是一些=。=