ESLint 和 Prettier 缺一不可：ESLint 检查代码逻辑错误，Prettier 统一格式；需正确配置规则、插件及冲突处理，确保二者协同生效。
ESLint 和 Prettier 不装，代码质量就缺了两条腿——一个管对错，一个管整齐，少一个都容易在 CI 或 Code Review 里被卡住。
ESLint 检测不到错误？先检查规则是否生效
常见现象是：写了 console.log 却没报黄线，或 var 声明没警告。这不是插件没装，而是规则没加载。
- 确认项目根目录有
.eslintrc.js或.eslintrc.cjs，且内容包含extends（如['eslint:recommended', 'plugin:vue/vue3-recommended']） - VSCode 设置里必须开启
eslint.enable（默认 true，但有时被其他插件覆盖） - 如果用 TypeScript，确保已安装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin，否则any类型、接口定义等不会校验 - 遇到 “Definition for rule ‘xxx’ was not found”，说明插件未正确安装或版本不匹配（比如用了 Vue 3 规则但装的是
eslint-plugin-vue@8而非@latest）
Prettier 格式化后代码变乱？多半是和 ESLint 冲突
典型表现：保存后引号自动改回双引号、分号忽有忽无、对象换行被强行压成一行。这不是 Prettier 有问题，而是它和 ESLint 的格式规则打架了。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends末尾加上'prettier'（顺序很重要，得放最后） - VSCode 的
editor.defaultFormatter要设为esbenp.prettier-vscode，不能设成 ESLint 插件 - 禁用 ESLint 的格式类规则，比如
quotes、semi、comma-dangle—— 这些全交给 Prettier 管 -
.prettierrc里别写和 ESLint 重叠的配置（如semi: false可以，但no-console: warn就不该出现在这里）
JavaScript Booster 能安全重构，但别信它全自动
它确实能一键把 function 转 =>、if-else 转三元、+ 拼接转模板字符串，但转换是否安全，取决于上下文。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 光标停在函数体内部时，灯泡可能不出现；必须选中整个函数声明或
if块才能触发 - 涉及副作用的操作（如
arr.push()、localStorage.setItem()）在三元转换中会被忽略，插件不会报错，但逻辑可能出错 - 箭头函数转换后，
this绑定会变，如果原函数依赖this指向实例，转完就崩 - 建议只对纯计算逻辑用，转完立刻跑单元测试或手动验证返回值
Vue/React 项目别漏掉框架专属插件
通用插件解决不了框架特有语法的校验和跳转，比如 <script setup></script> 里的 defineProps 类型推导、JSX 中 props 补全、v-model 事件名提示。
- Vue 3 项目必须用
Volar，不是Vetur；两者共存会导致类型提示失效、格式化错乱 - React 项目配
ES7+ React/Redux/React-Native snippets，输入rfc直接生成带PropTypes或 TS 接口的函数组件 - 路径别名跳转（如
@/components）需配合Path Intellisense+jsconfig.json中的compilerOptions.baseUrl和paths配置，否则 Ctrl+Click 白点 -
Vue Helper的alt+x扩选功能对 template 层嵌套标签特别有用，但仅限 .vue 文件，.tsx 里无效
真正难的不是装插件，是让它们彼此不打架、规则不抵消、提示不静默。每加一个插件，都要验证它是否真在起作用——看一眼编辑器右下角状态栏的 ESLint/Prettier 图标有没有绿色对勾，光标悬停时有没有预期的提示，保存后有没有按你想要的方式改代码。
