Atom 编辑器自定义代码段（snippet）【转载】

最新推荐文章于 2021-06-15 13:09:48 发布

早起解决80%人生问题

最新推荐文章于 2021-06-15 13:09:48 发布

阅读量722

点赞数

分类专栏：开发工具网站开发，服务器

原文链接：https://www.jianshu.com/p/ee5c4eacf807

版权

开发工具同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

网站开发，服务器

7 篇文章 0 订阅

订阅专栏

Atom 编辑器自定义代码段（snippet）

snippet 是一种强大到令人难以置信的代码生成方式，它可以通过快捷方式快速生成常用代码。

1. Atom 语言包提供的代码段

许多 Core 包和 Community 包都捆绑了它们自带的代码段，这些代码段只能用于它们自身。例如，language-html 包就为 HTML 语法高亮和语法提供了支持，并且带有很多代码段；类似的还有：language-java、language-javascript、language-php等语言包。

2. 自定义的代码段

（1）通过 File > Snippets 菜单，打开snippets.cson文件。修改之后，只要保存了文件，Atom 就会重新加载这个文件，就可以立即使用了。
（2）自定义代码段的基本格式（有趣的是，你可以使用snip快速生成代码段模板）

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

① 最左边的键是选择器，表明这些代码段在哪些文件中才能生效。要想知道这个键的值，最简单的方法就是：进入代码段语言所对应的语言包中，查看 Scope 字符串。（注意：键值就是 . + Scope）

Paste_Image.png

② 下一层的键是代码段名称，用于在代码段菜单中以一种更加易读的方式描述代码段。你可以自由命名。

③ 代码段名称之后，便是可以出发代码段的 prefix 和当代码段被触发时将要插入的代码 body

④ 每一个带有数字的 $ 就是一个 tab 键驻留位置。只要代码段被触发，便可以通过 Tab 键遍历这些 tab 驻留位置

具有相同数字的 tab 驻留位置 将会创建多个光标
上面例子中的 crash 字符串会在开始时被选中

另外，可以使用 CoffeeScript 多行语法的 """ 来创建长模板。

 '.text.html.basic':
      'html':
        'prefix': 'html'
        'body': """
            <!DOCTYPE html>
            <html lang="zh-CN">
                <head>
                    <meta charset="utf-8">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
                    <meta name="renderer" content="webkit">
                    <title>${1:title}</title>
                    <link rel="stylesheet" href="/css/master.css" media="screen" title="no title" charset="utf-8">
                    <style media="screen" >

                    </style>

                    <script src="" charset="utf-8"></script>
                    <script>

                    </script>
                </head>
                <body>
                    $2
                </body>
            </html>
        """

----------------------------------

另外一篇

使用Atom的Snippet加速编码

本文同时备份在我的个人博客

一个使用Snippet加速编码的动图示例

我们经常需要对二维数组进行迭代，比如这样：

for(int x = 0; x < width; x++){
  for(int y = 0; y < height; y++){
    screen[x][y].setColor("black");
  }
}

过上一段时间，你又要写这么一段代码：

for(int i = 0; i < rows; i++){
  for(int j = 0; j< columns; j++){
    objects[i][j].update();
  }
}

如果你是程序员，那么你理应厌烦：又一次重复得输入for,[],{}……而且一个不小心，还很容易输入错误。浪费时间寻找哪里少了一个分号可不是你该做的事情。

那么不如来试试Snippet，一小段预先定义好格式的代码块。下次使用时，只需填入变化的部分。是的，就像填表一样。

在Atom中设置你的Snippet

为了在Atom中使用Snippet，你需要首先定义好你的代码块格式。

Linux环境下，进入Edit->Snippets...，相对应的，在Windows下是File->Snippets...。

这实际上是一个cson文件，格式如下：

'.source.python':                         # 在何种文件中使用这个Snippet
  'python coding':                        # 对Snippet的简短说明
    'prefix': 'coding'                    # 输入什么前缀可以触发这个Snippet
    'body': '# -*- coding:utf8 -*-\n'     # Snippet的内容

第一行指定在何种文件中使用Snippet，你可以在设置的Packages中的Installed Package里搜索你要用的编程语言。
点击对应的包，通常名字是：language-编程语言。在打开的包里看看Scope是什么。
常用的几种如下：

文件后缀	Scope
.c .h	.source.c
.py	.source.python
.java	.source.java
.js	.source.js
.css	.source.css
.md	.source.gfm

第一个示例：指定Python文件的编码

我们都知道，如果你在python2中使用中文，在Python文件开头，你需要添加这么一段代码，指定这个文件的编码格式：

# -*- coding:utf8 -*-

每次都要输入，重复！那就把它变成一段Snippet吧：

'.source.python':
  'python coding':
    'prefix': 'coding'
    'body': '# -*- coding:utf8 -*-\n'

这样，在打开.py文件后，只需输入coding，然后按下Tab键，这段遍布着*的代码行就一下子输入成功了。

第二个示例：划分你的代码

还是在Python中，如果你想要添加一段像下面这样的代码，将你的.py文件划分成多块的话：

#=====================
# 数据爬取结束，开始匹配
#=====================

这时候，中间的文字是你每次都需要更改的部分，当然可以在输入其他部分后再移到中间部分进行编辑，但我们有更好的东西：

'.source.python':
  'python coding':
    'prefix': 'coding'
    'body': '# -*- coding:utf8 -*-\n'
  'section':
    'prefix': 'section'
    'body': '#=====================\n# $1\n#=====================\n$2'

注意，对同一后缀文件的Snippet，都得写在一起。

$1表示光标第一次所处的位置，按一下Tab后光标会移到$2所处的位置。

在这个例子中，输入section然后按Tab，光标就自动出现在这段代码的中间，输入完中间部分，再按Tab，光标就会移动到这段文字的最后。你可以继续编码，而无需浪费时间在移动光标上。

第三个示例：同时编辑多处

在上面，我们使用\n划分多行，但是行数一多，这样看起来就眼花缭乱了，我们可以使用"""来编写多行的Snippet：

'.source.java':
  'iterate two dimension array':
    'prefix' : 'for2'
    'body' : """
      for(int $1 = 0; $1 < $2; $1++){
        for(int $3 = 0; $3 < $4; $3++){
          $5[$1][$3]$6
        }
      }
      $7
    """

Atom的一个优势就是可以同时修改文件的不同位置，Snippet自然支持这一点。
你会注意到，$1出现三次，这意味着一次键入，三处输入。这样不但快捷，还能保证命名一致。（错也会错成一样的）。