Atom编辑器折腾记_(23)加快React开发的插件汇总【浪一波】

前言

汇总下比较实用的atom插件[偏react开发的]-- 暂时应该没有比我更全面的!嘎嘎

  1. atom-react-autocomplete–项目内,组件名及状态的自动补全

  2. autocomplete-js-import–模块导入智能提示

  3. emmet-jsx-css-modules– React内的Emmet补全,非单纯的expand【class => className 】!!
  4. language-javascript-jsx – JavaScript, ES6, ES7, React JSX, Flow支持
  5. language-babel – 写React必不可少【atom内开发react的核心插件!!!】
  6. react-es6-snippets – es6写法的react snippet,挺实用
  7. react-snippets – 和上面的搭配“口味更加”哦!!。。
  8. js-func-viewer– 新插件,但是很实用,可以查看函数的结构~~~~

  9. atom-react-native-autocomplete – RN的智能补全,react开发也能受用一部分,相当实用!智能提示非autocomplete那种【类似静态语法分析器】

总结

react最近折腾了一段时间,自己爬坑够呛;vue2正式版快出来了。。。感觉这货更值得折腾;
希望这些插件可以帮助react开发的小伙伴写的更加舒心~~~
时间: 2024-10-12 18:18:05

Atom编辑器折腾记_(23)加快React开发的插件汇总【浪一波】的相关文章

Atom编辑器折腾记_(21)修复`Atom-Beautify: Migrate Settings`问题

前言 不管在公司还是在家,我都挺喜欢用atom的,所以配置什么都用sync-settings这个插件来同步, 今晚回到家,同步一下...发现大部分配置正常了..唯独Atom-beautify有点抽风: 问题 一直报'Atom-Beautify: Migrate Settings, unsuppor......' 解决办法 找了许久,从配置开始文件着手找...又翻墙找了下...大体解决如下: 按下ctrl+shift+p[command-palette] , 键入Atom-Beautify: Mi

Atom编辑器折腾记_(11)编辑器实时预览HTML页面(插件:Atom HTML Preview)

为何寻找 每次预览HTML页面,都需要打开各种浏览器;哪怕不是调试,只是为了查看下效果; 切换来切换去,各种刷新,感觉有些浪费时间;以前用过DW的实时预览,感觉这个功能很赞; 又踏上了atom插件仓库慢慢寻找之路-.. 插件:atom-html-preview 官方描述:A live preview tool for Atom Editor. 简言之:Atom编辑器内实时预览的工具 获取方式 通过命令行安装 apm install atom-html-preview 通过编辑器内部的instal

Atom编辑器折腾记_(4)按键绑定keymap

简介 Atom编辑器支持自定义按键绑定,文件格式是CSON; 何为CSON 官方解释: This file uses CoffeeScript Object Notation (CSON). 我的解释: JSON + CoffeeScript 写法基本是JSON的写法 按键绑定组成 如图: 设置内的键盘映射图很好的说明了 按键绑定 = 快捷键(Keystroke) + 执行命令(Command) + 来源(Source) + 选择器(Selector) 快捷键不用解释了 执行命令就是按下快捷键所

Atom编辑器折腾记_(7)Emmet实例教程

题外话 Atom的emmet插件有些功能给阉割了 说阉割倒不如说atom本身自带的一些功能替代了atom的拓展功能 教程主要是常用的基础知识,在最后我会附上emmet完整简写表,大伙可以把图片在新页面打开另存为 何为Emmet 简言之,Emmet的前身是大名鼎鼎的Zen coding; 功能 snippet(代码片段,不如用专门的片段插件) abbreviation expand(简写展开) 目的 只有一个,加快web开发(编码速度) Emmet基础 知识预备 HTML/CSS标签熟悉掌握 -

Atom编辑器折腾记_(10)CSScomb增强版[CSS/LESS/SASS]

何为CSScomb 官方网站只有一句描述: Makes your code beautiful(让你的代码更漂亮) 通俗点讲: CSScomb是用来排版CSS代码的-可以说是格式化插件,依赖nodejs 获取CSScomb–这不是今天的话题 官方网站: CSScomb 支持许多编辑器,比如Sublime/Atom/brackets等 第三方CSScomb-这才是今天的话题 昨天写了篇CSS3的文章-发现代码有点混乱..人力排版有点--.所以跑去atom插件库寻找csscomb Atom -> s

Atom编辑器折腾记_(1)介绍下载安装

何为ATOM Atom是专门为程序员推出的一个跨平台文本编辑器.具有简洁和直观的图形用户界面,并有很多有趣的特点:支持CSS,HTML,JavaScript等网页编程语言.它支持宏,自动完成分屏功能,集成了文件管理器. 为什么用ATOM 开源 - 遵循MIT协议,代码托管在github上 多平台 - 支持MAC/WIN/LINUX(支持源码编译安装,也提供二进制安装包) 丰富的插件库 - 开源到现在一年了..社区的各种插件丰富起来了,且atom的插件支持在线更新! 类Sublime - 风格和s

Atom编辑器折腾记_(8)分屏操作

分屏 何为分屏..请看此图 为何要分屏 用过linux的小伙伴都知道,分屏耍的好,可以提高工作效率的 如何获取Atom的分屏命令 最简易的,进入设置中心的快捷键列表,搜索pane 和 split 就可以看到命令和选择器了 查询官方手册 为何不用默认的分屏快捷键 有些失效了.就是按了没反应,应该和一些插件冲突了 不习惯,符合自己习惯的才是最高效的 自定义快捷键 为何这样自定义我写在注释里面了-vi/vim #分屏快捷键自定义 #alt-fkey是分屏的方向,仿vim模式 #ctrl-fkey是光标

Atom编辑器折腾记_(9)实用侧边栏插件[仿Mac OS finder]

插件介绍:tree-view-finder 修改目录树跟Mac OS Finder相似 - 在目录树显示文件大小和文件修改日期及文件的大小 - 可以根据文件名/大小/文件修改日期进行排列 - 双击文件可以调用外部编辑器打开所要编辑的文件 安装及使用 两种安装方法 apm install tree-view-finder Atom->settings(设置)->install(安装)->搜索tree-view-finder - 推荐 使用 Tips:(若是没有启用自身插件二步设置里面的Us

Atom编辑器折腾记_(6)config.cson基础教程

号外 昨天,atom官方更新了atom的版本; 把之前内置到core的核心插件autocomplete替换成autocomplete plus,还做了许多修正,具体看这里 Notable Changes Atom now bundles Autocomplete Plus and the completion providers for HTML, CSS, Less, Sass, snippets, and the Atom API Opening editors is now signifi