Atom使用教程

一、实用用法

• 1、打开多个窗格, 可用于对比查看代码.
  View -> Panes -> Split Xxx

二、快捷键

• 1、快速查找文件：cmd + p.
  a: 输入文件名搜索.
  b: 输入目录 + 文件名搜索.
• 2、切换多个页签窗口.
  使用cmd + [1,2,3...]切换到第几个页签.
  如： cmd + 3 切到第三个窗口.
• 3、新建空文件: cmd + n

• 4、选择同名标签, 批改标签名字
  选择其中一个标签, 然后 cmd + d 会高亮下一个该名的标签.
  拓展:批改某个标签名, cmd + d选中多个同名标签后, 直接批改名字.

• 5、选中某行：cmd + l

• 6、查找关键字
  a、cmd + f查找该文件下的该关键字.
  b、cmd + shift + f查找所有文件下的该关键字.

• 7、选中{ }中括号内所有, 用于CSS中某个样式集的选定
  cmd + ctrl + m

  三、推荐安装套件

  • 1、文件图标: file-icons
    根据不同文件后缀名显示不同类型图标

  • 2、支持html和css格式文件中代码速写插件: emmet
    用法介绍:.

    一、html中用法

  • a、新建空文件后,改变文本格式为html(点击atom最右下角显示的文本格式来改变),然后在文本空白处输入标签名html、head、div、article、a…后按tab键.

  • b、多倍数个的同类标签: li*3
  • c、快速设置class/id属性默认的div标签: .clsName/idName然后tab会出来class/id为clsName/idName的div标签
  • d、快速设置class/id属性的任意标签: 如h1.title/h1#title出来id/class为title的h1标签
  • e、>嵌套符来速写嵌套关系的标签: ul>li*3>a

  • f、{}设置标签内value值:如ul>li{value1}+li{value2}

    二、css中用法

  • 新建空文件后,改变文本格式为css(点击atom最右下角显示的文本格式来改变), 只需书写属性和值的第一个缩写字母+值

    //典型速写举例
    //1、输入db后按tab键
    display: block;
    //2、输入dib后按tab键
    display: inline-block;
    //3、输入mb10
    margin-bottom: 10px;
    //4、输入m10%
    margin: 10%;

  更多缩写用法请查看emmet官网

• 3、webserver服务器插件: atom-live-server
  用法介绍:.

  ctrl-shift-3 launch live server on port 3000.
  ctrl-shift-4 launch live server on port 4000.
  ctrl-shift-5 launch live server on port 5000.
  ctrl-shift-8 launch live server on port 8000.
  ctrl-shift-9 launch live server on port 9000.

  更多参考atom-live-server官网