首頁  >  文章  >  web前端  >  什麼編輯器支援react?

什麼編輯器支援react?

青灯夜游
青灯夜游原創
2020-11-23 12:00:291644瀏覽

支援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/
  • 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: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 編輯器

      • #官網: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?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn