Snippets 使用

一. 概述

Snippets 是一种在代码中快捷插入代码块的方式。
Snippet 是一个编程用语，指的是源代码、机器码、文本中可重复使用的小区块。通常它们是有正式定义的执行单位，以纳入更大的编程模块。

二. Snippets 管理工具

Snippets，SnippetsLab

三. Atom 中的 Snippets

不同的编辑器，制定 Snippets 的方式有所不同。下面介绍如何在 Atom 中使用 Snippets 。

Atom 中自定义的 Snippets 存放在Atom > Snippets菜单下的snippets.cson文件下，下面来介绍如何创建 Snippets。

文档类型

在 Atom 中创建 Snippets 的首要问题，便是确定 Snippets 的文档类型，文档类型需要书写正确，否则 Snippets 将不生效。
对于 Atom 来说，查找正确的文档类型，可以到 language 中查找。比如.md文档类型，可以在 Atom 中语言类型language-gfm下的文件夹granmmars中文件 gfm.cson 中找到scopeName为source.gfm 。

结构说明

Atom 中 Snippets 基本结构定义。

'.source.js':                                    #文档类型，同类覆盖，scopeName 前加 "."
    'console.log':                               #snippet名称，同名覆盖
        'prefix': 'log'                          #trigger标记
        'body': 'console.log(${1:"crash"});$2'   #内容主题，$-光标次序，{}-预设值

Atom 中 Snippets 定义代码块。

'.source.js':                                    
    'console.log':                              
        'prefix': 'log'                                                   
        'body': """                              
            ${1:methodName}: function (${2:attribute}) {
                $3
            }${4:,}  
        """   

上诉代码为了节省 Snippets 行数，也可以这样写:

'.source.js':                                    
    'console.log':                              
        'prefix': 'log'                                                   
        'body': '${1:methodName}: function (${2:attribute}) {\n\t$3\n}${4:,}'

个人觉得 Atom 将用户自定义的 Snippets 放置在同一个文件中管理，不太合适。
Atom 本身定义了一部分 Snippets ，可以在 文件夹 snippets 中查看，如：语言类型language-gfm，文件夹snippets中文件 gfm.cson
一般使用$0跳出至代码块尾。
同名 Snippets 将被后定义的 Snippet 覆盖。

自定义 Snippets 整理

Markdown

'.source.gfm':
# Markdown 注释
    'doc':
        'prefix':'doc'
        'body':"""
        <!--
            @Description : ${1:description}
            @Author      : ${2:name} (${3:email})
            @Update      : ${4:author} (${6:date})
        -->
        $0
        """
# Markdown 标题
    'h3':
        'prefix':'h3'
        'body':'###$1\n\n$0'
    'h4':
        'prefix':'h4'
        'body':'####$1\n\n$0'
    'h5':
        'prefix':'h5'
        'body':'#####$1\n\n$0'
    'h6':
        'prefix':'h6'
        'body':'######$1\n\n$0'
# Markdown 文本
    'bold text':
        'prefix': 'b'
        'body': '**$1**$0'
    'italic text':
        'prefix': 'i'
        'body': '*$1*$0'
# Markdown 代码
    'code':
        'prefix':'cd'
        'body':'\n```\n$1\n```\n$2\n\n$0'
# Markdown 图片
    'image':
        'prefix': 'img'
        'body': '![$1]($2)\n\n$0'
# Markdown 链接
    'link':
        'prefix':'l'
        'body':'[${1:text}](${2:http://link.com})$0'
# Markdown 参考式
    'reference':
        'prefix': 'ref'
        'body': '[${1:id}]: ${2:url}${3: "${4:title}"}$0'
    'reference image':
        'prefix': 'rimg'
        'body': '![$1][$2]$0'
    'reference link':
        'prefix': 'rl'
        'body': '[$1][$2]$0'
# Markdown 任务
    'todo':
        'prefix': 't'
        'body': '- [$1 ] $0'
# Markdown 表格
    'table':
        'prefix': 'tb'
        'body': """
          | ${1:Header One    } | ${2:Header Two    } |
          | :------------- | :------------- |
          | ${3:Item One      } | ${4:Item Two      } |$0
        """