Javascript syntax highlighting in vim

Question

Has anyone else found VIM's syntax highlighting of Javascript sub-optimal? I'm finding that sometimes I need to scroll around in order to get the syntax highlighting adjusted, as sometimes it mysteriously drops all highlighting.

Are there any work-arounds or ways to fix this? I'm using vim 7.1.

Solution 1

You might like to try this improved Javascript syntax highlighter rather than the one that ships with VIMRUNTIME.

Solution 2

Well, I've modified Yi Zhao's Javascript Syntax, and added Ajax Keywords support, also highlight DOM Methods and others.

Here it is, it is far from being perfect as I'm still new to Vim, but so far it has work for me. My Javascript Syntax. If you can fix, add features, please do.

UPDATE: I forgot these syntax highlights are only shown if you included them in your own colorscheme, as I did in my Nazca colorscheme. I'll test if I could add these line into my modified syntax file.

Follow the new version of the javascript syntax file in github, for it is no longer required to modify your current colorscheme.

Solution 3

Syntax coloring synchronization probably needs adjustment. I've found in certain contexts that I need to change it.

Syntax synchronization (":help syn-sync") controls how vim keeps track of and refreshes its parse of the code for coloring, so that it can start drawing anywhere in the file.

The defaults don't always work for me, so sometimes I find myself issuing

:syn sync fromstart

I suggest reading through the documentation under

:help syn-sync

or just check

:help syntax

and find the section on synchronization.

to make an informed decision among the four available basic options. I maintain mappings to function keys to switch between "fromstart" and "ccomment" modes and for just clearing the sync settings.

Solution 4

This is a really old post, but I was experiencing the same thing: sometimes syntax highlight would just stop working when looking at the javascript section in an .html file. As the OP mentions, a quick workaround was to scroll up and then magically things would start highlighting again.

Today I found the underlying problem and a good solution. In Vim, syntax highlighting uses a context to derive the correct highlight, where context is defined by the previous lines. It is possible to specify how many lines before the current line are used by issuing :syntax sync minlines=200. In this case, it will use up to 200 previous lines as context. It is possible to use the whole file (which can be slow for long files) by running :syntax sync fromstart.

Once I found that, I added this line to my .vimrc:

autocmd BufEnter *.html :syntax sync fromstart

By doing so, .html files will use the whole file as context. Thus, the javascript section will always by highlighted properly, regardless of how long the JS section is. Hope this helps someone else out there!

Solution 5

For a quick and dirty fix, sometimes I just scroll up and down and the highlighting readjusts. Ctrl+L for a screen redraw can also fix it.

View more solutions

Comments

[Thomas Kammeyer]

Careful: I notice the author of the improved highlighter changed away from syntax sync fromstart in the most recent version... so the issue you saw may start happening in this highlighter. Looks like in the past, it always did fromstart.

[Michael Gundlach]

I have tried both the 9/12/08 release and the 05/17/07 release, and neither of them improve the situation. Opening a complex javascript file in the middle still results in no highlighting, and I must scroll several pages up to have vim start highlighting correctly.

[hunt]

@thomas and @michael you can set the frame that vim uses for creating the highlighting. i can't remember off the top of my head what the actual setting is but it sets how many lines above, and below, the currently displayed window that vim should look at when determining syntax highlighting

[graywh]

That one has way too many syntax items linked to Special, but that's easily fixed. And seems to be better than the one shipped with Vim.

[djeikyb]

I like the look of your screenshots, but your syntax file doesn't do anything different than the standard vim js syntax when I load it. I have other custom syntax files, so I'm wondering why yours doesn't work..

[Jose Elera]

Mine is based on Yi Zhao's which I find to be way superior than the standard vim js syntax. Also, I added extra lines to my Nazca colorscheme for vim. I haven't tried adding these lines directly to the modified syntax file. Actually it is very easy and simple to add these lines to your own colorscheme.

[djeikyb]

Ah, it didn't do anything because I didn't see you had to also add extra lines to whatever colour scheme. Got it now. Thanks!

[puk]

The plugin treats division signs in weird ways. Everything after and including the division sign come out red like text. .../2*x+4... is the same color as ".../2*x+4..."

[Jose Elera]

A quick update, the syntax file is quite mature now, plays well with all colorschemes, all thanks to the community efforts

[northtree]

This is the best solution to fix HTML/JS syntax highlight issue. I don't know why VIM still have this bug which couldn't be fixed. github.com/vim/vim/issues/1775

[Dave F]

In Windows 10, when I created a _vimrc file in my home directory with the line from this answer in it, highlighting stopped working completely because the default VIM configuration file wasn't being used. As a result, I made the first line in my _vimrc file source $VIM/_vimrc and everything worked as expected.