vscode+eslint 如何设置格式化HTML和scss代码呢

Question

最近项目中对代码格式要求越来越严格了，之前在网上找的那一套不符合规范，但是又没有找到合适。现在js格式很正常，就是HTML和scss不符规范（下图中格式化后的HTML标签没有对齐，就是属性对齐），求大神分享vscode中setting如何配置HTML和SCSS的设置，要求格式化后标签对齐（最后是我当前的setting配置）。

{
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "window.zoomLevel": 1,
    "editor.fontSize": 16,
    "workbench.colorTheme": "Monokai",
    "editor.tabSize": 4,
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,
    "prettier.eslintIntegration": true,
    "prettier.singleQuote": false,
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "prettier.semi": false,
    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        },
        "html",
    ],
    "workbench.editor.enablePreview": false,
    "terminal.integrated.rendererType": "dom",
    "workbench.statusBar.feedback.visible": false,
    "editor.mouseWheelZoom": true,
    "editor.renderWhitespace": "all",
    "breadcrumbs.enabled": true,
    "editor.renderControlCharacters": true,
    "files.autoGuessEncoding": true,
    "search.followSymlinks": false,
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "explorer.confirmDelete": false,
    // #这个按用户自身习惯选择 
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // #让vue中的js按编辑器自带的ts格式进行格式化 
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
            // #vue组件中html代码格式化样式
        }
    },
    // 格式化stylus, 需安装Manta's Stylus Supremacy插件
    "stylusSupremacy.insertColons": false, // 是否插入冒号
    "stylusSupremacy.insertSemicolons": false, // 是否插入分好
    "stylusSupremacy.insertBraces": false, // 是否插入大括号
    "stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
    "stylusSupremacy.insertNewLineAroundBlocks": false // 两个选择器中是否换行
}