十大最受歡迎的 React Native 應用開發編輯器

最新 09-21

關鍵時刻，第一時間送達！

作者丨 Murtaza Basrai

譯者丨安翔

市面上用於開發工作的編輯器非常多，筆者會經常因為不同的編程語言該如何選擇好用的編輯器而感到糾結。而在隨後從事 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 的對象、函數和參數。

5. Vim 編輯器

Github 項目地址：vim/vim(https://github.com/vim/vim)

文檔：

Vim 文檔：http://www.vim.org/docs.php

為 React-JSX 設置 Vim：https://jaxbot.me/articles/setting-up-vim-for-react-js-jsx-02-03-2015

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 編輯器