怎么用scss编写vscode的html,vscode+eslint 如何设置格式化HTML和scss代码呢

最近项目中对代码格式要求越来越严格了，之前在网上找的那一套不符合规范，但是又没有找到合适。现在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 // 两个选择器中是否换行

}