如何将自定义代码段添加到Atom

它不仅可以轻松地用数千个Atom包进行 扩展 ，并且具有广泛的语言支持 ，而且几乎每个部分都可以由用户自定义 。

Github创建的源代码编辑器Atom在Web开发社区中流行并不是巧合。

在本文中，我将向您展示如何使用Atom的内置代码片段 ，以及如何创建自己的自定义片段 。

通过利用Atom的代码片段功能 ，可以使编码工作流程更加高效，因为通过重复使用重复的代码片段 ，可以减少工作的重复部分。

使用内置代码段

例如，如果您正在处理扩展名为.js的文件，则仅属于JavaScript作用域的代码片段可用于该文件。

默认情况下，Atom带有内置的代码片段 ，每个片段都绑定到属于某种文件类型的作用域 。

如果您从下拉列表中选择一个片段，然后单击它，则Atom会将完整的片段插入到您的编辑器中，而不会造成任何麻烦。

要查看当前文件类型的所有可用代码段 ，请按Alt + Shift + S。

当您开始输入内容时，Atom会弹出一个自动完成结果框 ，其中包含属于特定范围的可用代码段以及您到目前为止所输入的字符串。

如果您已经知道这些选项，则不必加载整个列表。

例如，如果您在.html文件中键入h字符，则会出现一个下拉列表，其中包含所有以h开头的内置HTML代码段。

通过单击任何选项，Atom将粘贴完整HTML标记 （例如<h1></h1> ），并将光标定位在开始和结束标记内 。

如果您不想打扰下拉列表，则可以通过键入h1并单击Tab或Enter来获得相同的结果-这两个键都插入了属于该代码段前缀的完整代码段。

添加自定义代码段

1.查找配置文件

要将您自己的自定义代码段添加到Atom，首先，您需要找到名为snippets.cson的配置文件 ，该文件是CoffeeScript对象符号文件。

单击顶部栏中的File > Snippets...菜单，Atom将打开snippets.cson文件，您可以在其中添加自己的自定义片段。

2.找到合适的范围

您需要四件事来添加您的自定义代码段：

1. 范围名称
2. 片段名称
3. 用作代码片段句柄的前缀
4. 摘要的主体

代码段的名称，前缀和主体（2-4）仅取决于您，但是在添加自定义代码段之前，必须先找到作用域 （1） 的名称 。

在这里，搜索所需的范围，例如，如果要向HTML语言添加代码段，请在搜索栏中键入HTML 。

要找到所需的范围，请单击顶部菜单栏中的“ File > Settings菜单，然后在“设置”中找到“ Packages选项卡。

在语法设置中 ，您可以快速找到示波器的名称，如下面的屏幕截图所示。

单击所选语言的语言支持包 ，然后打开其自己的设置。

您可以在Atom项目中使用以下范围：

• 纯文本： .text.plain
• HTML： .text.html.basic
• CSS： .source.css
• Sass： .source.sass
• .source.css.less ： .source.css.less
• JavaScript： .source.js
• PHP： .text.html.php
• Python： .source.python
• Java： .source.java

不要忘记，您将需要在作用域名称之前添加一个点（ . ） ，以便在snippets.cson文件中使用它。

3.创建单行代码段

要创建单行代码片段 ，您需要使用以下语法将snippets.cson的范围，名称，前缀和正文添加到snippets.cson文件中：

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': '<h4 class="widget-title"></h4>'

您可以按照以下语法将其他任何单行代码段添加到Atom编辑器中。

此示例代码段将带有widget-title类的<h4>标记添加到HTML范围。

片段名称（在示例Widget Title ）将显示在自动完成结果框中。

保存配置文件后，只要您键入前缀并按Tab键 ，Atom就会将所属的代码段主体粘贴到您的代码编辑器中。

4.创建多行代码片段

您需要添加与单行代码段相同的数据-代码段的范围，名称，前缀和主体。

多行代码段使用的语法略有不同。

此处的不同之处在于，您需要将代码段主体放在一对""" （三个双引号）中 。

'.text.html.basic':
    'Image Link':
      'prefix': 'iml'
      'body': """
        <figure>
          <a href="" target="_blank">
            <img src="" width="" height="" alt="">
            </a>
        </figure>
        """

如果要将多个自定义片段添加到同一作用域，请仅添加一次作用域的名称，然后一一列出这些片段：

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': '<h4 class="widget-title"></h4>'
    'Image Link':
      'prefix': 'iml'
      'body': """
        <figure>
          <a href="" target="_blank">
            <img src="" width="" height="" alt="">
          </a>
        </figure>
        """

5.添加制表位

使用制表位可以节省文本导航所需的时间。

制表位指示用户可以使用Tab键导航的位置。

您可以通过在代码段主体中添加制表位来进一步简化自定义代码段的使用。

Atom会将光标定位到找到$1 ，然后您可以使用Tab键跳至$2 ，然后跳至$3 ，依此类推。

您可以使用$1, $2, $3, ...语法添加制表位。

'.text.html.basic':
    'Image Link':
      'prefix': 'iml'
      'body': """
        <figure>
          <a href="$1" target="_blank">
            <img src="$2" width="$3" height="$4" alt="$5">
            </a>
        </figure>
        """

6.添加可选参数

如果其他人也使用您的编辑器并且您想让他们知道代码段的目的，或者您有非常复杂的自定义代码段需要向他们添加注释，则此功能很有用。

Atom允许您通过使用可选参数向片段添加额外的信息 。

在下面的示例中，我向先前的“ Widget Title自定义代码段添加了说明和“ More...链接：

当您开始输入前缀时，可选参数的值将显示在自动完成结果框中 。

'.text.html.basic':
    'Widget Title':
      'prefix': 'wti'
      'body': '<h4 class="widget-title"></h4>'
      'description': 'You can add a widget title with this
          snippet to your sidebar widget.'
      'descriptionMoreURL': 'http://hongkiat.com'

查看可用于向自定义代码段添加额外信息的其他可选参数 。

当用户开始输入前缀wti ，额外信息（描述+链接）将显示在自动完成结果框的底部。

翻译自: https://www.hongkiat.com/blog/add-custom-code-snippets-atom/