之前写前端一直使用的是webstorm,这个ide很好，功能也集成得不错，但是缺点太显著那就是慢，启动慢，打字有时候还会卡帧，这导致我不得不寻找一个轻量级的替代品，这次我考虑的有vsc和atom，最终还是决定使用atom，理由就是好看且顺手。我从今天上午开始到现在已经下载了很多好用的插件，写了这篇博客来梳理一下思绪

关于atom

简介

atom是github出版的编辑器，插件也非常丰富。官网

参考文献

优点

UI好看(感觉比spacemacs还好看)
前端友好
插件市场简便且强大

配置

在介绍atom配置之前首先需要更改一下源（参考这篇文章），我最开始的时候就没有改，下载速度非常慢而且易出错，f**kGFW！

首先找到这个路径\Users\用户名\.atom，在这个下面新建一个.apmrc的文件，代码如下

1 2	registry=https://registry.npm.taobao.org/ strict-ssl=false

也就是把源换成淘宝源（brew，npm，pip也应该同理换一下，当然这就不是本文的讨论范围了）

atom安装插件

应用内打开

我更偏爱这种方法，一是简单，而是内容也更丰富（可以看到评价和简介）mac下直接按command + ,，在里面找到install栏即可

终端安装

apm install + 插件名，不太推荐这种方法，不要为了装逼冒这个风险。python，node都可以通过终端安装包，但atom没必要，应用内更丰富且易定制。

atom快捷键

command+\ toggle文件夹
command+p 查找文件
command+enter跳转到下一行
command+k + 方向键分屏

插件篇

主题插件

atom-material-ui

版本控制

git-plus
这个方便git使用，我之后写git的文章时会结合这个来说的（主要是方便我这种不记命令的懒人XD）
##markdown
说一下，我最开始的时候也是想把atom改造成一个markdown编辑器的，后来尝试了很多插件，最后发现还是macdown好用，配色鲜明（这个很重要）+空间大（屏幕小的痛）

文件管理

project-manager

暂时没有搞明白

file-icons

为文件添加各种icon，方便识别

expose

主要就是呈现跟手机端一样，当tab栏过多时，按下comamnd+shift+e查看所有的tab

自动补全

emmet

不解释

auto-completepaths

文件路径补全

autocomplete-modules

自动补全模组名

atom-ternjs

ES5, ES6, ES7, Node.js, jQuery, Angular 等等 js 代码自动补全

css-snippets

代码检查

linter

这是一个系列，主要作用是代码优化和检测

linter-jshint

基于 jshint 的 JavaScript 语法检查插件

linter-eslint

基于 ESLint 的 JavaScript 语法检查插件

linter-htmlhint

linter-jsonhint

linter-csslint

前端细节

autoprefixer

这个是用来解决兼容性前缀的，你只需要写完之后，使用控制命令调用autofixer即可，非常方便

open-in-browser

按下组合键control+alt+o，即可使用默认浏览器打开当前html（默认是chrome），当然也可以通过底栏的按钮来打开html

hyperclick

js-hyperclick

拓展功能

color-picker

conmand+shift+c直接显示出选色器，非常方便！！！！

docblockr

这个功能非常强大，可定制型也比较高…我琢磨了很久也只挖掘了几个我目前暂时能用到的。主打功能：高级注释。/*或/**之后按下tab，就能自动转化成批量注释。另外，在函数前使用这个功能，就能自动衍生出有关函数的相关注释

minimap

缩略图