Table of Contents

前言

第 1 章 简介

第 2 章 基础

第 3 章 插件主题推荐

第 4 章 自定义按键绑定

第 5 章 保存与预览功能

第 6 章 config.cson 基础教程

第 7 章 Emmet 实例教程

第 8 章 分屏操作

第 9 章 实用侧边栏插件

第 10 章 CSScomb 增强版

前言

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

本文将通过简单实用的方法来带你学习 Atom 编译器的使用。

适用人群

本文是为新手所准备的，针对那些想要依托 Github 做文本编译工作的读者。

学习前提

在你学习之前，你需要对 Github 有一定的了解。

鸣谢：http://blog.csdn.net/column/details/atom.html

1

简介

何为 ATOM

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

为什么用 ATOM

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

下载安装

1、打开 Atom 的官网

2、点击”Download Windows Installer” — 之后双击 AtomSetup.exe

3、会默认安装到 C 盘,桌面会出现一个 Atom 的图标

启用界面

2

基础

启动界面

菜单栏-分为六大块:

• File — 文件的保存打开,项目的保存打开,最后一次的项目加载,关闭及设置中心,以及用户自定义的配置(配置文件,初始化脚本,样式风格,代码片段,快捷键配置文件)等
• Edit — 文件编辑的操作,文件编码格式,及行跳转等
• View — 重载页面,全屏,字体大小的缩放等
• Find — 都是关于查询的 ,跟 Sublime text 极其相似,快捷键基本一样
• Package — 包,就是插件列表的集合点
• Help — 帮助文档,软件更新,协议等

设置中心 File=>Settings

左边侧栏,自上而下分为六大部分:

• Settings — 全局设置,可以设置文件的编码,菜单栏是否显示,忽略文件,文档缩进,字体大小,项目主目录等,这个比 sublime text 人性化,简洁明了的配置
• Keybindings — 快捷键配置,默认快捷键都汇总于此了,很方便查询对应的快捷键的功能,也方便修改…人性化
• Packages — 插件管理中心,可以设置插件,删除插件及禁用,无安装功能
• Themes —主题管理中心,可以设置主题(支持鼠标选定,也支持写入配置文件生效),管理主题(删除及在线下载主题)
• Updates — 目前功能只有一个,查询社区包的状态,随时随地的更新已安装的插件,Atom 软件的更新在 HELP 里面
• Install — 目前分为两栏,自上而下,第一部分是搜索(可以搜索社区的插件),下面一部分会展示目前比较流行的插件(可以直接点击下载使用)
• Open Config Folder — 这一块算不上鼠标操作控制,完全是软件的配置文件集合目录

值得注意的是,配置文件的后缀是 cson,而不是 JSON,但是书写规范又很相似,,醉了…估计是社区搞出来的

常用快捷键–亲测及翻译

比较新奇的功能,,眼前一亮啊!!似曾相识有木有,CHROME 的 Web 调试器!

3

插件主题推荐

注意事项

主题和插件这方面,比 Sublime Text 人性化多了..一些比较用心的作者增加了二度设置功能。

何为二度设置,就是不用手写代码修改配置文件，点点鼠标，填填输入框就能生效，主题以 isotope-ui 这个做例子介绍,看图：

进入二度设置我再介绍

一般有二度设置的，最下面一块都有 readme 或者其他引导教程， 插件的二度设置和主题大同小异，有 二度内部都是插件功能的启用及代码部署教程， 感觉比 Sublime 人性化好多，sublime 的插件说明要自己上 Github 或者 package control 查看。

主题推荐

内部自带的主题就不介绍了,都挺耐看的

插件推荐

前端必备插件篇

1.Emmet — 用过都说好,神器;有个别快捷键会和 Markdown preview 快捷键冲突，改下就好了

2.autoprefixer — 用来补充 css 前缀的，会自动生成多个浏览器的前缀

3.color-picker — 取色器,太赞了有木有，比 sublime 那个好用，不卡，启动超快

4.linter — 这货默认可以识别多门语言的错误,但是不细致，属于主插件，可以针对性的安装更细致的检查插件(太多，不一一列出，下面是前端可能用到的)

• linter-jshint, for JavaScript and JSON, using jshint
• linter-coffeelint, for CoffeeScript, using coffeelint
• linter-tslint, for Typescript, using tslint
• linter-php, for PHP using php -l
• linter-pylint, for Python, using pylint
• linter-scss-lint, for SASS/SCSS, using scss-lint
• linter-less, for LESS, using less
• linter-csslint, for CSS, using csslint
• linter-stylint, for Stylus, using stylint
• linter-stylus, for Stylus, using stylus

5.autocomplete-plus — 完善自带 autocomplete,有二度设置，接下来列出的一些有二度设置

• autocomplete-python — 你懂得，更加细致
• autocomplete-paths — 实用派，路径补全
• autocomplete-html — 你懂得，更加细致
• autocomplete-bibtex — Github 的 markdown 语法
• autocomplete-snippets — 如名字
• autocomplete-css — 你懂得，更加细致
  • less-autocompile — 实时编译
  • docblockr — 注释插件，非常的实用

插件–美化篇

• file-icons — 增加许多图标,在侧边蓝文件名前面的 icon。
• filetype-color — amazing,,在标签栏不同格式文件显示不同的颜色的标题，支持二度设置

插件–协作篇

• git-plus — 与Sublime Text 的 sublimegit 功能基本一致

插件–键盘侠

• vim-mode — 用过 vim 的都知道好,基本实现了大部分的功能，不过造成许多快捷键冲突，慢慢排除吧

插件–加强

• minimap — 用过 Sublime Text 的友友们都知道有一个很实用的功能，就是内部编辑那里有一个小小的代码图,这货就是补全 Atom 这个功能的,支持高亮代码,还可控，具体看内部设置。

4

自定义按键绑定

简介

Atom 编辑器支持自定义按键绑定,文件格式是 CSON;何为 CSON，官方解释: This file uses CoffeeScript Object Notation (CSON)。 我的解释: JSON + CoffeeScript，写法基本是 JSON 的写法。

按键绑定组成

如图:

设置内的键盘映射图很好的说明了

按键绑定 = 快捷键(Keystroke) + 执行命令(Command) + 来源(Source) + 选择器(Selector)

快捷键不用解释了

执行命令就是按下快捷键所调用的命令

来源就是命令来自来源，比如 core 就是内置核心命令,Atom beautifier 是我安装的插件

选择器可以理解为匹配，学过 CSS/JQ 的一听就懂了

按键绑定

官方范例:

'atom-text-editor':
'enter': 'editor:newline'
 
'atom-workspace':
'ctrl-shift-p': 'core:move-up'
'ctrl-p': 'core:move-down'

第二部分我的截图,显示了 Ctrl + Alt + F 有多个冲突,其中一个就是排版插件,Atom Beautifier 如何让其生效呢?

'.editor':
'ctrl-shift-alt-f':'beautifier'

这样就可以了，是不是很简单?当然，这只是按键绑定的基础教程；还有更高级的绑定，比如 overlay(覆盖)，unset(取消设置值)等。

5

保存与预览功能

用了 Atom 之后是不是发现，每次打开工作目录，保存退出后重新打开软件，目录一片空白。 Sublime 和 DW 的快捷键预览 Html 功能是不是很喜欢,而 Atom 没有。

记住上一次打开的目录

这个功能,截止目前最新的 0.198 版本还木有实现,这里我们用插件来实现这个功能；但是官方说，”记住上一次打开的目录”这个功能已经内置到下一个版本(集成插件)，也就是正式版 1.0 插件的作者也声明了，看此段话:The Atom.io team is hopefully building a version of this into core for 1.0! https://github.com/atom/atom/issues/1603。

插件 open-last-project

插件简介: An Atom.io package that automatically repoens the last project and files you were working on.

安装完毕就实现了记忆功能了。不用过多设置，你第一次加载了工作目录后，正常退出打开还是自动加载改目录，且正在编辑的文件也同样保持编辑状态。

浏览器预览

对于前端开发来说，浏览器预览功能必须要有的有木有。不然每次都要自己手动拖拉文件到浏览器比较麻烦。

插件:RIB - run in browser

插件简介: Run in Browser will open the current pane in the default web browser

默认的用法,看下面

• Command Palette: rib — 命令面板搜索 rip
• Keymap: ctrl + alt + r — 默认快捷键(和我一些安装的插件有冲突,也用不惯这么多按键,我直接改 F12 调用了)
• the current pane must be a .html or .htm file — 该插件目前支持在 html 和 htm 后缀名使用

个人 RIB 自定义按键修改–仅供参考

'atom-text-editor':
'f12':'rib:run-in-browser'
'ctrl-shift-space':'autocomplete:toggle'

温馨提示:插件的安装

1. setting 内部搜索安装
2. 上 Github 下载插件,放在 atom 目录下的 package,重开打开软件会自动识别
3. 使用 apm 命令安装,例:apm install run-in-browser

6

config.cson 基础教程

Atom 把 core 的核心插件 autocomplete 替换成 autocomplete plus。

config.cson 配置

"*":
"exception-reporting":
userId: "dce1a874-569c-0d60-1714-66461c6d20f9"
core:
themes: [
"graphite-ui"
"seti-monokai"
]
disabledPackages: [
 
]
editor:
invisibles:
{}
softWrapAtPreferredLineLength: true
softWrap: true
fontFamily: "monoca"
fontSize: 20
showIndentGuide: true
linter:
statusBar: "Show all errors"
minimap:
scrollAnimation: true
"tree-view":
hideVcsIgnoredFiles: true
"autocomplete-plus":
{}
"linter-csslint":
{}
"vim-mode":
startInInsertMode: true
"filetype-color":
enabled: "true"
welcome:
showOnStartup: true;
"isotope-ui":
{}
"file-icons":
onChanges: true
forceShow: true
"atom-beautify":
_analyticsUserId: "cde3641c-d5ee-4ccb-9d45-37f85f7e98e9"
csslint:
validateOnChange: true
autosave:
enabled: true

从上面的代码可以看出配置文件是作用于全局的。

最主要分为两大类,一类是 core,一类是 editor。

下面这个版本是加注释的(我用#
开头的都是注释)，大伙可以参考下。

"*":
#这个用户ID用于提交异常的,官方描述:Reports uncaught Atom exception to bugsnag.com
"exception-reporting":
userId: "dce1a874-569c-0d60-1714-66461c6d20f9"
core:
#主题设置,主题和语法主题同时配置需要用中括号包含;若是单一主题则不需要,只需要双引号即可.
themes: [
"graphite-ui"
"seti-monokai"
]
 
#这里跟Sublime Text的配置"ignored_packages": ["package_name"]一样的效果,禁用某某插件
disabledPackages: [
 
]
editor:
invisibles:
{}
 
#表示是否按照上面设置过的「推荐行宽（默认 80 个字符）」来折行，否则默认按照屏幕宽度来折行
softWrapAtPreferredLineLength: true
 
#是否开启折行
softWrap: true
 
#字体及字体大小
fontFamily: "monoca"
fontSize: 20
 
#显示缩进辅助线
showIndentGuide: true
 
#这一块基本都是所有插件的配置 ,具体都可以参考插件作者的介绍再做调整
#显示所有错误
linter:
statusBar: "Show all errors"
 
#这个还有多个参数,可以配置是否高亮显示颜色等,此处是启用滚动动画
minimap:
scrollAnimation: true
 
#忽略显示一些文件
"tree-view":
hideVcsIgnoredFiles: true
 
#待进一步自定义
"autocomplete-plus":
{}
#待进一步自定义
"linter-csslint":
{}
 
#vim-mode这个插件默认启用的方式是插入,而不是命令模式
"vim-mode":
startInInsertMode: true
 
#这个是更改文件类型颜色(插件),这里启用了
"filetype-color":
enabled: "true"
 
#启用atom的自动进入引导界面..蛮实用的
welcome:
showOnStartup: true;
 
#UI主题的自定义,,空则不生效
"isotope-ui":
{}
 
#插件生效,更多样化的文件图标
"file-icons":
onChanges: true
forceShow: true
 
#这个是排版插件带的,,这里的用户ID的作用不清楚
"atom-beautify":
_analyticsUserId: "cde3641c-d5ee-4ccb-9d45-37f85f7e98e9"
 
#在文件更改时候生效(进行查询错误)
csslint:
validateOnChange: true
 
#这个是内置的核心插件,自动保存功能,挺实用的
autosave:
enabled: true

总结

新版本还有有众多改进的,我仔细的查询了 core 插件，丰富了许多,也抛弃了许多过气的 API; 有很多功能让 Atom 更加人性化了…比如更改文件编码,查询项目内的文件进行编辑等等。

7

Emmet 实例教程

何为 Emmet

简言之,Emmet 的前身是大名鼎鼎的 Zen coding;

功能

• snippet(代码片段,不如用专门的片段插件)
• abbreviation expand(简写展开)

目的

只有一个,加快 Web 开发(编码速度)。

Emmet 基础

知识预备

• HTML/CSS 标签熟悉掌握 — 知道是干什么的做什么的
• 知道选择器的关系,比如兄弟,子代,后代等
• 解析简写代码可以用 Tab 键或者 Ctrl+E 来调用

Emmet 特性

• 简写支持嵌套
• 简写支持分组
• 简写支持乘法
• 简写支持自增和自减,起序,编号

Emmet 语法

HTML

文档初始化

• html:5 或!：用于 HTML5 文档类型 —看代码
• html:xt：用于 XHTML 过渡文档类型 — 不演示
• html:4s：用于 HTML4 严格文档类型 — 不演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
 
</body>
</html>

id # |类.|属性[]|内容{},若是不带父元素,则默认为隐性生成(就近原则)

<!-简写格式我就放在注释里面啦啦!!-->
<!--#test.test-->
<div id="test" class="test">
 
</div>
 
<!-- p#test.test -->
<p id="test" class="test"></p>
 
<!-- a[href="http://www.jikexueyuan.com"]{文本内容--我是GEEK} -->
<a href="http://www.jikexueyuan.com">文本内容--我是GEEK</a>

后代> | 兄弟+ | 上级^

<!-- div>ul>li 后代 -->
<div>
<ul>
<li></li>
</ul>
</div>
 
<!-- div>p+p 兄弟-->
<div>
<p></p>
<p></p>
</div>
 
<!-- div>p>ul>li>^span+b 上级-->
<div>
<p>
<ul>
<li></li>
<span></span>
<b></b>
</ul>
</p>
</div>

分组()/乘法*/自增$/自减$@-/起序$@数字

<!-- div>ul>(li>a)*2 -->
<div>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
 
<!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配数字,一个代表1开始,两个01开始,依次001-->
<div>
<ul>
<li><a href="">文本01</a></li>
<li><a href="">文本02</a></li>
</ul>
</div>
 
<!-- div>ul>(li>a{文本$@-})*3 -->
<!-- @-代表启用自减,降序排列 -->
<div>
<ul>
<li><a href="">文本3</a></li>
<li><a href="">文本2</a></li>
<li><a href="">文本1</a></li>
</ul>
</div>
 
<!-- div>ul>(li>a{文本$@2})*5 -->
<!-- $@number 代表几号开始出现数字 -->
<div>
<ul>
<li><a href="">文本2</a></li>
<li><a href="">文本3</a></li>
<li><a href="">文本4</a></li>
<li><a href="">文本5</a></li>
<li><a href="">文本6</a></li>
</ul>
</div>

综合运用-静态布局

Emmet 简写

(#header>.nav>ul>(li>a{首页/美女/关于/……})*5)+(#container>(#(.left_sidebar>.category>ul>(li>a[herf=”#” title=”这是测试链接啊”]{我是侧边栏链接$$$})*5)+(#right_content>ul>li>a[href=”#”]>(img[alt=”哟吼吼吼” src=” “])+span{这是用来描述图片用的}*12)))+#footer>ul>(li>a{关于/联系我们/…..})*4

只是简单的排版下添加了下背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>这是一个测试DEMO</title>
<style>
*{margin:0;padding:0}
ul{list-style: none}
#header{height:300px;width:100%;background: #5ecc17;border:2px solid #000;}
#container{margin:0 auto;height:500px;width:800px;background: #e97726;border:1px solid #000;}
#footer{height:200px;width:100%;background: #000;border:1px solid #000;}
.left_sidebar{float:left;background: #02c4bc;height:500px;border:1px solid #000;}
.right_content{float:right;background: #113a0d;height:500px;border:1px solid #000;}
</style>
</head>
<body>
<div id="header">
<div class="nav">
<ul>
<li><a href="">首页/美女/关于/......</a></li>
<li><a href="">首页/美女/关于/......</a></li>
<li><a href="">首页/美女/关于/......</a></li>
<li><a href="">首页/美女/关于/......</a></li>
<li><a href="">首页/美女/关于/......</a></li>
</ul>
</div>
</div>
<div id="container">
<div id="">
<div class="left_sidebar">
<div class="category">
<ul>
<li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接001</a></li>
<li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接002</a></li>
<li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接003</a></li>
<li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接004</a></li>
<li><a href="" herf="#" title="这是测试链接啊">我是侧边栏链接005</a></li>
</ul>
</div>
</div>
</div>
<div id="right_content">
<ul>
<li><a href="#">
<img src=" " alt="哟吼吼吼">
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
<span>这是用来描述图片用的</span>
</a></li>
</ul>
</div>
</div>
<div id="footer">
<ul>
<li><a href="">关于/联系我们/.....</a></li>
<li><a href="">关于/联系我们/.....</a></li>
<li><a href="">关于/联系我们/.....</a></li>
<li><a href="">关于/联系我们/.....</a></li>
</ul>
</div>
</body>
</html>

结语

CSS 的写法和 HTML 大同小异,emmet 也能写 IE hack,浏览器前缀等。

官网的 Emmet Cheat Sheet :http://docs.emmet.io/cheat-sheet/

8

分屏操作

分屏

何为分屏..请看此图

为何要分屏

用过 linux 的小伙伴都知道,分屏耍的好,可以提高工作效率的。

如何获取 Atom 的分屏命令

1.最简易的,进入设置中心的快捷键列表,搜索 pane 和 split 就可以看到命令和选择器了。

2.查询官方手册。

为何不用默认的分屏快捷键

• 有些失效了.就是按了没反应,应该和一些插件冲突了。
• 不习惯,符合自己习惯的才是最高效的。

自定义快捷键

为何这样自定义我写在注释里面了…vi/vim。

#分屏快捷键自定义
#alt-fkey是分屏的方向,仿vim模式
#ctrl-fkey是光标聚焦的窗口.选择分屏窗口的.也是仿vim模式;
#vim上下左右(j,k,h,l),这里对应(f6,f7,f5,f8)
'body':
'alt-f7':'pane:split-up'
'alt-f6':'pane:split-down'
'alt-f5':'pane:split-left'
'alt-f8':'pane:split-right'
'ctrl-k ctrl-c':'pane:close'
'ctrl-f5':'window:focus-pane-on-left'
'ctrl-f8':'window:focus-pane-on-right'
'ctrl-f7':'window:focus-pane-above'
'ctrl-f6':'window:focus-pane-below'

值得一提的是，Atom 和 sublime 一样支持复合快捷键的，上面的配置文件就有一条。

'ctrl-k ctrl-c':'pane:close'

这条命令就是按下 control + k ,松开 K 而 control 不松开,再按下 c 生效….关闭当前的窗口。

9

实用侧边栏插件

插件介绍:tree-view-finder

修改目录树跟 Mac OS Finder 相似

• 在目录树显示文件大小和文件修改日期及文件的大小
• 可以根据文件名/大小/文件修改日期进行排列
• 双击文件可以调用外部编辑器打开所要编辑的文件

安装及使用

两种安装方法

• apm install tree-view-finder
• Atom->settings(设置)->install(安装)->搜索tree-view-finder — 推荐

使用

Tips:(若是没有启用自身插件二步设置里面的 Use entire window)是默认在侧边栏生效的，若是勾选了那个，按下快捷键后整个目录树独占一个窗口[平铺]。默认生效的快捷键是Ctrl + Alt + o 。

效果图

快捷键参数-默认

'atom-workspace':
'ctrl-alt-o':'tree-view-finder:toggle'

若是有其他插件和这个快捷键冲突了，在个人 keymap 里面修改。

10

CSScomb 增强版

何为CSScomb

官方网站只有一句描述:Makes your code beautiful(让你的代码更漂亮)，通俗点讲:CSScomb 是用来排版 CSS 代码的，可以说是格式化插件,依赖 nodejs。

获取 CSScomb

官方网站: CSScomb

支持许多编辑器,比如 Sublime/Atom/brackets 等

第三方 CSScomb

昨天写了篇 CSS3 的文章，发现代码有点混乱，人力排版有点，所以跑去 Atom 插件库寻找 csscomb。

Atom -> settings -> install -> csscomb

下图三个蓝色圈圈的功能基本一致，第一个是官方的，今天的主角是黄色的。

atom-css-comb

特点

• 支持格式化CSS/LESS/SASS
• 支持自定义格式
• 内置三种排版风格(Yandex/CSScomb/zen)
  • Yandex 的 CSS规范，去引擎搜索了下，好像很强大…不过不适合我
  • CSScomb 排版样式
  • zen(Emmet 的前身)

基础使用

• 默认快捷键有两个 [还可以使用鼠标点击插件调用]
  • ctrl + alt + c[冲突]
  • ctrl + alt + shift + c[冲突]
• 切换排版风格(Ready-made configs),看描述和看图
  • Packages -> Css comb -> settings

默认快捷键参数

'atom-text-editor':
'ctrl-alt-c':'css-comb:comb'

进阶使用

针对用户群：喜欢折腾，有自己风格的小伙伴，这里只是展示，具体小伙伴自己可以参考官方提供的文档进行定制。 看到上面那个 common config，选中 custom config [Edit config file]，进入到定制参数页面，格式是使用 JSON 写的。

{
"help": "About options https://github.com/csscomb/csscomb.js/blob/master/doc/options.md",
 
"exclude": ["node_modules/**"],
"verbose": true,
 
"always-semicolon": true,
"block-indent": " ",
"colon-space": ["", " "],
"color-case": "lower",
"color-shorthand": true,
"element-case": "lower",
"eof-newline": true,
"leading-zero": false,
"quotes": "single",
"remove-empty-rulesets": true,
"rule-indent": " ",
"stick-brace": "\n",
"strip-spaces": true,
"unitless-zero": true,
"vendor-prefix-align": true
}

更多信息请访问

http://wiki.jikexueyuan.com/project/atom/