美文网首页
VSCode 中自定义 Snippet

VSCode 中自定义 Snippet

作者: 星塵子 | 来源:发表于2020-01-29 23:20 被阅读0次
  • 路径:文件 -- 首选项 -- 用户代码片段

  • 创建或选择已有的代码类型 : 例如 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

相关文章

网友评论

      本文标题:VSCode 中自定义 Snippet

      本文链接:https://www.haomeiwen.com/subject/vwwbthtx.html