vscode 前端配置编辑器(vue)

习惯使用插件：

说明：

1. Auto Rename Tag -自动完成另一侧标签的同步修改。
2. Beautify -格式化代码，beautify插件支持自定义格式化代码规则
3. colorhighlight 直观看到你定义的颜色
4. ESLint 校验
5. stylus css支持
6. vetur VUE语法高亮、智能感知、Emmet等，包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）

第2和第5配合可以实现css代码用颜色区分

最后配置格式化json，没有绝对标准，主要是要团队统一

{
    // 保存时格式化
    "editor.formatOnSave": true,
    // 格式化vue文件使用vetur
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    // 让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    // 让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    //vue的模板文件中的 html 使用自带的 js-beautify-html 进行格式化
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // vue tab 大小为2个空格
    "vetur.format.options.tabSize": 4,
    // vutur 覆盖默认设置
    "vetur.format.defaultFormatterOptions": {
        // 让html的attributes不换行，看起来会更美观
        "js-beautify-html": {
            "wrap_line_length": 240,
            "wrap_attributes": "auto",
            "end_with_newline": false
        }
    }
}