如何优雅地在mac上配置vscode的代码缩进格式化？

Question

新入vscode坑的前端菜鸟一枚，先谢过各路大神。
最近在用vue写一个项目，习惯用了代码保存自动格式化，奈何每次提交代码都会给同事造成一定冲突，
故求一settings.json能满足小弟心愿。

心愿：

1. command + s时保存自动格式化
2. HTML,JS,VUE,CSS,LESS的tab缩进为4格，保存时也按自动格式化4格来实现
3. VUE中HTML部分不强制换行
4. VUE中script部分按4格缩进来实现

已经按装插件，beautify,prettier,vetur
被这些插件搞得晕来晕去
为表诚意，贴上我的settings.json，求指点迷津

{
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Dracula",
    "editor.fontSize": 14,
    "workbench.editor.enablePreview": false,
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": true,
    "git.enabled": false,

    // 代码缩进
    // vscode默认启用了根据文件类型自动设置tabsize的选项
    "editor.detectIndentation": false,
    // 重新设定tabsize
    "editor.tabSize": 4,
    // #每次保存的时候自动格式化
    "editor.formatOnSave": true,
    // #每次保存的时候将代码按eslint格式进行修复
    // "eslint.autoFixOnSave": true,
    // // 添加 vue 支持
    // "eslint.validate": [
    //     "javascript",
    //     "javascriptreact",
    //     {
    //         "language": "vue",
    //         "autoFix": true
    //     }
    // ],
    //  #让prettier使用eslint的代码格式进行校验
    "prettier.eslintIntegration": true,
    //  #去掉代码结尾的分号
    //   "prettier.semi": false,
    //  #使用带引号替代双引号
    "prettier.singleQuote": true,
    //  #让函数(名)和后面的括号之间加个空格
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    // #这个按用户自身习惯选择
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto",
            "tab_size": 4
            // #vue组件中html代码格式化样式
        }
    },
    // "vueBeautify.format"
    "prettier.tabWidth": 4,
    "prettier.useTabs": true
}

Answer 1

自己来回答一下吧。经过本人研究，贴上settings.json
版本MAC下的vscode

   // 代码缩进
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.detectIndentation": false,
    "editor.tabSize": 4,
    "vetur.format.options.tabSize": 4,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "auto"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features",
    }

以下为js文件和vue文件效果图，并且command+s自动保存

Answer 2

你都装了beautify了就不能Shift+Option+F吗（手动狗头）