ESLint是防止代码腐化的基础防线，必须配合项目级配置文件；Prettier是风格仲裁者，统一格式但不管逻辑；Quokka用于实时验证JS片段；Better Comments将注释视觉化提升协作效率。
ESLint：不配它，no-unused-vars 类错误只能靠肉眼抓
JS 项目里变量声明了没用、函数写了没调、console.log 残留——这些低级但高频的问题，ESLint 能在你敲完就标红。它不是“锦上添花”，而是防止代码腐化的基础防线。
- 必须配合项目级配置文件（如
.eslintrc.js或.eslintrc.cjs），光装插件没用 - 推荐继承
eslint:recommended+ 框架插件（如plugin:react/recommended），避免从零写规则 - 遇到
Parsing error: Cannot use import statement outside a module？检查parserOptions.ecmaVersion是否设为2022或更高 - 和 Prettier 冲突时，务必安装
eslint-config-prettier并加入extends，否则格式化和校验会互相打架
Prettier：别再争论分号要不要加，交给它统一干掉
团队里有人写分号、有人不写，有人用单引号、有人双引号——Prettier 不讨论“好不好看”，只执行“必须这样”。它不是美化工具，是风格仲裁者。
- 启用
"editor.formatOnSave": true后，保存即生效，无需手动触发 -
.prettierrc中关键参数：semi: false（禁用分号）、singleQuote: true（强制单引号）、tabWidth: 2 - 注意：Prettier 不检查逻辑错误，它只管“怎么写”，不管“写得对不对”——这点和 ESLint 完全互补
- 如果保存后没反应，检查
"editor.defaultFormatter"是否设为esbenp.prettier-vscode
Quokka.js：想验证一行 Array.from({length: 5}, (_, i) => i * 2) 返回啥？不用跑整个文件
它不是调试器，也不是 REPL，而是在编辑器里实时跑 JS 片段的“沙盒”。适合快速验证表达式、函数行为、边界 case，尤其对函数式操作、数组方法链特别友好。
- 新建文件后按
Cmd+K J（macOS）或Ctrl+K J（Win/Linux）直接启动 Quokka 环境 - 支持
//?语法查看表达式结果，比如[1,2,3].map(x => x * 2) //? [2,4,6] - 不支持
import语句（除非配了 babel 插件），纯表达式和函数最稳 - 注意内存占用：长期开着多个 Quokka 文件可能拖慢 VS Code，用完记得关
Better Comments：把 // TODO 和 // FIXME 从文本变成视觉信号
注释不是装饰，是线索。Better Comments 把不同意图的注释染成不同颜色，让“待办”、“疑问”、“高危”、“提醒”一眼可辨，比靠搜索 TODO 靠谱得多。
- 默认支持
!（红色）、?（蓝色）、*（绿色）、^（黄色）等前缀，可自定义正则匹配模式 - 配置项
betterComments.tags里改颜色时，注意用十六进制色值（如"#ff5555"），不是英文名 - 和 Todo Tree 插件搭配使用效果更佳：前者染色，后者聚合列表，但单独用 Better Comments 已解决 80% 的注释识别问题
- 别滥用
!：它代表紧急问题，不是所有 TODO 都值得标红
真实项目里，ESLint 和 Prettier 是底线，Quokka 是效率加速器，Better Comments 是协作润滑剂。四者装齐后，你会发现很多“口头约定”的规范自动落地了，而真正该花精力的地方，只剩业务逻辑本身。
