vscode自己增加代码提示，提升效率

  以前一直用HBuilder和WebStorm写前端代码，现在看了一下最流行的前端编程工具应该是vscode了（所以我也改用了，其他的不知道，但是在window系统上运行速度绝对是最快的了，毕竟是都是微软出品嘛）。
  但是vscode的代码提示有很多不足的地方，在HBuilder和WebStorm中新建一个文件可以出来一个模板，但是vscode没有（不知道有没有同感的小伙伴），这样效率很低。

这里介绍下怎么配置代码提示：

比如想输入一个cl然后直接按Tab或Enter直接出来console.log()，或者输入vue直接出来完整的vue模板。

步骤: 文件→首选项→用户代码片段→选择JavaScript.json

image.png

选择JavaScript.json表示配置js的代码提示
在json中加入：

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

保存之后就可以在任何js代码片段中输入‘cl’之后按Tab或Enter就可以出来console.log()，并且$1表示鼠标停留位置，很方便。

---

有了这个之后，我们每次建vue文件就可以自动生成vue模板了，而且还可以设置好空格对齐。

步骤: 文件→首选项→用户代码片段→选择vue.json

在vue.json种加入：

    //输入‘vue’之后按 Tab就可以直接出来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就可以出来对齐好的vue模板。当然这是css版的，也可以自己配置sass，less等。

---

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

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

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

    //输入‘clrj’之后按 Tab就可以出来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就可以出来<!-- -->注释
    "Print to Notes": {
        "prefix": "<!",
        "body": [
            "<!--$1-->"
        ],
        "description": "Log output to Notes"
    },
    //输入‘vue’之后按 Tab就可以直接出来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就可以直接出来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就可以直接出来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"
    }
    
    
}

只要你嫌多的代码都可以用这种方式代写，从此代码如飞😀。