eslint 和 prettier 必须一起装,因为 eslint 负责检测 undefined 变量、== 误用等逻辑问题,不处理格式;prettier 专管缩进、引号、换行等格式,不管语义错误;二者分工互补,缺一不可,且需通过 eslint-config-prettier 对齐规则避免冲突。

为什么 ESLint 和 Prettier 必须一起装
ESLint 检查 undefined 变量、== 误用、遗漏 return 等逻辑问题,但不碰代码格式;Prettier 负责缩进、括号换行、引号风格等,但不管语义错误。两者分工明确,缺一不可。
常见错误现象:ESLint 报 'x' is not defined,但代码看着“很整齐”——说明 Prettier 没拦住语法错误;反之,Prettier 把 if (x) { return y; } 格式化成单行后,ESLint 却因缺少花括号报错——说明规则冲突没对齐。
- 必须在 VSCode 设置里启用
"editor.formatOnSave": true和"eslint.enable": true - 安装
ESLint后,项目根目录需有.eslintrc.js或.eslintrc.cjs(否则只标红不提示修复) - 若用
Prettier+ESLint,要额外装eslint-config-prettier关闭 ESLint 中与 Prettier 冲突的规则
Code Runner 运行 JS 的真实限制
Code Runner 点击右上角 ▶ 就能跑 console.log,但它默认在 OUTPUT 面板执行,不是终端(Terminal),所以以下情况会失败:
-
process.stdin读取用户输入(直接卡住,无响应) -
require('fs')读写文件时路径解析异常(它用的是插件工作区路径,非当前文件所在目录) -
import语法报ReferenceError: require is not defined(它默认用 Node.js CommonJS 模式,不支持 ESM)
解决办法:右键 → “Run Code” 时,先确认当前文件是纯脚本(无 import/export),且不依赖交互输入;否则切到终端手动运行 node app.js。
Live Server 对 JS 文件的加载时机陷阱
Live Server 启动后自动打开浏览器并刷新,但它只监听 HTML 文件变更,**不感知 .js 文件改动是否已生效**。你改完 app.js 保存,页面可能仍运行旧逻辑。
典型表现:console.log("v2") 已写进文件,但浏览器控制台还打印 "v1"。
- 原因:浏览器缓存了旧的
app.js,尤其当 HTML 中 script 标签没加版本参数时 - 临时解法:Ctrl+F5 强制硬刷新(跳过缓存)
- 长期解法:在 HTML 中改为
<script src="app.js?v=1.0.1"></script>,每次改完手动升版号 - 更稳做法:用
Live Server的设置开启"liveSassCompile.settings.autoprefix": true类似机制——但它原生不支持 JS 缓存控制,得靠自己加参数
F12 跳转不到定义?检查这三件事
F12 在函数名上跳转失败,90% 不是插件问题,而是环境没准备好:
- 项目没初始化
package.json(VSCode 的 JS 语言服务依赖此文件识别模块结构) -
app.js是独立文件,但调用的utils.js未被require()或import,语言服务无法建立引用链 - 用了动态拼接函数名,比如
const fnName = 'getData'; window[fnName]();—— 这种写法天然不可跳转
验证方式:打开命令面板(Ctrl+Shift+P),输入 Developer: Toggle Developer Tools,看 Console 是否报 Failed to load source map。如果有,说明 JS 文件没生成 sourcemap,跳转能力受限。
真正卡住新手的,往往不是语法本身,而是工具链中某个环节静默失效——比如 ESLint 规则没加载、Live Server 缓存没清、F12 背后依赖的 TypeScript 服务没启动。盯住控制台和状态栏右下角的小图标,比死记快捷键管用得多。











