在前端编码时,为了规范每个成员的代码风格以及避免低级的错误,我们可以使用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/
