Visual Studio Code修改HTML Snippets插件中默认模板内容

最新推荐文章于 2024-07-16 12:10:33 发布

DexterLien

最新推荐文章于 2024-07-16 12:10:33 发布

阅读量2.5w

点赞数 5

文章标签：前端开发 vsc

本文链接：https://blog.csdn.net/lpwmm/article/details/77885520

版权

软件技巧专栏收录该内容

8 篇文章 0 订阅

订阅专栏

最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动帮你把一个HTML5标准标签模板给填充好,但是有一个小问题就是,自动填充的效果是这样的:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="css/style.css" rel="stylesheet">
    </head>
    <body>

    </body>
</html>

这里lang=”en”,我想修改默认填充成lang=”zh-CN”,小折腾了一下,找到了这个插件的配置文件位于

C:\Users\Dexter\.vscode\extensions\abusaidm.html-snippets-0.1.0\snippets\snippets.json

打开这个文件,找到定义html5映射的部分,修改如下,重启一下VSC,再输入html5就变成想要的效果了

"html5": {
    "prefix": "html5",
    "body": [
        "<!DOCTYPE html>",
        "<html lang=\"$1zh-CN\">",            ~~这里原来是en~~
        "\t<head>",
        "\t\t<title>$2</title>",
        "\t\t<meta charset=\"UTF-8\">",
        "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
        "\t\t<link href=\"$3css/style.css\" rel=\"stylesheet\">",
        "\t</head>",
        "\t<body>",
        "\t$4",
        "\t</body>",
        "</html>"
        ],
    "description": "HTML - Defines a template for a html5 document",
    "scope": "text.html"
    },

补充一下

也可以在文件-首选项-用户自定义代码段,找到HTML后,在html.json配置文件里面写上自己常用的代码段,例如下面这个是我修改的包含Vue.js引用的HTML5代码模板:

{
    /*
    // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
    // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
*/
    "Vue": {
        "prefix": "vue",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"zh-CN\">",
            "\t<head>",
            "\t\t<title>$1</title>",
            "\t\t<meta charset=\"UTF-8\">",
            "\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "\t\t<script src=\"https://cdn.bootcss.com/vue/2.2.2/vue.min.js\"></script>",
            "\t</head>",
            "\t<body>",
            "\t$2",
            "\t</body>",
            "</html>"
        ],
        "description": "vue - Defines a template for a vue & html5 document"
    }
}

这里需要注意一下,代码中`$1,$2`标注的位置是自动插入代码段之后光标的位置,`$1`是默认位置,`$2`是按tab键之后会跳转到的下一个位置

DexterLien

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
Visual Studio Code修改HTML Snippets插件中默认模板内容

最近在熟悉用VSC做前端开发编辑器,发现snippets这个功能很好用,就是自动帮你输入HTML标签,安装HTML Snippets插件(0.1.0)后,直接在代码里面输入html5然后敲回车就会自动帮你把一个HTML5标准标签模板给填充好,但是有一个小问题就是,自动填充的效果是这样的:<!DOCTYPE html><html lang="en"> <head> <titl
复制链接

扫一扫