React Native 之使用 Eslint 检查代码规范

在前端编码时,为了规范每个成员的代码风格以及避免低级的错误,我们可以使用Eslint来制定规则.这套机制同样适用于React Native的团队开发.

下面将介绍如何在React Native中使用Eslint

得到一个React Native 项目

通过命令:

react-native init EsLintTestProject

新建一个项目.并用命令进入该文件夹

安装Eslint

有两种安装方式,全局安装或本地项目安装.(推荐 本地项目安装)
本地项目安装命令:

 npm install eslint --save-dev

初始化Eslint 步骤

首先使用命令:

eslint --init

按了Entry键后,控制台会让你输入一些选项.
本人的步骤是这样的:

react-native
使用上下键可以切换方式.这第一步问你需要如何配置Eslint.
这里一共有三种方式:(1).询问项目的风格;(2).使用流行风格;(3).检查代码
这里我选的是第一个,直接按Entry进入下一题.

这就是其后的选择结果.当这些都选择完毕后,会在项目的根目录生成一个.eslintrc.js文件.这就是配置项,就算之前选错了也可以在此进行更改.

到这一步就可以尝试运行指令了:

eslint index.android.js

如无意外,控制台肯定会报各种错误.

这里面也就两个类型的错误,第一个是no-unused-vars(没有用到的变量),第二个是indent(排版缩进).

接下来需要将这些不该报错的地方消除掉.

首先解决缩进问题,找到.eslintrc.js文件的indent对象,将tab字段改成2.

然后再运行:eslint index.android.js

发现错误仅剩下3个了.

再该解决no-unused-vars的问题.这是因为eslint检查的问题,我们需要增加额外的插件支持.
运行命令:

 npm install eslint-plugin-react --save-dev

找到.eslintrc.js文件的extends.
将

"extends": "eslint:recommended",

替换成

"extends": ["eslint:recommended", "plugin:react/recommended"],

接着再次运行eslint index.android.js.所有不该出现的错误都消失啦.

接着一切安装官网的Rule,配置代码的规范
http://eslint.org/docs/rules/