阅读更多
市面上用于开发工作的编辑器非常多,笔者会经常因为不同的编程语言该如何选择好用的编辑器而感到纠结。而在随后从事 React Native 开发工作过程中,对相应的编辑器做了一些探索和研究,本文总结了一些非常适合移动应用开发的编辑器和 IDE。

1. Nuclide

    官网:https://nuclide.io/
    Github 项目地址:facebook / nuclide(https://github.com/facebook/nuclide)
    文档:
        设置:https://nuclide.io/docs/editor/setup/
        Nuclide with React Native:https://nuclide.io/docs/platforms/react-native/
    支持平台:Windows、Mac、Linux
    Licence:开源
    特性:
        内置调试
        远程开发
        Developing Hack
        支持 Mercurial
        工作集

Nuclide 是基于 Atom 之上构建的单独的一个包,其提供可编程性且社区非常活跃。它为 React Native、Hack 和 Flow 项目提供一流的开发环境。

2. Atom

    官网:https://atom.io/
    Github 项目地址:atom(https://github.com/atom)

    文档:
        设置:http://flight-manual.atom.io/
        Atom with React Native:https://blog.sendbird.com/tutorial-build-a-messaging-app-using-react-native/

    支持平台:Windows、Mac、Linux
    Licence:开源
    特性:
        跨平台编辑
        内置包管理器
        智能自动补全
        文件系统浏览器
        多个窗格
        查找和替换

Atom 是一款现代化、易用、可控的文本编辑器。Atom 被开发人员广泛应用于多种编程语言。它有一个庞大而活跃的社区,诞生了很多有用的插件。

Atom 常用的包:

    atom-react-native-autocomplete package - 该包针对 React-Native,为 Atom 编辑器提供自动补全功能。
    atom-react-native-css - 这是一个内置支持 SASS、SCSS 的 React-Native 组件的包。React-native-css 将有效的 CSS、SASS转换为 CSS 的 Facebook 子集。
    react-native-snippets - 该包是 Atom和 Nuclide 的 React Native 片段。
    zenchat-snippets - 它是react-native、redux 和 ES6 的片段集合。
    atom-xcode - 用于集成 Mac Xcode 和 atom。安装之后,iOS 模拟器可以在 atom 内进行控制。
    language-babel - 包含所有 JavaScript 版本的语法,包括 ES2016 和 ESNext、用于 Facebook React 的 JSX 语法、以及 Atom 的 etch。

3. Sublime Text

    官网:https://www.sublimetext.com/
    Github 项目地址:SublimeText(https://github.com/SublimeText)
    文档:
        设置:https://www.sublimetext.com/docs/3/
        SublimeText for React Native:https://zaicheng.me/2016/06/20/react-native-initial-setup/
        为 React-JSX 开发设置 SublimeText:(http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/)
    支持平台:Windows、Mac、Linux
    Licence:可以免费下载和试用,继续使用需购买 License。
    特性:
        Goto Anything 功能
        多个选择
        命令终端
        分心自由模式
        拆分编辑
        即时项目开关
        插件 API
        可自定义任何东西
        跨平台
    设置 React Native:nitinh.com/2015/02/setting-sublime-text-react-jsx-development/

Sublime Text 是一个复杂的文本编辑器,可用于编写代码、做标记和编写普通文本。社区提供了大量的插件扩展其功能。Sublime Text 一直是开发人员最喜欢的编辑器。

Sublime Text 常用包

    react-native-snippets - 用于 react native 的 Sublime Text 的片段集合
    babel-sublime - 具有 React JSX 扩展的 ES6 JavaScript 的语法定义。

4. Visual Studio Code

    官网:https://code.visualstudio.com/
    Github 项目地址:Microsoft/vscode(https://github.com/Microsoft/vscode)
    文档:
        设置:https://code.visualstudio.com/docs
        使用 Visual Studio Code 开发 React Native 应用:https://blogs.msdn.microsoft.com/visualstudio/2016/02/22/develop-reactnative-apps-in-visual-studio-code/
    支持平台:Windows、Mac、Linux
    特性:
        内置 Git 命令
        可扩展并且可定制

Visual Studio Code 是由 Microsoft 为 Windows、Linux 和 OS X 开发的源代码编辑器。它是免费和开源的,支持调试、嵌入式 Git 控件、语法高亮、智能代码补全、代码段和代码重构。

扩展

    ReactNative Tools - 此扩展为React Native 项目提供了开发环境。你可以调试代码,从命令终端快速运行 react-native 命令,并使用 IntelliSense 浏览 React Native API 的对象、函数和参数。
    Vim编辑器

5. Vim 编辑器

    官网:http://www.vim.org/
    Github 项目地址:vim/vim(https://github.com/vim/vim)

    文档:
        Vim 文档:http://www.vim.org/docs.php
        为 React-JSX 设置 Vim:[url="https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015"]https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015
[/url]
    License:开源
    支持平台:Mac、Linux
    特性:
        持久、多层次的撤销树
        广泛的插件系统
        支持数百种编程语言和文件格式
        强大的搜索和替换功能
        能够与许多工具集成

Vim 是一种高度可配置的文本编辑器,可以非常高效地创建和更改任何类型的文本。大多数 UNIX 系统都以 “vi” 的形式支持它。许多开发人员喜欢使用 Vim 进行各种编辑工作。Vim 非常稳定,并且在不断发展而变得更好。

Vim 插件

    vim-jsx - 提供 JSX 的语法高亮和缩进。
    vim-react-snippets - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。
    vim-babel - 一组为 Vim 打造的可与Facebook 的 React 库一起使用的片段。

6. GNU Emacs 编辑器

    官网:https://www.gnu.org/software/emacs/
    文档:
        官方文档:https://www.gnu.org/software/emacs/documentation.html
        针对 React Native 的初始设置:http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/
    License:遵循 GPL
    支持平台:Windows、Mac、Linux
    特性:
        内容感知编辑模式,包括语法着色,适用于多种文件类型。
        完整的内置文档,包括新手教程。
        支持几乎所有脚本语言的 Unicode 编码。
        高度可定制,使用 Emacs Lisp 代码或图形界面。
        具有用于下载和安装扩展的包系统。

GNU EMACS 是一个可扩展、可定制、免费、自由的文本编辑器。

扩展

    web-mode.el - 它是一个自主的 emacs 主模块,用于编辑 Web模板。它与许多语言兼容,包括 JSX(React)。

7. Spacemacs 编辑器

    官网:http://spacemacs.org/
    Github 项目地址:syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)
    文档:
        官方文档:http://spacemacs.org/doc/DOCUMENTATION.html
    License:开源
    支持平台:Windows、Mac、Linux
    特性:
        密钥绑定使用助记符前缀进行组织
        可发现 - 创新的实时显示可用的键绑定。
        相似的功能具有与之相同的密钥
        简单的查询系统可以快速找到可用的层、包等。
        社区驱动的配置提供了强大的用户可调的包,bug 可被快速修复。

Spacemacs 是一个社区驱动的 Emacs 发行版 - 最好的编辑器既不是 Emacs 也不是Vim,它是 Emacs 和 Vim 相结合!

扩展

    React layer - 适用于 React 的 ES6 和 JSX 配置层。它将自动识别 .jsx 和 .react.js 文件。一个用于 React集成的包层。

8. Deco IDE

    官网:https://www.decosoftware.com/
    Github 项目地址:decosoftware/deco-ide(https://github.com/decosoftware/deco-ide)
    文档:
        官方文档:https://www.decosoftware.com/docs
    支持平台:Mac(仅适用于iOS)
    License:开源
    特性:
        组件搜索和插入
        实时调整
        新文件支架

Deco 是专为 React Native 打造的 IDE。它是一个用于编写 React Native 应用程序的一体化解决方案,无需任何环境设置即可下载和使用。Deco 专注于组件重用,并支持用户对 UI 的实时编辑,从而改进了React Native 开发工作流程。

9. WebStorm

    官网:https://www.jetbrains.com/webstorm/
    文档:
        官方文档:https://www.jetbrains.com/webstorm/documentation/
        使用外部工具:https://blog.jetbrains.com/webstorm/2016/08/using-external-tools/
    License:收费(单个用户第一年需支付 129 美元)
    支持平台:Windows、Mac、Linux
    特性:
        智能编码协助
        支持最新技术
        版本控制系统
        无缝工具集成
        调试、跟踪和测试
        内置终端

WebStorm 建立在开源 IntelliJ 平台之上,JetBrains 已经开发和完善了15多年。它提供与 VSC、本地历史功能的紧密集成,具有充满活力的插件生态系统,是完全可配置的,还提供大量其他的功能。WebStorm 为 React 和 JSX 提供高级支持,并提供 React Native 应用程序的核心编码协助。

10. TextMate 编辑器

    官网:https://macromates.com/
    文档:
        官方文档:http://manual.macromates.com/en/
    License:收费(单个用户 License 为48.75欧元)
    支持平台:Mac
    特性:
        CSS 选择器可确定操作和设置的范围
        快速概述和导航功能弹出
        可以把你最喜欢的脚本语言作为插件集成
        从文档中运行 Shell 命令
        代码高亮
        可与 Xcode 协作并构建 Xcode 项目

TextMate 并不是 IDE,但是通过使用其强大的片段、宏和独特的范围界定系统,它通常可以提供即使是编程语言特定的 IDE 都缺乏的功能。React 不直接支持,但是借助下面的插件可以很容易地获得对大多数 React 代码所基于的 JSX 的支持。

插件

    javascript-jsx.tmbundle - 用于JSX(React)的 Textmate Bundle。目前支持语法高亮。

总结

所有代码编辑器都具有丰富而强大的功能。且其中的插件和扩展都可以适应 React Native 环境,因此在迁移到 React-Native 时,我们不必迁移到不同的代码编辑器。

引用
原文:Top 10 Editors For React Native Mobile App Development
作者:Murtaza Basrai
翻译:安翔
  • 大小: 70.3 KB
  • 大小: 83.7 KB
  • 大小: 170.5 KB
  • 大小: 68.9 KB
  • 大小: 54 KB
  • 大小: 119.4 KB
  • 大小: 141.9 KB
  • 大小: 84.4 KB
  • 大小: 52.5 KB
  • 大小: 99.3 KB
0
0
评论 共 0 条 请登录后发表评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 适用于移动开发人员的7种最佳React Native开发工具

    React Native has gained a lot of popularity among mobile app developers within the last few years, and the tooling ecosystem has improved a lot as a result. In this article, we are listing the best Re...

  • React && React Native

    尽管需要一些额外的工作来适配代码,但 React 和 React Native 使用相同的开发模型和语法,因此你可以借鉴 React 中的组件设计和业务逻辑,以更高效地构建移动应用程序。在 React 中,通过使用虚拟 DOM(Virtual DOM...

  • react可视化编辑器_2020年,前端开发值得你去试试的10个React开发工具

    JavaScript每天都在出现大量的框架和工具,而React是一款比较流行的框架。但因为新的工具每天都在不断的...在本文中,我将介绍10个关于React的开发工具,以帮助你选择以及带你了解如何用它们来使你更充分的使用框...

  • react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html

    react 发展历史React是由Facebook开发的一种JavaScript库,用于构建用户界面。React最初发布于2013年,并在2015年开源。以下是React框架的历史:2010年,Facebook开始使用XHP框架,使PHP代码生成HTML和JSX代码。...

  • React Native环境配置、初始化项目、打包安装到手机,以及开发小知识

    React Native环境配置、初始化项目、打包安装到手机,以及开发中的小问题解决,后面继续分享如何调试react native项目。

  • 2020年的19种最佳React Native App模板(包括5种免费)

    您是否要构建一个适用于Android和iOS的应用程序?... 最重要的是,React Native应用程序完全使用JavaScript编码,因此开发人员可以使用他们已经知道的语言更轻松地创建应用程序。 但是,尽管React Native使该过...

  • [译]哪个跨平台框架才是最好的选择?React Native、Flutter 还是 Ionic

    关注前端瓶子君,回复“交流”加入我们一起学习,天天进步原文地址:React Native vs. Flutter vs. Ionic原文作者:Sophia Martin译文出自:掘金翻...

  • 一个资深iOS开发者对于React Native的看法

    当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。 我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,但是我很快放弃了自己去使用它的念头。...

  • 在应用开发中,我为什么选择 Flutter 而不是 React Native ?

    自 React Native 以来,其普及的脚步就一直势不可挡,并成为当前开发者群体中最受欢迎的框架之一。根据 Statista 发布的一项研究,截至 2020 年,约有 42% 的开发者更喜欢使用 React Native 构建跨平台应用程序。 ...

  • 用python开发app好吗_请教一下react native开发app好用么?

    一个资深iOS开发者对于React Native的看法当我第一次尝试ReactNative的时候,我觉得这只是网页开发者涉足原生移动应用领域的歪门邪道。我认为一个js开发者可以使用javascript来构建iPhone应用确实是一件很酷的事情,...

  • 了解React Native组件,模板和工具

    React Native是一个强大的框架,可以使开发移动应用程序变得轻而易举。... 自发布以来,React Native已Swift成为开发移动应用程序的最受欢迎框架之一。 由Facebook创建并使用JavaScript React库构建,此框架使...

  • 我如何为我的第一个自由客户构建第一个React Native应用程序

    by Charlie Jeppsson ... 我如何为我的第一个自由客户构建第一个React Native应用程序 (How I built my first React Native app for my first freelance client) I recently launched my first native mobile app b...

  • Flutter vs React Native:为跨平台应用程序开发选择哪种框架?

    到目前为止,React Native一直是跨平台开发的领先技术,但是Flutter的受欢迎程度正在Swift增长,并且作为一个全面的开发工具包看起来更加强大。 翻译自: ...

  • [译] 测试原生,Flutter 和 React Native 移动开发之间的性能差异

    原文地址:Examining performance differences between Native, Flutter, and React Native mobile development. 原文作者:Alex Sullivan 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:...

  • react中定时器的应用_在离子React电容器应用中实施admob

    react中定时器的应用This post is done on a special request from one of our readers. If you have more requests, let me know in the comments. 这篇文章是应一位读者的特殊要求完成的。 如果您有更多要求,请在...

  • 一位iOS开发者使用React Native的体验

     当我初次听闻 React Native,认为它只不过是提供给 web 开发者尝试原生移动应用的一种方法。之前听说JavaScript开发者可以用 JavaScript 编写一个 iPhone 应用,我还真觉得有点酷,但是我很快摆脱了要自己来

  • 用AndroidStudio和vsCode运行ReactNative项目

    虽然你可以使用任何编辑器来开发应用(编写 js 代码),但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。 1创建新项目 npx react-native init AwesomeProject 2...

  • React Native第2部分的概念

    Basic code structure in React NativeReact Native中的基本代码结构React Native ArchitectureReact本机架构React Native LifecycleReact本机生命周期Create a React Native Application: To-do App创建一个Reac...

  • C++ 实现新年倒计时与烟花显示效果的图形界面程序

    内容概要:该文档介绍了一个用C++编写的控制台应用程序,主要功能是在新年来临之际展示倒计时、播放音符以及渲染烟花效果,最终以艺术字体显示新年祝福语。具体实现了粒子系统来模拟烟花绽放,并定义了不同形状(如“2025”)由小点组成的图像,再逐帧更新显示,营造烟火燃放的视觉冲击力。此外还有通过 Beep 函数发出不同频率的声音以配合倒计时刻度,同时加入了输入姓名和许愿的功能增加互动感。 适用人群:熟悉C/C++语言基础的学生群体及开发者。 使用场景及目标:适用于希望通过生动有趣的小项目加深对控制台操作的理解的学习者;也可以作为一个简单有趣的案例用于节日庆祝活动中。 其他说明:由于使用了许多特定于 Windows 平台的API函数,比如 Beep(), SetConsoleTextAttribute() 和 GetStdHandle(), 本程序仅能在 Windows 上运行良好。并且涉及到了较多关于粒子系统和声音处理的知识点,在教学过程中可以借此讲解一些图形渲染的基本原理和音频处理方法。

Global site tag (gtag.js) - Google Analytics