Visual Studio Code中.scss/.css/.html文件格式化异常求助

DevOps 小满

2026-8-5

解决VSCode中SCSS/CSS/HTML格式化缩进异常问题

问题根源

配置中"editor.language.brackets": []清空了所有语言的括号定义，导致VSCode无法识别大括号结构，进而无法自动生成缩进。
HTML文件被关联为twig，但未为twig指定默认格式化器，SCSS/CSS的格式化功能也因括号配置失效受影响。

修复步骤

删除无效配置
移除settings.json中的"editor.language.brackets": []行，恢复VSCode对括号结构的识别能力。
更新格式化配置
将settings.json替换为以下内容，为SCSS、CSS、twig（关联的HTML）明确指定Prettier作为格式化器，并开启formatOnType：

{
    "editor.bracketPairColorization.enabled": true,
    "workbench.editor.highlightModifiedTabs": true,
    "workbench.colorTheme": "Moonlight II Italic",
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.tabSize": 2,
    "svelte.language-server.runtime": "/usr/local/bin/node",
    "npm.keybindingsChangedWarningShown": true,
    "window.zoomLevel": 1,
    "files.trimFinalNewlines": true,
    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnType": true
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnType": true
    },
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[twig]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnType": true
    },
    "files.associations": {
        "*.html": "twig"
    },
    "emmet.includeLanguages": {
        "twig": "html"
    },
    "editor.formatOnType": true
}