8

I'm trying to use the auto-indentation feature in Sublime Text 3 for HTML. I've got some block comments in the html and selecting Edit>Line>Reindent works until it hits a block comment.

Try to reindent the example here:

<html>
<head>
<title>Testing Indent</title>
</head>
<body>
<table>
<tr>
<td>
Cell 1
</td>
</tr>
<tr>
Cell 2
<!--Block Comment Here
And a Little More Here
-->
</tr>
</table>
</body>
</html>

and it turns out like this:

<html>
<head>
    <title>Testing Indent</title>
</head>
<body>
    <table>
        <tr>
            <td>
                Cell 1
            </td>
        </tr>
        <tr>
            <td>
                Cell 2
<!--Block Comment Here
And a Little More Here
-->
</td>
</tr>
</table>
</body>
</html>

Any thoughts?

Mike_Piercy
  • 153
  • 1
  • 11

2 Answers2

21

I have logged the issue here: https://github.com/SublimeTextIssues/Core/issues/1271

The reason for this behavior is because Sublime Text, by default, is set to preserve the indentation of comments. To disable this:

  1. Install Package Control if it is not already installed
  2. Install PackageResourceViewer if it is not already installed:
    • Open the Command Palette
    • Select Package Control: Install Package
    • Select PackageResourceViewer
  3. Open the Command Palette
  4. Type PRV: O
  5. Select PackageResourceViewer: Open Resource
  6. Select Default
  7. Select Indentation Rules - Comments.tmPreferences
  8. Change the <true/> under <key>preserveIndent</key> to <false/>
  9. Save the file

Reindentation will now work correctly with comments.

I would also recommend to edit the HTML indentation rules to ignore comments, so that it doesn't change indentation based on tags in comments. i.e. otherwise

<html>
<head>
<title>Testing Indent</title>
</head>
<body>
<table>
<tr>
<td>
Cell 1
</td>
</tr>
<tr>
Cell 2
<!--
Block Comment Here
<td>
And a Little More Here
</td>
-->
</tr>
</table>
</body>
</html>

would become:

<html>
<head>
    <title>Testing Indent</title>
</head>
<body>
    <table>
        <tr>
            <td>
                Cell 1
            </td>
        </tr>
        <tr>
            Cell 2
            <!--
            Block Comment Here
            <td>
                And a Little More Here
            </td>
        -->
    </tr>
</table>
</body>
</html>

To do this:

  1. Open Command Palette
  2. Type PRV: O
  3. Select PackageResourceViewer: Open Resource
  4. Select HTML
  5. Select Miscellaneous.tmPreferences

  6. Change

    <key>scope</key>
<string>text.html</string>

    to

    <key>scope</key>
<string>text.html - comment</string>

    and

    |--&gt;

    to

    (?#|--&gt;)

    (this comments out the closing comment regex)

  7. Save it

However, when the next release of ST3 is available, it might be a good idea to then delete your overrides, in case it is fixed properly. This way, you will continue to get updates to these files, otherwise you will be stuck with the versions you have saved. To do this:

  1. Preferences -> Browse Packages
  2. Delete the HTML folder
  3. Go into the Default folder and delete the Indentation Rules - Comments.tmPreferences file

If the problem wasn't fixed in the next build, you can simply recreate these changes.

Keith Hall
  • 13,401
  • 3
  • 47
  • 65
  • 1
    Awesome. Very good answer. I followed the steps and everything worked as expected. I appreciate the level of detail. I'll keep an eye out for future updates to this. – Mike_Piercy Jul 08 '16 at 10:59
  • This package can also help to "fix" files that have broken indentation : https://packagecontrol.io/packages/Normalize%20Indentation – kursus Aug 11 '17 at 21:21
1

Tried your example in Sublime Text 3 (builds 3103 and 3114) and you are right, the indentation breaks when it finds a comment block.

Apparently, the reindentation functionality was always pretty weak and HTML is not the only context where it doesn't work (EDIT: Confirmed in PHP too, pretty much the same behavior).

I'd recommend submitting the issue if it isn't already submitted.

Sebastianb
  • 1,790
  • 21
  • 27