VSCode配置.vue文件生成以及格式化

1. 一键生成.vue模板

选择"Code"->"Preferences"->"User Snippets"

屏幕快照 2019-05-29 下午4.14.59.png

搜索框中输入vue，编辑器会自动打开一个名为vue.json的文件
将配置vue生成模板的json粘贴进去:

{
      "Print to console": {
        "prefix": "vue",
        "body": [
            "",
            "",
            "",
            "",
            ""

        ],
        "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代码会自动加上大括号、冒号和分号