VSCode需手动设置语言模式并配置files.associations绑定扩展名，安装ESLint、Prettier、Auto Rename Tag三大核心扩展，正确配置settings.json中formatOnSave、quoteStyle及语言专属设置，避免格式化冲突与校验重复。

如何让 VSCode 正确识别并高亮 HTML/CSS/JS 文件

VSCode 默认就能识别 .html、.css、.js 文件，但常见问题是：打开一个没有后缀的文件（比如 index），或后缀拼错（如 .htmll），导致语法高亮失效、 Emmet 不触发、智能提示缺失。

• 右下角状态栏点击当前语言模式（如 “Plain Text”），手动选择 HTML / CSS / JavaScript
• 永久绑定扩展名：在设置中搜索 files.associations，添加规则，例如：

  "files.associations": {
    "*.ht": "html",
    "styles": "css",
    "script": "javascript"
  }

• 避免用空格或中文命名文件——某些插件（如 Prettier）会因路径解析失败而静默退出

必须安装的三个核心扩展

不装这些，写前端就是“裸奔”：没有格式化、没有实时校验、没有片段补全。

• ESLint：提供 JS 语法与风格实时检查，需本地或全局安装 eslint 包，否则报错 ESLint server is not running
• Prettier：统一代码格式，建议设为默认格式化工具，在设置里启用 editor.defaultFormatter 并设为 esbenp.prettier-vscode
• Auto Rename Tag：改开标签时自动同步闭标签，对嵌套深的 div 结构特别省心

注意：Live Server 虽常用，但它只是起一个本地 HTTP 服务，不参与代码质量控制，属于可选辅助工具。

关键设置项（settings.json）怎么配才不踩坑

很多问题其实源于几个开关没开对，比如保存时不格式化、缩进混乱、JSX 报错等。

• 确保 editor.formatOnSave 为 true，否则 Prettier 白装
• JS/TS 项目务必加：

  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single"

  ，否则 ESLint 的 quotes 规则和 Prettier 冲突
• 若写 Vue 或 JSX，需额外指定：

  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.vue$",
        "cmd": "prettier --write ${file}"
      }
    ]
  }

  （配合 Run on Save 扩展）
• 禁用自带 JS 校验（避免和 ESLint 重复报错）：javascript.validate.enable 设为 false

为什么保存后代码没变、或者格式化崩了

最常发生的不是配置错了，而是多个格式化工具打架，或者配置没生效到对应语言作用域。

• 检查右键菜单 → “Format Document With…”，确认选中的是 Prettier，而不是 Microsoft’s TypeScript Language Features
• 在 .vscode/settings.json 中为特定语言单独配置，比全局设置更可靠：

  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

• 如果用了 package.json 中的 prettier 配置（如 .prettierrc），VSCode 会优先读取它——此时修改 settings.json 里的 Prettier 选项可能无效

复杂点在于：HTML 里内联的 和 块，其语法校验由不同语言服务分别处理，ESLint 管不到 script 块里的变量未定义，Prettier 也只按 HTML 模式格式化 style 块。这种边界情况，得靠多层配置协同，不是开一个开关就能解决的。