What editor supports react?

Editors that support react: Nuclide, Atom, Sublime Text, Visual Studio Code, WebStorm, Vim editor, GNU Emacs editor, Spacemacs editor, Deco IDE, TextMate editor, etc.

react editor

##1. Nuclide

Official website: https://nuclide.io/
• Github project address: facebook / nuclide(https://github.com/facebook /nuclide)
• Documentation:
• 
  
  Setup: https://nuclide.io/docs/editor/setup/
  • Nuclide with React Native: https:/ /nuclide.io/docs/platforms/react-native/
Supported platforms: Windows, Mac, Linux
• Licence: Open source
• Features:
• 
  
  Built-in Debugging
  • Remote Development
  • Developing Hack
  • Support Mercurial
  • Working Set

Nuclide is a single package built on top of Atom, which provides programmability and has a very active community. It provides a first-class development environment for React Native, Hack and Flow projects.

2. Atom

## Official website: https://atom.io/

• Github project address: atom(https://github.com/atom)
• Documentation:

• Settings: http://flight-manual .atom.io/
  • Atom with React Native: https://blog.sendbird.com/tutorial-build-a-messaging-app-using-react-native/
Supported platforms: Windows, Mac, Linux

• Licence: Open source
• Features:
• 
  Cross-platform editing
  • Built-in package manager
  • Intelligent auto-completion
  • File system browser
  • Multiple panes
  • Find and replace
Atom is a modern, easy-to-use, and controllable text editor. Atom is widely used by developers in many programming languages. It has a large and active community that has produced many useful plug-ins.

Atom commonly used packages:

atom-react-native-autocomplete package - This package is for React-Native and provides automatic completion for the Atom editor Function.

• atom-react-native-css - This is a package for React-Native components with built-in support for SASS and SCSS. React-native-css converts valid CSS, SASS to the Facebook subset of CSS.
• react-native-snippets - This package is React Native snippets for Atom and Nuclide.
• zenchat-snippets - It is a collection of snippets for react-native, redux and ES6.
• atom-xcode - For integrating Mac Xcode and atom. Once installed, the iOS simulator can be controlled within atom.
• language-babel - Contains syntax for all versions of JavaScript, including ES2016 and ESNext, JSX syntax for Facebook React, and etch for Atom.

3. Sublime Text

## Official website: https://www .sublimetext.com/

Github project address: SublimeText(https://github.com/SublimeText)
• Documentation:
• Settings: https:// www.sublimetext.com/docs/3/
  
  SublimeText for React Native：https://zaicheng.me/2016/06/20/react-native-initial-setup/
  • 为React-JSX development settings SublimeText: (http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/)
  • Supported platforms: Windows, Mac, Linux
Licence: You can download and try it for free. You need to purchase a License to continue using it.
• Features:
• Goto Anything Function
  
  Multiple Selection
  • Command Terminal
  • Distraction Free Mode
  Split editing
  • Instant project switch
  • Plugin API
  • Customize anything
  • Cross-platform
  • Setting up React Native: nitinh.com/2015/02/setting-sublime-text-react-jsx-development/
• Sublime Text is a sophisticated text editor for writing Code, markup, and write plain text. The community provides a large number of plug-ins to extend its functionality. Sublime Text has always been a favorite editor among developers.

Sublime Text common packages

react-native-snippets - A collection of snippets for Sublime Text in react native

babel-sublime - Syntax definition for ES6 JavaScript with React JSX extension.

4. Visual Studio Code

• Official website: https://code.visualstudio.com/
• Github project address: Microsoft/vscode(https://github.com/Microsoft /vscode)
• Documentation:
  
  • Setup: https://code.visualstudio.com/docs
  • Use Visual Studio Code to develop React Native applications: https: //blogs.msdn.microsoft.com/visualstudio/2016/02/22/develop-reactnative-apps-in-visual-studio-code/
• Supported platforms: Windows, Mac , Linux
• Features:
  
  • Built-in Git commands
  • Extensible and customizable

Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux, and OS X. It is free and open source and supports debugging, embedded Git controls, syntax highlighting, smart code completion, code snippets, and code refactoring.

Extension

• ReactNative Tools - This extension provides a development environment for React Native projects. You can debug your code, quickly run react-native commands from the command terminal, and use IntelliSense to explore the objects, functions, and parameters of the React Native API.
  Vim Editor

5. Vim Editor

• Official website: http://www.vim.org/
• Github project address: vim/vim(https://github.com/vim/vim)

• Documentation:

  • Vim documentation: http://www.vim.org/docs.php
  • Setting up Vim for React-JSX: https://jaxbot.me/articles/setting-up -vim-for-react-js-jsx-02-03-2015

• License: Open Source

• Supported Platforms: Mac, Linux
• Features:
  
  • Persistent, multi-level undo tree
  • Extensive plugin system
  • Supports hundreds of programming languages ​​and file formats
  • Powerful search and replace functionality
  • Ability to integrate with many tools

Vim is a highly configurable text editor that can be very Efficiently create and change any type of text. Most UNIX systems support it in the form of "vi". Many developers like to use Vim for various editing tasks. Vim is very stable and constantly evolving to get better.

Vim plugin

• vim-jsx - Provides syntax highlighting and indentation for JSX.
• vim-react-snippets - A set of snippets built for Vim to be used with Facebook's React library.
• vim-babel - A set of snippets built for Vim to be used with Facebook's React library.

6. GNU Emacs Editor

• Official website: https:/ /www.gnu.org/software/emacs/
• Documentation:
  
  • Official documentation: https://www.gnu.org/software/emacs/documentation.html
  • Initial setup for React Native: http://www.cyrusinnovation.com/initial-emacs-setup-for-reactreactnative/
• License: Follow GPL
• Supported platforms: Windows, Mac, Linux
• Features:
  
  • Content-aware editing mode, including syntax coloring, suitable for multiple file types.
  • Complete built-in documentation, including novice tutorials.
  • Supports Unicode encoding for almost all scripting languages.
  • Highly customizable, using Emacs Lisp code or a graphical interface.
  • Has a package system for downloading and installing extensions.

GNU EMACS is an extensible, customizable, free, and free text editor.

Extensions

• web-mode.el - It is an autonomous emacs main module for editing web templates. It is compatible with many languages, including JSX (React).

7. Spacemacs Editor

• Official website: http:// spacemacs.org/
• Github project address: syl20bnr/spacemacs(https://github.com/syl20bnr/spacemacs)
• Documentation:
  
  • Official documentation: http://spacemacs.org/doc/DOCUMENTATION.html
• License: Open Source
• Supported Platforms: Windows, Mac, Linux
• Features:
  
  • Key bindings organized using mnemonic prefixes
  • Discoverable - Innovative real-time display of available key bindings.
  • Similar functions have the same key
  • A simple query system can quickly find available layers, packages, etc.
  • Community-driven configuration provides powerful user-tunable packages so bugs can be quickly fixed.

Spacemacs is a community-driven Emacs distribution - the best editor is neither Emacs nor Vim, it's Emacs and Vim combined!

Extensions

• React layer - ES6 and JSX configuration layer for React. It will automatically recognize .jsx and .react.js files. A wrapper for React integration.

8. Deco IDE

## Official website: https://www .decosoftware.com/
• Github project address: decosoftware/deco-ide(https://github.com/decosoftware/deco-ide)
• Documentation:
• 
  
  Official Documentation: https://www.decosoftware.com/docs
Supported Platform: Mac (iOS only)
• License: Open Source
Features:
• 
  
  Component search and insertion
  • Real-time adjustment
  • New file scaffold

Deco is an IDE built specifically for React Native. It is an all-in-one solution for writing React Native applications that can be downloaded and used without any environment setup. Deco improves the React Native development workflow by focusing on component reuse and enabling users to edit the UI in real time.

9. WebStorm

## Official website: https://www.jetbrains.com /webstorm/

• Documentation:
• 
  Official documentation: https://www.jetbrains.com/webstorm/documentation/
  • Use external tools: https:/ /blog.jetbrains.com/webstorm/2016/08/using-external-tools/
  License: Fees (Single user $129 for first year)
• Support platforms: Windows, Mac, Linux
• Features:
• 
  Intelligent coding assistance
  • Support the latest technology
  • Version control system
  • Seamless tool integration
  • Debugging, tracing and testing
  • Built-in terminal
WebStorm is built on the open source IntelliJ platform. JetBrains has been developed and refined for over 15 years. It offers tight integration with VSC, local history functionality, has a vibrant plugin ecosystem, is fully configurable, and offers a host of other features. WebStorm provides advanced support for React and JSX and provides core coding assistance for React Native applications.

10. TextMate Editor

Official website: https://macromates.com /

• Document:
• 
  Official document: http://manual.macromates.com/en/
  • ##License: Charge (single User License is 48.75 euros)
Supported platforms: Mac
• Features:
• CSS selector determines the scope of operations and settings
  
  Quick Overview and navigation pop-ups
  • Integrate your favorite scripting language as a plug-in
  • Run Shell commands from the document
  • Code highlighting
  • Available Collaborate with Xcode and build Xcode projects Features that specific IDEs lack. React doesn't support it directly, but it's easy to get support for JSX, which most React code is based on, with the help of the plugin below.
  • plugin
  javascript-jsx.tmbundle - Textmate Bundle for JSX (React). Syntax highlighting is currently supported.

For more programming-related knowledge, please visit:

Programming Video Course

! !

The above is the detailed content of What editor supports react?. For more information, please follow other related articles on the PHP Chinese website!