Javascript syntax highlighting in vim

JavascriptVimEditingVim Syntax-Highlighting

Javascript Problem Overview


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.

Javascript Solutions


Solution 1 - Javascript

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

Solution 2 - Javascript

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 - Javascript

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 - Javascript

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 - Javascript

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.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSteve MView Question on Stackoverflow
Solution 1 - JavascriptRob WellsView Answer on Stackoverflow
Solution 2 - JavascriptJose EleraView Answer on Stackoverflow
Solution 3 - JavascriptThomas KammeyerView Answer on Stackoverflow
Solution 4 - JavascriptjorgehView Answer on Stackoverflow
Solution 5 - JavascriptAndrewJFordView Answer on Stackoverflow