snippets自定义代码片段

learning › vue

之前没太在意这个功能,但是发现每次都写重复的东西,确实挺浪费时间,atom中自带了snippets这个功能

使用方法:

打开编辑文件

1
edit--snippets

上面的路径就可以打开自定义代码片段的文件了

格式

1
2
3
4
5
6
'.source.language':
    '一些描述':
        'prefix':'words'
        'body':"""
        code
        """

language:为使用的语言,可以是python,java,html等等等

words:为想要使用什么来表示要补全的代码,例如html中使用!来补全基本语句

body中的code即为代码模板

在代码中还可以使用$1,$2来表示补全代码后光标停留的位置

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
'.source.html':
    'vue template':
        'prefix':'vue'
        'body':"""
            <div id="app">
                {{message}}
            </div>
            <script src="$1" charset="utf-8"></script>
            <script>
                const app = new Vue({
                    el: "#app",
                    data: {
                        message: "hello vue!"
                    }
                })
            </script>
"""

然后就可以使用vue加tab来补全这段代码模板了,在代码补全之后,光标会停留在$1的位置,可以方便的输入路径,而不需要自己移动光标去那个地方