Sublime Forum

Indentation broken on html tags containing hyphens

#1

Hello,

I tried to find a topic about this issue but I did only find stack overflow issues or very old posts, so sorry if it is a repost.

I am using the latest beta version build 3103, and have trouble indenting angular HTML with the reindent command (either from the edit>line>reident button or with the vim shortcut gg v G =, which is equivalent to ctrl+a and reindent command).

The tag plugin works fine but ctrl+shift+p tag enter for indenting my file is not a decent workflow, so I am not looking for a quickfix, I need the reindent command to work fine.

Here is a sample of code :

<test> ....<test2> ....</test2> </test> <with-hyphen> <test2> </test2> </with-hyphen>
(I can’t show you indentation so I added points instead, but that’s the idea)

The issue seems to be related to hyphenation in tags. The editor color scheme also has a weird behaviour, only the “md” or “st” part is colored as a tag, and the hyphen and the rest of the tag is ignored, it might be related.
Angular heavily relies on hyphens for directive names.

Anyway, thanks for keeping on developing this great editor, I was tired of Atom bad Ubuntu support and crappy vim mode.

0 Likes
How to auto indent tag with colons?
#2

Confirmed to also affect build 3109.

The reason is that the batchIncreaseIndentPattern in the HTML package Miscellaneous.tmPreferences file contains the regex ([A-Za-z0-9]+) - which won’t match hyphens. You can change it to ([A-Za-z0-9-]+) to fix the problem.

To do this:

  • Ensure you have PackageResourceViewer installed from Package Control
  • From the Command Palette, select PackageResourceViewer: Open Resource
  • Select HTML
  • Select Miscellaneous.tmPreferences
  • Find (without regex enabled) ([A-Za-z0-9]+)
  • Change it to ([A-Za-z0-9-]+)
  • Save it
  • Reindent your html with hyphens and smile :slightly_smiling:
0 Likes
Angular Material - Issues Indenting and Attribute Display
#3

Thanks for this very quick answer, it did work fine.
I also needed to remove the HTML5 package I installed from there https://github.com/mrmartineau/HTML5 in order to get it working.

Edit : however it did not correct bad syntax coloration, it might be hardcoded elsewhere
Edit 2: same process as you described, but at line 148 of HTML.sublime-syntax, there is also this regexp with a colon “(</?)([a-zA-Z0-9:]+)” but also without hyphen, I corrected with “(</?)([a-zA-Z0-9:-]+)”, it corrects the coloration

1 Like
#4

This has now been fixed for everyone (from the next build) - https://github.com/sublimehq/Packages/commit/f422bc2a8cb353910e038b70a8dd3da1d0bb649c

0 Likes