atom编辑器社区插件推荐

atom是github出品的文本编辑器，为开发者又提供了一款易用、牛逼的文本编译器。在开始接触前端并从工作开始一直用webstrom来进行前端开发，开始使用时，被他各种强大神奇的功能给折服：支持zen-coding、文件可以跟指定的类型关联、版本管理、文件查找等等，到现在我还是觉得他对我的开发效率有很大的提升。但是他重了，依赖了大量的包。导致后面高版本对硬件的要求越来越高，一般的机子都能卡半天。看图说话：

尼玛，mac配置算高了吧，但是就是这样在用webstrom10还是卡，卡，卡。被迫无奈，据说atom挺火，就尝试用了下，给我最大的感觉就是用着清爽，依赖github强大的社区，基于atom的插件也特别丰富，按需安装；基本满足我开发需求。话说回来，atom文本编辑器具体的优势在哪里，通过官网可以看到：

跨平台支持，支持windows、linux、mac
内置了atom自己的包管理。我们可以根据需要自己来安装需要的插件，如需要linter-jshint，可以使用其提供的apm命令，也可以在atom编辑器里安装插件，插件都会被安装到.atom文件的packages
```
apm install linter-jshint
```
文件系统浏览。可以在atom编辑器窗口中同时打开一单个文件、一个工程文件或者多个工程的文件
强大的社区支持，背靠github社区,可以提供大量基于atom插件（个人的观点）

好了，言归正传，atom在安装之后会默认自带了一些github核心的插件，有些的插件功能是很好用的如autocomplete-plus，这些插件是不可卸载的，只能禁用；显然这些插件不会囊括开发者涉及到的方方面面，所以剩下的就留给github社区来提供；下面推荐一下本人所装的atom社区插件（以下有些插件的图片来自于参考文献的图片）

1、emmet

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

    type this:

    ul.list>li.item${val-$$}*3

    get this:

    <ul class="list">

        <li class="item1">val-01</li>

        <li class="item2">val-02</li>

        <li class="item3">val-03</li>

    </ul>

2、linter-jshint

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

3、highlight-selected

高亮当前所选文字，双击后全文这个词或者变量都会高亮哦

4、git-control

个人感觉atom对git的支持还是不及webstrom好用，不过有些插件还是能弥补这个问题。git-control就是其中的一个很好的插件，他能提供一个git gui来来完成git的版本管理，非常方便操作，个人感觉比git-plus插件好用，而不是一个命令打开一个面板；

5、highlight-line

顾名思义，该插件是对光标所在行以高亮显示，从而可以准确定位光标所在的行

6、docblockr

这个插件可以帮助你快速的生成注释，很多高级的编辑器都有这个功能，只是atom没有内置实现

7、simplified-chinese-menu

atom提供的都是英文版，若是英文不好的，可以使用简体中文插件来汉化atom编辑器

8、atom-beautify

其他编辑器都支持代码格式化，以便阅读。atom-beautify插件提供类似的功能用于美化代码，可以对html、css、js等文件进行格式美化。使用时需要先选中要美化的代码

9、atom-ternjs

该插件能对一个对象中拥有的对外提供的属性和方法都能通过suggest的形式提示出来，能对一个对象对外提供的接口有一个选择过程

10、pigments

pigments插件是在项目文件中，用于为dom元素设置样式时，可以显示对应的样式值对应的颜色展示，相当有用。

11、hyperclick和js-hyperclick

这两个插件配合，作用是跳转到变量声明或者定义的地方，非常有用！！！，mac下使用comman+click，windows下使用contrl+click来跳转

12、autocomplete-paths

在项目依赖某个路径的文件时非常有用，可以自动路劲提示，超实用。

参考文献：

1、 atom官网：https://atom.io/

2、神雕天龙的博客：http://blog.wangjunfeng.com/archives/647

PS：目前vscode(visual studio code)越来越流行起来，相比Atom更轻量，喜欢vscode编辑器，可以参考这里查看该编辑器的常用扩展包。 updated 2017-10-25 17:17