React-Native开发之VSCode配置规范

代码风格及检查

代码风格检查目前一致认为用eslint比较好,并且目前ReactNative项目的开发基本都使用VSCode,因此进行代码规则检查使用VSCode的eslint插件。

关于插件的安装及配置文件的生成(以下基于VSCode)
1、首先是插件的安装,打开VSCode的扩展商店搜索eslint,找到以后下载并安装,重启VSCode。
2、生成配置文件,使用终端执行npm install eslint (如果是全局安装加参数-g,如果是本地在项目根目录执行命令),安装成功后eslint --init初始化eslint配置文件
3、基础规则库的安装,目前使用的基础规则是eslint推荐规则及react推荐规则,因此需要npm install eslint-plugin-react
4、除此之外还需要npm install babel-eslint

最后,使用统一的配置文件内容覆盖自己项目中的(文件名:.eslintrc.js),目前规则还不算完整需要大家来填充修改

配置文件

eslintrc.js

代码格式化篇

prettier目前是功能比较强的代码格式化工具,可以根据eslint规则格式化代码(有一些规则可能不生效,需要单独补充)

关于插件的安装及规则设置

1、首先是插件的安装,打开VSCode的扩展商店搜索prettier,找到以后下载并安装,重启VSCode。
2、在usersetting 里面增加设置

“prettier.eslintIntegration”: true, //让prettier使用eslint的代码格式进行校验
“editor.formatOnSave”: true,
“javascript.format.enable”: false
“editor.tabSize”: 4,
“editor.detectIndentation”: false,

注意事项:
公共文件,最好不要做代码格式化,容易在代码merge时引起许多冲突

如果需求格式化,约定在项目提测前,某个人格式化,然后其他人及时同步一下

龙颜大悦,朕要赏赐!