Skip to content

Fix Various Syntax Highlighting Issues #631

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 9 commits into from
Sep 14, 2016
Merged

Fix Various Syntax Highlighting Issues #631

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4e2e377
Add highlight group specifically for object colons
jfelchner Sep 12, 2016
355d665
Add individual syntax groups for various parenthesis
jfelchner Sep 13, 2016
615f837
Add more specialized groups for the various braces
jfelchner Sep 13, 2016
430b528
Removed 'contained' constraint from 'this' keyword highlight
jfelchner Sep 13, 2016
aa2fb90
Add section comments
jfelchner Sep 13, 2016
20bb09a
Fix decorator syntax highlighting
jfelchner Sep 13, 2016
801aad4
Change highlight link for decorators to 'Tag'
jfelchner Sep 13, 2016
6c78b77
Whitespace
jfelchner Sep 13, 2016
0cb2e11
Change ClassKeywords to Keywords instead of Define
jfelchner Sep 13, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 48 additions & 27 deletions syntax/javascript.vim
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@ syntax keyword jsModuleKeywords contained import
syntax keyword jsModuleKeywords contained export skipwhite skipempty nextgroup=jsExportBlock,jsModuleDefault
syntax keyword jsModuleOperators contained from
syntax keyword jsModuleOperators contained as
syntax region jsModuleGroup contained matchgroup=jsBraces start=/{/ end=/}/ contains=jsModuleOperators,jsNoise,jsComment
syntax region jsModuleGroup contained matchgroup=jsModuleBraces start=/{/ end=/}/ contains=jsModuleOperators,jsNoise,jsComment
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am fine with this, however it would be good to link it back to jsBraces at the bottom.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It does yes?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

jsModuleBraces is not linked to anything right now.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missed that one! Fixing.

syntax match jsModuleAsterisk contained /*/
syntax keyword jsModuleDefault contained default skipwhite skipempty nextgroup=@jsExpression
syntax region jsImportContainer start=/\<import\> / end="\%(;\|$\)" contains=jsModuleKeywords,jsModuleOperators,jsComment,jsString,jsTemplateString,jsNoise,jsModuleGroup,jsModuleAsterisk
syntax region jsExportContainer start=/\<export\> / end="\%(;\|$\)" contains=jsModuleKeywords,jsModuleOperators,jsStorageClass,jsModuleDefault,@jsExpression
syntax region jsExportBlock contained matchgroup=jsBraces start=/{/ end=/}/ contains=jsModuleOperators,jsNoise,jsComment
syntax region jsExportBlock contained matchgroup=jsExportBraces start=/{/ end=/}/ contains=jsModuleOperators,jsNoise,jsComment
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same comment here regarding the link to jsBraces

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also don't forget to link this to jsBraces as well.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Copy link
Collaborator

@amadeus amadeus Sep 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see the changes in this PR yet? Mebe not pushed yet? Or github being slow.


" Strings, Templates, Numbers
syntax region jsString start=+"+ skip=+\\\("\|$\)+ end=+"\|$+ contains=jsSpecial,@Spell extend
Expand Down Expand Up @@ -74,12 +74,14 @@ else
endif
syntax cluster jsRegexpSpecial contains=jsSpecial,jsRegexpBoundary,jsRegexpBackRef,jsRegexpQuantifier,jsRegexpOr,jsRegexpMod

" Objects
syntax match jsObjectKey contained /\<[0-9a-zA-Z_$]*\>\(\s*:\)\@=/ contains=jsFunctionKey skipwhite skipempty nextgroup=jsObjectValue
syntax match jsObjectColon contained /:/ skipwhite skipempty
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quick thing - we should link this back to jsNoise for backwards compat.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

syntax region jsObjectKeyString contained start=+"+ skip=+\\\("\|$\)+ end=+"\|$+ contains=jsSpecial,@Spell skipwhite skipempty nextgroup=jsObjectValue
syntax region jsObjectKeyString contained start=+'+ skip=+\\\('\|$\)+ end=+'\|$+ contains=jsSpecial,@Spell skipwhite skipempty nextgroup=jsObjectValue
syntax region jsObjectKeyComputed contained matchgroup=jsBrackets start=/\[/ end=/]/ contains=@jsExpression skipwhite skipempty nextgroup=jsObjectValue,jsFuncArgs extend
syntax match jsObjectSeparator contained /,/
syntax region jsObjectValue contained start=/:/ end=/\%(,\|}\)\@=/ contains=@jsExpression extend
syntax region jsObjectValue contained start=/:/ end=/\%(,\|}\)\@=/ contains=jsObjectColon,@jsExpression extend
syntax match jsObjectFuncName contained /\<[a-zA-Z_$][0-9a-zA-Z_$]*\>[\r\n\t ]*(\@=/ skipwhite skipempty nextgroup=jsFuncArgs
syntax match jsFunctionKey contained /\<[a-zA-Z_$][0-9a-zA-Z_$]*\>\(\s*:\s*function\s*\)\@=/
syntax match jsObjectMethodType contained /\%(get\|set\|static\|async\)\%( \k\+\)\@=/ skipwhite skipempty nextgroup=jsObjectFuncName
Expand All @@ -91,32 +93,32 @@ exe 'syntax keyword jsReturn return contained '.(exists('g:javascript_conceal
exe 'syntax keyword jsUndefined undefined '.(exists('g:javascript_conceal_undefined') ? 'conceal cchar='.g:javascript_conceal_undefined : '')
exe 'syntax keyword jsNan NaN '.(exists('g:javascript_conceal_NaN') ? 'conceal cchar='.g:javascript_conceal_NaN : '')
exe 'syntax keyword jsPrototype prototype '.(exists('g:javascript_conceal_prototype') ? 'conceal cchar='.g:javascript_conceal_prototype : '')
exe 'syntax keyword jsThis this contained '.(exists('g:javascript_conceal_this') ? 'conceal cchar='.g:javascript_conceal_this : '')
exe 'syntax keyword jsThis this '.(exists('g:javascript_conceal_this') ? 'conceal cchar='.g:javascript_conceal_this : '')
exe 'syntax keyword jsSuper super contained '.(exists('g:javascript_conceal_super') ? 'conceal cchar='.g:javascript_conceal_super : '')

" Statement Keywords
syntax keyword jsStatement contained break continue with yield debugger
syntax keyword jsConditional if skipwhite skipempty nextgroup=jsParenIfElse
syntax keyword jsConditional else skipwhite skipempty nextgroup=jsCommentMisc,jsBlock
syntax keyword jsConditional else skipwhite skipempty nextgroup=jsCommentMisc,jsIfElseBlock
syntax keyword jsConditional switch skipwhite skipempty nextgroup=jsParenSwitch
syntax keyword jsRepeat while for skipwhite skipempty nextgroup=jsParenRepeat
syntax keyword jsDo do skipwhite skipempty nextgroup=jsBlock
syntax keyword jsDo do skipwhite skipempty nextgroup=jsRepeatBlock
syntax keyword jsLabel contained case default
syntax keyword jsTry try skipwhite skipempty nextgroup=jsTryCatchBlock
syntax keyword jsFinally contained finally skipwhite skipempty nextgroup=jsBlock
syntax keyword jsFinally contained finally skipwhite skipempty nextgroup=jsFinallyBlock
syntax keyword jsCatch contained catch skipwhite skipempty nextgroup=jsParenCatch
syntax keyword jsException throw
syntax keyword jsAsyncKeyword async await
syntax match jsSwitchColon contained /:/ skipwhite skipempty nextgroup=jsBlock
syntax match jsSwitchColon contained /:/ skipwhite skipempty nextgroup=jsSwitchBlock

" Keywords
syntax keyword jsGlobalObjects Array Boolean Date Function Iterator Number Object Symbol Map WeakMap Set RegExp String Proxy Promise Buffer ParallelArray ArrayBuffer DataView Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray JSON Math console document window Intl Collator DateTimeFormat NumberFormat
syntax keyword jsGlobalNodeObjects module exports global process
syntax match jsGlobalNodeObjects /require/ contains=jsFuncCall
syntax keyword jsExceptions Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError
syntax keyword jsBuiltins decodeURI decodeURIComponent encodeURI encodeURIComponent eval isFinite isNaN parseFloat parseInt uneval
syntax keyword jsGlobalObjects Array Boolean Date Function Iterator Number Object Symbol Map WeakMap Set RegExp String Proxy Promise Buffer ParallelArray ArrayBuffer DataView Float32Array Float64Array Int16Array Int32Array Int8Array Uint16Array Uint32Array Uint8Array Uint8ClampedArray JSON Math console document window Intl Collator DateTimeFormat NumberFormat
syntax keyword jsGlobalNodeObjects module exports global process
syntax match jsGlobalNodeObjects /require/ contains=jsFuncCall
syntax keyword jsExceptions Error EvalError InternalError RangeError ReferenceError StopIteration SyntaxError TypeError URIError
syntax keyword jsBuiltins decodeURI decodeURIComponent encodeURI encodeURIComponent eval isFinite isNaN parseFloat parseInt uneval
" DISCUSS: How imporant is this, really? Perhaps it should be linked to an error because I assume the keywords are reserved?
syntax keyword jsFutureKeys abstract enum int short boolean interface byte long char final native synchronized float package throws goto private transient implements protected volatile double public
syntax keyword jsFutureKeys abstract enum int short boolean interface byte long char final native synchronized float package throws goto private transient implements protected volatile double public

" DISCUSS: Should we really be matching stuff like this?
" DOM2 Objects
Expand All @@ -132,22 +134,26 @@ syntax keyword jsDomNodeConsts ELEMENT_NODE ATTRIBUTE_NODE TEXT_NODE CDATA_SECT
" HTML events and internal variables
syntax keyword jsHtmlEvents onblur onclick oncontextmenu ondblclick onfocus onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup onresize

"" Code blocks
" Code blocks
syntax region jsBracket matchgroup=jsBrackets start=/\[/ end=/\]/ contains=@jsExpression extend fold
syntax region jsParen matchgroup=jsParens start=/(/ end=/)/ contains=@jsAll extend fold
syntax region jsParenIfElse contained matchgroup=jsParens start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsCommentMisc,jsBlock extend fold
syntax region jsParenRepeat contained matchgroup=jsParens start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsCommentMisc,jsBlock extend fold
syntax region jsParenSwitch contained matchgroup=jsParens start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsSwitchBlock extend fold
syntax region jsParenCatch contained matchgroup=jsParens start=/(/ end=/)/ skipwhite skipempty nextgroup=jsTryCatchBlock extend fold
syntax region jsParenDecorator contained matchgroup=jsParensDecorator start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsCommentMisc extend fold
syntax region jsParenIfElse contained matchgroup=jsParensIfElse start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsCommentMisc,jsIfElseBlock extend fold
syntax region jsParenRepeat contained matchgroup=jsParensRepeat start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsCommentMisc,jsRepeatBlock extend fold
syntax region jsParenSwitch contained matchgroup=jsParensSwitch start=/(/ end=/)/ contains=@jsAll skipwhite skipempty nextgroup=jsSwitchBlock extend fold
syntax region jsParenCatch contained matchgroup=jsParensCatch start=/(/ end=/)/ skipwhite skipempty nextgroup=jsTryCatchBlock extend fold
syntax region jsFuncArgs contained matchgroup=jsFuncParens start=/(/ end=/)/ contains=jsFuncArgCommas,jsComment,jsFuncArgExpression,jsDestructuringBlock,jsRestExpression,jsFlowArgumentDef skipwhite skipempty nextgroup=jsCommentFunction,jsFuncBlock,jsFlowReturn extend fold
syntax region jsClassBlock contained matchgroup=jsClassBraces start=/{/ end=/}/ contains=jsClassFuncName,jsClassMethodType,jsArrowFunction,jsArrowFuncArgs,jsComment,jsGenerator,jsDecorator,jsClassProperty,jsClassPropertyComputed,jsClassStringKey,jsNoise extend fold
syntax region jsFuncBlock contained matchgroup=jsFuncBraces start=/{/ end=/}/ contains=@jsAll extend fold
syntax region jsIfElseBlock contained matchgroup=jsIfElseBraces start=/{/ end=/}/ contains=@jsAll extend fold
syntax region jsBlock contained matchgroup=jsBraces start=/{/ end=/}/ contains=@jsAll extend fold
syntax region jsTryCatchBlock contained matchgroup=jsBraces start=/{/ end=/}/ contains=@jsAll skipwhite skipempty nextgroup=jsCatch,jsFinally extend fold
syntax region jsSwitchBlock contained matchgroup=jsBraces start=/{/ end=/}/ contains=@jsAll,jsLabel,jsSwitchColon extend fold
syntax region jsTryCatchBlock contained matchgroup=jsTryCatchBraces start=/{/ end=/}/ contains=@jsAll skipwhite skipempty nextgroup=jsCatch,jsFinally extend fold
syntax region jsFinallyBlock contained matchgroup=jsFinallyBraces start=/{/ end=/}/ contains=@jsAll extend fold
syntax region jsSwitchBlock contained matchgroup=jsSwitchBraces start=/{/ end=/}/ contains=@jsAll,jsLabel,jsSwitchColon extend fold
syntax region jsRepeatBlock contained matchgroup=jsRepeatBraces start=/{/ end=/}/ contains=@jsAll extend fold
syntax region jsDestructuringBlock contained matchgroup=jsDestructuringBraces start=/{/ end=/}/ contains=jsDestructuringProperty,jsDestructuringAssignment,jsDestructuringNoise,jsDestructuringPropertyComputed,jsSpreadExpression extend fold
syntax region jsDestructuringArray contained matchgroup=jsDestructuringBraces start=/\[/ end=/\]/ contains=jsDestructuringPropertyValue,jsNoise,jsDestructuringProperty,jsSpreadExpression extend fold
syntax region jsObject matchgroup=jsObjectBraces start=/{/ end=/}/ contains=jsObjectKey,jsObjectKeyString,jsObjectKeyComputed,jsObjectSeparator,jsObjectFuncName,jsObjectMethodType,jsGenerator,jsComment,jsObjectStringKey,jsSpreadExpression extend fold
syntax region jsObject matchgroup=jsObjectBraces start=/{/ end=/}/ contains=jsObjectKey,jsObjectKeyString,jsObjectKeyComputed,jsObjectSeparator,jsObjectFuncName,jsObjectMethodType,jsGenerator,jsComment,jsObjectStringKey,jsSpreadExpression,jsDecorator extend fold
syntax region jsTernaryIf matchgroup=jsTernaryIfOperator start=/?/ end=/\%(:\|[\}]\@=\)/ contains=@jsExpression
syntax region jsSpreadExpression contained matchgroup=jsSpreadOperator start=/\.\.\./ end=/[,}\]]\@=/ contains=@jsExpression
syntax region jsRestExpression contained matchgroup=jsRestOperator start=/\.\.\./ end=/[,)]\@=/
Expand All @@ -167,12 +173,11 @@ syntax match jsArrowFuncArgs /([^()]*)\s*\(=>\)\@=/ contains=jsFuncArgs skipe
exe 'syntax match jsFunction /\<function\>/ skipwhite skipempty nextgroup=jsGenerator,jsFuncName,jsFuncArgs skipwhite '.(exists('g:javascript_conceal_function') ? 'conceal cchar='.g:javascript_conceal_function : '')
exe 'syntax match jsArrowFunction /=>/ skipwhite skipempty nextgroup=jsFuncBlock contains=jsFuncBraces '.(exists('g:javascript_conceal_arrow_function') ? 'conceal cchar='.g:javascript_conceal_arrow_function : '')

" Classes
syntax keyword jsClassKeywords contained extends class
syntax match jsClassNoise contained /\./
syntax match jsClassMethodType contained /\%(get\|set\|static\|async\)\%( \k\+\)\@=/ skipwhite skipempty nextgroup=jsFuncName,jsClassProperty
syntax match jsClassDefinition /\<class\>\%( [a-zA-Z_$][0-9a-zA-Z_$ \n.]*\)*/ contains=jsClassKeywords,jsClassNoise skipwhite skipempty nextgroup=jsCommentClass,jsClassBlock,jsFlowClassGroup
syntax match jsDecorator contained "@" nextgroup=jsDecoratorFunction
syntax match jsDecoratorFunction contained "[a-zA-Z_][a-zA-Z0-9_.]*"
syntax match jsClassProperty contained /\<[0-9a-zA-Z_$]*\>\(\s*=\)\@=/ skipwhite skipempty nextgroup=jsClassValue
syntax region jsClassValue contained start=/=/ end=/\%(;\|}\|\n\)\@=/ contains=@jsExpression
syntax region jsClassPropertyComputed contained matchgroup=jsBrackets start=/\[/ end=/]/ contains=@jsExpression skipwhite skipempty nextgroup=jsFuncArgs,jsClassValue extend
Expand Down Expand Up @@ -205,6 +210,10 @@ syntax region jsCommentClass contained start=/\/\*/ end=/\*\// contains=j
syntax region jsCommentMisc contained start=/\/\// end=/$/ contains=jsCommentTodo,@Spell skipwhite skipempty nextgroup=jsBlock extend keepend
syntax region jsCommentMisc contained start=/\/\*/ end=/\*\// contains=jsCommentTodo,@Spell skipwhite skipempty nextgroup=jsBlock fold extend keepend

" Decorators
syntax match jsDecorator /^\s*@/ nextgroup=jsDecoratorFunction
syntax match jsDecoratorFunction contained /[a-zA-Z_][a-zA-Z0-9_.]*/ nextgroup=jsParenDecorator

if exists("javascript_plugin_jsdoc")
runtime extras/jsdoc.vim
" NGDoc requires JSDoc
Expand Down Expand Up @@ -232,6 +241,10 @@ if version >= 508 || !exists("did_javascript_syn_inits")
endif
HiLink jsComment Comment
HiLink jsEnvComment PreProc
HiLink jsParensIfElse jsParens
HiLink jsParensRepeat jsParens
HiLink jsParensSwitch jsParens
HiLink jsParensCatch jsParens
HiLink jsCommentTodo Todo
HiLink jsString String
HiLink jsObjectKeyString String
Expand Down Expand Up @@ -275,7 +288,7 @@ if version >= 508 || !exists("did_javascript_syn_inits")
HiLink jsOperator Operator
HiLink jsOf Operator
HiLink jsStorageClass StorageClass
HiLink jsClassKeywords Structure
HiLink jsClassKeywords Keyword
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

HiLink jsThis Special
HiLink jsSuper Constant
HiLink jsNan Number
Expand All @@ -285,6 +298,7 @@ if version >= 508 || !exists("did_javascript_syn_inits")
HiLink jsFloat Float
HiLink jsBooleanTrue Boolean
HiLink jsBooleanFalse Boolean
HiLink jsObjectColon jsNoise
HiLink jsNoise Noise
HiLink jsBrackets Noise
HiLink jsParens Noise
Expand All @@ -293,8 +307,15 @@ if version >= 508 || !exists("did_javascript_syn_inits")
HiLink jsFuncParens Noise
HiLink jsClassBraces Noise
HiLink jsClassNoise Noise
HiLink jsIfElseBraces jsBraces
HiLink jsTryCatchBraces jsBraces
HiLink jsModuleBraces jsBraces
HiLink jsObjectBraces Noise
HiLink jsObjectSeparator Noise
HiLink jsFinallyBraces jsBraces
HiLink jsRepeatBraces jsBraces
HiLink jsSwitchBraces jsBraces
HiLink jsExportBraces jsBraces
HiLink jsSpecial Special
HiLink jsTemplateVar Special
HiLink jsTemplateBraces jsBraces
Expand All @@ -305,8 +326,8 @@ if version >= 508 || !exists("did_javascript_syn_inits")
HiLink jsModuleKeywords Include
HiLink jsModuleOperators Include
HiLink jsModuleDefault Include
HiLink jsDecorator Special
HiLink jsDecoratorFunction Special
HiLink jsDecorator Tag
HiLink jsDecoratorFunction Tag
Copy link
Collaborator

@amadeus amadeus Sep 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure Tag is the right one for this? The vim help states the following for Tag:

     Tag        you can use CTRL-] on this

Special probably wasn't correct either though

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where did you find that documentation!? :D

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do :help syntax, then just do a normal / search for Tag

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or be smart, and not dumb like me, and do :help group-name

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should figure this one out as well.

Copy link
Collaborator

@amadeus amadeus Sep 13, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think jsDecoratorFunction should probably be linked to Function or Identifier, then jsDecorator should perhaps be linked to Operator, Label, Type, or Special

HiLink jsFuncArgOperator jsFuncArgs
HiLink jsModuleAsterisk Noise
HiLink jsClassProperty jsObjectKey
Expand Down