atom使用教程

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,但是书写规范又很相似,,醉了…估计是社区搞出来的 常用快捷键–亲测及翻译

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

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

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

主题名字| 描述| 个人评价 :—:|:—:|:—: isotope-ui|A clean and configurable UI theme.|高贵黑,但是不带语法主题,支持高级自定义 seti-UI|A dark colored UI theme for atom with custom file icons|扁平化磨砂黑,不带语法主题,自带了文件图标(还行) monokai-flat|用过sublime flat主题的都知道|赞赞,熟悉的气息 插件推荐
前端必备插件篇

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’
温馨提示:插件的安装
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
文档初始化
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/

分屏操作

分屏

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

后续文章 http://wiki.jikexueyuan.com/project/atom/sidebar.html网页中