vscode vue1

1.!! tab  快速搭建html

2.script  tab  快速写script

3.插件：

1.HTML Snippets，

2.open in browser  右键在浏览器打开

3.live server  右键liveserver 

4.vetur 

5.vscode-icons  目录显示图标

6.vue 3 snippets  提示

7.自定义代码片段  -vs 左下角设置-用户代码片段-粘贴进去，html中vh 就是第一个，vn就是第二个

{
    // Place your vue 工作区 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
    // is left empty or omitted, the snippet gets applied to all languages. 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": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "Vue_HTML": {
        "prefix": "vh",
        "body": [
            "<!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>${TM_FILENAME_BASE}</title>",
            "    <script src=\"../js/vue.js\"></script>",
            "  </head>",
            "  <body>",
            "    <div id=\"root\">$0</div>",
            "    <script>",
            "      Vue.config.productionTip = false;",
            "      const vm = new Vue({",
            "        el: '#root',",
            "        data: {",
            "          $1",
            "        },",
            "      });",
            "</script>",
            "  </body>",
            "</html>"
        ],
        "description": "Vue_HTML"
    },
    "Vue_New": {
        "prefix": "nv",
        "body": [
            "      new Vue({",
            "        el: '#root',",
            "        data: {",
            "          $0",
            "        },",
            "      });",
        ],
        "description": "Vue_New"
    }

}

 8.注释：单行 Ctrl + /，取消一样。 块注释 alt+shift+A

posted @ 2022-09-10 12:23  今晚再打老虎  阅读(35)  评论(0)    收藏  举报