ReactNative的Atom编辑器

工欲善其事,必先利其器.
ReactNative作为Facebook贡献的库,里面有些定制的东西. 官方推荐Atom+Nuclide,那么就尝试一下Atom. 在测试过程中,发现安装Nuclide之后,Atom编辑器特别卡顿,原因不明,所以又测试了一些其他插件. 我来罗列几个必须的.

1. Atom

下载Atom编辑器,安装,介绍参考文档.

2. Atom-React

插件Atom-React,这个插件非常好!
点击Atom->Install Shell Commands,安装Shell命令,再输入

apm install react

即可安装,也可以直接搜索安装,Command+,,选择Install搜索.


  1. 语法高亮(Syntax Highlighting);
  2. 缩进(Indentation),搜索插件 -> Auto Indent;
搜索插件 Command+Shift+P,直接输入 Intent,参考视频.
  • 代码折叠(Code Folding);
  • 片段提示(Snippets);
    片段提示的缩写需要符合文件后缀名jsx,js等.
  • JSX格式化(JSX Reformatting),插件搜索Reformat,选择Reformat JSX.
  • HTML到JSX转换(HTML to JSX conversion),转换代码样式;
  • 自动补全(Autocomplete);
  • 自动闭合标签(Automatic Closing Tag);
  • 3. 跳转

    跳转对于调试代码和阅读代码非常重要,当然使用插件,需要下载hyperclickjs-hyperclick,就可以通过引用跳转到需要类和方法.

    4. 注释插件

    注释对于写和读代码都非常重要,推荐插件docblockr,搜索即可.

    /** * 滚动条,fractionalPosition滚动条长度,progressBarSize当前大小 * @param {size:滚动条大小} {progress:过程} * @return {View} [里外两层视图,背景白框黑底,显示白框] */

    5. 类型显示

    atom-typescript类型显示和其他强大的功能,参考文档.

    6. 管理配置

    安装了很多包之后,可以通过编辑器管理; 如果要恢复初始,删除.atom即可.

    OK,现在可以编写ReactNative程序了,如果发现其他插件,我会继续更新. Enjoy it.

    相关文章

    一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
    前言: 前段时间学习完react后,刚好就接到公司一个react项目...
    前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
    react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
    我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
    我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...