ESLint 必须配 .eslintrc.js,因为插件本身不内置规则,仅作为“翻译器”将配置文件中的规则实时传递给编辑器;无配置文件则无法触发检查,Problems 面板始终为空,且保存后无提示、规则完全失效。

ESLint 为什么必须配 .eslintrc.js 而不是只装插件
只安装 ESLint 插件但没配 .eslintrc.js,等于给车装了刹车片却不连液压管——界面上看不到报错,Problems 面板永远空着。VSCode 的 ESLint 扩展本身不带规则,它只是个“翻译器”:把项目里 .eslintrc.js 中定义的规则,实时喂给编辑器做诊断。
常见错误现象:保存后没提示、no-unused-vars 不标黄、semi 规则完全不生效。
- 确保配置文件在项目根目录(和
package.json同级),名字必须是.eslintrc.js、.eslintrc.json或.eslintrc.cjs - 如果用 TypeScript,需额外安装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin - VSCode 设置里要明确启用校验语言:
"eslint.validate": ["javascript", "javascriptreact", "typescript"]
Prettier 和 ESLint 一起用,eslint-config-prettier 不是可选项
ESLint 和 Prettier 规则打架是高频翻车点。比如 ESLint 要求 quotes: ["error", "single"],Prettier 默认用双引号——你一保存,代码来回改,光标乱跳,甚至出现格式化后 ESLint 报错、再保存又修复的死循环。
根本解法不是调哪个工具的优先级,而是让 ESLint 主动“让位”:
- 安装
eslint-config-prettier:npm install --save-dev eslint-config-prettier - 把它加进
.eslintrc.js的extends数组末尾,顺序不能错:["eslint:recommended", "prettier"] - VSCode 设置中禁用 ESLint 的自动修复格式化功能:
"eslint.format.enable": false,只留 Prettier 做格式化
javascript (ES6) code snippets 怎么避免写错缩写
这个插件靠缩写触发,但缩写不是全凭记忆——比如 clg 是 console.log(),imr 是 import React from 'react',但输成 cllg 或 imrr 就不会弹出。更麻烦的是,不同插件可能注册相同缩写,导致行为不一致。
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
实操建议:
- 输入缩写后按
Tab触发,别回车;回车会直接换行,片段不展开 - 不确定缩写时,按
Ctrl+Space呼出智能提示,里面会列出当前上下文匹配的所有 snippet - 禁用冲突插件:如果同时装了多个 snippet 插件(如 React Snippets + ES6 Snippets),优先保留一个,避免
rfc这类缩写在函数组件和 React.Fragment 之间摇摆
Live Server 启动后页面空白?先查这三件事
右键 HTML 文件选 Open with Live Server,浏览器打开却是空白页或报 net::ERR_FILE_NOT_FOUND,大概率不是插件坏了,而是路径或引用链断了。
检查顺序:
- 确认 HTML 中 JS/CSS 的
src或href是相对路径(如./app.js),不是绝对路径(/js/app.js)或错误拼写 - 看浏览器控制台是否有 404:点击 Network 标签页,刷新页面,看哪些资源状态码是 404,对应修正路径
- Live Server 默认端口是
5500,如果被占用,它会自动换到5501,但 HTML 里硬编码了http://localhost:5500/xxx就会失败——一律用相对路径
复杂点在于,有些框架(如 Vite)自带服务,和 Live Server 冲突;而某些构建产物(dist 目录)必须用构建后的入口 HTML 启动,直接打开原始 index.html 会找不到打包后的 JS 文件。这类情况,插件再好也救不了路径逻辑本身。

















