vscode 格式化插件

Question

使用vscode开发vue项目，目前.vue文件无法一键同时格式化html，js,css。

1. 使用过vetur，暂未经过配置，只能格式化html,js,css其中一个，另外两个格式乱的不能用，如果用这个的话，怎么配置？；
2. 曾经用过vue-beauty，以前没问题的，但现在有严重bug，不能用，还有其他可用的插件么；
3. vscode有没有一键导出配置的功能或者插件，能导入大佬的设置和插件就好了。

Answer 1

"prettier.singleQuote": true,
"prettier.semi": false,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatterOptions": {
    "wrap_attributes": "force-aligned"
},

这是自己搜索到的，复制这个配置，重启后，我的需求基本满足了。

Answer 2

贴一下我在写 vue 时候的 vscode 的配置过程，ESlint 是建议的

1. 需插件安装

• Vetur : 语法高亮等功能
• ESlint : 代码风格检测
• Prettier formatter for Visual Studio Code: 为了配合 ESlint

2. 插件设置

• vue 的模板格式化：
  "vetur.format.defaultFormatter.html":"js-beautify-html"
• vue 模板的 eslint 校验

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue",
        {
            "language": "html",
            "autoFix": true
        }
    ]

• Prettier 设置去除不必要空格："prettier.semi": false
• Prettier 设置格式化后"变'："prettier.singleQuote": true
• 在 vscode 中排除 node_modules 等文件夹：

"files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/package-lock.json": true,
},

• 以新行结束

"html.format.endWithNewline": false

完整的 vue 相关用户设置如下

"files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
    "**/package-lock.json": true
},
"vetur.format.defaultFormatter.html": "js-beautify-html",
"editor.formatOnSave": true,
"prettier.semi": false,
"prettier.singleQuote": true,
"html.format.endWithNewline": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    "vue",
    {
        "language": "html",
        "autoFix": true
    }
]