vscode 配置代码片段

最新推荐文章于 2025-06-12 11:00:03 发布

北城_荒

最新推荐文章于 2025-06-12 11:00:03 发布

阅读量898

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vscode 文章标签： vscode

本文链接：https://blog.csdn.net/weixin_47102763/article/details/119893786

vscode 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Visual Studio Code(VSCode)中配置自定义代码片段，以提高前端开发的效率。通过设置用户代码片段，选择特定语言（以Vue为例），创建Vue模板，包括模板结构和样例代码，保存后在新建Vue文件中即可快捷输入，减少手动编写的时间，从而增加开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vscode 配置代码片段

文章目录

vscode 配置代码片段

1. 左下角设置（齿轮）选择用户代码片段

在这里插入图片描述

2. 中间可以选择特定语言的文件以便于更好在合适的语言环境下进行识别匹配也可以进行选择全局代码片段

（这里以vue为例，找到vue 即可会自动生成 vue.json文件）
在这里插入图片描述

3. 如下图所示是默认提示以及样例

在这里插入图片描述

4. 键入代码片段

其中 \t 是表示两个空格

"vue1": {
        "prefix": "vue-scss",
        "body": [
            "<template>",
            "\t<div class= 'content' >",
            " ",
            "$1",
            "\t</div>",
            "</template>",
            "<script>",
            "import xx from ''",
            "export default {",
            "\tcomponents: {},",
            "\tdata() {",
            "\t\treturn {}",
            "\t},",
            "\tcreated() {},",
            "\tmounted() {},",
            "\tmethods: {},",
            "\tcomputed: {},",
            "\twatch: {}",
            "}",
            "</script>",
            "",
            "<style lang='scss' scoped>",
            "",
            "</style>",
            "$2",
        ],
        // "description": "vue template "
    },