1. 1. snippets干嘛的
  2. 2. 定义自己的snippets:
  3. 3. 根据自己需要定义html的snippets
Table of Contents

atom代码补全snippets配置

snippets干嘛的

目前对我来说,snippets有两个帮助:

  1. 提高敲代码的速度
  2. 维护一份好的代码模板

在atom中,许多核心插件都提供了自身对应的snippets,比如language-html提供了一些html语法的snippets,当输入html然后敲 tab 键,默认情况下将生成如下代码块:

<html>
  <head>
    <title></title>
  </head>
  <body>

  </body>
</html>

而且你会注意到,此时光标将自动调到title之间,再次敲tab,光标将移动到body中。
快捷键 Alt+Shift+S 可以帮助查看当前文档支持的所有snippets

定义自己的snippets:

所有自定义的snippets都保存在snippets.cson中(atom打开的时候会自动加在这个文件)。

点击Atom选择Snippets将会打开这个文件(mac)

打开后可以看到基本说明和一个基础的配置样例:

'.source.js':
  'console.log':
    'prefix': 'log'
    'body': 'console.log(${1:"crash"});$2'

我们定义的snippets按照所支持的文件进行分类,比如我们定义的所有JavaScript的snippets都定义在上边的key值为.source.js的对象中,如果出现重复的snippet key,那么只有最后声明的一个有效。

以上边的配置为例,具体说明一下:

  • 文件类型选择(.source.js): 第一行指定了snippets对应的文件类型:查看相应语言插件的Scope,在Scope的前边加上.就将当前的snippets的与对应的文件关联。
  • snippet名字(console.log):这主要是为了方便我们理解,所以你想怎么取就怎么取了。
  • 触发条件(prefix):输入prefix设置的字符串,按下tab,就可以自动补充代码片段。
  • snippet的内容(body):通过$可以设置光标的位置以及设置默认值。
    如果body有多行内容,需要用"""将其包裹起来。

根据自己需要定义htmlsnippets

'.text.html.basic':
  'html':
    'prefix': 'html'
    'body': """
      <!doctype html>
      <html lang="en">
          <head>
            <meta charset="utf-8" />
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <title>${1:My Site}</title>

            <!-- Disables zooming on mobile devices -->
            <meta name="viewport" content="width=device-width,initial-scale=1" />
            <link rel="stylesheet" href="css/normalize.css">

            <link rel="stylesheet" href="css/main.css">
          </head>
          <body>
            $2
          </body>
      </html>
    """