??以前一直用HBuilder和WebStorm寫前端代碼，現(xiàn)在看了一下最流行的前端編程工具應(yīng)該是vscode了（所以我也改用了，其他的不知道，但是在window系統(tǒng)上運(yùn)行速度絕對(duì)是最快的了，畢竟是都是微軟出品嘛）。
??但是vscode的代碼提示有很多不足的地方，在HBuilder和WebStorm中新建一個(gè)文件可以出來(lái)一個(gè)模板，但是vscode沒(méi)有（不知道有沒(méi)有同感的小伙伴），這樣效率很低。

這里介紹下怎么配置代碼提示：

比如想輸入一個(gè)cl然后直接按Tab或Enter直接出來(lái)console.log()，或者輸入vue直接出來(lái)完整的vue模板。

步驟: 文件→首選項(xiàng)→用戶代碼片段→選擇JavaScript.json

image.png

選擇JavaScript.json表示配置js的代碼提示
在json中加入：

    //輸入‘cl’之后按 Tab就可以出來(lái)console.log
    "Print to console": {
        "prefix": "cl",
        "body": [
            "console.log('$1')"
        ],
        "description": "Log output to console"
    },

保存之后就可以在任何js代碼片段中輸入‘cl’之后按Tab或Enter就可以出來(lái)console.log()，并且$1表示鼠標(biāo)停留位置，很方便。

有了這個(gè)之后，我們每次建vue文件就可以自動(dòng)生成vue模板了，而且還可以設(shè)置好空格對(duì)齊。

步驟: 文件→首選項(xiàng)→用戶代碼片段→選擇vue.json

在vue.json種加入：

    //輸入‘vue’之后按 Tab就可以直接出來(lái)vue模板
    "Print to vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>",
            "      ",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "    data() {",
            "      return{}",
            "    },",
            "    methods:{}",
            "}",
            "</script>",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to vue template"
    },

保存之后就可以在任何js代碼片段中輸入‘cl’之后按Tab或Enter就可以出來(lái)對(duì)齊好的vue模板。當(dāng)然這是css版的，也可以自己配置sass，less等。

下面是我的配置：
JavaScript.json:

{
    //輸入‘cl’之后按 Tab就可以出來(lái)console.log
    "Print to console": {
        "prefix": "cl",
        "body": [
            "console.log('$1',)"
        ],
        "description": "Log output to console"
    },

    //輸入‘clr’之后按 Tab就可以出來(lái)console.log
    "Print to console result": {
        "prefix": "clr",
        "body": [
            "console.log('result',$1)"
        ],
        "description": "Log output to console result"
    },

    //輸入‘clrj’之后按 Tab就可以出來(lái)console.log
    "Print to console result JSON": {
        "prefix": "clrj",
        "body": [
            "console.log('result',JSON.stringify($1))"
        ],
        "description": "Log output to console result JSON"
    },
}

vue.json

{
    //輸入‘<!’之后按 Tab就可以出來(lái)<!-- -->注釋
    "Print to Notes": {
        "prefix": "<!",
        "body": [
            "<!--$1-->"
        ],
        "description": "Log output to Notes"
    },
    //輸入‘vue’之后按 Tab就可以直接出來(lái)vue模板
    "Print to vue template": {
        "prefix": "vue",
        "body": [
            "<template>",
            "    <div>",
            "      ",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "    data() {",
            "      return{}",
            "    },",
            "    methods:{}",
            "}",
            "</script>",
            "<style scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to vue template"
    },
    //輸入‘vueless’之后按 Tab就可以直接出來(lái)vue模板
    "Print to vue less template": {
        "prefix": "vue",
        "body": [
            "<!--$1-->",
            "<template>",
            "    <div>",
            "      ",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "    data() {",
            "        return{}",
            "    },",
            "    methods:{}",
            "}",
            "</script>",
            "<style lang='less' scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to vue less template"
    },
    //輸入‘vuescss’之后按 Tab就可以直接出來(lái)vue模板
    "Print to vue scss template": {
        "prefix": "vue",
        "body": [
            "<!--$1-->",
            "<template>",
            "    <div>",
            "      ",
            "    </div>",
            "</template>",
            "<script>",
            "export default {",
            "    data() {",
            "      return{}",
            "    },",
            "    methods:{}",
            "}",
            "</script>",
            "<style lang='scss' scoped>",
            "",
            "</style>"
        ],
        "description": "Log output to vue scss template"
    }
    
    
}

只要你嫌多的代碼都可以用這種方式代寫，從此代碼如飛??。