Atom的简介下载配置使用-新一代编辑神器(powered by GiHub)

2017-08-08修订
虽然Atom是我经常使用的工作工具，但是最近观察在同事电脑上的表现，确实是有些问题。例如Atom本身占用内存超多，一般使用都在1.5G左右 和我的chrome不相上下。同时打开文件速度较慢有时还会出现奔溃及未响应的状况。由于我的电脑之前是固态ASUS内存12G，后来换成MAC16G内存因此ATOM的弊病较难遇到。如果出现上述问题，那么建议使用Sublime或者VSCode或者Adobe的Bracket，这几个不算是WS那种的占用内存的大型IDE同时也有不错的体验。

2017-05-11修订

Atom简介

何为 ATOM

Atom 是(GitHub)专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持 CSS，HTML，JavaScript 等网页编程语言。它支持宏，自动完成分屏功能，集成了文件管理器。

为什么用 ATOM

• 开源 -- 遵循 MIT 协议,代码托管在 Github 上。
• 多平台 -- 支持 MAC/WIN/LINUX(支持源码编译安装,也提供二进制安装包)。
• 丰富的插件库 -- 开源到现在一年了..社区的各种插件丰富起来了,且 Atom 的插件支持在线更新。
• 类 Sublime -- 风格和 sublime text 极其相似,不管是风格还是操作上,快捷键上一些是通用的,应该借鉴
• 采用包管理技术 -- 采用了 node.js 来访问文件系统和包管理。
• 强大的生命力 -- 背靠 Github 社区,这对于 Atom 来说,可以注入源源不断的生命力。

Atom下载

Atom1.12.6版本

下载地址: https://atom.io/

Atom配置

之前使用的sublime Text3 配置的比较好用，但是总感觉距离顶尖的编辑器差了那么一点。自从知道并使用Atom开始才发现这是比较符合我要求的编辑器。

编辑器下载下来必须折腾一番才能成为你心仪的帮手，这里开始进行Atom的自定义风格和下载你日常使用的插件。

操作1：

atom002.jpg

进入设置页面

在这里可以进行Atom的各种设置。比如快捷键，管理下载升级安装你的主题、插件等。

atom003.jpg

安装一个主题

Atom分为两个主题设置。一种是界面UI主题，一种是代码高亮主题，当然下载的插件可能只有一种或者两种都有。monokai是我在subliem便喜欢使用的代码高亮主题。1.搜索栏输入monokai 2.点击Themes进行主题搜索 3.等待一会 发现monokai 点击右边的install按钮可以在线安装 4.点击插件名字可以打开 GitHub网页链接 5.点击插件内容（主体）可以打开Atom 内部的插件描述 说明

atom004.jpg

更换主题

更换一个主题

atom005.jpg

atom006.jpg

可以点击主题title进入网页 查看当前主题说明和查看其它的主题

自己喜欢的主题安装完毕后

开始安装插件

本人平时做web开发，把我自己用的插件发出来给大家参考，大家如果有什么好用的插件也可以@我。由于Atom到现在这个版本已经集成了很多的插件，因此需要安装的也不是很多。如果Atom在线安装不了的话，可以到Github下载下来然后本地进行 npm 安装

http://jingyan.baidu.com/article/375c8e19c3105a25f2a22901.html

1. Atom安装了自动提示插件（autocomplete）和它的plus，因此我们再安装一个 emmet就可以了。其他的语言提示在autocomplete后面加上-xml 等。
2. atom-beautify是一个自动格式化代码的插件。快捷键：Ctrl+Alt+B。刚才按了一下居然还能格式化Markdown文件。
3. atom-html-preview html文件在Atom打开。快捷键：Ctrl+Shift+H，可以在Atom进行网页实时预览，支持右键检查。
4. css-snippets写css能给予提示。
5. color-picker调色盘。快捷键：Ctrl+Alt+c
6. css-color-underlinecss颜色下划线显示。这里推荐使用pigments能对所有文件的颜色进行 代码颜色背景色的标注。
7. minimapAtom右边的代码小地图功能，类似于sublime的小地图，但是注意 这个插件在mac能用，在windows会出错然后导致你其他的插件几乎都无法使用。
8. file-iconsAtom没有文件图标，这个插件能把文件图标相应的显示出来。还有一个插件跟这个差不多
9. highlight-selected双击选择并高亮文字。
10. javascript-snippets jquery-snippets对js和jq的方法等进行提示。
11. monokai主题
12. script 直接运行js文件，需要配置
13. Atom本身不支持一些文件格式 可以添加对应插件使得Atom可以支持 例如language-stylus

注意：Atom将插件放在了 C:\Users\Users\.atom\packages的位置。卸载Atom不会影响配置和插件。插件可以重用，直接放在这个文件夹即可。

Atom使用

1. 有了atom-html-preview的实时预览，平时基本可以不用Hbuilder了。
2. 有了webbox-color和color-picker可以快速的选定颜色。
3. Atom支持GitHub的Markdown 使用Ctrl+Shift+p 调出命令模式 然后输入 mdpt 回车 可以预览Markdown文件
4. Atom打开速度不如sublime快 Atom F11 之后 界面比sublime看起来爽
5. Atom分屏快捷键 先按Ctrl+k 然后四个方向键随便按一个
6. Atom快速隐藏侧边栏 Ctrl+\
7. Atom删除一行 Ctrl+Shift+k 快速删除一行 Ctrl+x
8. 记不住插件的一些快捷键也没事 文件里面右键 就能看到插件提供的功能
9. Atom右下角更改 编码格式、文件格式、靠左靠右 左下角显示文件地址和光标所在位置
10. Ctrl+Shift+P 调出一个菜单，记不住快捷键可以使用这个方式进行查找 例如Ctrl+Shift+M的markdown预览，可以输如 mdpt(简写) 也可以输入完整英文单词
11. Atom在我的rmbp上也是主力，作为IDE来使用已经完全超越了sublime(还不是因为国产的一些IDE相当辣鸡 mmp 当然不是指Hbuilder)
12. VSCode我也使用过，功能也很强，好像现在插件还差点，而且菜单比较大还是中文，我已经用不惯了。。。

彻底删除ATOM(MAC)

rm -rf ~/.atom
rm -rf /usr/local/bin/atom
rm -rf /usr/local/bin/apm
rm -rf /Applications/Atom.app
rm -rf ~/Library/Preferences/com.github.atom.plist
rm -rf "~/Library/Application Support/com.github.atom.ShipIt"
rm -rf "~/Library/Application Support/Atom"
rm -rf "~/Library/Saved Application State/com.github.atom.savedState"
rm -rf ~/Library/Caches/com.github.atom
rm -rf ~/Library/Caches/Atom

6-13 嗯

不知道是不是因为装的插件有问题，左边文件夹栏没有那些操作功能了，重装一遍。另外大家谁知道Atom有提示原生js的插件(直接提示的 参考Hbuilder)请务必要告诉我！其实vscode有时会替代Atom使用一下。

image.png

5-11 有史以来最重大修订:
新增一堆插件导致现在Atom速度又满了 ⑨
由于更新数量较多 已经无法一一列举 上面的文章在5-11之后已经彻底不能看，下面给出Atom插件的链接，诸君请自己去尝试吧。注意：切忌同时安装大量插件，最好装完一个插件熟悉一下用法和名字，避免装了很多插件导致过度浪费还会拖慢Atom速度。

Paste_Image.png

5-11 超全的90+Atom插件 Github dalao教你调教Atom 不服你打我

5-11 知乎全民讨论要如何使用Atom装逼

缘首.png

Atom链接

5-11 超全的90+Atom插件 Github dalao教你调教Atom 不服你打我

5-11 知乎全民讨论要如何使用Atom装逼

极客学院Atom使用教程

Atom GitHub

Atom新一代编辑器

走上Atom之路

Atom编辑器一系列折腾文章

我的个人blog