什麼編輯器支援react？-js教程-PHP中文網

支援react的編輯器：Nuclide、Atom、Sublime Text、Visual Studio Code、WebStorm、Vim編輯器、GNU Emacs編輯器、Spacemacs編輯器、Deco IDE、TextMate編輯器等

什麼編輯器支援react？

react編輯器

#1. Nuclide

1. Nuclide
- 官網：https://nuclide.io/
文件：
設定：https://nuclide.io/docs/editor/setup/
- #支援平台：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/
- #支援平台： 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
特性：
- # 可自訂

擴充功能

ReactNative Tools - 此擴充功能為React Native 專案提供了開發環境。你可以偵錯程式碼，從命令終端快速執行

指令，並使用 IntelliSense 瀏覽 React Native API 的物件、函數和參數。 Vim編輯器

5. Vim 編輯器

##官網：http://www.vim.org/

##文件：
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-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 相結合！