Sublime如何实现代码自动格式化?Sublime安装Prettier插件详细步骤

大磊酱_3306

大磊酱_3306

2026-04-12

132人浏览

原创

jsprettier 是 sublime text 中最稳定、适配性最好的 prettier 封装插件,依赖本地 prettier cli 而非内置 node 环境;需确保 node 和 prettier 在终端可用,正确配置 prettier_cli_path 绝对路径及 use_editorconfig、ignore_project_config 以支持项目级配置。

sublime如何实现代码自动格式化?sublime安装prettier插件详细步骤

JsPrettier 是当前 Sublime Text 中最稳定、适配性最好的 Prettier 封装插件,它不依赖 Sublime 内置 Node 环境,而是调用你本地已安装的 prettier CLI 工具。只要 prettier 命令在终端能运行,JsPrettier 就能用 —— 但跳过环境检查或填错路径,90% 的“装了没反应”问题就出在这儿。

确认 node 和 prettier CLI 真的可用

Sublime 插件不会帮你装 Node.js,也不会自动补 PATH。它只认系统命令行里能直接敲出来的 prettier。

  • 打开终端,依次运行:node -v、npm -v、prettier --version
  • 如果 prettier --version 报 command not found,说明 npm 全局 bin 路径没进系统 PATH:
    – macOS/Linux:运行 npm config get prefix,然后把 bin 目录(如 /opt/homebrew/bin 或 ~/.npm-global/bin)加进 ~/.zshrc;
    – Windows:检查 %AppData% pm 是否在系统环境变量 PATH 中
  • 验证成功后,再运行 which prettier(macOS/Linux)或 where prettier(Windows),记下完整路径 —— 后面配置要用绝对路径

安装 JsPrettier 插件(别选错名字)

Package Control 里搜到的 “Prettier”、“Prettier-Sublime”、“SublimeLinter-prettier” 都不是推荐项。它们要么多年未维护,要么逻辑复杂、默认不读项目配置。

Waifulabs
Waifulabs

Waifu Labs是一款用于生成和定制二次元角色头像的 AI 动漫肖像工具。

下载
  • 按 Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(macOS)打开命令面板
  • 输入 Package Control: Install Package → 回车 → 搜索 JsPrettier → 点击安装
  • 安装完不用重启,但首次配置前建议关掉再重开一次,确保插件加载了当前 shell 的环境变量
  • 装好后,右键一个 .js 文件,菜单里应出现 Format Code with Prettier 选项

配置 prettier_cli_path 和 auto_format_on_save

默认设置里 auto_format_on_save 是 false,且 prettier_cli_path 留空时并不总能自动找到 CLI —— 尤其是 macOS 使用 zsh 启动 Sublime、或 Windows 用户用非管理员权限安装 npm 时。

  • 菜单栏 → Preferences → Package Settings → JsPrettier → Settings – User
  • 填入以下内容(注意 JSON 语法,布尔值不加引号,字符串值必须用双引号):
{
  "auto_format_on_save": true,
  "auto_format_on_save_excludes": ["*/node_modules/*", "*/dist/*", "*/build/*"],
  "custom_file_extensions": ["js", "jsx", "ts", "tsx", "json", "css", "scss", "vue", "mdx"],
  "prettier_cli_path": "/usr/local/bin/prettier"
}
  • prettier_cli_path 必须填你刚才 which prettier 得到的**绝对路径**;Windows 用户路径末尾要带 .cmd,例如:C:\Users\YourName\AppData\Roaming\npm\prettier.cmd
  • auto_format_on_save_excludes 强烈建议加上,否则保存 node_modules 下文件可能卡死编辑器
  • 改完保存,立刻生效;无需重启,但若之前 Sublime 是从 Dock 或开始菜单点开的,PATH 可能没继承,这时就得从终端执行 subl 启动

让项目级 .prettierrc 生效的关键开关

JsPrettier 默认只用内置 fallback 规则(比如 semi: true, tabWidth: 2),不会自动读取项目根目录下的 .prettierrc 或 prettier.config.js —— 这是和终端 prettier CLI 行为不一致的最常见原因。

  • 在同个 Settings – User 配置中,加入 "use_editorconfig": true 并确保 "ignore_project_config": false
  • 或者更直接:把 .prettierrc 放在项目根目录,内容为标准 JSON 格式,例如:
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}
  • 注意:如果文件在子目录中(比如 src/utils/index.ts),插件会向上查找直到磁盘根目录;但遇到软链接或挂载点,某些旧版本可能中断查找
  • 格式化结果仍和 CLI 不一致?打开 Sublime 控制台(Ctrl+`),看有没有 JsPrettier ERROR —— 大部分静默失败都藏在这里,不是弹窗提示
真正容易被忽略的是:Sublime 启动方式决定它能不能读到你的 shell 环境变量。从终端运行 subl 才能继承 PATH,从 Dock 或桌面图标点开则不能。这点在 macOS 上尤其关键,也是为什么很多人明明终端里 prettier --version 成功,但在 Sublime 里却一直报 command not found。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

sublime

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

1995

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2822

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

976

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3179

7

format在python中的用法
format在python中的用法

Python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.31

1629

3

python中的format是什么意思
python中的format是什么意思

python中的format是一种字符串格式化方法,用于将变量或值插入到字符串中的占位符位置。通过format方法,我们可以动态地构建字符串,使其包含不同值。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.06.27

1211

7

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.18

909

5

500error怎么解决
500error怎么解决

500error的解决办法有检查服务器日志、检查代码、检查服务器配置、更新软件版本、重新启动服务、调试代码和寻求帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.10.25

2520

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1598

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程