优雅地配置Atom

从最初的sublime text，到webstorm，后来又转战visual studio code，直到现在的atom，就个人使用体验来看是越来越舒适的。之前一直在使用sublime text和webstorm，后来尝试了一把vs code，发现其插件安装非常方便，主题也很优雅，于是就将vs code作为常用开发工具。最近vs code经常出现智能提示消失的现象，特别是当代码中有语法错误之后，除非重启，否则就跟用记事本没什么区别，可能是插件本身的问题，等过一阵子再尝试。昨天花了整整一个下午的时间体验atom，它的插件安装和vs code一样方便，社区也很活跃，下面是我最终的配置结果：

atom

基本配置

前往atom官网下载最新版本：

安装成功后，根据个人喜好做一些基本配置。我个人喜欢将tab缩进长度设置为4，这样代码看起来不是那么紧凑。

Atom默认是不显示缩进线的，你需要手动勾选show indent guide。

主题

推荐atom material和seti-ui，但我个人更喜欢atom material这种扁平化的风格，编辑器嘛就使用默认的one dark，两者搭配起来使用效果更好。直接在settings -> install中输入关键字，然后点击安装即可。

主题安装
安装成功后，在settings -> themes -> ui theme中选择atom msterial即可切换主题。

插件

这里罗列了一些经常用到的插件，参考了kompasim的atom-plugins。插件的安装方法与主题相同，每个插件的具体配置都在github上有详细说明。

1. atom-beautify 格式化代码
2. atom-ternjs es5、es6、node、jQuery等代码自动补全
3. pigments 颜色代码片段的背景色以该颜色显示，效果如图：

4. minimap 实现sublime text的代码预览，效果如图：
   

   

5. autocomplete-modules 模块自动补全。这个在es6开发中经常用到，会智能显示当前路径下的模块，搭配autocomplete-paths一起使用，效果如图：
   

   

6. autocomplete-paths 路径智能提示，它的默认项目最大文件数为2000，当超过这个数量时插件不再运行。目前的前端项目2000+的文件已经再正常不过了（包含了node_modules），可以在autocomplete-paths的设置中修改：
   

   
   不过并不建议修改该默认值，如果你的电脑性能不是很高的话重启atom后会十分卡顿。

7. file-icons 为文件添加小图标，效果如图：
   

   

8. atom-html-preview 预览html页面

9. js-hyperclick ctrl+鼠标左键跳转到变量定义处，它依赖于其他插件，当出现提示框时点击确认让其自动安装即可。

10. linter 基本的错误检查，推荐在其之上安装更精准的错误检查插件

11. linter-eslint js错误检查，比linter-jshint更容易配置和实用。推荐将.eslintrc放到c:\Users\用户名\下，在linter-eslint的设置中配置路径：
    

    

eslint的配置请参考官方文档

//.eslintrc
{
    "env": {
        "browser": true,
        "node": true,
        "commonjs": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

目前的配置并不支持es7语法：

需要在.eslintrc中添加"parser": "babel-eslint",，然后linter-eslint会抛出如下错误：

我们点开错误信息，进入到linter-eslint文件中，安装babel-eslint：

cd /c/Users/qinchuana/.atom/packages/linter-eslint
npm install babel-eslint --save

重启atom，一切ok了。

12. terminal-plus 内嵌控制台
13. highlight-selected 高亮显示相同的单词，效果如图：
    

14. docblockr 快速编写注释文档
15. language-babel jsx自动编译
16. language-javascript-jsx 支持jsx语法
17. emmet-jsx-css-modules jsx中的css emmet
18. atom-react-autocomplete react的智能提示
19. atom-react-es6-snippets 快速生成es6写法的react片段
20. react-native-snippets 快速生成react native片段
21. atom-react-native-style 快速书写rn样式，效果如图：
    
22. activate-power-mode 一个特效插件，当连击数达到一定值后每敲一次键盘都会有颗粒特效和震动，效果如图：