优雅地配置Atom - MescalChuan

从最初的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上有详细说明。

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

minimap 实现sublime text的代码预览，效果如图：
autocomplete-modules 模块自动补全。这个在es6开发中经常用到，会智能显示当前路径下的模块，搭配autocomplete-paths一起使用，效果如图：
autocomplete-paths 路径智能提示，它的默认项目最大文件数为2000，当超过这个数量时插件不再运行。目前的前端项目2000+的文件已经再正常不过了（包含了node_modules），可以在autocomplete-paths的设置中修改：

不过并不建议修改该默认值，如果你的电脑性能不是很高的话重启atom后会十分卡顿。
7. file-icons 为文件添加小图标，效果如图：

atom-html-preview 预览html页面
js-hyperclick ctrl+鼠标左键跳转到变量定义处，它依赖于其他插件，当出现提示框时点击确认让其自动安装即可。
linter 基本的错误检查，推荐在其之上安装更精准的错误检查插件
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
        }
    }
}