在sublime中配置prettier实现自动格式化代码的步骤如下：1. 安装node.js并使用npm全局安装prettier；2. 通过package control安装“prettier – javascript formatter”插件；3. 配置用户设置启用保存时自动格式化功能；4. 可选配置.prettierrc文件自定义格式化规则。完成上述步骤后，即可在保存时自动统一格式化html、css、javascript、vue等前端文件。
用 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 支持通过设置实现这个功能。
步骤如下：
打开命令面板（
Ctrl + Shift + P
）；输入 “Prettier” 并选择 “Set Prettier as Default Formatter”；打开 Sublime 的用户设置（Preferences > Settings）；在右侧用户设置中添加如下内容：
{ "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｜实现自动格式化前端代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/102252.html
微信扫一扫 
支付宝扫一扫 
