关键在于让eslint专注逻辑检查、prettier专管格式,通过安装官方eslint和prettier扩展、项目级安装eslint prettier eslint-config-prettier eslint-plugin-prettier依赖,配置.eslintrc.cjs启用plugin:prettier/recommended并确保eslint-config-prettier置于extends末尾以禁用冲突规则,创建.prettierrc定义格式细节,在.vscode/settings.json中启用"source.fixall.eslint"且关闭"editor.formatonsave",并设置.eslintignore排除node_modules等目录,重启vs code后保存文件即可自动修复逻辑错误且不报格式警告。
在 macos 上用 vs code 配合 eslint 和 prettier 实现统一代码规范,关键不是装完插件就完事,而是让 eslint 专注检查逻辑问题(比如未使用变量、潜在错误),prettier 专管格式(缩进、引号、分号、换行等),两者不打架、各司其职。
安装必要插件和项目依赖
先确保 VS Code 里装了两个官方扩展:ESLint(作者 Dirk Baeumer)和 Prettier(作者 Esben Petersen)。别装“Prettier ESLint”这类合体插件,容易出问题。
然后在项目根目录终端执行:
- npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
- 推荐版本:ESLint v8+、Prettier v3+,全局安装没用,VS Code 默认优先调用项目内本地二进制
配置 ESLint 接管格式校验权
创建 .eslintrc.cjs(注意是 .cjs 后缀,适配现代 Node 环境),内容如下:
macOS 微信消息自动化工具。通过 GUI 自动化实现:发送消息给指定联系人、读取聊天内容、监控新消息。适用于需要自动化微信操作的场景,如定时发送、批量回复、消息备份等。依赖 peekaboo 进行屏幕截图和 UI 交互。仅支持 macOS。开源地址:https://github.com/chairmanmia...
- module.exports = { extends: ['eslint:recommended', 'plugin:prettier/recommended'], plugins: ['prettier'], rules: { 'prettier/prettier': 'error' } };
- eslint-config-prettier 必须放在 extends 数组最后,它会自动禁用所有与 Prettier 冲突的格式类规则(如 quotes、semi、indent 等)
- 不用手动写一堆 "quotes": "off",否则容易漏、难维护
定义 Prettier 格式细节并绑定保存动作
在项目根目录建 .prettierrc,写入你团队约定的风格,例如:
- {"semi": false, "singleQuote": true, "tabWidth": 2, "printWidth": 100}
- VS Code 设置里不要重复指定格式选项(比如别在 settings.json 里再设 "editor.tabSize")
- 在 .vscode/settings.json 中启用保存时修复:
"editor.codeActionsOnSave": { "source.fixAll.eslint": true } - 同时关闭 Prettier 自动格式化:
"editor.formatOnSave": false
排除干扰并验证效果
确保项目根目录有 .eslintignore,至少包含:
- node_modules/
- dist/
- build/
改完配置后重启 VS Code 窗口(不是重载窗口),打开一个 JS 文件,故意写错缩进或引号,保存一下——应该自动修正且不报格式类 ESLint 警告。










