Skip to content

Commit ca85558

Browse files
deathaxedeathaxe
committed
Backport HTML indentation rules
In order to properly handle `<template>` tag indentation in combination with script/style comment handling dedicated indentation rules are required. This commit therefore backports and adjusts indentation rules from sublimehq/Packages#4020
1 parent acd7ef3 commit ca85558

File tree

3 files changed

+213
-0
lines changed

3 files changed

+213
-0
lines changed

‎Indentation Rules - Comments.tmPreferences‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<plist version="1.0">
3+
<dict>
4+
<key>scope</key>
5+
<string>text.html.vue comment.block.html</string>
6+
<key>settings</key>
7+
<dict>
8+
<!-- ignore anything until standalone closing comment punctuation -->
9+
<key>unIndentedLinePattern</key>
10+
<string>^(?!\s*-->)</string>
11+
</dict>
12+
</dict>
13+
</plist>

‎Indentation Rules.tmPreferences‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<plist version="1.0">
3+
<dict>
4+
<key>scope</key>
5+
<string>text.html.vue</string>
6+
<key>settings</key>
7+
<dict>
8+
<key>decreaseIndentPattern</key>
9+
<string><![CDATA[(?x)
10+
# the beginning of the line followed by any amount of whitespace
11+
# a valid HTML close tag except "html"
12+
^[^<>]*+ </ (?!html[\t\n\f /<>])[^\t\n\f /<>]+ [^>]* >
13+
| ^[\t\n\f ]*+
14+
(
15+
# the beginning of the line followed by closing HTML comment
16+
# and </script> or </style> tag
17+
--> [\t\n\f ]* </ (?: script | style | template )[\t\n\f /<>]
18+
# closing directive/section punctuation
19+
| [?%]>
20+
# closing curly or square brackets
21+
| [\]\}]
22+
)
23+
]]></string>
24+
<key>increaseIndentPattern</key>
25+
<string><![CDATA[(?x)
26+
# the beginning of the line followed by any amount of whitespace
27+
^.* (
28+
# a valid non-self-closing HTML tag that doesn't close itself on the same line
29+
<(?!
30+
!-- # no comment
31+
| [?%] # no preprocessor section like PHP/ASP
32+
| (?i:!doctype) # no document type
33+
| (?i:area|base|br|col|frame|hr|html|img|input|link|meta|param)[\t\n\f /<>]
34+
)(?:
35+
# tag name
36+
(?<html_tag>[^\t\n\f /<>]+)
37+
# not self closing
38+
(?:(?!/>)[^>])* >
39+
# not closing in the same line
40+
(?! .* </\k<html_tag>)
41+
)
42+
# directives that don't close themselves on the same line
43+
| <\?(?!.*?\?>)
44+
# sections that don't close themselves on the same line
45+
| <\%(?!.*?\%>)
46+
# open curly or square brackets at the end of a line with comments allowed
47+
| [\[\{](?=\s*(?:<!--.*)?$)
48+
)
49+
]]></string>
50+
<key>bracketIndentNextLinePattern</key>
51+
<string><![CDATA[<(?i:!doctype)(?!.*>)]]></string>
52+
</dict>
53+
</dict>
54+
</plist>

‎tests/syntax_test_indentation.vue‎

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
## SYNTAX TEST reindent-unchanged "Vue Component.sublime-syntax"
2+
3+
<!-------------------------------------
4+
Indentation tests for script tags
5+
-------------------------------------->
6+
7+
<!-- this comment's
8+
indentation should
9+
be unchanged
10+
-->
11+
<script>
12+
var i = 0;
13+
function foo() {
14+
return i;
15+
}
16+
</script>
17+
<!-- this comment's
18+
indentation should
19+
be unchanged -->
20+
<script>
21+
<!--
22+
var i = 0;
23+
function foo() {
24+
return i;
25+
}
26+
-->
27+
</script>
28+
<script> <!--
29+
var i = 0;
30+
function foo() {
31+
return i;
32+
}
33+
--> </script>
34+
35+
36+
<!-------------------------------------
37+
Indentation tests for style tags
38+
-------------------------------------->
39+
40+
<style>
41+
p {
42+
font-family: Helvetica;
43+
}
44+
</style>
45+
<style>
46+
<!--
47+
p {
48+
font-family: Helvetica;
49+
}
50+
-->
51+
</style>
52+
<style> <!--
53+
p {
54+
font-family: Helvetica;
55+
}
56+
--> </style>
57+
58+
59+
<!-------------------------------------
60+
Indentation tests for template tags
61+
-------------------------------------->
62+
63+
<template>
64+
mustache content
65+
</template>
66+
67+
<template> <!--
68+
mustache content
69+
--> </template>
70+
71+
<template>
72+
<!--
73+
mustache content
74+
-->
75+
</template>
76+
77+
78+
<template lang="jade">
79+
jade content
80+
</template>
81+
82+
<template lang="jade"> <!--
83+
jade content
84+
--> </template>
85+
86+
<template lang="jade">
87+
<!--
88+
jade content
89+
-->
90+
</template>
91+
92+
93+
<template lang="pug">
94+
pug content
95+
</template>
96+
97+
<template lang="pug"> <!--
98+
pug content
99+
--> </template>
100+
101+
<template lang="pug">
102+
<!--
103+
pug content
104+
-->
105+
</template>
106+
107+
108+
<!-------------------------------------
109+
Indentation tests for html tags
110+
-------------------------------------->
111+
112+
<template>
113+
<body>
114+
<div class="main">
115+
<span class="something">Blah</span>
116+
<span class="something">
117+
Foobar
118+
</span>
119+
</div>
120+
121+
<script type="text/javascript" src="/some_script.js"></script>
122+
123+
<script type="text/json">
124+
{
125+
"dict": {
126+
"list": [
127+
"value"
128+
]
129+
}
130+
}
131+
</script>
132+
133+
<!-- Curly braces -->
134+
foo {
135+
bar { <!-- comment -->
136+
baz
137+
}
138+
}
139+
text
140+
{ <p></p> }
141+
text
142+
{{template}}
143+
text
144+
145+
</body>
146+
</template>

0 commit comments

Comments
 (0)