讲师中心 微信公众号
AI工具推荐 视频效率加速

sublime如何安装HtmlBeautify插件_sublime格式化HTML代码【教程】

浅磊大大_6440

浅磊大大_6440

发布时间:2026-01-24 15:07:33

|

138人浏览过

|

来源于php中文网

原创

HtmlBeautify已弃用,应安装HTML-CSS-JS Prettify插件;需配合prettier CLI使用,支持自定义HTML格式化配置与快捷键绑定,Vue/Svelte需额外设置parser。

sublime如何安装htmlbeautify插件_sublime格式化html代码【教程】

直接通过 Package Control 安装 HtmlBeautify

HtmlBeautify 不是 Sublime Text 内置插件,必须通过 Package Control 安装。如果你还没装 Package Control,先按 Ctrl+`(Windows/Linux)或 Cmd+`(macOS)调出控制台,粘贴官方安装脚本(注意:仅限最新稳定版 Sublime Text 4;Sublime Text 3 用户请确认已启用 HTTPS 支持)。

安装完 Package Control 后,按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS),输入 Package Control: Install Package 回车,再搜索 HTML-CSS-JS Prettify ——别搜 “HtmlBeautify”,它早已被弃用并重定向至此插件。

  • 旧名 HtmlBeautify 已下架,强行搜不到或安装失败是正常现象
  • HTML-CSS-JS Prettify 是当前唯一维护活跃、支持 Sublime Text 4 的替代方案
  • 安装后无需重启,但首次使用前建议关闭再打开 HTML 文件,避免语法高亮未生效

配置 prettier 路径和 HTML 格式化选项

该插件默认依赖外部 prettier CLI 工具,不是纯 Python 实现。如果没装 prettier,会报错:prettier not found. Please install it first.

解决方式有两种:

立即学习“前端免费学习笔记(深入)”;

  • 全局安装:npm install -g prettier(确保 prettier 在系统 PATH 中)
  • 项目级安装:npm install --save-dev prettier,然后在插件设置中指定 prettier_cli_path 为 ./node_modules/.bin/prettier

配置路径:菜单栏 → Preferences → Package Settings → HTML-CSS-JS Prettify → Set Configuration (Project) 或 Set Configuration (Syntax)。关键配置项包括:

  • "html": { "end_with_newline": true, "wrap_line_length": 120 }
  • "indent_size": 2(影响缩进,不是 tab_size)
  • "unformatted": ["pre", "code", "textarea"](防止代码块被意外换行)

快捷键冲突与手动触发格式化

默认快捷键 Ctrl+Shift+H(Windows/Linux)或 Cmd+Shift+H(macOS)可能被其他插件占用,比如 Emmet 或 SideBarEnhancements。如果按下无反应,先检查是否真触发了格式化(可观察状态栏是否有 Prettifying... 提示)。

Python Packaging
Python Packaging

深度Python打包工作流——pyproject元数据、依赖与可选额外项、构建后端、wheel、版本控制、发布及CI发布规范……

下载

推荐做法是显式绑定快捷键:

[
    {
        "keys": ["ctrl+alt+f"],
        "command": "html_css_js_prettify",
        "args": {"type": "html"}
    }
]

保存到 Preferences → Key Bindings 的右侧(用户键位文件)。注意:"type": "html" 必须明确指定,否则对 .html 文件可能误用 JS 规则。

  • 只选中部分 HTML 片段时,插件默认只格式化选区 —— 这是预期行为,不是 bug
  • 若整页没反应,检查当前视图的语法是否为 HTML(右下角显示,不是 Plain Text 或 PHP)
  • Vue/Svelte 文件需额外配置 "vue": { "parser": "vue" },否则 script/style 块可能错乱

常见错误:格式化后标签错位或属性换行异常

这不是插件 bug,而是 prettier 默认策略所致。例如:<div class="a b" id="x"> 可能被折成多行,即使没超 wrap_line_length。这是 prettier 对“可读性”的主观判断。

缓解方式有限,但可尝试:

  • 禁用自动换行:"htmlWhitespaceSensitivity": "ignore"(仅影响空格处理)
  • 强制单行属性:"printWidth": 999(不推荐,会影响 JS/CSS)
  • 改用 js-beautify 引擎(需在配置中设 "use_prettier": false,但会失去 Vue/JSX 支持)

真正难搞的是嵌套 <template> 或含 Liquid/JSX 表达式的 HTML —— 此时没有银弹,要么接受 prettier 的风格,要么切到专用编辑器(如 VS Code + Prettier 扩展)做混合工作流。

别指望一键还原手写 HTML 的“个性缩进”。它本质是代码格式化工具,不是样式美化器。

相关文章

HTML速学教程(入门课程)
HTML速学教程(入门课程)

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

下载

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

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

音述AI
音述AI Hot

一款AI音频处理工具,主要用于音述AI是一个以“用声音述说故事”为核心的 AI 音乐创作与声音分享社区,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
class在c语言中的意思
class在c语言中的意思

在C语言中,"class" 是一个关键字,用于定义一个类。想了解更多class的相关内容,可以阅读本专题下面的文章。

3256

2024.01.03

python中class的含义
python中class的含义

本专题整合了python中class的相关内容,阅读专题下面的文章了解更多详细内容。

286

2025.12.06

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

3836

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

1215

2023.07.28

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

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

1558

2023.08.03

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

9303

2023.08.17

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

860

2023.09.01

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2284

2023.09.04

Buffalo框架数据库开发全教程
Buffalo框架数据库开发全教程

本专题围绕Buffalo框架数据库开发,讲解database.yml多环境配置、soda与fizz迁移生成回滚、模型结构体标签、增删改查与条件查询、一对多与多对多关联、数据校验、回调钩子、事务处理及原生SQL执行能力。

120

2026.09.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
墨刀帮助中心
墨刀帮助中心

共0课时 | 0人学习

MyEclipse学习中心
MyEclipse学习中心

共0课时 | 0人学习

Apache Subversion 官方手册
Apache Subversion 官方手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn