Open le0zh opened 7 years ago
hello~请问这个方式同时兼容ios和android的运行环境吗。 这个运行环境是基于node的吧,因此js的引擎应该是v8;而ios是在jscore里面运行的js代码。这个tools能做到兼容两种引擎的特性吗。
@shockw4ver hi,这是开发工具,不存在兼容问题。
也就是说它是专注于调试js代码的可行性,方便问题的查找,这样理解正确吗? 之前的模拟器环境就是出bug太难溯源了。
@shockw4ver 这里vscode仅仅是编辑器,类似xcode或则AS。调试还是需要模拟器或者真机。使用它的优势比如是,调试时可以直接在代码中下断点,更贴近原生开发的体验。之前的话,可能是使用chrome dev tools调试。
3q~谢谢您的解答。 vscode也是我最钟爱的编辑器,现在就是想用它和模拟器搭建一个完整且易用的开发环境,有了这个调试工具应该会方便很多了。
The react/require-extension rule is deprecated. Please use the import/extensions rule from eslint-plugin-import instead
不错不错
大佬,为什么我装了typings,还是没有智能提示啊
使用vscode打造现代化的RN开发环境
本文记录如何使用vscode打造一个现代化的RN开发环境,旨在提高开发效率和质量。
问题
代码没有提示: 许多刚接触RN开发的非前端同学,都会问“哪个编辑器有智能提示?”。。。而对于前端同学来说,现在的日子已经好很多了,要什么自行车。
低级代码错误: 这里的错误是指类似拼写错误,符号错误等。写完代码,跑起来各种报错,有时候费死劲的找,最后发现是个中文的分号问题。
解决办法
可选的方案大概有:
我们的选择:vscode + typings + eslint
工具和插件
编辑器: vscode
必装和推荐的插件如下:
注:
代码智能提示
对于第三方包,比如react-native:
全局安装typings:
安装react和react-native的接口说明文件:
等待安装完成后(会取决于包的数目和网络状况),在项目的根目录下会有一个typings目录和typings.json配置文件:
完成后重启一下code , 或者使用
reload
命令,现在react-native和react相关的代码就有提示说明了,效果如下:方法智能提示:
显示方法的参数:
hover时显示说明:
注: 对于其他的第三方包,可以用类似的方法,或者借助于上面提到的插件。
如果是业务代码开发者:
对于规范的模块化js代码,vscode可以自动建立联系并提示的,我们只需要写好注释即可。
如果是工具包或者SDK开发者:
我们的代码是要发布给其他同学用的,则需要我们在发布时提供相应的.d.ts接口文件。 默认是包根目录下index.d.ts文件,否则需要在package.json配置中指明
typings
项(类似main
)。如何编写接口文件: 文档
代码静态检查
代码静态借助于 eslint,它由CLI和配置文件(规则)组成。
vscode中安装了对应插件后,就可以实时在编辑器上看到检测结果,不用自己运行CLI。
注:本文会涉及eslint-cli的参数,一般开发用不到,在写自动化脚本命令时查下文档。
然后运行
npm install
安装。.eslintrc.js
(这里我们采用了js格式,因为可以加注释。可选json格式)这里可以用
eslint init
启动向导生成一个。我们可直接使用现成的(好处是和团队其他项目保持一致),在项目根目录新建一个
.eslintr.js
文件,内容如下:这里主要配置了插件和检测规则,一些说明:
这里的规则基本都是实践总结的js代码编写的最佳实践,遇到检测错误时,直接搜索规则,并阅读说明。
不要随便就关闭。
安装vscode的eslint插件后:
What's more:
可以使用
pre-commit
工具,在每次提交之前运行eslint监测代码,如果失败,则禁止提交。Debug
vscode安装了react-native-tools插件后,可以代替chromDevTools调试代码。
更接近原生的调试方式。
我们常使用的方式是:
总结
工欲善其事必先利其器,折腾是值得的。
好的开发环境提交提供效率,同时保障质量。
好的开发体验,可以让你快乐coding。