vscode添加自定义snippet（代码段）vue模板

最新推荐文章于 2025-10-28 02:52:36 发布

原创最新推荐文章于 2025-10-28 02:52:36 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#编辑器

框架专栏收录该内容

12 篇文章

订阅专栏

本文介绍在VSCode中自定义Vue代码片段的两种方法，包括通过菜单栏设置及使用全局命令，详细展示了如何创建并应用代码片段，提高前端开发效率。

进入代码片段自定义有两种方式：
1. 【菜单栏->文件->首选项->用户代码片段】
2. 全局命令：在vscode界面按F1或者ctrl+shift+p，进入命令行，输入sinppets
选vue进入自定义代码段（vue.json）
在vue.json里添加如下代码片段：

"Print to console": {
        "prefix": "vue:5",
        "body": [
            "<template>",
            "",
            "",
            "</template>",
            "",
            "<script>",
            "export default {",
            "",
            "}",
            "</script>",
            "",
            "<style>",
            "",
            "</style>"

        ],
        "description": "vue code"
    }

prefix: 是触发snippet的简写（按上述代码所写，输入vue:5 即可快速输入上述模板）
description : 用户输出snippet之前，方便自己识别的注释。