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 转三元、+ 拼接转模板字符串，但转换是否安全，取决于上下文。

创意前端视觉设计

在创建或重塑需要独特视觉方向、应避免通用 AI 生成审美的网站、落地页、仪表盘、UI 组件、海报或应用时使用。

下载

• 光标停在函数体内部时，灯泡可能不出现；必须选中整个函数声明或 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 图标有没有绿色对勾，光标悬停时有没有预期的提示，保存后有没有按你想要的方式改代码。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！