简介

何为 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 的图标

启用界面

基础

启动界面

菜单栏-分为六大块:

• 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 调试器!

插件主题推荐

注意事项

主题和插件这方面,比 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 这个功能的,支持高亮代码,还可控，具体看内部设置。

自定义按键绑定

简介

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(取消设置值)等。

保存与预览功能

用了 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

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 更加人性化了…比如更改文件编码,查询项目内的文件进行编辑等等。

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.51coolma.cn"]{文本内容--我是GEEK} -->  <a href="http://www.51coolma.cn">文本内容--我是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/

分屏操作

分屏

何为分屏..请看此图

为何要分屏

用过 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 生效….关闭当前的窗口。

实用侧边栏插件

插件介绍: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 里面修改。

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": "
",    "strip-spaces": true,    "unitless-zero": true,    "vendor-prefix-align": true}

编辑器实时预览 HTML 页面

为何寻找

每次预览 HTML 页面，都需要打开各种浏览器；哪怕不是调试，只是为了查看下效果；切换来切换去，各种刷新，感觉有些浪费时间；以前用过 DW 的实时预览，感觉这个功能很赞；又踏上了 atom 插件仓库慢慢寻找之路......

插件:atom-html-preview

官方描述：A live preview tool for Atom Editor.简言之：Atom编辑器内实时预览的工具

获取方式

1.通过命令行安装

apm install atom-html-preview

2.通过编辑器内部的 install 搜索 atom-html-preview 安装

使用方式及效果

快捷键

• 默认快捷键： CTRL + P 调用，会和内置核心插件冲突(切换文件那个) — 非常不好
• 修改版快捷键： CTRL + F12 (感觉方便使用且没有冲突的快捷键)

 #实时浏览器调用快捷键 'atom-text-editor':  'ctrl-F12':'atom-html-preview:toggle'

Tips

写在 keymap 里面的权重是最高的......较新版本的 atom 内置了 Dev Live Reload 这个插件；

这个插件的作用就是重新加载所有样式和规则，有点类似 linux 的 source xx.sh 一样..即时生效调用快捷键是 CTRL + SHIFT + ALT +R

当然，关闭 atom 再开 atom 编辑器也能达到重新加载所有样式规则的效果......

效果图

我用 BS 框架写的页面来测试….可以正确预览，内部 css 是 cdn 也能正确识别。

浏览器猜测

跑到该插件的 GitHub 仓库页面,只看到一些 cson 规则，没有调用外部浏览器。

那么答案只有一个….就是 chromium 框架….所以内核应该也是 blink

以下是引用外部描述的 atom[不知道是不是官方]

Web 本地应用程序

Atom 是一款基于 Web 技术的桌面应用程序，和其他桌面应用程序一样，它也拥有自己的图标、本地菜单、对话框以及访问整个文件系统的权限。

无论你是调整 Atom 的 CSS 接口还是添加一些 HTML 和 JavaScript 主要功能，它都可以被你轻松控制，并且使用起来非常方便。

Sync-setttings(插件-备份神器)

简述

插件作者:Hackafe

功能描述:Synchronize settings, keymaps, user styles, init script, snippets and installed packages across Atom instances.(简言之就是可以同步 Atom 的设置文件，自定义快捷键，用户风格，初始化脚本及代码片段，还支持已安装的插件同步)

Features

Sync Atom's and package settingsSync installed packagesSync user keymapsSync user stylesSync user init scriptSync snippetsSync user defined text filesManual backup/restore to a gist

获取安装方式

• 命令行安装： $ apm install sync-settings
• 设置中心：搜索 sync-settings

设置及使用方法

初始化设置

• 进入设置中心找到该插件，进去 setting
• 打开自己的 github 创建一个 personal access token – 然后复制生成的 token 序列，粘贴到插件的setting 里面的(最后再放图，一目了然:)
• 再打开 github 的 gist 服务，创建一个 gist–复制生成 gistID，也粘贴到二步设置里面

看图

最后我去研究了下他为啥用到 gist 的…原来是为了备份配置文件；
使用的是 coffee 脚本保存；

看图

使用方法(配置完毕后)

• 在文档编辑页面，按下全局命令搜索面板(Ctrl+shift+p)
• 搜索sync- ，会有可选项
  • sync-settings:backup – 这条命令是备份当前的配置；
  • sync-settings:restore – 这条命令是回复配置，是直接覆盖的；
  • sync-settings:view-backup – 这条是当你执行备份后到线上查询你的备份的，也就是到你的 gist code 里面；
  • sync-settings:check-backup – 这条是查询最后一次是否正常；

备份成功和失败都有一条信息提醒，看图

其他推荐：

Atom-Material 这个主题真心不错，是 Android material 风格。

JS 代码智能提示补全

题外话

官方正式版虽然内置了.autocomplete-plus；最为明显的一个功能就是记忆你已经输入过的名称进行匹配；但是针对于某些语言来说，还是有些不足的….其中 JS 的补全上就明显不足了…所以需要借助插件来拓展。

atom-ternjs

下载地址：https://atom.io/packages/atom-ternjs

官方描述：Javascript code intelligence for atom with tern.js. Uses suggestion provider by autocomplete-plus.

简言之，就是 JS 代码智能提示，个人也希望以后可以直接内置到 atom 中，而不是作为第三方插件!!

此插件依赖两个东东，git 和 nodejs ； 具体可以参考我博客里面的其他博文。

作用范围

• Configure your project(针对项目进行配置– 英文言简意赅就不翻译了)
  • Navigate to Packages -> Atom Ternjs -> Configure project
  • The config view appears.
  • Hit “Save & Restart Server” to create/update the .tern-project file
• 全局(这个就不用解释了)

智能提示支持的语言特性

• browser: completion for vanilla js (optional)
• ecma5: es5 (optional)
• ecma6: es6 (optional)
• jquery: completion for jQuery (optional) – 这个可以有，JQ 也支持

安装方式两种

－　apm install atom-ternjs－　settings　内部搜索插件名

效果图

JQ 代码片段补全

题外话

一款好的代码片段插件可以提高我们写代码的效率。这是一个不争的事实；今天，我要推荐的这一款，就是可以快速写 JQ 的插件。

Jquery-snippets

下载地址:https://atom.io/packages/jquery-snippets

插件作者: james2doyle

最简易的安装方式，进入设置中心搜索 Jquery-snippets ->install即可

似乎不能即时生效，重启下 atom 程序就生效了

snippet 事件

注: 像 slideDown，click 这些也涵盖了….但是作者木有列出来。

• $
• $ajaxSend
• $ajaxSetup
• $ajaxStart
• $ajaxStop
• $ajaxSuccess
• $boxModel
• $browser-version
• $browser
• $each
• $extend
• $get
• $getScript
• $holdReady
• $inArray
• $isEmptyObject
• $isNumeric
• $isPlainObject
• $isWindow
• $map
• $merge
• $noop
• $now
• $parseJSON
• $parseXML
• $post
• $sub
• $trim
• $type
• $unique
• $when
• add
• addback
• addClass
• after
• ajax
• ajaxComplete
• ajaxError
• andSelf
• animate-(with-callback)
• animate
• append
• appendTo
• attr-multiple
• attr
• before
• bind
• blur
• change
• children
• clearqueue
• click
• clone
• closest
• contains
• contents
• css-multiple
• css
• data
• dblclick
• delay
• delegate
• dequeue
• die
• document-ready-1
• document-ready-2
• document-ready
• each
• end
• eq
• error
• fadeIn
• fadeOut
• fadeTo
• fadeToggle
• filter-function
• filter
• find
• finish
• first
• focus
• focusin
• focusout
• get
• getJSON
• has
• hasClass
• height
• hide
• hover
• html
• index
• innerHeight
• innerWidth
• insertAfter
• insertBefore
• is
• keydown
• keypress
• keyup
• last
• live
• load
• loadAHAH
• map
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• next
• nextAll
• nextUntil
• not
• off
• offset (function)
• offset
• offsetParent
• on
• one
• outerHeight
• outerWidth
• parent
• parents
• parentsUntil
• prepend
• prependTo
• prev
• prevAll
• prevUntil
• promise
• prop
• prop(map)
• reject
• remove
• removeAttr
• removeClass
• removeData
• removeprop
• replaceAll
• replaceWith
• reset
• resize
• resolve
• resolveWith
• scroll
• scrollLeft
• scrollTop
• select
• serialize
• serializeArray
• show
• siblings
• size
• slice
• slideDown
• slideToggle
• slideUp
• stop
• submit
• text
• then
• this
• toArray
• toggle-showHide
• toggleClass
• toggleEvent
• trigger
• triggerHandler
• unbind
• undelegate
• unwrap
• val
• width
• wrap
• wrapAll
• wrapInner

简易演示

输入 snippet 简写，tab 键或者 Ente r触发补全，我就演示几个，其他小伙伴自己折腾。

代码片段内含简单的占位解释字符，简直就是模版，连手册都省了[对于用习惯的人来说]

默认编辑位置会出现在第一个参数的单引号内部，省去了选中删除的功夫，很实在。

基本涵盖了 JQ 的所有方法和事件。

ajax : ajax 请求

slideDown: 下拉动画效果

toggleClass: 切换生效增加类

JS 代码片段补全

题外话

这款插件就比较重量级了，用熟悉了写原生 JS 的效率要提升很多。而且，不仅支持 JS 还包含了 nodejs snippet。

javascript-snippets

插件作者: zenorocha

Github地址 : https://github.com/zenorocha/atom-javascript-snippets

内置了丰富的 JS snippet。而且也很好理解和记忆，耍多了会上手的。

安装

• 在设置中心搜索安装

代码片段(Tab 或者 Enter 补全)

Console 命令

[cd] console.dir — 这条命令可以遍历一个对象内容

console.dir(${1:obj});

[ce] console.error — 打印出信息带有错误图标

console.error(${1:obj});

[cl] console.log — 打印出信息

console.log(${1:obj});

[cw] console.warn — 打印带有警告图标的信息

console.warn(${1:obj});

DOM — 文档对象模型

[ae] addEventListener — 事件监听

${1:document}.addEventListener('${2:event}', function(e) {    ${0:// body...}});

[ac] appendChild — 增加子元素

${1:document}.appendChild(${2:elem});

[rc] removeChild — 删除子元素

${1:document}.removeChild(${2:elem});

[cel] createElement — 创建元素

${1:document}.createElement(${2:elem});

[cdf] createDocumentFragment — 创建文档碎片节点

${1:document}.createDocumentFragment(${2:elem});

[ca] classList.add — 冷门属性，为了解决 className 不能解决出现，没用过

${1:document}.classList.add('${2:class}');

[ct] classList.toggle — 同上

${1:document}.classList.toggle('${2:class}');

[cr] classList.remove — 同上

${1:document}.classList.remove('${2:class}');

[gi] getElementById — 获取元素ID

${1:document}.getElementById('${2:id}');

[gc] getElementsByClassName — 获取元素类名[返回值为数组]

${1:document}.getElementsByClassName('${2:class}');

[gt] getElementsByTagName — 获取标签集合[返回值是一个nodeList,非数组]

${1:document}.getElementsByTagName('${2:tag}');

[ga] getAttribute — 获取属性值

${1:document}.getAttribute('${2:attr}');

[sa] setAttribute — 设置属性值

${1:document}.setAttribute('${2:attr}', ${3:value});

[ra] removeAttribute — 移除属性值

${1:document}.removeAttribute('${2:attr}');

[ih] innerHTML — 代码块插入 html 结构

${1:document}.innerHTML = '${2:elem}';

[tc] textContent — 纯文本，裸奔的 innerHTML

${1:document}.textContent = '${2:content}';

[qs] querySelector — HTML5 新属性，获取选择器，类似 JQ 的 $(‘div#name’)

${1:document}.querySelector('${2:selector}');

[qsa] querySelectorAll — 同上，都支持多个选择器，但这个返回一个 nodeList

${1:document}.querySelectorAll('${2:selector}');

Loop

[fe] forEach — 遍历数组或者对象用的方法

${1:myArray}.forEach(function(${2:elem}) {    ${0:// body...}});

[fi] for in — 遍历对象用的方法

for (${1:prop} in ${2:obj}) {    if (${2:obj}.hasOwnProperty(${1:prop})) {        ${0:// body...}    }}

Function

[fn] function — 函数声明

function ${1:methodName} (${2:arguments}) {    ${0:// body...}}

[afn] anonymous function —- 匿名函数

function(${1:arguments}) {    ${0:// body...}}

[pr] prototype — 原型

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {    ${0:// body...}}

[iife] immediately-invoked function expression — 函数表达式

(function(window, document, undefined) {    ${0:// body...}})(window, document);

[call] function call — 回调函数

${1:methodName}.call(${2:context}, ${3:arguments})

[apply] function apply — 回调函数

${1:methodName}.apply(${2:context}, [${3:arguments}])

[ofn] function as a property of an object — 函数声明

${1:functionName}: function(${2:arguments}) {    ${3:// body...}}

Timer

[si] setInterval — 根据设置时间不断调用的方法

setInterval(function() {    ${0:// body...}}, ${1:delay});

[st] setTimeout — 同上,区别在于一般不会重复执行

setTimeout(function() {    ${0:// body...}}, ${1:delay});

NodeJS

[ase] assert.equal

assert.equal(${1:actual}, ${2:expected});

[asd] assert.deepEqual

assert.deepEqual(${1:actual}, ${2:expected});

[asn] assert.notEqual

assert.notEqual(${1:actual}, ${2:expected});

[me] module.exports

module.exports = ${1:name};

[pe] process.exit

process.exit(${1:code});

[re] require — 请求模块

require('${1:module}');

BDD

[desc] describe

describe('${1:description}', function() {    ${0:// body...}});

[ita] it asynchronous

it('${1:description}', function(done) {    ${0:// body...}});

[its] it synchronous

it('${1:description}', function() {    ${0:// body...}});

[itp] it pending

it('${1:description}');

Misc

[us] use strict — JS语法使用严格模式

'use strict';

[al] alert — 弹窗

alert('${1:msg}');

[pm] prompt — 提示弹窗

prompt('${1:msg}');

深入自定义快捷键

题外话

时间过去挺快，正式版已经出来许久了。目前最新版是 V1.0.8 从最初的各种莫名的 BUG，到现在慢慢的完善，使用过程可以明显的感觉到。Github 上这个项目依旧很活跃，插件库也越来越丰富。

作为进阶的开篇，再带上一次正式版的下载地址。

目前有 Github 和国内 CNPM 两个地方可以下

1. Github
2. CNPMJS
   • 两者的区别在于，前者是放在 Amazon S3 上的，经常下载到一半没资源(纠结!)；
   • CNPMJS 是国产的 NPM，对国内用户非常友好，速度妥妥的。

深入快捷键

自定义按键绑定

unset!

顾名思义，取消设置。这是 atom 的一大亮点，示例：

之前仿 VIM 的时候，发现怎么 overlay 这货还是生效，让我不得不改动为快捷键。然后去查询官方文档，发现了unset 功能，挺简单也很实用。直接取消快捷键的命令。

'atom-text-editor':    'alt-h':'unset!'

这么简单的一条命令。就直接取消了；因为在 keymap 里面的设置是权重是最高的。

快捷键支持的组合(官方文档图)

• 除了单词这种特殊功能键外，其他的必须有修改键(第二行那些，一个或多个混用)

支持 DOM 事件的绑定

• 官方文档演示了一个插入日期的监听事件
• 分析： atom.commands 是全局常量，add 是功能

支持 snippet 及样式选择

这种功能待以后写 snippet 的时候一起说(现在还在折腾中~~)

附带一份个人分屏自定义快捷键

 #设置候选全局上下移动及打开分割窗口'body':    'shift-alt-k':'core:move-up'  #光标向上移动    'shift-alt-j':'core:move-down' #光标向下移动    'shift-alt-h':'core:move-left' #光标向左移动    'shift-alt-l':'core:move-right' #光标向右移动    'ctrl-h ctrl-h':'pane:split-left'      #分割窗口    'ctrl-j ctrl-j':'pane:split-down'      #分割窗口    'ctrl-k ctrl-k':'pane:split-up'         #分割窗口    'ctrl-l ctrl-l':'pane:split-right'     #分割窗口    'alt-h alt-h':'window:focus-pane-on-left'      #移动左窗口    'alt-j alt-j':'window:focus-pane-below'      #移动下窗口    'alt-k alt-k':'window:focus-pane-above'         #移动上窗口    'alt-l alt-l':'window:focus-pane-on-right'     #移动右窗口    'ctrl-d ctrl-d':'pane:close'  #关闭面板

atom-minify(CSS/JS压缩神器)

简介

对于接触前端的小伙伴们，为了优化肯定是想尽办法的。atom 丰富的拓展接口，让 atom 变得更加强大。国外的大牛把几种常见的压缩集成到一个小插件里面。于是就有 atom-minify 这个快捷压缩神器。

插件项目首页

作者： armin-pfaeffle

插件地址：https://atom.io/packages/atom-minify

安装方法

1. apm install atom-minify
2. 进入设置中心搜索 atom-minify

设置非常丰富，一些图形化的设置已经满足一些小伙伴正常使用了。

默认快捷键

• ctrl-shift-m : 执行压缩,生成一个带 min 后缀的(不想用 min 代表压缩可以进入设置修改)
• ctrl-alt-shift-m/ctrl-cmd-shift-m : 全局开启或者关闭保存自动生成压缩软件
• ctrl-alt-shift-h /ctrl-cmd-shift-h` : 全局开启或者关闭执行后弹出的消息面板功能
• 还有一些比较少用的快捷键,具体看文档

支持的压缩规格

• CSS支持四种压缩标准
  • YUI Compressor, clean-css, CSSO, Sqwish.
• JS支持三种压缩标准
  • YUI Compressor, Google Closure Compiler, UglifyJS2.

提示

atom 的许多特性插件都是大牛从 npm 那里搬过来封装的，所以就必须依赖各种模块，所以执行插件遇到各种错误的时候别虚，看下错误，缺啥补啥。

如果想玩自动化构建的，可以去了解下 gulp，通过丰富的插件，来实现更加复杂的功能，比如动态监听，压缩等等。

附上一个 Github 项目：https://github.com/crperlin/StartFrontendProject

个人写的 gulp 执行队列，涵盖了一些常用的功能，有兴趣的可以 fork 一起完善。

Atom 内运行 gulp 的实现方法

效果图

atom 编辑器内置一个 gulp 执行面板；

左边是探测到 gulpfile 的队列任务，单机即可运行，右边就是执行的状态预览。

本人只实现了三个面板，因为现在不用 grunt 了，可以汇总错误信息。

功能实现

单纯的 gulp 面板只依赖两个插件

• bottom-dock
• gulp-manager package

两者缺一不可；

bottom-dock 不仅仅可以实现 gulp 面板，还能实现 todo[很实用的功能]，还有 grunt 队列也能实现；

这些功能都是同一个封装好的插件。

面板快捷键

三个面板有些快捷键是公用的，有些是专用的，可以看下。

Bottom-dock 快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口

GULP 面板快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-g: 创建一个新的 gulp 面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口

TODO 面板快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口
• ctrl-k ctrl-m: 添加面板

Atom 代码输入震动效果

题外话

atom 正式版发布到现在已经快半年了。有两个分支，一个是稳定【不推荐，直接用 pre 版本体验会更好】，一个预览版本 1.3.0-beta6，atom 版本更新期间各种插件的更新依旧活跃，还冒出了一些比较好玩的插件，比如这次要说的 activate-power-mode 插件。

效果图

安装及使用

插件的链接地址：https://atom.io/packages/activate-power-modeGithub项目地址：https://github.com/JoelBesada/activate-power-mode

安装非常简单，在内部设置的 install 搜索安装即可；也可以通过apm install activate-power-mode

调用方法很简单：

默认快捷键：ctrl + alt + o；若是和其他插件有冲突，自行修改下即可；

也可以通过全局调用：ctrl+shift+p，搜索【atom支持模糊搜索】，看图

局限

这个效果仅作用当前的工作 tab 页面，也就是说你新建的 tab 工作页面是不产生效果的，若是需要产生效果；需要执行 window:reload 来重新加载工作目录或者页面，然后再次调用；

简介

何为 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 的图标

启用界面

基础

启动界面

菜单栏-分为六大块:

• 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 调试器!

插件主题推荐

注意事项

主题和插件这方面,比 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 这个功能的,支持高亮代码,还可控，具体看内部设置。

自定义按键绑定

简介

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(取消设置值)等。

保存与预览功能

用了 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

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 更加人性化了…比如更改文件编码,查询项目内的文件进行编辑等等。

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.51coolma.cn"]{文本内容--我是GEEK} -->  <a href="http://www.51coolma.cn">文本内容--我是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/

分屏操作

分屏

何为分屏..请看此图

为何要分屏

用过 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 生效….关闭当前的窗口。

实用侧边栏插件

插件介绍: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 里面修改。

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": "
",    "strip-spaces": true,    "unitless-zero": true,    "vendor-prefix-align": true}

编辑器实时预览 HTML 页面

为何寻找

每次预览 HTML 页面，都需要打开各种浏览器；哪怕不是调试，只是为了查看下效果；切换来切换去，各种刷新，感觉有些浪费时间；以前用过 DW 的实时预览，感觉这个功能很赞；又踏上了 atom 插件仓库慢慢寻找之路......

插件:atom-html-preview

官方描述：A live preview tool for Atom Editor.简言之：Atom编辑器内实时预览的工具

获取方式

1.通过命令行安装

apm install atom-html-preview

2.通过编辑器内部的 install 搜索 atom-html-preview 安装

使用方式及效果

快捷键

• 默认快捷键： CTRL + P 调用，会和内置核心插件冲突(切换文件那个) — 非常不好
• 修改版快捷键： CTRL + F12 (感觉方便使用且没有冲突的快捷键)

 #实时浏览器调用快捷键 'atom-text-editor':  'ctrl-F12':'atom-html-preview:toggle'

Tips

写在 keymap 里面的权重是最高的......较新版本的 atom 内置了 Dev Live Reload 这个插件；

这个插件的作用就是重新加载所有样式和规则，有点类似 linux 的 source xx.sh 一样..即时生效调用快捷键是 CTRL + SHIFT + ALT +R

当然，关闭 atom 再开 atom 编辑器也能达到重新加载所有样式规则的效果......

效果图

我用 BS 框架写的页面来测试….可以正确预览，内部 css 是 cdn 也能正确识别。

浏览器猜测

跑到该插件的 GitHub 仓库页面,只看到一些 cson 规则，没有调用外部浏览器。

那么答案只有一个….就是 chromium 框架….所以内核应该也是 blink

以下是引用外部描述的 atom[不知道是不是官方]

Web 本地应用程序

Atom 是一款基于 Web 技术的桌面应用程序，和其他桌面应用程序一样，它也拥有自己的图标、本地菜单、对话框以及访问整个文件系统的权限。

无论你是调整 Atom 的 CSS 接口还是添加一些 HTML 和 JavaScript 主要功能，它都可以被你轻松控制，并且使用起来非常方便。

Sync-setttings(插件-备份神器)

简述

插件作者:Hackafe

功能描述:Synchronize settings, keymaps, user styles, init script, snippets and installed packages across Atom instances.(简言之就是可以同步 Atom 的设置文件，自定义快捷键，用户风格，初始化脚本及代码片段，还支持已安装的插件同步)

Features

Sync Atom's and package settingsSync installed packagesSync user keymapsSync user stylesSync user init scriptSync snippetsSync user defined text filesManual backup/restore to a gist

获取安装方式

• 命令行安装： $ apm install sync-settings
• 设置中心：搜索 sync-settings

设置及使用方法

初始化设置

• 进入设置中心找到该插件，进去 setting
• 打开自己的 github 创建一个 personal access token – 然后复制生成的 token 序列，粘贴到插件的setting 里面的(最后再放图，一目了然:)
• 再打开 github 的 gist 服务，创建一个 gist–复制生成 gistID，也粘贴到二步设置里面

看图

最后我去研究了下他为啥用到 gist 的…原来是为了备份配置文件；
使用的是 coffee 脚本保存；

看图

使用方法(配置完毕后)

• 在文档编辑页面，按下全局命令搜索面板(Ctrl+shift+p)
• 搜索sync- ，会有可选项
  • sync-settings:backup – 这条命令是备份当前的配置；
  • sync-settings:restore – 这条命令是回复配置，是直接覆盖的；
  • sync-settings:view-backup – 这条是当你执行备份后到线上查询你的备份的，也就是到你的 gist code 里面；
  • sync-settings:check-backup – 这条是查询最后一次是否正常；

备份成功和失败都有一条信息提醒，看图

其他推荐：

Atom-Material 这个主题真心不错，是 Android material 风格。

JS 代码智能提示补全

题外话

官方正式版虽然内置了.autocomplete-plus；最为明显的一个功能就是记忆你已经输入过的名称进行匹配；但是针对于某些语言来说，还是有些不足的….其中 JS 的补全上就明显不足了…所以需要借助插件来拓展。

atom-ternjs

下载地址：https://atom.io/packages/atom-ternjs

官方描述：Javascript code intelligence for atom with tern.js. Uses suggestion provider by autocomplete-plus.

简言之，就是 JS 代码智能提示，个人也希望以后可以直接内置到 atom 中，而不是作为第三方插件!!

此插件依赖两个东东，git 和 nodejs ； 具体可以参考我博客里面的其他博文。

作用范围

• Configure your project(针对项目进行配置– 英文言简意赅就不翻译了)
  • Navigate to Packages -> Atom Ternjs -> Configure project
  • The config view appears.
  • Hit “Save & Restart Server” to create/update the .tern-project file
• 全局(这个就不用解释了)

智能提示支持的语言特性

• browser: completion for vanilla js (optional)
• ecma5: es5 (optional)
• ecma6: es6 (optional)
• jquery: completion for jQuery (optional) – 这个可以有，JQ 也支持

安装方式两种

－　apm install atom-ternjs－　settings　内部搜索插件名

效果图

JQ 代码片段补全

题外话

一款好的代码片段插件可以提高我们写代码的效率。这是一个不争的事实；今天，我要推荐的这一款，就是可以快速写 JQ 的插件。

Jquery-snippets

下载地址:https://atom.io/packages/jquery-snippets

插件作者: james2doyle

最简易的安装方式，进入设置中心搜索 Jquery-snippets ->install即可

似乎不能即时生效，重启下 atom 程序就生效了

snippet 事件

注: 像 slideDown，click 这些也涵盖了….但是作者木有列出来。

• $
• $ajaxSend
• $ajaxSetup
• $ajaxStart
• $ajaxStop
• $ajaxSuccess
• $boxModel
• $browser-version
• $browser
• $each
• $extend
• $get
• $getScript
• $holdReady
• $inArray
• $isEmptyObject
• $isNumeric
• $isPlainObject
• $isWindow
• $map
• $merge
• $noop
• $now
• $parseJSON
• $parseXML
• $post
• $sub
• $trim
• $type
• $unique
• $when
• add
• addback
• addClass
• after
• ajax
• ajaxComplete
• ajaxError
• andSelf
• animate-(with-callback)
• animate
• append
• appendTo
• attr-multiple
• attr
• before
• bind
• blur
• change
• children
• clearqueue
• click
• clone
• closest
• contains
• contents
• css-multiple
• css
• data
• dblclick
• delay
• delegate
• dequeue
• die
• document-ready-1
• document-ready-2
• document-ready
• each
• end
• eq
• error
• fadeIn
• fadeOut
• fadeTo
• fadeToggle
• filter-function
• filter
• find
• finish
• first
• focus
• focusin
• focusout
• get
• getJSON
• has
• hasClass
• height
• hide
• hover
• html
• index
• innerHeight
• innerWidth
• insertAfter
• insertBefore
• is
• keydown
• keypress
• keyup
• last
• live
• load
• loadAHAH
• map
• mousedown
• mouseenter
• mouseleave
• mousemove
• mouseout
• mouseover
• mouseup
• next
• nextAll
• nextUntil
• not
• off
• offset (function)
• offset
• offsetParent
• on
• one
• outerHeight
• outerWidth
• parent
• parents
• parentsUntil
• prepend
• prependTo
• prev
• prevAll
• prevUntil
• promise
• prop
• prop(map)
• reject
• remove
• removeAttr
• removeClass
• removeData
• removeprop
• replaceAll
• replaceWith
• reset
• resize
• resolve
• resolveWith
• scroll
• scrollLeft
• scrollTop
• select
• serialize
• serializeArray
• show
• siblings
• size
• slice
• slideDown
• slideToggle
• slideUp
• stop
• submit
• text
• then
• this
• toArray
• toggle-showHide
• toggleClass
• toggleEvent
• trigger
• triggerHandler
• unbind
• undelegate
• unwrap
• val
• width
• wrap
• wrapAll
• wrapInner

简易演示

输入 snippet 简写，tab 键或者 Ente r触发补全，我就演示几个，其他小伙伴自己折腾。

代码片段内含简单的占位解释字符，简直就是模版，连手册都省了[对于用习惯的人来说]

默认编辑位置会出现在第一个参数的单引号内部，省去了选中删除的功夫，很实在。

基本涵盖了 JQ 的所有方法和事件。

ajax : ajax 请求

slideDown: 下拉动画效果

toggleClass: 切换生效增加类

JS 代码片段补全

题外话

这款插件就比较重量级了，用熟悉了写原生 JS 的效率要提升很多。而且，不仅支持 JS 还包含了 nodejs snippet。

javascript-snippets

插件作者: zenorocha

Github地址 : https://github.com/zenorocha/atom-javascript-snippets

内置了丰富的 JS snippet。而且也很好理解和记忆，耍多了会上手的。

安装

• 在设置中心搜索安装

代码片段(Tab 或者 Enter 补全)

Console 命令

[cd] console.dir — 这条命令可以遍历一个对象内容

console.dir(${1:obj});

[ce] console.error — 打印出信息带有错误图标

console.error(${1:obj});

[cl] console.log — 打印出信息

console.log(${1:obj});

[cw] console.warn — 打印带有警告图标的信息

console.warn(${1:obj});

DOM — 文档对象模型

[ae] addEventListener — 事件监听

${1:document}.addEventListener('${2:event}', function(e) {    ${0:// body...}});

[ac] appendChild — 增加子元素

${1:document}.appendChild(${2:elem});

[rc] removeChild — 删除子元素

${1:document}.removeChild(${2:elem});

[cel] createElement — 创建元素

${1:document}.createElement(${2:elem});

[cdf] createDocumentFragment — 创建文档碎片节点

${1:document}.createDocumentFragment(${2:elem});

[ca] classList.add — 冷门属性，为了解决 className 不能解决出现，没用过

${1:document}.classList.add('${2:class}');

[ct] classList.toggle — 同上

${1:document}.classList.toggle('${2:class}');

[cr] classList.remove — 同上

${1:document}.classList.remove('${2:class}');

[gi] getElementById — 获取元素ID

${1:document}.getElementById('${2:id}');

[gc] getElementsByClassName — 获取元素类名[返回值为数组]

${1:document}.getElementsByClassName('${2:class}');

[gt] getElementsByTagName — 获取标签集合[返回值是一个nodeList,非数组]

${1:document}.getElementsByTagName('${2:tag}');

[ga] getAttribute — 获取属性值

${1:document}.getAttribute('${2:attr}');

[sa] setAttribute — 设置属性值

${1:document}.setAttribute('${2:attr}', ${3:value});

[ra] removeAttribute — 移除属性值

${1:document}.removeAttribute('${2:attr}');

[ih] innerHTML — 代码块插入 html 结构

${1:document}.innerHTML = '${2:elem}';

[tc] textContent — 纯文本，裸奔的 innerHTML

${1:document}.textContent = '${2:content}';

[qs] querySelector — HTML5 新属性，获取选择器，类似 JQ 的 $(‘div#name’)

${1:document}.querySelector('${2:selector}');

[qsa] querySelectorAll — 同上，都支持多个选择器，但这个返回一个 nodeList

${1:document}.querySelectorAll('${2:selector}');

Loop

[fe] forEach — 遍历数组或者对象用的方法

${1:myArray}.forEach(function(${2:elem}) {    ${0:// body...}});

[fi] for in — 遍历对象用的方法

for (${1:prop} in ${2:obj}) {    if (${2:obj}.hasOwnProperty(${1:prop})) {        ${0:// body...}    }}

Function

[fn] function — 函数声明

function ${1:methodName} (${2:arguments}) {    ${0:// body...}}

[afn] anonymous function —- 匿名函数

function(${1:arguments}) {    ${0:// body...}}

[pr] prototype — 原型

${1:ClassName}.prototype.${2:methodName} = function(${3:arguments}) {    ${0:// body...}}

[iife] immediately-invoked function expression — 函数表达式

(function(window, document, undefined) {    ${0:// body...}})(window, document);

[call] function call — 回调函数

${1:methodName}.call(${2:context}, ${3:arguments})

[apply] function apply — 回调函数

${1:methodName}.apply(${2:context}, [${3:arguments}])

[ofn] function as a property of an object — 函数声明

${1:functionName}: function(${2:arguments}) {    ${3:// body...}}

Timer

[si] setInterval — 根据设置时间不断调用的方法

setInterval(function() {    ${0:// body...}}, ${1:delay});

[st] setTimeout — 同上,区别在于一般不会重复执行

setTimeout(function() {    ${0:// body...}}, ${1:delay});

NodeJS

[ase] assert.equal

assert.equal(${1:actual}, ${2:expected});

[asd] assert.deepEqual

assert.deepEqual(${1:actual}, ${2:expected});

[asn] assert.notEqual

assert.notEqual(${1:actual}, ${2:expected});

[me] module.exports

module.exports = ${1:name};

[pe] process.exit

process.exit(${1:code});

[re] require — 请求模块

require('${1:module}');

BDD

[desc] describe

describe('${1:description}', function() {    ${0:// body...}});

[ita] it asynchronous

it('${1:description}', function(done) {    ${0:// body...}});

[its] it synchronous

it('${1:description}', function() {    ${0:// body...}});

[itp] it pending

it('${1:description}');

Misc

[us] use strict — JS语法使用严格模式

'use strict';

[al] alert — 弹窗

alert('${1:msg}');

[pm] prompt — 提示弹窗

prompt('${1:msg}');

深入自定义快捷键

题外话

时间过去挺快，正式版已经出来许久了。目前最新版是 V1.0.8 从最初的各种莫名的 BUG，到现在慢慢的完善，使用过程可以明显的感觉到。Github 上这个项目依旧很活跃，插件库也越来越丰富。

作为进阶的开篇，再带上一次正式版的下载地址。

目前有 Github 和国内 CNPM 两个地方可以下

1. Github
2. CNPMJS
   • 两者的区别在于，前者是放在 Amazon S3 上的，经常下载到一半没资源(纠结!)；
   • CNPMJS 是国产的 NPM，对国内用户非常友好，速度妥妥的。

深入快捷键

自定义按键绑定

unset!

顾名思义，取消设置。这是 atom 的一大亮点，示例：

之前仿 VIM 的时候，发现怎么 overlay 这货还是生效，让我不得不改动为快捷键。然后去查询官方文档，发现了unset 功能，挺简单也很实用。直接取消快捷键的命令。

'atom-text-editor':    'alt-h':'unset!'

这么简单的一条命令。就直接取消了；因为在 keymap 里面的设置是权重是最高的。

快捷键支持的组合(官方文档图)

• 除了单词这种特殊功能键外，其他的必须有修改键(第二行那些，一个或多个混用)

支持 DOM 事件的绑定

• 官方文档演示了一个插入日期的监听事件
• 分析： atom.commands 是全局常量，add 是功能

支持 snippet 及样式选择

这种功能待以后写 snippet 的时候一起说(现在还在折腾中~~)

附带一份个人分屏自定义快捷键

 #设置候选全局上下移动及打开分割窗口'body':    'shift-alt-k':'core:move-up'  #光标向上移动    'shift-alt-j':'core:move-down' #光标向下移动    'shift-alt-h':'core:move-left' #光标向左移动    'shift-alt-l':'core:move-right' #光标向右移动    'ctrl-h ctrl-h':'pane:split-left'      #分割窗口    'ctrl-j ctrl-j':'pane:split-down'      #分割窗口    'ctrl-k ctrl-k':'pane:split-up'         #分割窗口    'ctrl-l ctrl-l':'pane:split-right'     #分割窗口    'alt-h alt-h':'window:focus-pane-on-left'      #移动左窗口    'alt-j alt-j':'window:focus-pane-below'      #移动下窗口    'alt-k alt-k':'window:focus-pane-above'         #移动上窗口    'alt-l alt-l':'window:focus-pane-on-right'     #移动右窗口    'ctrl-d ctrl-d':'pane:close'  #关闭面板

atom-minify(CSS/JS压缩神器)

简介

对于接触前端的小伙伴们，为了优化肯定是想尽办法的。atom 丰富的拓展接口，让 atom 变得更加强大。国外的大牛把几种常见的压缩集成到一个小插件里面。于是就有 atom-minify 这个快捷压缩神器。

插件项目首页

作者： armin-pfaeffle

插件地址：https://atom.io/packages/atom-minify

安装方法

1. apm install atom-minify
2. 进入设置中心搜索 atom-minify

设置非常丰富，一些图形化的设置已经满足一些小伙伴正常使用了。

默认快捷键

• ctrl-shift-m : 执行压缩,生成一个带 min 后缀的(不想用 min 代表压缩可以进入设置修改)
• ctrl-alt-shift-m/ctrl-cmd-shift-m : 全局开启或者关闭保存自动生成压缩软件
• ctrl-alt-shift-h /ctrl-cmd-shift-h` : 全局开启或者关闭执行后弹出的消息面板功能
• 还有一些比较少用的快捷键,具体看文档

支持的压缩规格

• CSS支持四种压缩标准
  • YUI Compressor, clean-css, CSSO, Sqwish.
• JS支持三种压缩标准
  • YUI Compressor, Google Closure Compiler, UglifyJS2.

提示

atom 的许多特性插件都是大牛从 npm 那里搬过来封装的，所以就必须依赖各种模块，所以执行插件遇到各种错误的时候别虚，看下错误，缺啥补啥。

如果想玩自动化构建的，可以去了解下 gulp，通过丰富的插件，来实现更加复杂的功能，比如动态监听，压缩等等。

附上一个 Github 项目：https://github.com/crperlin/StartFrontendProject

个人写的 gulp 执行队列，涵盖了一些常用的功能，有兴趣的可以 fork 一起完善。

Atom 内运行 gulp 的实现方法

效果图

atom 编辑器内置一个 gulp 执行面板；

左边是探测到 gulpfile 的队列任务，单机即可运行，右边就是执行的状态预览。

本人只实现了三个面板，因为现在不用 grunt 了，可以汇总错误信息。

功能实现

单纯的 gulp 面板只依赖两个插件

• bottom-dock
• gulp-manager package

两者缺一不可；

bottom-dock 不仅仅可以实现 gulp 面板，还能实现 todo[很实用的功能]，还有 grunt 队列也能实现；

这些功能都是同一个封装好的插件。

面板快捷键

三个面板有些快捷键是公用的，有些是专用的，可以看下。

Bottom-dock 快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口

GULP 面板快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-g: 创建一个新的 gulp 面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口

TODO 面板快捷键

• ctrl-k ctrl-t: 是否显示面板
• ctrl-k ctrl-r: 刷新窗口
• ctrl-k ctrl-c: 关闭窗口
• ctrl-k ctrl-m: 添加面板

Atom 代码输入震动效果

题外话

atom 正式版发布到现在已经快半年了。有两个分支，一个是稳定【不推荐，直接用 pre 版本体验会更好】，一个预览版本 1.3.0-beta6，atom 版本更新期间各种插件的更新依旧活跃，还冒出了一些比较好玩的插件，比如这次要说的 activate-power-mode 插件。

效果图

安装及使用

插件的链接地址：https://atom.io/packages/activate-power-modeGithub项目地址：https://github.com/JoelBesada/activate-power-mode

安装非常简单，在内部设置的 install 搜索安装即可；也可以通过apm install activate-power-mode

调用方法很简单：

默认快捷键：ctrl + alt + o；若是和其他插件有冲突，自行修改下即可；

也可以通过全局调用：ctrl+shift+p，搜索【atom支持模糊搜索】，看图

局限

这个效果仅作用当前的工作 tab 页面，也就是说你新建的 tab 工作页面是不产生效果的，若是需要产生效果；需要执行 window:reload 来重新加载工作目录或者页面，然后再次调用；