.prettierrc(或prettier.config.js)是prettier-atom实际生效的规则源头,atom界面设置仅作fallback;它必须为json/yaml/js格式且文件名严格为.prettierrc,不读package.json中prettier字段。

prettier-atom 的 .prettierrc 是实际生效的规则源头
Atom 里 JavaScript/TypeScript/JSX 的格式化行为,最终由 .prettierrc(或 prettier.config.js)决定,不是 Atom 设置界面里的滑块或勾选框。界面上的“Tab Width”“Semicolons”等选项只是 fallback,只在项目里没配 .prettierrc 时才起作用。
常见错误是改了插件设置却没生效——因为项目根目录已有 .prettierrc,它完全覆盖界面配置。
-
.prettierrc必须是 JSON、YAML 或 JS 模块格式,且文件名严格为.prettierrc(不接受.prettier.json等变体) - 若用 JS 导出方式,必须是
module.exports = { ... },ESM 的export default不被识别 - Atom 不读取
package.json中的prettier字段,这点和 CLI 行为不一致
缩进、引号、分号这些基础项怎么配才不翻车
JavaScript 格式化最常调的几个参数,直接对应代码可读性底线。配错会导致团队提交冲突或 ESLint 报错反复拉锯。
推荐最小可用配置(存为 .prettierrc):
{
"semi": false,
"singleQuote": true,
"tabWidth": 2,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"printWidth": 80
}
-
"semi": false:禁用分号,和 ESLint 的semi: ["error", "never"]对齐;设为true但 ESLint 没配,保存后立刻报错 -
"singleQuote": true:强制单引号,避免和双引号混用;若项目已有大量双引号字符串,开启前先跑一次prettier --write批量转换 -
"printWidth": 80:超过 80 字符自动换行,但 JSX 中长属性链可能被拆得难以阅读,可酌情提到 100
为什么 .editorconfig 里的 indent_size 没用上
.editorconfig 和 .prettierrc 不是并列关系,而是分层协作:.prettierrc 管理语言级格式(如对象换行、括号间距),.editorconfig 只管编辑器基础行为(换行符、是否删尾空格、文件末尾空行)。
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
缩进宽度冲突时,.prettierrc 的 tabWidth 和 useTabs 强制胜出。例如:
-
.prettierrc设"tabWidth": 2,.editorconfig设indent_size = 4→ 最终缩进是 2 个空格 -
.prettierrc没设end_of_line,但.editorconfig有end_of_line = lf→ 换行符仍按 LF 处理 - 两者都设了
insert_final_newline,以.prettierrc为准;若只在.editorconfig里设,Prettier 仍会保留该行为
建议把 .editorconfig 当作跨编辑器兜底层,只留 charset、end_of_line、insert_final_newline、trim_trailing_whitespace 这四项。
Vue 文件里的 script 块能被正确格式化吗
可以,但有两个硬性前提:文件语法必须识别为 Vue Component(右下角状态栏显示 “Vue Component”,不是 “HTML” 或 “Plain Text”),且 .prettierrc 中启用了对 .vue 的支持(默认已支持)。
常见失效场景:
- 文件扩展名是
.vue,但 Atom 没装language-vue插件 → 状态栏显示 “HTML”,prettier-atom直接跳过 - Vue 文件中 script 块用了
lang="ts",但.prettierrc没配 TypeScript 支持(其实不用额外配,只要prettier-atom装了,它自动识别lang属性) - script 块内嵌了
// prettier-ignore注释,整块被跳过 —— 这是 Prettier 原生行为,不是 Atom 插件问题
验证方法:打开一个 .vue 文件,按 Ctrl+Shift+P 输入 “Prettier: Format” 手动触发,看是否成功。失败就回头检查语法识别和插件依赖。










