??以前一直用HBuilder和WebStorm寫前端代碼珊蟀，現(xiàn)在看了一下最流行的前端編程工具應(yīng)該是vscode了（所以我也改用了，其他的不知道外驱，但是在window系統(tǒng)上運(yùn)行速度絕對是最快的了育灸，畢竟是都是微軟出品嘛）腻窒。
??但是vscode的代碼提示有很多不足的地方，在HBuilder和WebStorm中新建一個(gè)文件可以出來一個(gè)模板磅崭，但是vscode沒有（不知道有沒有同感的小伙伴）定页，這樣效率很低。
這里介紹下怎么配置代碼提示：
比如想輸入一個(gè)cl然后直接按Tab或Enter直接出來console.log()绽诚，或者輸入vue直接出來完整的vue模板典徊。
步驟: 文件→首選項(xiàng)→用戶代碼片段→選擇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表示鼠標(biāo)停留位置恩够，很方便卒落。
有了這個(gè)之后，我們每次建vue文件就可以自動(dòng)生成vue模板了蜂桶，而且還可以設(shè)置好空格對齊儡毕。
步驟: 文件→首選項(xiàng)→用戶代碼片段→選擇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模板。當(dāng)然這是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"
}
}
只要你嫌多的代碼都可以用這種方式代寫疆股，從此代碼如飛??费坊。
