atom中不存在prettier-eslint插件,需分别配置prettier-atom(格式化)和linter-eslint(校验),禁用二者自动修复功能、安装eslint-config-prettier、显式配置parser及文件扩展名,并禁用atom-beautify以防冲突。

Atom 没有官方的 prettier-eslint 插件——这个名字是常见误解,实际不存在这个包。你要的是 prettier-atom 和 linter-eslint 两个插件协同工作,但必须手动解耦职责,否则保存时代码会来回跳、格式错乱、甚至丢括号。
prettier-atom 和 linter-eslint 不是“一键融合”,而是要分责运行
很多人搜 prettier-eslint 是想让格式化 + 校验一步到位,但 Atom 生态里没有这种合体插件。真实可行路径是:用 prettier-atom 负责重写代码结构(缩进、换行、括号位置),用 linter-eslint 只负责标红报错(比如变量未定义、prop 类型错误),两者不许互相修改同一行。
-
prettier-atom开启 Format on Save,关掉它的 ESLint integration(Settings → prettier-atom → Disable “ESLint Integration”) -
linter-eslint关掉 Fix errors on save(Settings → linter-eslint → Uncheck “Fix errors on save”) - 在项目
.eslintrc中加入"extends": ["eslint:recommended", "prettier"],并安装eslint-config-prettier—— 这步不是可选,是必须,否则 ESLint 规则和 Prettier 冲突,比如 ESLint 要加分号,Prettier 去掉它,保存一次加、再保存一次删
Vue / TSX 文件格式化失效?检查 parser 和 language ID
Vue 单文件(.vue)里的 <script></script> 块、TypeScript JSX(.tsx)默认可能被跳过,因为 prettier-atom 不自动识别它们的 parser。
- 项目根目录加
.prettierrc,内容必须显式声明:{"parser": "typescript"}(对.tsx)或{"parser": "vue"}(对.vue) - Atom 右下角状态栏确认语法名是 Vue Component 或 TypeScript JSX,不是
Plain Text或HTML;点一下切换过去 -
prettier-atom设置页的 File Extensions 列表里补上vue(注意不带点),否则插件压根不触发
保存没反应?三处配置必须同时对齐
不是插件没装,而是 prettier-atom 在“静默拒绝”你当前文件——它只在条件全部满足时才干活。
-
Format on Save在插件设置里已勾选(Settings → Packages → prettier-atom) - Atom 编辑器全局缩进设置(Settings → Editor)必须与
.prettierrc一致:Tab Length=tabWidth值,且Soft Tabs必须开启(Prettier 不支持硬 tab) - Node.js 环境路径要通:打开 Developer Tools(View → Developer → Toggle Developer Tools),在 Console 里执行
require.resolve('prettier'),如果报Cannot find module 'prettier',就得去 prettier-atom 设置页填绝对路径,比如/usr/local/bin/prettier或./node_modules/.bin/prettier
为什么 atom-beautify 必须禁用?
它和 prettier-atom 都监听 core:save 事件,但 Atom 只让第一个注册的插件响应,另一个完全静默。你无法预测哪次保存触发了谁,结果就是:有时格式正常,有时缩进全乱,有时 JSON 被转成多行又变单行。
- Settings → Packages → atom-beautify → 关掉 Beautify on Save
- 更稳妥的做法是直接禁用整个
atom-beautify插件,尤其当你只写前端项目时,它带来的语言覆盖优势毫无意义 - 别信“共存没问题”的说法——冲突不是偶发,是必然,只是表现延迟或不明显
最易被忽略的点:.prettierrc 必须放在 package.json 同级目录,且不能是 JS 格式(prettier-atom 只读 JSON/YAML/TOML);而 linter-eslint 对 Vue 的 script 块校验,默认关闭,得手动打开 Settings → linter-eslint → Lint HTML Files。











