Wrong syntax highlight of keyword const and function

[betoharres]

Problems summary

Syntax highlight showing a big red box around words like const and function when setting a constant with arrow function outside the main function of the file.

Expected

To render the keywords normally

Environment Information

http://pastebin.com/K8VFktA7

• terminal: iTerm 2
• vim/nvim version: vim 8.0.459

Provide a minimal vim rc with less than 50 lines (Required!)

" Switch syntax highlighting on, when the terminal has colors
" Also switch on highlighting the last used search pattern.
if (&t_Co > 2 || has("gui_running")) && !exists("syntax_on")
  syntax on
endif

  " Set syntax highlighting for specific file types
  autocmd BufRead,BufNewFile Appraisals set filetype=ruby
  autocmd BufRead,BufNewFile *.md set filetype=markdown
  autocmd BufRead,BufNewFile .{jscs,jshint,eslint}rc set filetype=json

  " Enable spellchecking for Markdown
  autocmd FileType markdown setlocal spell

  " Automatically wrap at 80 characters for Markdown
  autocmd BufRead,BufNewFile *.md setlocal textwidth=80

  " Automatically wrap at 72 characters and spell check git commit messages
  autocmd FileType gitcommit setlocal textwidth=72
  autocmd FileType gitcommit setlocal spell

  " Allow stylesheets to autocomplete hyphenated words
  autocmd FileType css,scss,sass setlocal iskeyword+=-

if (has("termguicolors"))
 set termguicolors
endif
colorscheme OceanicNext
let g:airline_theme='oceanicnext'
" JSX lint
let g:syntastic_javascript_checkers = ['eslint']
let g:syntastic_javascript_checkers = ['standard']

" JSX syntax
let g:jsx_ext_required = 0

Screen shot (if possible)

[mhartington]

What JS syntax files do you have in your rc file? Vim-javascript, yajs.vim, vim-jsx?

[betoharres]

This ones:

Plug 'mxw/vim-jsx'
Plug 'othree/yajs.vim'
Plug 'othree/html5.vim'
Plug 'othree/es.next.syntax.vim'
Plug 'HerringtonDarkholme/yats.vim'

[betoharres]

I had a hard time trying to make it highlight the way it was shown in old screenshots in the README of this repo, which made me add all the freakin' js syntax plugins. Now it seems that the screenshots of the theme has been updated.

btw, nice theme I really liked ( that's why I opened a issue instead of moving to another theme )

[mhartington]

Hmm , interesting. It looks like a syntax plugin is causing issues with jsx tags. I'll see what I can do and figure it out. Thanks for the issue!

[betoharres]

Great to hear, thanks! Also, I found out that disabling othree/yajs.vim make the redbox dissapear( but somehow it marks && with the redbox )

[mhartington]

So looks like the missing semi-colons at the end of each const declaration was the issue. Noticed it when running it through prettier

I'll note that this isn't technically and issue with oceanic-next, since the default syntax highlighting in vim would still mark this as an error .

[betoharres]

Well thanks a lot for looking into it even though it was not a problem of your theme, sorry about that 😳
I was running through this issue few months ago and never thought of try to add a semicolon because I got used to not add them anymore.