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 报错等。
立即学习“Java免费学习笔记（深入）”；
- 确保
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 里内联的 <script> 和 <style> 块，其语法校验由不同语言服务分别处理，ESLint 管不到 script 块里的变量未定义，Prettier 也只按 HTML 模式格式化 style 块。这种边界情况，得靠多层配置协同，不是开一个开关就能解决的。
