0

0

什么编辑器支持react?

青灯夜游

青灯夜游

发布时间:2020-11-23 12:00:29

|

1995人浏览过

|

来源于php中文网

原创

支持react的编辑器:Nuclide、Atom、Sublime Text、Visual Studio Code、WebStorm、Vim编辑器、GNU Emacs编辑器、Spacemacs编辑器、Deco IDE、TextMate编辑器等

什么编辑器支持react?

react编辑器

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 编辑器

Tome
Tome

先进的AI智能PPT制作工具

下载
  • 官网: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。目前支持语法高亮。

更多编程相关知识,请访问:编程视频课程!!

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
HTML教程
HTML教程

共500课时 | 6.5万人学习

PHP基础入门课程
PHP基础入门课程

共33课时 | 2.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号