Skip to content

Commit eb5dc6b

Browse files
yuezkyuezk
authored
Improve syntax highlighting and refactor the indentation logic (#102)
* Remove display option to avoid weird highlight issues * [WIP] Improve the syntax highlighting * Refactor syntax highlighting group * Refactor the indent logic * Improve indentation
1 parent 7c09c5a commit eb5dc6b

7 files changed

Lines changed: 652 additions & 241 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ If you still want to use this plugin, make sure that you put this plugin **ahead
9191
|name|default|description|
9292
|---|---|---|
9393
|`g:vim_jsx_pretty_disable_tsx`|0|Disable the syntax highlighting for tsx files|
94-
|`g:vim_jsx_pretty_template_tags`|`['html', 'raw']`|highlight JSX inside the tagged template string, set it to `[]` to disable this feature|
94+
|`g:vim_jsx_pretty_template_tags`|`['html', 'jsx']`|highlight JSX inside the tagged template string, set it to `[]` to disable this feature|
9595
|`g:vim_jsx_pretty_highlight_close_tag`|0|highlight the close tag separately from the open tag|
9696
|`g:vim_jsx_pretty_colorful_config`|0|colorful config flag|
9797

‎after/indent/javascript.vim‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if exists('s:did_indent')
1919
endif
2020

2121
setlocal indentexpr=GetJsxIndent()
22-
setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,*<Return>,<>>,<<>,/
22+
setlocal indentkeys=0{,0},0),0],0\,,!^F,o,O,e,<>>,=*/
2323

2424
function! GetJsxIndent()
2525
return jsx_pretty#indent#get(function('GetJavascriptIndent'))

‎after/syntax/javascript.vim‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -27,27 +27,24 @@ elseif hlexists("javascriptOpSymbols") " othree/yajs.vim
2727
syntax region javascriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
2828
syntax cluster javascriptValue add=jsxRegion
2929
syntax cluster javascriptNoReserved add=jsxElement,jsxTag
30-
31-
" add support to arrow function which returns a tagged template string, e.g.
32-
" () => html`<div></div>`
33-
syntax cluster afterArrowFunc add=javascriptTagRef
3430
else " build-in javascript syntax
3531
" refine the javascript line comment
3632
syntax region javaScriptLineComment start=+//+ end=/$/ contains=@Spell,javascriptCommentTodo extend keepend
33+
34+
" refine the template string syntax
35+
syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr
36+
3737
" add a javaScriptBlock group for build-in syntax
38-
syntax region javaScriptBlockBuildIn
39-
\ contained
38+
syntax region javaScriptBlock
4039
\ matchgroup=javaScriptBraces
4140
\ start="{"
4241
\ end="}"
42+
\ contained
4343
\ extend
44-
\ contains=javaScriptBlockBuildIn,@javaScriptEmbededExpr,javaScript.*
44+
\ contains=javaScriptBlock,@javaScriptEmbededExpr,javaScript.*
4545
\ fold
46-
syntax cluster javaScriptEmbededExpr add=jsxRegion
4746

48-
" refine the template string syntax
49-
syntax region javaScriptStringT start=+`+ skip=+\\\\\|\\`+ end=+`+ contains=javaScriptSpecial,javaScriptEmbed,@htmlPreproc extend
50-
syntax region javaScriptEmbed matchgroup=javaScriptEmbedBraces start=+\${+ end=+}+ contained contains=@javaScriptEmbededExpr,javaScript.*
47+
syntax cluster javaScriptEmbededExpr add=jsxRegion,javaScript.*
5148
endif
5249

5350
runtime syntax/jsx_pretty.vim

‎after/syntax/jsx_pretty.vim‎

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
let s:highlight_close_tag = get(g:, 'vim_jsx_pretty_highlight_close_tag', 0)
22

3+
" detect jsx region
4+
syntax region jsxRegion
5+
\ start=+\%(\%(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\%(>\|\z(\%(script\|T\s*>\s*(\)\@!\<[_$A-Za-z][-:._$A-Za-z0-9]*\>\)\%(\_s*\%([-+*)\]}&|?,]\|/\%([/*]\|\_s*>\)\@!\)\)\@!\)+
6+
\ end=++
7+
\ contains=jsxElement
8+
39
" <tag id="sample">
410
" ~~~~~~~~~~~~~~~~~
511
" and self close tag
@@ -10,11 +16,14 @@ syntax region jsxTag
1016
\ matchgroup=jsxOpenPunct
1117
\ end=+>+
1218
\ matchgroup=NONE
13-
\ end=+\(/\_s*>\)\@=+
19+
\ end=+\%(/\_s*>\)\@=+
1420
\ contained
15-
\ contains=jsxOpenTag,jsxEscapeJs,jsxAttrib,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment,jsxSpreadOperator
21+
\ contains=jsxOpenTag,jsxAttrib,jsxEscapeJs,jsxSpreadOperator,jsComment,@javascriptComments,javaScriptLineComment,javaScriptComment,typescriptLineComment,typescriptComment
1622
\ keepend
1723
\ extend
24+
\ skipwhite
25+
\ skipempty
26+
\ nextgroup=jsxCloseString
1827

1928
" <tag></tag>
2029
" ~~~~~~~~~~~
@@ -25,30 +34,15 @@ syntax region jsxTag
2534
" <tag />
2635
" ~~~~~~~
2736
syntax region jsxElement
28-
\ start=+<\_s*\(>\|\${\|\z(\<[-:_\.\$0-9A-Za-z]\+\>\)\)+
37+
\ start=+<\_s*\%(>\|\${\|\z(\<[-:._$A-Za-z0-9]\+\>\)\)+
2938
\ end=+/\_s*>+
3039
\ end=+<\_s*/\_s*\z1\_s*>+
31-
\ contains=jsxElement,jsxEscapeJs,jsxTag,jsxComment,jsxCloseString,jsxCloseTag,@Spell
40+
\ contains=jsxElement,jsxTag,jsxEscapeJs,jsxComment,jsxCloseTag,@Spell
3241
\ keepend
3342
\ extend
3443
\ contained
3544
\ fold
3645

37-
" detect jsx region
38-
syntax region jsxRegion
39-
\ start=+\(\(\_[([,?:=+\-*/>{}]\|<\s\+\|&&\|||\|=>\|\<return\|\<default\|\<await\|\<yield\)\_s*\)\@<=<\_s*\(>\|\z(\(script\|T\s*>\s*(\)\@!\<[_\$A-Za-z][-:_\.\$0-9A-Za-z]*\>\)\(\_s*\([-+*)\]}&|?,]\|/\([/*]\|\_s*>\)\@!\)\)\@!\)+
40-
\ end=++
41-
\ contains=jsxElement
42-
43-
" <tag key={this.props.key}>
44-
" ~~~~~~~~~~~~~~~~
45-
syntax region jsxEscapeJs
46-
\ start=+{+
47-
\ end=++
48-
\ extend
49-
\ contained
50-
\ contains=jsBlock,javascriptBlock,javaScriptBlockBuildIn,typescriptBlock
51-
5246
" <tag key={this.props.key}>
5347
" ~~~~
5448
" and fragment start tag
@@ -64,19 +58,31 @@ exe 'syntax region jsxOpenTag
6458
\ contains=jsxTagName
6559
\ nextgroup=jsxAttrib
6660
\ skipwhite
67-
\ skipempty ' .(s:highlight_close_tag ? 'transparent' : '')
61+
\ skipempty
62+
\ ' .(s:highlight_close_tag ? 'transparent' : '')
63+
64+
65+
" <tag key={this.props.key}>
66+
" ~~~~~~~~~~~~~~~~
67+
syntax region jsxEscapeJs
68+
\ matchgroup=jsxBraces
69+
\ start=+{+
70+
\ end=+}+
71+
\ contained
72+
\ extend
73+
\ contains=@jsExpression,jsSpreadExpression,@javascriptExpression,javascriptSpreadOp,@javaScriptEmbededExpr,@typescriptExpression,typescriptObjectSpread
6874

6975
" <foo.bar>
7076
" ~
71-
syntax match jsxDot +\.+ contained display
77+
syntax match jsxDot +\.+ contained
7278

7379
" <foo:bar>
7480
" ~
75-
syntax match jsxNamespace +:+ contained display
81+
syntax match jsxNamespace +:+ contained
7682

7783
" <tag id="sample">
7884
" ~
79-
syntax match jsxEqual +=+ contained display nextgroup=jsxString,jsxEscapeJs,jsxRegion skipwhite
85+
syntax match jsxEqual +=+ contained skipwhite skipempty nextgroup=jsxString,jsxEscapeJs,jsxRegion
8086

8187
" <tag />
8288
" ~~
@@ -97,81 +103,84 @@ syntax region jsxCloseTag
97103
" <tag key={this.props.key}>
98104
" ~~~
99105
syntax match jsxAttrib
100-
\ +\<[-A-Za-z_][-:_\$0-9A-Za-z]*\>+
106+
\ +\<[_$A-Za-z][-:_$A-Za-z0-9]*\>+
101107
\ contained
102108
\ nextgroup=jsxEqual
103109
\ skipwhite
104110
\ skipempty
105-
\ contains=jsxAttribKeyword
106-
\ display
111+
\ contains=jsxAttribKeyword,jsxNamespace
107112

108113
" <MyComponent ...>
109114
" ~~~~~~~~~~~
110115
" NOT
111116
" <someCamel ...>
112117
" ~~~~~
113118
exe 'syntax match jsxComponentName
114-
\ +\<[A-Z][\$0-9A-Za-z]\+\>+
119+
\ +\<[_$]\?[A-Z][-_$A-Za-z0-9]*\>+
115120
\ contained
116-
\ display ' .(s:highlight_close_tag ? 'transparent' : '')
121+
\ ' .(s:highlight_close_tag ? 'transparent' : '')
117122

118123
" <tag key={this.props.key}>
119124
" ~~~
120125
exe 'syntax match jsxTagName
121-
\ +\<[-:_\.\$0-9A-Za-z]\+\>+
126+
\ +\<[-:._$A-Za-z0-9]\+\>+
122127
\ contained
123128
\ contains=jsxComponentName,jsxDot,jsxNamespace
124129
\ nextgroup=jsxAttrib
125130
\ skipempty
126131
\ skipwhite
127-
\ display ' .(s:highlight_close_tag ? 'transparent' : '')
132+
\ ' .(s:highlight_close_tag ? 'transparent' : '')
128133

129134
" <tag id="sample">
130135
" ~~~~~~~~
131136
" and
132137
" <tag id='sample'>
133138
" ~~~~~~~~
134-
syntax region jsxString start=+\z(["']\)+ skip=+\\\%(\z1\|$\)+ end=+\z1+ contained contains=@Spell display
139+
syntax region jsxString start=+\z(["']\)+ skip=+\\\\\|\\\z1\|\\\n+ end=+\z1+ contained contains=@Spell
135140

136-
let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'raw'])
141+
let s:tags = get(g:, 'vim_jsx_pretty_template_tags', ['html', 'jsx'])
137142
let s:enable_tagged_jsx = !empty(s:tags)
138143

139144
" add support to JSX inside the tagged template string
140145
" https://github.com/developit/htm
141146
if s:enable_tagged_jsx
142-
exe 'syntax region jsxTaggedRegion
143-
\ start=+\%('. join(s:tags, '\|') .'\)\@<=`+ms=s+1
144-
\ end=+`+me=e-1
147+
exe 'syntax match jsxRegion +\%(' . join(s:tags, '\|') . '\)\%(\_s*`\)\@=+ contains=jsTemplateStringTag,jsTaggedTemplate,javascriptTagRef skipwhite skipempty nextgroup=jsxTaggedRegion'
148+
149+
syntax region jsxTaggedRegion
150+
\ matchgroup=jsxBackticks
151+
\ start=+`+
152+
\ end=+`+
145153
\ extend
146154
\ contained
147-
\ containedin=jsTemplateString,javascriptTemplate,javaScriptStringT,typescriptStringB
148-
\ contains=jsxElement'
155+
\ contains=jsxElement,jsxEscapeJs
156+
\ transparent
149157

150158
syntax region jsxEscapeJs
159+
\ matchgroup=jsxBraces
151160
\ start=+\${+
152-
\ end=++
161+
\ end=+}+
153162
\ extend
154163
\ contained
155-
\ contains=jsTemplateExpression,javascriptTemplateSubstitution,javaScriptEmbed,typescriptInterpolation
164+
\ contains=@jsExpression,jsSpreadExpression,@javascriptExpression,javascriptSpreadOp,@javaScriptEmbededExpr,@typescriptExpression,typescriptObjectSpread
156165

157166
syntax region jsxOpenTag
158167
\ matchgroup=jsxOpenPunct
159168
\ start=+<\%(\${\)\@=+
160169
\ matchgroup=NONE
161-
\ end=++
170+
\ end=+}\@1<=+
162171
\ contained
163172
\ contains=jsxEscapeJs
164-
\ nextgroup=jsxAttrib,jsxSpreadOperator
165173
\ skipwhite
166174
\ skipempty
175+
\ nextgroup=jsxAttrib,jsxSpreadOperator
167176

168-
syntax keyword jsxAttribKeyword class contained display
177+
syntax keyword jsxAttribKeyword class contained
169178

170-
syntax match jsxSpreadOperator +\.\.\.+ contained display nextgroup=jsxEscapeJs skipwhite
179+
syntax match jsxSpreadOperator +\.\.\.+ contained nextgroup=jsxEscapeJs skipwhite
171180

172-
syntax match jsxCloseTag +<//>+ display
181+
syntax match jsxCloseTag +<//>+ contained
173182

174-
syntax match jsxComment +<!--\_.\{-}-->+ display
183+
syntax match jsxComment +<!--\_.\{-}-->+
175184
endif
176185

177186
" Highlight the tag name
@@ -181,10 +190,14 @@ highlight def link jsxComponentName Function
181190

182191
highlight def link jsxAttrib Type
183192
highlight def link jsxAttribKeyword jsxAttrib
184-
highlight def link jsxEqual Operator
185193
highlight def link jsxString String
194+
highlight def link jsxComment Comment
195+
186196
highlight def link jsxDot Operator
187197
highlight def link jsxNamespace Operator
198+
highlight def link jsxEqual Operator
199+
highlight def link jsxSpreadOperator Operator
200+
highlight def link jsxBraces Special
188201

189202
if s:highlight_close_tag
190203
highlight def link jsxCloseString Identifier
@@ -199,14 +212,10 @@ highlight def link jsxPunct jsxCloseString
199212
highlight def link jsxClosePunct jsxPunct
200213
highlight def link jsxCloseTag jsxCloseString
201214

202-
highlight def link jsxComment Comment
203-
highlight def link jsxSpreadOperator Operator
204-
205215
let s:vim_jsx_pretty_colorful_config = get(g:, 'vim_jsx_pretty_colorful_config', 0)
206216

207217
if s:vim_jsx_pretty_colorful_config == 1
208218
highlight def link jsObjectKey Label
209219
highlight def link jsArrowFuncArgs Type
210220
highlight def link jsFuncArgs Type
211221
endif
212-

0 commit comments

Comments
 (0)