React Native开发之ATOM开发实用技巧

前面对React Native开发工具Atom做了一个详细的介绍,详见RN开发IDE详解
Atom作为一款前端开发利器,有很多的插件供我们选择,这里罗列常见的可以提高我们开发效率的插件给大家介绍一下。

ATOM常用插件

1、simplified-chinese-menu

Atom的简体中文语言包,完整汉化,兼容所有已发布的版本Atom。

2、tree-view-finder

左边菜单栏显示方式,类似Mac OS下的finder。

3、minimap

类似sublim text右边的代码缩略图。

4、linter和linter-jshint

该插件是用jshint来检查代码,想必大家都听说过jshint代码检查工具,它有一个配置文件.jshintrc,这个文件告诉jshint执行的检查规则。通过jshint能发现代码中存在的问题,可以及时避免bug的发生。linter-jshint插件基于atom规则来使用jshint,该插件可以在项目根目录下新建一个.jshintrc来告诉检查规则,也可以不用创建此文件来进行代码检查。
注意:linter-jshint是依赖linter插件来使用的,也就是说必须先安装linter插件;因为linter是一个粗糙的检查,有很多针对专门项的代码检查,如linter-csslint、linter-php等等

5、linter-js-standard

用来使javascript代码格式化。

6、git-plus

提供git版本控制操作的命令,个人感觉不是很好用,还是terminal比较习惯。

7、file-types和file-types-icon

file-types用来区分文件类型的,file-types-icon用来给不同的问题类型添加不同的图标。

8、emmet

这款插件是用来支持zend-coding,Emmet的前身是大名鼎鼎的Zen coding,如果你从事Web前端开发的话,对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度。

9、autoclose-html

html标签自动比较。

10、atom-ternjs

该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来,能对一个对象对外提供的接口有一个选择过程,可以理解为js代码自动提示。

11、atom-html-preview

html页面预览。

12、atom-bootstrap3

bootstrap3代码提示插件。

13、Remote-FTP

ftp管理工具,命令和图形化界面都支持。

14、autocomplete-paths

文件路径自动提示,相当的犀利。

15、atom-beautify

代码格式化,可以定制化风格。

16、autoprefixer

浏览器兼容。

17、color-picker

颜色取值器,也是相当的不错。

ATOM快捷键大全

文件切换

ctrl-shift-s保存所有打开的文件
cmd-shift-o 打开目录
cmd-\ 显示或隐藏目录树
ctrl-0焦点移到目录树,目录树下,使用a,m,delete来增加,修改和删除
cmd-t或cmd-p 查找文件
cmd-b在打开的文件之间切换
cmd-shift-b 只搜索从上次git commit后修改或者新增的文件

导航

ctrl-p 前一行
ctrl-n 后一行
ctrl-f 前一个字符
ctrl-b 后一个字符
alt-B,alt-left 移动到单词开始
alt-F,alt-right 移动到单词末尾
cmd-right,ctrl-E 移动到一行结束
cmd-left,ctrl-A 移动到一行开始
cmd-up 移动到文件开始
cmd-down移动到文件结束
ctrl-g移动到指定行 row:column 处
cmd-r 在方法之间跳转

目录树操作

cmd-\,cmd-k ,cmd-b 显示(隐藏)目录树
ctrl-0 焦点切换到目录树(再按一次或者Esc退出目录树)
a 添加文件
d将当前文件另存为(duplicate)
i显示(隐藏)版本控制忽略的文件
alt-right 和 alt-left展开(隐藏)所有目录
ctrl-al-] 和 ctrl-al-[ 展开(隐藏)所有目录
ctrl-[ 和 ctrl-] 展开(隐藏)所有目录
cmd-k h 或者 cmd-k left 在左半视图中打开文件
cmd-k j或者cmd-k down在下半视图中打开文件
ctrl-shift-C复制当前文件绝对路径

编辑和删除文本

基本操作

ctrl-T使光标前后字符交换
cmd-J将下一行与当前行合并
ctrl-cmd-up,ctrl-cmd-down使当前行向上或者向下移动
cmd-shift-D复制当前行到下一行
cmd-K,cmd-U使当前字符大写
cmd-K,cmd-L使当前字符小写

删除和剪切

ctrl-shift-K删除当前行
cmd-backspace删除到当前行开始
cmd-fn-backspace删除到当前行结束
ctrl-K剪切到当前行结束
alt-backspace 或 alt-H删除到当前单词开始
alt-delete 或 alt-D删除到当前单词结束

查找和替换

cmd-shift-f在整个工程中查找
cmd-F在buffer中查找
alt-shift-S查看当前可用代码片段

折叠

alt-cmd-[折叠
alt-cmd-] 展开
alt-cmd-shift-{ 折叠全部
alt-cmd-shift-}{ 展开全部
cmd-k cmd-N { 指定折叠层级 N为层级数

自动补全

ctrl-space提示补全信息

git操作

cmd-alt-Z checkout HEAD 版本
cmd-shift-B 弹出untracked 和 modified文件列表
alt-g down, alt-g up在修改处跳转
alt-G O在github上打开文件
alt-G H在github上打开文件history
alt-G C拷贝当前文件在gihub上的网址

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom