Sublime Text配合Prettier实现多语种前端项目的统一格式化

在Sublime Text里搭配Prettier实现多语言前端项目的统一格式化，听起来是个标准操作，但实际配置起来，很多开发者会莫名其妙地卡住——格式化没反应、特定文件被跳过、或者保存时静默失败。其实问题的根源往往集中在一两个配置细节上，搞清楚了，几分钟就能解决。

prettier_cli_path 填错是 90% 格式化失效的根源

Sublime 不会自动继承 shell 的 PATH，你在终端能跑 prettier 命令，不代表 JsPrettier 插件能调用它。最简单的验证方式：在 Sublime 控制台（Ctrl+`）里执行 import subprocess; subprocess.run(["prettier", "--version"])，如果报 FileNotFoundError，那问题就出在路径上。

• 先在终端运行 which prettier（macOS/Linux）或 where prettier（Windows），拿到真实路径，比如 /opt/homebrew/bin/prettier 或 C:UsersAliceAppDataRoamingnpmprettier.cmd
• 把这个路径**一字不差**粘贴进 JsPrettier 的用户设置里："prettier_cli_path": "/opt/homebrew/bin/prettier"
• 用 nvm 管理 Node 版本的 macOS 用户，必须从终端启动 Sublime：open -a "Sublime Text"，否则 which prettier 都找不到

Vue 和 TypeScript 文件不格式化？检查 additional_extensions 和 parser

JsPrettier 默认只认 .js、.ts、.html 等常见后缀，.vue 和部分 .tsx 文件会被直接跳过——这不是插件 bug，是配置遗漏。

• 在 JsPrettier 设置中添加 "additional_extensions": ["vue"]，让插件识别 .vue 文件
• TypeScript 文件报 Prettier: Invalid parser，大概率是 prettier 版本太低，或者没有显式指定 parser："prettier_options": {"parser": "typescript"}
• HTML 格式化后空格错乱？prettier v3+ 默认关闭自动推断，需要显式设置："html_whitespace_sensitivity": "css"

保存时没反应？先看右下角语言标识和 auto_format_on_sa ve 开关

JsPrettier 只对已识别为有效语法类型的文件生效。右下角显示 Plain text 或 Text，哪怕文件名是 index.ts，它也完全不触发。

• 手动点击右下角语言名 → 选择 TypeScript 或 Vue Component（需安装 Vue Syntax Highlight 插件），确认状态栏变色
• 用户设置里必须有 "auto_format_on_sa ve": true（注意不同插件的拼写略有差异，JsPrettier 用这个，不是 format_on_sa ve）
• 别同时开启多个格式化插件（比如 SublimeLinter-prettier + JsPrettier），它们会互相压制，留一个即可

.prettierrc 文件位置不对，项目级规则就白配了

JsPrettier 查找 .prettierrc 的逻辑很保守：只从当前文件所在目录开始，向上逐级找一层。如果你的 Sublime 工作区打开的是子目录（比如 src/），而 .prettierrc 在项目根目录，它根本读不到。

• .prettierrc 必须放在你用 Sublime 打开的最外层文件夹里（即工作区根目录），不是 Git 仓库根目录
• 推荐用 JSON 格式：.prettierrc.json，避免 JS 文件因 require 报错导致静默失败
• 插件设置里的 prettier_options 是全局兜底，项目规则优先级更高；别在插件里写 "semi": false 这类风格项，全交给 .prettierrc

实际项目里最常卡住的点，不是不会配，而是 prettier_cli_path 指向了旧版本 bin 脚本、.prettierrc 放错了层级、或者右下角语言没切对——这三处一错，格式化就彻底静默，连错误提示都没有。