|
630
|
1
|
|
|
2 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
|
|
|
3 " Vim syntax file
|
|
|
4 "
|
|
|
5 " Language: TSX (TypeScript)
|
|
|
6 "
|
|
|
7 """""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""
|
|
|
8
|
|
|
9 " These are the plugin-to-syntax-element correspondences:
|
|
|
10 " - leafgarland/typescript-vim: typescriptFuncBlock
|
|
|
11
|
|
|
12
|
|
|
13 let s:tsx_cpo = &cpo
|
|
|
14 set cpo&vim
|
|
|
15
|
|
|
16 syntax case match
|
|
|
17
|
|
|
18 if exists('b:current_syntax')
|
|
|
19 let s:current_syntax = b:current_syntax
|
|
|
20 unlet b:current_syntax
|
|
|
21 endif
|
|
|
22
|
|
|
23 syn include @HTMLSyntax syntax/html.vim
|
|
|
24 if exists('s:current_syntax')
|
|
|
25 let b:current_syntax = s:current_syntax
|
|
|
26 endif
|
|
|
27
|
|
|
28 """""" Vim Syntax Help """"""
|
|
|
29 " `keepend` and `extend` docs:
|
|
|
30 " https://github.com/othree/til/blob/master/vim/syntax-keepend-extend.md
|
|
|
31
|
|
|
32 " \@<= positive lookbehind
|
|
|
33 " \@<! negative lookbehind
|
|
|
34 " \@= positive lookahead
|
|
|
35 " \@! negative lookahead
|
|
|
36
|
|
|
37
|
|
|
38
|
|
|
39 syntax case match
|
|
|
40
|
|
|
41 " <tag></tag>
|
|
|
42 " s~~~~~~~~~~~e
|
|
|
43 syntax region tsxRegion
|
|
|
44 \ start=+\(\([a-zA-Z]\)\@<!<>\|\(\s\|[(]\s*\)\@<=\z(<[/a-zA-Z],\@!\([a-zA-Z0-9:\-],\@!\)*\)\)+
|
|
|
45 \ skip=+<!--\_.\{-}-->+
|
|
|
46 \ end=+</\_.\{-}>+
|
|
|
47 \ end=+[a-zA-Z0-9.]*[/]*>\s*\n*\s*\n*\s*[});,]\@=+
|
|
|
48 \ contains=tsxTag,tsxCloseTag,tsxComment,Comment,@Spell,tsxColon,tsxIfOperator,tsxElseOperator,jsBlock
|
|
|
49 \ extend
|
|
|
50 \ keepend
|
|
|
51
|
|
|
52
|
|
|
53
|
|
|
54 " Negative lookbacks for:
|
|
|
55 " <> preceeded by [a-zA-Z]
|
|
|
56 " <<Tag...
|
|
|
57 " [a-zA-Z]<Tag
|
|
|
58
|
|
|
59 " end 1): handle </NormalClosingTag>
|
|
|
60 " end 2): handle <SelfClosingTags/>\s*\n*\s*\n*\s*)
|
|
|
61 " \s => spaces/tabs
|
|
|
62 " \n => end-of-line => \n only match end of line in the buffer.
|
|
|
63 " \s*\n*\s*\n*\s* => handles arbitrary spacing between closing tsxTag </tag>
|
|
|
64 " and the ending brace for the scope: `}` or `)`
|
|
|
65 "
|
|
|
66 " \z( pattern \) Braces can be used to make a pattern into an atom.
|
|
|
67
|
|
|
68 " <tag>{content}</tag>
|
|
|
69 " s~~~~~~~e
|
|
|
70 syn region jsBlock
|
|
|
71 \ start=+{+
|
|
|
72 \ end=+}+
|
|
|
73 \ contained
|
|
|
74 \ contains=TOP
|
|
|
75
|
|
|
76 " \@<= positive lookbehind
|
|
|
77 " \@<! negative lookbehind
|
|
|
78 " \@= positive lookahead
|
|
|
79 " \@! negative lookahead
|
|
|
80 " RULE: capture expression, then apply rule AFTER
|
|
|
81 " e.g foo\(bar\)\@!
|
|
|
82 " match all `foo` which is not followed by `bar`
|
|
|
83 " https://jbodah.github.io/blog/2016/11/01/positivenegative-lookaheadlookbehind-vim/
|
|
|
84
|
|
|
85 " <tag key={this.props.key}>
|
|
|
86 " s~~~~~~~~~~~~~~e
|
|
|
87 syntax region tsxJsBlock
|
|
|
88 \ matchgroup=tsxAttributeBraces start=+\([=]\|\s\)\@<={+
|
|
|
89 \ matchgroup=tsxAttributeBraces end=+}\(\s*}\|)\)\@!+
|
|
|
90 \ contained
|
|
|
91 \ keepend
|
|
|
92 \ extend
|
|
|
93 \ contains=TOP
|
|
|
94
|
|
|
95 " <tag id="sample">
|
|
|
96 " s~~~~~~~~~~~~~~~e
|
|
|
97 syntax region tsxTag
|
|
|
98 \ start=+<[^ /!?<"'=:]\@=+
|
|
|
99 \ end=+[/]\{0,1}>+
|
|
|
100 \ contained
|
|
|
101 \ contains=tsxTagName,tsxAttrib,tsxEqual,tsxString,tsxJsBlock,tsxAttributeComment,jsBlock,tsxGenerics
|
|
|
102
|
|
|
103 syntax region tsxGenerics
|
|
|
104 \ matchgroup=tsxTypeBraces start=+\([<][_\-\.:a-zA-Z0-9]*\|[<][_\-\.:a-zA-Z0-9]*\)\@<=\s*[<]+
|
|
|
105 \ matchgroup=tsxTypeBraces end=+>+
|
|
|
106 \ contains=tsxTypes,tsxGenerics
|
|
|
107 \ contained
|
|
|
108 \ extend
|
|
|
109
|
|
|
110 syntax match tsxTypes /[_\.a-zA-Z0-9]/
|
|
|
111 \ contained
|
|
|
112
|
|
|
113 " \@<! negative lookbehind
|
|
|
114
|
|
|
115 " <T1, T2>
|
|
|
116 " s~~~~~~~e
|
|
|
117 " For Generics outside of tsxRegion
|
|
|
118 " Must come after tsxRegion in this file
|
|
|
119 syntax region tsGenerics
|
|
|
120 \ start=+<\([\[A-Z]\|typeof\)\([a-zA-Z0-9,{}\[\]'".=>():]\|\s\)*>\(\s*\n*\s*[()]\|\s*[=]\)+
|
|
|
121 \ end=+\([=]\)\@<!>+
|
|
|
122 \ contains=tsxTypes,tsxGenerics
|
|
|
123 \ extend
|
|
|
124
|
|
|
125 " </tag>
|
|
|
126 " ~~~~~~
|
|
|
127 syntax region tsxCloseTag
|
|
|
128 \ start=+</[^ /!?<"'=:]\@=+
|
|
|
129 \ end=+>+
|
|
|
130 \ contained
|
|
|
131 \ contains=tsxCloseString
|
|
|
132
|
|
|
133 " matches tsx Comments: {/* ..... /*}
|
|
|
134 syn region Comment contained start=+{/\*+ end=+\*/}+ contains=Comment
|
|
|
135 \ extend
|
|
|
136
|
|
|
137 syn region tsxAttributeComment contained start=+//+ end=+\n+ contains=Comment
|
|
|
138 \ extend
|
|
|
139
|
|
|
140 syntax match tsxCloseString
|
|
|
141 \ +\w\++
|
|
|
142 \ contained
|
|
|
143
|
|
|
144 syntax match tsxColon
|
|
|
145 \ +[;]+
|
|
|
146 \ contained
|
|
|
147
|
|
|
148 " <!-- -->
|
|
|
149 " ~~~~~~~~
|
|
|
150 syntax match tsxComment /<!--\_.\{-}-->/ display
|
|
|
151 syntax match tsxEntity "&[^; \t]*;" contains=tsxEntityPunct
|
|
|
152 syntax match tsxEntityPunct contained "[&.;]"
|
|
|
153
|
|
|
154 " <tag key={this.props.key}>
|
|
|
155 " ~~~
|
|
|
156 syntax match tsxTagName
|
|
|
157 \ +[<]\@<=[^ /!?<>"']\++
|
|
|
158 \ contained
|
|
|
159 \ display
|
|
|
160
|
|
|
161 " <tag key={this.props.key}>
|
|
|
162 " ~~~
|
|
|
163 syntax match tsxAttrib
|
|
|
164 \ +[-'"<]\@<!\<[a-zA-Z:_][-.0-9a-zA-Z0-9:_]*[/]\{0,1}\>\(['"]\@!\|$\)+
|
|
|
165 \ contained
|
|
|
166 \ keepend
|
|
|
167 \ contains=tsxAttribPunct,tsxAttribHook
|
|
|
168 \ display
|
|
|
169
|
|
|
170 syntax match tsxAttribPunct +[:.]+ contained display
|
|
|
171
|
|
|
172 " <tag id="sample">
|
|
|
173 " ~
|
|
|
174 syntax match tsxEqual +=+ contained display
|
|
|
175
|
|
|
176 " <tag id="sample">
|
|
|
177 " s~~~~~~e
|
|
|
178 syntax region tsxString contained start=+"+ end=+"+ contains=tsxEntity,@Spell display
|
|
|
179
|
|
|
180 " <tag id=`sample${var}`>
|
|
|
181 syntax region tsxString contained start=+`+ end=+`+ contains=tsxEntity,@Spell display
|
|
|
182
|
|
|
183 " <tag id='sample'>
|
|
|
184 " s~~~~~~e
|
|
|
185 syntax region tsxString contained start=+'+ end=+'+ contains=tsxEntity,@Spell display
|
|
|
186
|
|
|
187 syntax match tsxIfOperator +?+
|
|
|
188 syntax match tsxNotOperator +!+
|
|
|
189 syntax match tsxElseOperator +:+
|
|
|
190
|
|
|
191 " highlight def link tsxTagName htmlTagName
|
|
|
192 highlight def link tsxTagName xmlTagName
|
|
|
193 highlight def link tsxTag htmlTag
|
|
|
194 highlight def link tsxCloseTag xmlEndTag
|
|
|
195 highlight def link tsxRegionEnd xmlEndTag
|
|
|
196 highlight def link tsxEqual htmlTag
|
|
|
197 highlight def link tsxString String
|
|
|
198 highlight def link tsxNameSpace Function
|
|
|
199 highlight def link tsxComment Error
|
|
|
200 highlight def link tsxAttrib htmlArg
|
|
|
201 highlight def link tsxCloseString htmlTagName
|
|
|
202 highlight def link tsxAttributeBraces htmlTag
|
|
|
203 highlight def link tsxAttributeComment Comment
|
|
|
204 highlight def link tsxColon typescriptEndColons
|
|
|
205
|
|
|
206 highlight def link tsxGenerics typescriptEndColons
|
|
|
207 highlight def link tsGenerics tsxTypeBraces
|
|
|
208
|
|
|
209 highlight def link tsxIfOperator typescriptEndColons
|
|
|
210 highlight def link tsxNotOperator typescriptEndColons
|
|
|
211 highlight def link tsxElseOperator typescriptEndColons
|
|
|
212 highlight def link tsxTypeBraces htmlTag
|
|
|
213 highlight def link tsxTypes typescriptEndColons
|
|
|
214
|
|
|
215 " Custom React Highlights
|
|
|
216 syn keyword ReactState state nextState prevState setState
|
|
|
217 " Then EITHER (define your own colour scheme):
|
|
|
218 " OR (make the colour scheme match an existing one):
|
|
|
219 " hi link ReactKeywords typescriptRComponent
|
|
|
220 syn keyword ReactProps props defaultProps ownProps nextProps prevProps
|
|
|
221 syn keyword Events e event target value
|
|
|
222 syn keyword ReduxKeywords dispatch payload
|
|
|
223 syn keyword ReduxHooksKeywords useState useEffect useMemo useCallback
|
|
|
224 syn keyword WebBrowser window localStorage
|
|
|
225 syn keyword ReactLifeCycleMethods componentWillMount shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillReceiveProps componentWillUnmount componentDidMount
|
|
|
226
|
|
|
227 let b:current_syntax = 'typescript.tsx'
|
|
|
228
|
|
|
229 let &cpo = s:tsx_cpo
|
|
|
230 unlet s:tsx_cpo
|
|
|
231
|
