大家好，我是K.J.！无意中通过搜索引擎来到了简书，看到了很多大大们的精彩分享，因此受到了不少启发。
这几天感觉自己是不是也应该写点什么？
算回报给那些帮助我解惑的作者大大们，还有这可歌可泣的互联网分享精神。

首先说明下为什么要写这个主题呢？很久以前就听闻了Atom的大名，也曾经下载过来玩耍了下。可是呢，因为当时 Win 下插件实在是太难安装了（没想现在也是依旧如此）。自己那时也没 Mac ，自然也就没怎么去深究。

直到最近拥有了人生第一台 Mac ，然后又无意中看了简书大大们对Atom的美赞。自然而然又勾起了我那颗蠢蠢欲动，想要再尝试一番的心。

而后，在公司的 Win 机上又体会了一番折磨人的插件安装，所以回家用 Mac 又尝试了一遍，没想到完全是两种不同的感受。

说了这么多前因后果，那么现在，入正题！

安装 Win & Mac 两个系统都要需要的东西：

一、科学上网

由于简书提示有推广成分，所以这里的软件就大伙自己找吧

PS： 科学上网还是很有必要的，就算不是为了装插件。其实，有时候上Google搜索一些技术型的外文资料，还是必不可少的。笔者发现，有些技术问题用英文在Google搜索还是很精准的。而且，国外的一些技术论坛的回复质量基本都挺好。当然啦，前提是你的英语水平还是有那么点的。

二、Atom（主角上场）

• 前往官网下载对应自己系统的版本

如此辣眼的按钮

• 双击下载完成的文件，就可以开始安装了

下载好的Atom文件

安装成功

到目前为止，无论是Win还是Mac，都是一样的。
没什么根本上的区别，都是下载和安装的操作。

三、Win 和 Mac 的差异

Win 系统：打开Atom，点 File => Settings => Install

笔者无论是开没开蓝灯，搜索出要的插件后，接着点Install后都会神奇的卡住
只有如下图的install按钮上一直在循环的阴影动画
内心真的是深深的无力感～！

卡出翔的安装

Mac 系统：然而笔者在自己的MacBook Pro上，同样的操作，一切都没问题，过一会儿（时间视插件大小而定）就安装上了。（难道这就是苹果这么贵的原因之一吗？易用性！！！）

Mac 插件安装成功--超省心

解决方法：重点来了，那么 Win 下如何安装插件呢？

以下是笔者自己琢磨的方法，如有错漏，欢迎大家补充

• 首先到github搜索页

github搜索页

• 搜索自己想要的插件（一般右侧的排列类型选择【Most stars】 ，出来的结果中看到 **for atom **的字样 基本就是了）

file icons 为例--棒棒的搜索结果

• 进入插件的详情页，点绿色的Clone or download，选择蓝色的 Download ZIP

未标题-2.jpg

• 将下载好的解压到对应的Atom插件目录，默认安装都是在这里 C:\Users\Administrator.atom\packages
  或者你可以在package里看到路径

红色框中的部分

PS：下面的步骤起，要安装node环境 官方node下载。npm 是node安装时自带的包管理工具，安装成功后就可以使用了。在Win 下的开始菜单里可以找到node的命令行窗口（也是个黑黑底色的窗口），打开输入笔者下面的命令应该是一样效果（笔者用的是Git bash）。

• 打开Git bash，cd 到自己刚刚解压好的插件目录里 ，然后 npm install（一定要先安装好node环境，才会识别这个命令哦）

警告不用理会

• 安装成功后会有一堆的信息刷屏出来

安装的插件信息都刷出来了

笔者觉得 Win 之所以卡住的原因应该是网络的问题，导致要安装的插件包下载不过来。

所以就想到先去github手动下载，然后再手动用Gitbash安装，确实麻烦是麻烦多了（大家若有更好的办法，欢迎留言补充）

PS:笔者试过直接用git命令也会卡住半天没动静

Atom插件【自用】 (Web前端方向）：

        笔者目前还只用到了以下插件
        插件标题已添加对应插件的  github链接

        欢迎大家留言补充

        互相学习，共同进步

1. atom-beautify

结构格式美化，自动缩进之类的
Beautify HTML, CSS, JavaScript, PHP, Python, Ruby, Java, C, C++, C#, Objective-C, CoffeeScript, TypeScript, Coldfusion, SQL, and more in Atom

2. atom-ternjs

js代码智能提示补全
JavaScript code intelligence for atom withTern. Adds support for ES5, ES6, ES7, Node.js, jQuery, Angular and more.

3. atom-autoprefixer

**添加css各浏览器前缀如-webkit-、-moz-等 **
Prefix CSS and SCSS with Autoprefixer

4. color-picker

颜色选取器
Right click and select Color Picker, or hit CMD-SHIFT-C/CTRL-ALT-C to open it. Currently reads HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 and VEC4 colors – and is able to convert between the formats.

5. emmet

html标签补全

6. file-icons

美化左侧资源管理器里的文件图标，算主题的一部分吧

7. minimap

在右上角生产代码全局预览图
Shows the code that's under the mouse cursor when hovering the minimap.

8. open-in-browser

直接在编辑器内右键浏览器打开
A very simple Open in Browser Atom.io Package. This allows you to right click and have a menu that will open the current file in your default program. That opens that extension. HTML files will open in your default browser or application.

谢谢你一直如此认真的看完，你一定是个很好学的人。
如果你觉得不错，可以关注我，我会时不时的更新有感悟的Web前端知识。
当然啦，你要是很喜欢，也可以点个赞 ，支持下我的首发文分享，万分感谢。