必须启用保存时自动修复,即配置"editor.formatOnSave":true、"editor.codeActionsOnSave":{"source.fixAll.eslint":true}和"editor.defaultFormatter":"esbenp.prettier-vscode",否则ESLint+Prettier仅标红不修复;同时需显式声明eslint.validate文件类型并确保存在.eslintrc.js等配置文件。

ESLint + Prettier 组合必须启用保存时自动修复
不启用 editor.formatOnSave 和 eslint.autoFixOnSave(已弃用,改用 editor.codeActionsOnSave),插件就只是“标红不干活”,等于白装。很多人装完插件只看到波浪线,却没意识到真正起效的环节在保存那一刻。
- 正确配置示例:
{ "editor.formatOnSave": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.defaultFormatter": "esbenp.prettier-vscode" } -
eslint.validate必须显式声明文件类型,否则 JSX、TSX 或.mjs文件可能被忽略;常见漏配:["javascript", "javascriptreact", "typescript", "typescriptreact"] - 如果保存后无反应,先检查项目根目录是否存在
.eslintrc.js或.eslintrc.json——没有配置文件,ESLint 就不会启动规则校验
JavaScript Booster 重构操作依赖光标位置和语义上下文
这个插件不是全局生效的“魔法按钮”,它只对当前光标所在行或选中代码块做语义分析。光标停在 if 关键字上才弹出 Replace with ?: ,停在字符串拼接表达式里才提供 Replace with template string。
- 常见误操作:把光标放在变量名中间(如
xiaodajiao的a字符上),灯泡不亮——必须停在完整语法单元起始处(函数名前、if前、var前) - 箭头函数转换仅支持单参数且单表达式返回的场景;若函数体含多语句或复杂逻辑,选项不会出现
- 它不修改作用域外变量,但会自动处理
const/let推断——比如把var a = 1;转成const a = 1;,前提是确认该变量后续未被重新赋值
Live Server 不是万能本地服务器,跨域和模块导入要额外处理
它解决的是 file:// 协议下 JS 无法加载模块或发起请求的问题,但默认不支持 import 语法的原生 ES 模块解析,也不代理 API 请求。
- 遇到
Uncaught TypeError: Failed to resolve module specifier,说明浏览器尝试用file://加载模块失败;解决方案:在index.html中加<script type="module">,或改用http://127.0.0.1:5500/启动 - 需要调用后端接口?Live Server 本身不带代理功能,得配合
http-proxy-middleware或换用json-server等独立服务 - 热重载只触发 HTML/CSS/JS 文件变更;修改
.json配置或.env文件不会刷新页面
hover 提示信息来自多个插件叠加,优先级由注册顺序决定
你在 package.json 上悬停看到的版本号、作者、官网链接,不是 VSCode 自带能力,而是某个插件(比如 npm 相关插件)注册了 registerHoverProvider 并返回 Markdown 内容。多个插件可同时提供 hover,VSCode 按注册顺序依次展示。
- 如果你自己写插件提供 hover,务必注意
document.getWordRangeAtPosition(position)返回的范围可能包含点号(如lodash.map),需手动截取有效标识符 - 悬停内容支持 Markdown,但不支持交互元素(按钮、输入框);想实现点击跳转,得用
vscode.Uri.parse('https://...')构造链接 - 调试 hover 逻辑时,
console.log输出会出现在开发者工具的 Console 面板,不是输出窗口——容易找错地方


















