eslint必须配置.eslintrc.js等项目级配置文件才能自动修复,否则仅标红不修复;需配合"editor.codeactionsonsave": {"source.fixall.eslint": true}启用保存时修复,且规则须标记为fixable。

ESLint 必须配 .eslintrc.js,否则只标红不修复
装了 ESLint 插件但没配置规则文件,它只会标出语法问题(比如 undefined variable),但不会自动修复。真正起作用的是项目根目录下的 .eslintrc.js 或 .eslintrc.json。
常见错误现象:保存后没反应、console.log 被标黄但删不掉、no-unused-vars 报错却无法自动删变量。
- 必须手动创建
.eslintrc.js,内容至少包含module.exports = { extends: ['eslint:recommended'] }; - 若用 React,加
'plugin:react/recommended';用 TypeScript 就加'plugin:@typescript-eslint/recommended' - 搭配
eslint-config-prettier包,禁用和 Prettier 冲突的规则(比如引号、分号)
Prettier 保存即格式化,但得关掉 editor.formatOnType
editor.formatOnSave 设为 true 是关键,而 editor.formatOnType 建议关掉——否则每敲一个字符都触发格式化,光标乱跳、输入卡顿。
性能影响明显:大型 JS 文件(>500 行)开启 formatOnType 后,VSCode CPU 占用会飙升,尤其在老机器上。
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 在
settings.json中显式写:"editor.formatOnSave": true,"editor.formatOnType": false - 确保 Prettier 是默认格式化工具:右键编辑器 →「Format Document With…」→ 选「Prettier」并设为默认
- 如果用了 ESLint 的自动修复(
eslint --fix),别让 Prettier 和 ESLint 同时格式化同一行,容易来回改
路径导入别手写,Path Intellisense 要开 path-intellisense.mappings
写 import utils from '../../utils/index.js' 这种路径,不仅易错,还难维护。插件 Path Intellisense 能自动补全,但默认不识别 @/ 别名或 src/ 别名。
使用场景:Vue/React 项目里大量用 @/components/xxx 或 src/api,不配映射就只能补全物理路径。
- 在
settings.json加配置:"path-intellisense.mappings": { "@": "${workspaceFolder}/src", "assets": "${workspaceFolder}/src/assets" } - 映射值必须是绝对路径或带
${workspaceFolder}的相对路径,不能写./src - 重启 VSCode 或重载窗口后生效,补全时输入
@/就能直接看到components/、views/目录
JS 片段别靠记,JavaScript (ES6) code snippets 比手敲快 3 倍
写 for...of、async/await、解构赋值这些高频结构,纯手敲既慢又容易漏括号或分号。官方推荐的 JavaScript (ES6) code snippets 插件提供标准化缩写。
容易踩的坑:装了插件但没触发——因为没在 JS 文件里敲缩写,或者当前语言模式不是 JavaScript。
- 确认右下角状态栏显示「JavaScript」,不是「Plain Text」或「TypeScript」
- 常用缩写:
imp→ import … from …、clg→ console.log()、fre→ for (const … of …)、afc→ async function () {} - 如果和 TypeScript 项目混用,建议额外装
ES7+ React/Redux/React-Native snippets,避免rfc(函数组件)被 JS 片段拦截
.eslintrc.js,一个没关 formatOnType,再好的插件也只发挥一半作用。










