如何在VScode中添加代码片段

时间:2023-03-09 17:29:35
如何在VScode中添加代码片段

拿 VUE 举例,新建 VUE 文件,输入前缀,出现代码段

文件 --->  首选项 ---> 用户代码片段 

在输入框中输入 vue ,找到 vue.json ,然后在 vue.json 里面配置。

如下是 vue.json 的例子

    // "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
prefix : 在 Intellisense 中选择代码片段时将使用的前缀。
body:代码片段的内容。使用“$1”和“${1:defaultText}”定义光标位置,使用“$0”定义最终光标位置。使用“${varName}”和“${varName:defaultText}”插入变量值,例如“这是文件:$TM_FILENAME”。
description:代码片段描述。

我们可以更改为自己想要的内容

"Print to console": {
"prefix": "vuec",
"body": [
"<template>",
" <div>",
" $0",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" name: '',",
"",
" data () {",
" return {",
" }",
" },",
"",
" methods: {}",
"}",
"</script>",
"",
"<style lang='stylus' rel='stylesheet/stylus'>",
"",
"</style>",
""
],
"description": "Log output to console"
}