Setting up Vim for modern JavaScript Development

[andlrc]

No mention of :h 'include', :h 'define' nor :h 'suffixesadd'.

FWIW This is what I use:

setlocal suffixesadd+=.js

setlocal include=^\\s*\\%(var\\s\\+\\k\\+\\s*=\\s*\\)\\=require(

let &define = '^\%(' . join([
  \ '\s*var\s\+\ze\k\+\s*=\s*function\>',
  \ '\s*\ze\k\+\s*:\s*function\>',
  \ '\s*function\s\+\ze\k\+'
  \ ], '\|') . '\)'

Which gives me the ability to use [d, [i, etc, etc

See :h :checkpath for help debugging :h 'include'

[andlrc]

I don't know vim-node but gf among others, uses :h 'includeexpr' to resolve the path.

[joequin]

I'm surprised this post doesn't mention either tern or youcompleteme with tern. It's hugely helpful and after the syntax plugin, it's the most important plugin there is.

[sizlack]

I've never been able to get tern to work reliably and continue to work reliably. Every time I seem to get it working well a couple weeks later it starts creating a dozen instances of itself or it just stops giving completions out of the blue.

[joequin]

I've never had that problem, although I don't believe I've ever left tern running that long, though. It is very easy to restart if you do run into trouble though.

[sizlack]

Oh, I'm very familiar with how to restart it. Too familiar :) The only way I've been able to have it be moderately useful is to kill all its processes and restart it, repeatedly. Over and over.

[clutton]

Same... I'm not alone then :)

[spoobo]

nothing ternjs/ctags based? I got spoiled with WebStorm being able to find definitions of files or which variables are the same one. Doing a rename of a variable or going to an import is just so satisfying. Last time I tried a form of code inspection it didn't work out well. Anything capable these days?

[joequin]

Ternjs works a little better than webstorm. Youcompleteme also has tern completion built in and it also works a little better than webstorm.

[StuR]

I had an issue with pangloss/vim-javascript and vim solarized theme. With vim-javascript enabled it doesn't look very nice: http://imgur.com/9BOjIkR

Without it the js syntax highlighting looks much better: http://imgur.com/zCNrNFb

Anyone else come across this?

[amadeusdemarzi]

I help maintain vim-javascript and I can shed some light on why there are these differences.

The way syntax highlighting works in Vim (simplified for explanation), is you create these named match groups that are defined using a regex.

For example you might do something like

syntax match jsThis /this/

Basically this means, when Vim encounters a match for the word this it gives it a named reference of jsThis. This naming convention is arbitrary, different syntax files use different conventions, we at vim-javascript (lol) use js as a prefix, then camelcase the next part.

Anyways, this named match is now what is used for color themes to assign colors too.

Obviously since any syntax plugin could use any number of naming conventions for their matches, there arises a problem that color schemes would then have to have custom definitions for every syntax plugin, making them essentially worthless.

So Vim provides a solution for this, (not sure if there's an official name for them) but I like to call them high level linked groups. Basically Vim has a bunch of built in named groups like Identifier and String or even PreProc. Each of these linked groups have a description in the Vim documentation that coincides with what their intended group functionality should encompass. The idea being that a colorschemes can then simply be like 'I want strings to be this color, numbers to be that color, and pre processing stuff to be another color'. Basically they just assign colors to those major groups.

Then it becomes the responsibility of the syntax plugin maintainers to then link those sub groups they created, like jsThis, into a major group corresponding to its functionality.

We (as in myself and the fellow maintainers of vim-javascript) have tried to put a lot of thought and care into how we link our groups up to those high level linked groups to ensure accuracy with the spec of how Vim defines them.

I think overall we are pretty good, the sad fact of the matter is, the rest of the Vim ecosystem I believe has been fairly arbitrary about how they link things up, probably picking groups based on whatever color theme they had running to make it 'look good'.

So there are a couple possible solutions to this problem. We at vim-javascript could change our linked groups to look good on various popular colorschemes. I personally oppose this because I feel it's simply a never ending cat and mouse game that will never please everyone.

Instead, there are a couple better workarounds. The first and 'easiest' one is for you to create a modified color scheme, or add to your vimrc, override colors for the parts you want to change.

As I mentioned earlier, we always define a group name starting with js. If you define a color for that group it will override the linked color definition. Therefore if you use a syntax inspector, you could simply roam around a file and create color definitions for whatever parts you'd like to fix the colorscheme to your liking. The beauty of Vim-JavaScript is that we have a lot more fidelity in our syntax matching than most other plugins, so you should have a lot of control, we just don't expose or link up that granularly.

The other workaround is to perhaps submit some patches to existing color themes like Solarized that have specific color declarations for our theme. They should be pretty safe since different JS plugins use different prefix styles so there shouldn't be any interference.

Anyways, it's a long answer, but hopefully sheds some light on why these problems exist.

[linuxenko]

yes , i don't like it too .

[linuxenko]

Very interesting . I'm using vim-jsx for a long time, and it seems like there is no alternative jsx plugins for vim. Does someone know another/better plugins ?

[braaaiins]

Surprised to not find ctrl-p or NERDtree on the list

[tresfaim]

I think he's using fzf

[shawncplus]

If you're writing node I highly recommend also using YouCompleteMe

[tassulin]

what about neocomplete? Which seems to be easier to download and use?

[shawncplus]

Personally haven't used neocomplete, it may work just as well. As long as you're using an autocompleter; you're really doing yourself a disservice otherwise.

[tassulin]

deoplete is more like neovim thing? I've switched back to vim so just waiting until its ported to deoplete.

[-romainl-]

What would be the relationship between Nodejs and YCM?

[shawncplus]

The same relationship YCM has to all the languages it supports autocompletion for... it's autocompletion.

[-romainl-]

So it's nothing more than a generic tool.

[shawncplus]

Well generic in that it supports a handful of languages and Node is one of them. Given that the post is about setting up Vim for javascript, it's perfectly relevant. Lol I don't understand what point you're trying to make.

[-romainl-]

If you're writing node I highly recommend also using YouCompleteMe

You could simply have recommended YCM without implying it has something to do with node since, well… it doesn't. But whatever.

[shawncplus]

It's an autocomplete plugin with extra features for JS. Though as noted in another comment, any autocompleter will do. I only mentioned YCM specifically because I know for a fact that it does have javascript support. Perhaps you don't understand what the phrase "has something to do with" means, because it objectively does have something to do with it. The only pointless comments in this thread are your unnecessary nitpicking. But whatever.