1. 一键生成.vue模板
选择"Code"->"Preferences"->"User Snippets"
屏幕快照 2019-05-29 下午4.14.59.png
搜索框中输入vue，编辑器会自动打开一个名为vue.json的文件
将配置vue生成模板的json粘贴进去:
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" $0",
" </div>",
"</template>",
"",
"<script>",
" export default {",
"",
" }",
"</script>",
"",
"<style lang='stylus' scoped>",
"",
"</style>"
],
"description": "Log output to console"
}
}
$0表示生成代码后光标的位置，
prefix表示生成对应预设代码的命令（此处设置的vue）
最后新建.vue文件，按回车，页面结构自动生成。
2. 格式化.vue文件
VSCode下载vetur、prettier插件，由于我常用的是样式预处理器是styl，下载stylusSupremacy格式化样式。
下面是我的配置：
· vetur格式化插件配置
{
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.stylus": "stylus-supremacy",
}
· 配置.vue文件4个空格缩进
{
"prettier.tabWidth": 4,
"vetur.format.options.tabSize": 4,
"prettier.useTabs": true,
"vetur.format.options.useTabs": true
}
· script、style标签首层不缩进的问题
（也可以在setting中直接搜索indent来手动勾选）
屏幕快照 2019-05-29 下午3.49.50.png
对应的json如下：
{
"vetur.format.scriptInitialIndent": true,
"vetur.format.styleInitialIndent": true,
}
·stylus样式格式化的时候被自动加上大括号的问题
{
"stylusSupremacy.insertColons": false,
"stylusSupremacy.insertSemicolons": false,
"stylusSupremacy.insertBraces": false,
"stylusSupremacy.insertNewLineAroundImports": false,
"stylusSupremacy.insertNewLineAroundBlocks": false,
}
参考：
安装了Vetur之后的配置
vscode编辑器自动生成.vue文件三组标签结构的方法
Vue设置Script标签首层不缩进
VSCode中使用vetur插件格式化vue文件时，stylus代码会自动加上大括号、冒号和分号
