[疑难求助] sublime text3 emmet 插件 自动补全 html 文档标签缩进不规范的问题折磨到我心力交瘁

2018-04-12 09:05:14 +08:00
 429463267

[疑难求助] sublime text3 emmet 插件 自动补全 html 文档标签缩进不规范的问题折磨到我心力交瘁

1-问题描述: subli t3 3143 最新官方英文安装版,没有汉化,使用的 emmet 自动补全代码插件极大提高了撸码效率,但随之而来的问题折磨我好久,比如:我在 st3 新建文档后右下角切换格式为 html,然后输入 html 按下自动补全快捷键 alt+/ (我鸡贼的把 eclipse 快捷键都照搬过来了,来自 java 小萌新^_^),结果的画风如下:

规范化的 html 文档格式应该如下:

然后我怀疑是 st3 自带格式化功能执行过程中的 bug,但是不知如何修正。

接下来我看到了这个文档: https://gist.github.com/zxhfighter/00c1d140249215efd236

2-尝试解决过程: google 搜索“ sublime emmet 自动补全 html 标签 缩进 位置错误” ; google 搜索“ sublime 格式化 html 标签 缩进 位置错误” ; 结果研究了好久都没找到。

3--求助万能的 v2: 个人认为解决思路是修改 emmet 的自定义 html doctype 模板,或者是修改 st3 自带缩进规则,但是不知如何下手。。。

3485 次点击
所在节点    Sublime Text
17 条回复
429463267
2018-04-12 09:07:53 +08:00
如何添加附言?
429463267
2018-04-12 09:15:39 +08:00
@_@
bojackhorseman
2018-04-12 09:21:25 +08:00
以前我写页面看见 body 和 head 标签缩进和 html 一样,也曾经强迫症试着手动改成我认为对的格式,后来发现几乎所有的文本编辑器都是这么缩进的,就欣然接受了。
其实我想说,这样的缩进才是正确的。
429463267
2018-04-12 09:44:41 +08:00
@bojackhorseman

可是 head + body 标签都在 html 标签 的下级,理论上应该缩进一个 tab
429463267
2018-04-12 10:23:20 +08:00
v2 大神呢?
est
2018-04-12 10:25:53 +08:00
@429463267 其实缩进 2 空格更加普遍。。
Miary
2018-04-12 13:26:35 +08:00
一直都这样用的,没觉得哪里不对。。。
SuperMild
2018-04-12 13:55:20 +08:00
虽然是 html 人下级,但由于 html 下面基本上就这两货了,不缩进也不影响理解,还可以获得节省一层缩进的巨大好处。
429463267
2018-04-12 14:34:49 +08:00
查了一下官方的规范,w3c school 也没有明确说明 head body 标签到底应该怎么缩进
learnshare
2018-04-12 14:38:57 +08:00
这个是没错的,因为 <html> 内没有其他更多的标签了,<head> 和 <body> 放在第一级是更好的方式

然后,请用两个空格作为缩进
Zzde
2018-04-12 14:43:28 +08:00
四个空格看着舒服
rabbbit
2018-04-12 14:56:10 +08:00
安装 HTML-CSS-JS Prettify
修改 Preference > Package Settings > HTML/CSS/JS Prettify >Prettify Preferences -Default 选项
```
"indent_inner_html": true,
```
429463267
2018-04-12 15:55:07 +08:00
@rabbbit

报错,提示需要 node.js 支持
429463267
2018-04-12 15:56:26 +08:00
@rabbbit
而且和 st3 自带的 indent 功能会不会冲突?
rabbbit
2018-04-12 18:27:59 +08:00
@429463267 装 node.js 了吗?
要 node 和 js-beautify
https://segmentfault.com/a/1190000004403767
TimePPT
2018-04-12 19:20:24 +08:00
ST3 ——>Preferences ——>Package Settings ——>Emmet
把 Settings - Default 内容复制一份到 Settings - User
在配置文件里找到
"preferences": {
// "css.valueSeparator": ": ",
// "css.propertyEnd": ";"
},

在里面添加 "format.noIndentTags": ""

保存。

实测直接使用 html:5 然后自动生成有效,但 html 自动生成无效,暂时没找到啥原因。

参考资料:
https://github.com/sergeche/emmet-sublime#extensions-support
https://docs.emmet.io/customization/preferences/
429463267
2018-04-14 08:34:37 +08:00
又发现了新的问题,html 文档内的 scrpit 标签内容竟然被格式化成一行代码,结尾分号竟然不换行😂

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/446105

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX