前言

之前一直是sublime党，那打开的速度，才能让人安心的敲代码嘛！
但是有一段时间看到了Atom,这个颜值高的一批的东西。我的内心开始动摇了！
于是找了一个工作不忙的下午，折腾了半天……我的Windows上的Atom终于彻底崩溃打不开了,哦对，那是光棍节的馈赠。新换了电脑之后，反而是sublime和我过不去，DMG各种打不开……时隔多日，要不再试试？

Paste_Image.png

Atom目录(--->通向官网的大门)

• 安装插件篇
• 插件推介篇
• 快键键篇

插件安装

打开软件，点击install a Package

Paste_Image.png

Paste_Image.png

点击之后就会看到插件列表

Paste_Image.png

手动安装Atom插件的方法

1. 打开电脑终端

   
   
   Paste_Image.png
2. 输入cd ~/.atom/packages进入Atom的安装包目录
3. 去Atom官网打开安装包搜索界面
4. 搜索你想要的插件名字。如下图（搜索emmet作为实例）
   
   Paste_Image.png
   
   点击进去之后===========>进入插件详情页
   再点击Repo按钮========>进入插件代码托管仓库
   依次点击Clone or download========>Copy(图标)复制该地址
   
   Paste_Image.png
   
   
   Paste_Image.png
5. 切回终端，输入git clone 刚才复制的地址（如下图）回车
   
   Paste_Image.png
6. 插件克隆之后，输入cd 刚才的插件名例（cd emmet）
7. 进入下载的插件根目录后，再输入npm install
8. 重新打开Atom之后我们就会发现，这个插件已经安装成功了~
   
   Paste_Image.png
   
   9.如图，点击Packages就可以查看自己刚才安装成功的插件了。这里可以卸载，设置我们下载的插件。

插件推介

因为本人是抠脚前端，所以这里推介的插件都是前端适用的
也是本人在简书和SegmentFault上看各位前辈的文章搜集的，感谢各位前辈

1. emmet
   快速手写 HTML, CSS, Sass / SCSS / LESS
   我想前端汪们应该对这个插件很熟悉了

2. atom-ternjs
   ES5, ES6, ES7, Node.js, jQuery, Angular 等等 js 代码自动补全

3. autocomplete-paths
   路径自动补全

4. atom-beautify
   代码格式化

5. pigments
   代码颜色可视化

6. color-picker
   取色器

7. atom-simplified-chinese-menu
   Atom 编辑器简体中文包：汉化菜单栏、右鍵菜单以及大部分的设置项。（感觉没什么卵用）

8. markdown-preview-plus
   markdown实时预览，我感觉这个插件比sublime的markdown预览好的实在是太多了！

9. open-in-browsers
   右键菜单，在各种浏览器打开html

Paste_Image.png

快捷键

1. 格式化代码
   [安装了atom-beautify]后,使用control+option+b