先说下atom的插件安装方法吧,因为没用过苹果电脑,所以这里就只说下windows的操作吧。

ctrl+, “调出设置面板

点击install按钮,进去搜索插件面板

1.expose

在搜索框搜索expose,默认搜索的是packages,即插件,这里会有点慢,要等待一会儿,搜索完成后,点击install按钮,我这里是已经安装好的了,安装也要一会儿时间

安装完成后,既可以使用该插件了,快捷键是  shift+alt+e ,点击快捷键后,出现下图

出现该界面后,可以直接键盘,1-9,数字进行切换,也可以←(方向键向左)和→(方向键向右)进行切换,最后enter(回车)即可进入页面。

2.color-picker

可以直接跳出颜色面板,快捷键

ctrl+alt+c

3.file-icons

安装此插件后,左侧的菜单树中不同的文件会标示上不同的小图标,下面两图分别是安装之前和安装之后


     

4.atom-beautify

格式化代码插件,使用方法:

ctrl+shift+p

,调出搜索框输入beautify,出现如下

enter第一行后代码就自动格式化

5.autoprefixer

自动补全代码前缀,写完需要补全的代码,安装后的使用方法:

1)在css或者scss文件中,直接ctrl+shift+p,调出搜索框,输入插件名

如上图,使用插件后,代码自动补全

2)在html文件中,需要选中style中的css代码,在进行上面1)的操作

6.advanced-open-file

新建文件或者打开某文件的插件,这是个很有用的插件呦,快捷键:ctrl+alt+o,

若要新建文件,则选择对应的目录,输入名称后回车即可,若要打开某文件,则切换至改文件下,回车即可以进入该文件

7.open-in-browers

可以是html文件直接在浏览器中打开的插件,使用方法:在文件上右键出现操作面板

选择想要的浏览器即可

第二种方法,当安装完这个插件后,如果当前打开的是html文件,这文件的左下角的工具啦会出现下面图中的五种小图标,分别对应不同的浏览器,点击相应的即可

8.autocomplete-paths

自动补全路径,当遇到需要输入路径的时候,这个插件可以出现提示,如下

9.Build Sass

自动编译sass文件成css文件,使用方法如下

10.emmet  (
!好用)

这个插件应该都知道,sublime中同样好用的插件,自动补全代码,非常好用的插件,如下

输入后点击tab键变成

11.cssComb

整理css的插件,使用方法:ctrl+shift+p调出搜索框,输入csscomb确定即可

12.minimap

安装这个插件后,会出现类似于sublime text的右侧小地图的东西

悬浮还会出现操作按钮

点击操作按钮后还出现一些选项,可以自己都试试

13.Bookmarks

这个插件应该是安装atom的时候自带的,不过挺好用的,中文就是字面意思:书签,快捷键如下

Windows

  • alt-ctrl-f2 

    to add/remove a bookmark on the current line 增加或者移除当前行的书签

  • ctrl-shift-f2 

    to remove all bookmarks in the current editor 去掉当前编辑框的所有书签

  • ctrl-f2 

    to view all the bookmarks 查看所有书签

  • f2 

    to move the cursor to the next bookmark 跳转到当前光标的下一个书签处

  • shift-f2 

    to move the cursor to the previous bookmark. 跳转到当前光标的上一个书签处

Atom编辑器的插件的更多相关文章

  1. atom编辑器社区插件推荐

    atom是github出品的文本编辑器,为开发者又提供了一款易用.牛逼的文本编译器.在开始接触前端并从工作开始一直用webstrom来进行前端开发,开始使用时,被他各种强大神奇的功能给折服:支持zen ...

  2. atom编辑器安装插件报错。。

    Checking for native build tools failed gyp info it worked if it ends with ok gyp info using node-gyp ...

  3. Atom 编辑器插件:amWiki 轻文库

    amWiki 是一款基于 Javascript 脚本语言.依赖 Atom 编辑器.使用 Markdown 标记语法的轻量级开源 wiki 文库系统. amWiki 致力于让大家可以更简单.更便捷的建设 ...

  4. Atom 编辑器 前端基本插件

    Atom 编辑器插件 这个编辑器是github出品,现在处于免费试用期:如果是初学者,可以使用这个编辑器,插件安装很方便,只需要点菜单栏的File-Settings-Install,在搜索框中输入想要 ...

  5. Atom编辑器中安装Emmet插件失败的问题

    今天使用Atom编辑器安装Emmet插件的时候,刚开始的时候报错: 报错内容如下: Installing “emmet@2.4.3” failed.Show output… Compiler tool ...

  6. atom编辑器插件atom-ternjs

    这是官方文档:https://atom.io/packages/atom-ternjs 官方介绍: JavaScript code intelligence for atom with Tern. A ...

  7. Atom编辑器入门到精通(二) 插件的安装和管理

    在本节中我们会学习如果安装和使用插件插件是Atom中一个非常重要的组成部分,很多功能都是以插件形式存在的.比如上篇文章中提到的目录树和设置等窗口都是通过默认安装的插件来实现的. 查看已安装的插件 打开 ...

  8. APICloud支持Atom编辑器,并建立开发工具核心库

    APICloud支持Atom编辑器开发工具 APICloud始终坚持多开发工具支持策略,开发者无论使用Sublime Text3.Eclipse还是Webstorm,都可以在APICloud平台中找到 ...

  9. Atom编辑器入门到精通(四) Atom使用进阶

    在本节中将介绍Atom提供的更高级的使用技巧,通过这些技巧将会进一步提高你的代码编写效率 代码片段(Snippets) Snippets是一种在代码中快捷插入代码块的方式,下面是维基百科中对Snipp ...

随机推荐

  1. shell实现ping命令查看哪些主机在线

    #!/bin/bash .{..};do -i 0.5 $a >/dev/null && echo "$a 在线" || echo "$a 离线&q ...

  2. CentOS 7 恢复 Windows 启动项

    安装Linux时一般会自动识别windows系统并添加引导项,而 CentOS 默认不支持 NTFS 分区,CentOS7采用了Grub2,与CentOS6有区别.手动引导windows分区修改配置稍 ...

  3. RabbitMQ服务安装配置

    RabbitMQ是流行的开源消息队列系统,是AMQP(Advanced Message Queuing Protocol高级消息队列协议)的标准实现,用erlang语言开发.RabbitMQ据说具有良 ...

  4. python高级之面向对象高级

    python高级之面向对象高级 本节内容 成员修饰符 特殊成员 类与对象 异常处理 反射/自省 单例模式 1.成员修饰符 python的类中只有私有成员和公有成员两种,不像c++中的类有公有成员(pu ...

  5. Linux权限管理.md

    Linux 文件的权限 Linux文件权限简介 Linux 文件或目录的属性主要包括:文件或目录的节点.种类.权限模式.链接数量.所归属的用户和用户组.最近访问或修改的时间等内容.具体情况如下: # ...

  6. bootstrap-全局css样式

    bootstrap-全局css样式   1.bootstrap是一个前端框架 2.基本模板:viewport视口可以解决移动端设备网页自适应问题 3.版心(.container)  流式版心(.con ...

  7. docker创建镜像

    手动创建: docker run -d -p mynginx:v2 nginx rpm -ivh http://mirrors.aliyun.com/epel/epel-release-latest- ...

  8. 树莓派Odroid等卡片式电脑上搭建NAS教程系列6-miniDLNA

    目录: 1. 树莓派Odroid等卡片式电脑上搭建NAS教程系列1-Ubuntu系统安装 2. 树莓派Odroid等卡片式电脑上搭建NAS教程系列2-SSH连接访问 3. 树莓派Odroid等卡片式电 ...

  9. RequireJS shim 用法说明

    RequireJS中如果使用AMD规范,在使用的过程中没有太多的问题,如果加载非AMD规范的JS文件,就需要使用Require中的shim. require.config({ paths:{ jque ...

  10. WPF中RadioButton绑定数据的正确方法

    RadioButton一般用于单选的时候,也就是从一组值中选择一个值. 比如性别有“男”和“女”两种取值,而对于一个员工的实例来说,性别的取值要么是男,要么是女. 这种时候一般就会用到RadioBut ...