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

朱雀 2022-05-25 23:55 306阅读 0赞

## 简介 ##

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

## 代码片段格式 ##

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

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

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

## 自定义代码片段实例 ##

### 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，或者用"""将要填充的代码包起来。

![这里写图片描述][20160711150049585]   
演示：   
![这里写图片描述][20160711150416070]

### 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 } }); '''

演示：   
![这里写图片描述][20160711152119422]

## 自定义代码片段注意点 ##

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

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

[20160710211935512]: /images/20220526/4a5783e28f6943c9a80ede22b4da0545.png
[20160710212048476]: /images/20220526/d54732f1b9d94db99c7880756008ab19.png
[20160710212219837]: /images/20220526/fc3a4322bcf94e988fe41b62e1878558.png
[20160711150049585]: /images/20220526/f91ded2e6875466e84561290e71e0683.png
[20160711150416070]: /images/20220526/4c2c5e09c75f4c298cf047f45d6a72f0.png
[20160711152119422]: /images/20220526/e22f1bdea77b46be9cd046cbaf83b848.png
[ATOM_ATOM_6]: http://blog.csdn.net/zsl10/article/details/51863852