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

基本配置
前往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后会十分卡顿。 -
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
}
}
}

目前的配置并不支持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了。
-
terminal-plus
内嵌控制台 -
highlight-selected
高亮显示相同的单词,效果如图:
-
docblockr
快速编写注释文档 -
language-babel
jsx自动编译 -
language-javascript-jsx
支持jsx语法 -
emmet-jsx-css-modules
jsx中的css emmet -
atom-react-autocomplete
react的智能提示 -
atom-react-es6-snippets
快速生成es6写法的react片段 -
react-native-snippets
快速生成react native片段 -
atom-react-native-style
快速书写rn样式,效果如图:
-
activate-power-mode
一个特效插件,当连击数达到一定值后每敲一次键盘都会有颗粒特效和震动,效果如图: