Vetur插件

Vue编写的插件

颜色主题

点击左下角小齿轮点击颜色主题

接着点击

代码主题颜色就变成下图中:

当然也可以选择其他主题。

自定义代码片段

在之前的笔记中，当新建文件需要手动输入初始化vue代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
</html>
<script>
    new Vue({
        el:"#app",
        data:{
    
        },
        methods:{
    
        }
    })
</script>

可以利用vscode将常用的代码模板输入进去，之后可以快速使用代码模板。

点击左下角小齿轮选择代码片段：

搜索html.json:

将常用模板填入:

{
"vue_learn_template":{
    "prefix": "vm",
    "body": [
        "<!DOCTYPE html>",
        "<html lang=\"en\">",
        "<head>",
        "\t<meta charset=\"UTF-8\">",
        "\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
        "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
        "\t<title>Document</title>",
        "\t<script src=\"js/vue.js\"></script>",
        "</head>",
        "<body>",
        "\t<div id=\"app\">",
        "",
        "\t</div>",
        "</body>",
        "</html>",
        "<script>",
        "\tnew Vue({",
        "\t\tel:\"#app\",",
        "\t\tdata:{",
        "\t",
        "\t\t},",
        "\t\tmethods:{",
        "\t",
        "\t\t}",
        "\t})",
        "</script>",
    ]
}
}