sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

首先安装node.js和Prettier,再通过Package Control安装JsPrettier插件,配置prettier_cli_path、node_path及auto_format_on_save为true,确保保存时自动格式化JS代码。

sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

sublime Text 虽然轻量,但通过插件可以很好地支持现代前端开发需求。要实现 JS 代码保存时自动用 Prettier 格式化,需结合 Node.js 环境与 Package Control 插件管理来配置。以下是完整步骤。

安装必要工具和插件

确保你的系统已安装以下内容:

  • node.js:Prettier 是基于 Node 的工具,需先安装 Node.js(建议 v14 以上)。
  • Package Control:Sublime 的插件管理器,通常默认已安装。
  • Prettier 命令行工具:在终端执行:
npm install -g prettier

或项目内局部安装:

npm install --save-dev prettier

接着在 Sublime 中安装关键插件:

  1. Ctrl+Shift+P 打开命令面板。
  2. 输入 Install Package,选择对应选项。
  3. 搜索并安装 JsPrettier(推荐名称为 “JsPrettier” 的插件,由 jdc0589 开发)。

配置 JsPrettier 插件

安装完成后,需要配置插件路径和格式化规则。

  1. 打开 Sublime 设置菜单:Preferences → Package Settings → JsPrettier → Settings
  2. 修改 User 配置部分,例如指定 Prettier 可执行文件路径:
{   "prettier_cli_path": "/usr/local/bin/prettier",   "node_path": "/usr/local/bin/node",   "auto_format_on_save": true,   "auto_format_on_save_excludes": [     "*/node_modules/*",     "*/dist/*"   ] }

注意路径根据系统调整:

  • macos/linux:一般为 /usr/local/bin/prettier
  • windows:可能为 C:UsersYourNameAppDataRoamingnpmprettier.cmd,可用 where prettier 查找路径。

启用保存时自动格式化

关键配置项是 auto_format_on_save,设为 true 即可在保存文件时自动格式化。

如果你只想对 JS、JSX、vue 等特定文件生效,可配合 Sublime 的语法检测机制使用。确保文件右下角显示 “javaScript” 或 “Vue Component” 等正确语法类型。

sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

集简云

软件集成平台,快速建立企业自动化与智能化

sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化22

查看详情 sublime怎么配置js prettier自动格式化_Sublime集成Prettier实现JS代码自动格式化

如果只想部分项目开启,可在项目根目录添加 .prettierrc 文件定义规则,例如:

{   "semi": true,   "singleQuote": true,   "tabWidth": 2,   "trailingComma": "es5" }

这样 JsPrettier 会自动读取本地配置。

测试与调试

打开一个 JS 文件,写几行不规范的代码,如:

function test(){console.log('hello');}

保存文件(Ctrl+S),如果配置正确,代码会自动变成:

function test() {   console.log('hello'); }

若未生效,检查:

  • 终端运行 prettier --version 是否正常输出版本号。
  • Sublime 控制台(View → Show Console)是否有报错信息。
  • 确认 JsPrettier 的配置路径无误。

基本上就这些。配置一次后,后续项目都能享受 Prettier 带来的代码整洁体验。

上一篇
下一篇
text=ZqhQzanResources