VSCode中创建自己的模板（vue初学模板，node初学模板）

VSCode自定义模板创建与管理

最新推荐文章于 2025-10-12 02:02:27 发布

原创最新推荐文章于 2025-10-12 02:02:27 发布 · 566 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文介绍了如何在VSCode中创建和删除自定义模板，包括Vue入门学习模板和Node初学者模板。通过`File` -> `Preferences` -> `User Snippets`来创建模板，输入模板名称，如`test`，并提供示例代码。删除自定义模板则需要找到存放路径手动删除，并重启VSCode。

17:36

生成自定义模板

File 👉 Prefereces 👉 User Snippets

出现如图界面（红色是我已经创建的模板），点击蓝色创建自己的模板

输入你模板的名字

test 就是我的模板名，根据绿色注释部分 “Example”可以以此类推自定义自己的模板

以一个 node 初学简单的模板为例

回车后生成如下所示

代码：

{
    "create a node template": {
        "prefix": "node",
        "body": [
            "// 导入 http 内置模块",
            "const http = require('http')",
            "",
            "// 创建一个 http 服务",
            "const server = http.createServer()",
            "",
            "// 监听 http 服务器的 require 请求",
            "server.on('request', function(req, res) {",
            "",
            "})",
            "",
            "// 指定端口号，并启动服务监听",
            "server.listen(3000, function() {",
            "   console.log('server listen at http://127.0.0.1:3000')",
            "})",
        ],
        "description": "Log output to console"
    }
}

下面是一个vue入门学习常用模板

代码如下：

{
    "html:5": {
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html>",
            "<head>",
                "\t<meta charset=\"UTF-8\">",
                "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
                "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
                "\t<title></title>",
                "\t<script src='lib/vue.js'></script>",
            "</head>",
            "<body>",
            "   <div id='app'>",
                "",
            "   </div>",
                "",
            "   <script>",
            "       var vm = new Vue({",
            "           el: '#app',",
            "           data: {",
                            "",
            "           },",
            "           methods: {",
                            "",
            "           }",
            "       });",
            "   </script>"
            "</body>",
            "</html>",
        ],
        "description": "HTML5"
    }
}