eslint 与 prettier 需协同分工:eslint 负责代码质量检查与逻辑错误识别,prettier 专司格式统一;必须通过 eslint-config-prettier 消除规则冲突,并在 vscode 中设 prettier 为默认格式化工具、禁用 eslint 的自动格式化,方可避免保存时代码“抖动”。

ESLint 要开,但不能只靠它自动修复
Prettier 要设为默认格式化工具,否则和 ESLint 规则打架
JavaScript (ES6) code snippets 装上就生效,clg + Tab 立刻生成 console.log(),不用再手敲
插件不是越多越好,JS 开发真正卡脖子的环节就那几个:写错语法没人提醒、格式一改就和队友冲突、路径拼错导致模块加载失败、嵌套太深看不清括号配对。下面这几个插件,每个都对应一个具体痛点,装了就能立刻少踩坑。
为什么 ESLint 配置比安装更重要
装完 ESLint 插件却没反应?大概率是项目里缺 .eslintrc.js 或 package.json 里没声明 eslintConfig。VSCode 不会自己猜你用哪套规则。
- 必须在项目根目录放配置文件,哪怕只是最简版:
module.exports = {<br> extends: ['eslint:recommended'],<br> rules: { 'no-console': 'warn' }<br>}; -
eslint-config-prettier必须装,否则Prettier和ESLint的格式规则会互相覆盖,保存时代码反复“抖动” - VSCode 设置里要开
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },不然只报错不修 - React/Vue 项目记得额外装
eslint-plugin-react或eslint-plugin-vue,否则 JSX/模板语法不检查
Prettier 和 ESLint 共存的硬性条件
两者不是二选一,而是分工:Prettier 只管“怎么排版”,ESLint 只管“有没有 bug 和风格问题”。但默认情况下它们会抢着格式化同一行代码。
- 必须在 VSCode 设置里指定
"editor.defaultFormatter": "esbenp.prettier-vscode" - 必须关掉
editor.formatOnSave对 ESLint 的调用,只留 Prettier 格式化 -
.prettierrc里别写和 ESLint 冲突的规则,比如semi: false就得同步关掉 ESLint 的semi规则 - 如果用
eslint --fix命令行修复,确保eslint-config-prettier已加入extends数组,否则命令行和编辑器行为不一致
路径补全为什么总失效
Path Intellisense 在深度嵌套的 monorepo 或 TypeScript 项目里容易失灵,不是插件坏了,而是它默认只认 ./ 开头的相对路径。
- 导入时必须从
import后开始输,比如import utils from './,按./才触发补全 - 如果项目用了
baseUrl(如 tsconfig.json 里),需手动在settings.json加:"path-intellisense.mappings": {<br> "@": "${workspaceFolder}/src"<br>} - 遇到
Cannot find module报错,先检查路径补全出来的路径是否真实存在,有时它会推荐已删除的旧文件 - Vue/React 项目中,
@/components/xxx.vue这类别名路径,Path Intellisense默认不识别,得配合Vetur或ESLint的路径解析插件
括号和标签重命名看似小功能,实则防低级错误
Bracket Pair Colorizer 在 VSCode 1.60+ 已被内置,叫 editor.guides.bracketPairs,开开关就行;Auto Rename Tag 则专治 HTML/JSX 标签漏改。
- JSX 中重命名
<div> 为 <code><section></section>,闭合标签自动同步,但key、ref等属性不会动——这是设计如此,不是 bug - 嵌套三层以上的箭头函数或对象字面量,光靠肉眼很难确认
)和}是否配对,此时必须开editor.guides.bracketPairs: true,颜色比括号形状更可靠 -
Auto Rename Tag对自定义元素(如<my-button></my-button>)支持有限,遇到不生效时,优先检查是否在 .vue 或 .tsx 文件中,这些文件类型需要额外语言服务支持
真正影响开发节奏的,从来不是功能多寡,而是某个插件在关键时刻掉链子——比如保存时格式错乱、路径补全指向不存在的文件、括号高亮突然失效。这些插件的配置项不多,但每一项都得对齐项目实际结构,而不是照抄网上的通用教程。











