以前一直用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"
}
}
只要你嫌多的代码都可以用这种方式代写，从此代码如飞😀。
