如何在Sublime中配置Prettier｜实现自动格式化前端代码

<p>在sublime中配置prettier实现自动格式化代码的步骤如下：1. 安装node.js并使用npm全局安装prettier；2. 通过package control安装“prettier - javascript formatter”插件；3. 配置用户设置启用保存时自动格式化功能；4. 可选配置.prettierrc文件自定义格式化规则。完成上述步骤后，即可在保存时自动统一格式化html、css、javascript、vue等前端文件。</p>

用 Sublime 写前端代码，想让代码格式更统一、更规范，Prettier 是个不错的选择。虽然 VS Code 已经集成了 Prettier 插件，但如果你还是习惯用 Sublime，也完全可以通过简单配置来实现自动格式化。

下面我来一步步说说怎么在 Sublime 中配置 Prettier，让它帮你自动整理 HTML、CSS、JavaScript、Vue 这些前端文件的格式。

安装 Node.js 和 Prettier

要运行 Prettier，首先得确保电脑上已经安装了 Node.js。如果还没装，可以去 Node.js官网 下载 LTS 版本安装包。

立即学习“前端免费学习笔记（深入）”；

安装完之后，打开终端（Mac/Linux）或命令提示符（Windows），输入以下命令全局安装 Prettier：

npm install -g prettier

这样就能在任意目录下使用 Prettier 了。可以用

prettier --version

安装 Sublime 插件：Sublime Text Prettier

Sublime 本身不自带对 Prettier 的支持，需要借助插件来调用它。推荐使用 Prettier - JavaScript formatter 插件（注意别和其它同名插件搞混了）。

安装方式如下：

• 打开 Sublime，按下

  Ctrl + Shift + P

  登录后复制

  登录后复制
  打开命令面板；
• 输入 “Install Package Control” 确保你已安装插件管理器；
• 再次打开命令面板，输入 “Install Package”，选择你要安装的插件；
• 搜索并安装 “Prettier - JavaScript formatter”。

安装完成后，你可以右键点击代码文件，选择 “Format Document with Prettier” 来手动格式化当前文档。

设置保存时自动格式化

手动格式化有点麻烦，我们更希望保存时自动格式化。Sublime 支持通过设置实现这个功能。

步骤如下：

1. 打开命令面板（

   Ctrl + Shift + P

   登录后复制

   登录后复制
   ）；
2. 输入 “Prettier” 并选择 “Set Prettier as Default Formatter”；
3. 打开 Sublime 的用户设置（Preferences > Settings）；
4. 在右侧用户设置中添加如下内容：

{
  "format_on_save": true,
  "auto_format_prettier": true
}

这样设置后，每次保存代码都会自动调用 Prettier 格式化。

注意：不同版本的插件设置项可能略有不同，比如有的是 "auto_format_on_save"，如果上面的不生效，可以查一下插件文档确认关键字。

配置 Prettier 规则（可选）

默认的格式化规则不一定符合你的项目风格，可以在项目根目录下创建

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80
}

这样就可以控制是否加分号、引号类型、换行长度等细节。

另外还可以创建

.prettierignore

基本上就这些步骤了。整个过程不算复杂，但很容易因为某个环节出错导致无法格式化。常见的问题包括：

• Node 或 Prettier 没有正确安装到系统路径；
• 插件未启用或快捷键冲突；
• 项目中有 ESLint 或其他格式化工具干扰；
• 自动保存设置没写对。

只要一步步检查，基本都能搞定。

以上就是如何在Sublime中配置Prettier｜实现自动格式化前端代码的详细内容，更多请关注php中文网其它相关文章！