ATOM基础教程一ATOM自定义代码片段(8)

简介

ATOM提供了自定义代码片段的功能，打开设置菜单，点击snippets即可进入snippets.cson文件进行自定义代码片段。

代码片段格式

'.选择器':
   '代码片段描述':
     'prefix':'字母组合'
     'body': '输出的代码片段'

选择器指定了自定义的代码片段将在哪种语言环境下生效，选择器的名称对应的语言包的Scope字符串值，可以在ATOM编辑器查找每个语言包对应的选择器名称，php语言包如下：
这里写图片描述

同理js语言包如下：
这里写图片描述

自定义代码片段实例

1、自定义单行代码片段

自定义php常用的代码片段如下，

var_dump();die;

配置snippets.cson文件：

'.text.html.php'://选择器名称前要加.
    'dump':
       'prefix':'vp'
       'body': 'var_dump(${1});die;$2'

$1 表示光标的默认位置
$2 按下 tab 键，光标跳到的第二个位置，以此类推
另外，使用${1:'replaced'}替换$1即可转换光标到选定状态，选定内容为replaced

在要填充的代码中使用回车并不能使代码填充以后自动换行，自动换行要使用\n，或者用"""将要填充的代码包起来。

这里写图片描述
演示：

2、自定义多行代码片段

自定义js常用的代码片段，配置snippets.cson文件，如下：

'.source.js': //js的Scope值
    'ajax basic':
        'prefix':'ax'
        'body': '''  //使用三个引号将多行代码片段包裹
                $.ajax({
                            url: $1,
                            data: {$2},
                            dataType: 'json',
                            cache: false,
                            success: function(data) {
                               $3
                            }
                            error: function(xhr, status, err) {
                               $4
                            }
                  });
                '''

演示：
这里写图片描述

自定义代码片段注意点

自定义代码片段是在文件Snippets.cson下设置的，因此要遵循CSON文件的语法，即键不能重复，可参考这篇文章ATOM基础教程一ATOM按键绑定(6)的注意事项。

摘自: https://blog.csdn.net/zsl10/article/details/51873564