V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
429463267
V2EX  ›  Sublime Text

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

  •  
  •   429463267 · 2018-04-12 09:05:14 +08:00 · 3454 次点击
    这是一个创建于 2399 天前的主题,其中的信息可能已经有所发展或是发生改变。

    [疑难求助] 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 自带缩进规则,但是不知如何下手。。。

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

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

    然后,请用两个空格作为缩进
    Zzde
        11
    Zzde  
       2018-04-12 14:43:28 +08:00 via iPhone
    四个空格看着舒服
    rabbbit
        12
    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
        13
    429463267  
    OP
       2018-04-12 15:55:07 +08:00
    @rabbbit

    报错,提示需要 node.js 支持
    429463267
        14
    429463267  
    OP
       2018-04-12 15:56:26 +08:00
    @rabbbit
    而且和 st3 自带的 indent 功能会不会冲突?
    rabbbit
        15
    rabbbit  
       2018-04-12 18:27:59 +08:00   ❤️ 1
    @429463267 装 node.js 了吗?
    要 node 和 js-beautify
    https://segmentfault.com/a/1190000004403767
    TimePPT
        16
    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
        17
    429463267  
    OP
       2018-04-14 08:34:37 +08:00 via Android
    又发现了新的问题,html 文档内的 scrpit 标签内容竟然被格式化成一行代码,结尾分号竟然不换行😂
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3633 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 04:21 · PVG 12:21 · LAX 20:21 · JFK 23:21
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.