VSCode 中自定义 Snippet

• 路径：文件 -- 首选项 -- 用户代码片段

• 创建或选择已有的代码类型 : 例如 vue

• 语法

  • prefix : 代码片段的前缀，用来触发代码片段的。使用时在对应的代码类型文件内输入该前缀即可调用此代码片段
  • body : 代码片段的主体，调用代码片段需输出的代码就在这里定义
  • $1 $2 : 光标位置，按 Tab 键切换
  • $0 : 最终光标位置
  • ${1:字符} : 生成代码后的初始位置，字符为占位字符

• 案例:

"Vue file template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "  <div>",
            "",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "  name: '${1:VueFile}',",
            "  components: {},",
            "  data() {",
            "    return {",
            "      $0",
            "    }",
            "  },",
            "",         
            "  computed: {},",
            "  methods: {}",
            "}",            
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "",
            "</style>",
            ""
        ],
        "description": "vue file template"
    }

• 使用

  
  1.png

• 结果

  
  2.png