atom使用教程

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

本文将通过简单实用的方法来带你学习Atom 编译器的使用。本文是为新手所准备的，针对那些想要依托Github 做文本编译工作的读者。在你学习之前，你需要对 Github 有一定的了解。

http://wiki.jikexueyuan.com/project/atom/basis.html 菜单栏-分为六大块: 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,但是书写规范又很相似,,醉了…估计是社区搞出来的常用快捷键–亲测及翻译

主题和插件这方面,比 Sublime Text 人性化多了..一些比较用心的作者增加了二度设置功能。
何为二度设置,就是不用手写代码修改配置文件，点点鼠标，填填输入框就能生效，主题以 isotope-ui 这个做例子介绍,一般有二度设置的，最下面一块都有 readme 或者其他引导教程，插件的二度设置和主题大同小异，有二度内部都是插件功能的启用及代码部署教程，感觉比 Sublime 人性化好多，sublime 的插件说明要自己上 Github 或者 package control 查看

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

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

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

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

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

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’

温馨提示:插件的安装

setting 内部搜索安装

上 Github 下载插件,放在 atom 目录下的 package,重开打开软件会自动识别
使用 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:5 或!：用于 HTML5 文档类型 —看代码

html:xt：用于 XHTML 过渡文档类型 — 不演示

html:4s：用于 HTML4 严格文档类型 — 不演示
<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <title>Document</title>
</head>
</body>
</html>
id # |类.|属性[]|内容{},若是不带父元素,则默认为隐性生成(就近原则)
 <!-简写格式我就放在注释里面啦啦!!-->
  <!--#test.test-->
  <div id="test" class="test">
  <!-- 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 后代 -->
    <li></li>
<!-- div>p+p  兄弟-->
<!-- div>p>ul>li>^span+b  上级-->
      <li></li>
      <span></span>
分组()/乘法*/自增/自减@-/起序$@数字
<!-- div>ul>(li>a)*2 -->
    <li><a href=""></a></li>
    <li><a href=""></a></li>
<!-- div>ul>(li>a{文本$$})*2 -->
<!--$是匹配数字,一个代表1开始,两个01开始,依次001-->
    <li><a href="">文本01</a></li>
    <li><a href="">文本02</a></li>
<!-- div>ul>(li>a{文本$@-})*3 -->
<!-- @-代表启用自减,降序排列   -->
    <li><a href="">文本3</a></li>
    <li><a href="">文本2</a></li>
    <li><a href="">文本1</a></li>
<!-- div>ul>(li>a{文本$@2})*5 -->
<!-- $@number 代表几号开始出现数字  -->
    <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>
综合运用-静态布局

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">
  <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>
        <div id="header">
        <div class="nav">
            <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>
      <div id="container">
        <div id="">
          <div class="left_sidebar">
            <div class="category">
                <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>
        <div id="right_content">
            <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>
      <div id="footer">
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
          <li><a href="">关于/联系我们/.....</a></li>
</body>
</html>
CSS 的写法和 HTML 大同小异,emmet 也能写 IE hack,浏览器前缀等。
官网的 Emmet Cheat Sheet :http://docs.emmet.io/cheat-sheet/
为何要分屏

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

如何获取 Atom 的分屏命令
  最简易的,进入设置中心的快捷键列表,搜索 pane 和 split 就可以看到命令和选择器了。
  查询官方手册。

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

有些失效了.就是按了没反应,应该和一些插件冲突了。

不习惯,符合自己习惯的才是最高效的。

自定义快捷键

为何这样自定义我写在注释里面了…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 生效….关闭当前的窗口。
http://wiki.jikexueyuan.com/project/atom/sidebar.html网页中