Permalink
Browse files

see updates in changed file's inline contents

  • Loading branch information...
davidosomething committed Jan 16, 2016
1 parent 389ea73 commit 2e232bdf72ee1b703c361bebead7a3267402c602
Showing with 60 additions and 25 deletions.
  1. +60 −25 md/_posts/vim-for-javascript.md
@@ -13,6 +13,12 @@ tags:

### Updates

- Jan 16, 2016 ([diff](https://github.com/davidosomething/16.davidosomething.com/commit/))
> Clean up some grammar.
> Added heavenshell/vim-jsdoc
> Change omnifunc example to ensure copypasters don't set global omnifunc
> More on linters
- Jan 12, 2016 ([diff](https://github.com/davidosomething/16.davidosomething.com/commit/ee240b48380070a4f68c1063c29b79b6a724c8f6))
> Make sure plugin names are all linkified. Add more notes on what the
> indent plugins do.
@@ -116,7 +122,7 @@ Some notable options in this case are:
[pangloss/vim-javascript], notably support for the syntax group names in
[othree/yajs.vim]. That helps it pick out keywords and when you are
inside comments if you are using [othree/yajs.vim].
- The format expression from the original has been removed.
- The format expression from the pangloss plugin has been removed.
- [itspriddle/vim-javascript-indent]
- This is a git mirror of [Ryan Fabella's indent script]
- It mostly detects closing brackets and parentheses and indents based on
@@ -136,7 +142,7 @@ filetypes that plain JavaScript.

othree has a syntax plugin that provides support for planned, but not-yet-final
EcmaScript features: [othree/es.next.syntax.vim]. I personally don't use it
since I currently stick to the ES2015 at most.
since I currently stick to the ES2015 feature set at most.

- [othree/es.next.syntax.vim]

@@ -158,25 +164,36 @@ JavaScript regions. It specifically mentions pangloss' extension in the docs but
### JSON

A lot of things use JSON for configuration, so I recommend [elzr/vim-json] for
that. Check out its options, I don't like some of the defaults so I turn them
off, but you might want them:
that. Check out its options, though; I don't like some of the defaults so
I turn them off, but you might want them. Install with:

```viml
Plug 'elzr/vim-json'
```

- [elzr/vim-json]

### JSDoc
### JSDoc syntax highlighting

If you document using JSDoc, all of the syntax plugins above support JSDoc
already. There's a plugin called [othree/jsdoc-syntax.vim] that pulls that
support out of [othree/yajs.vim], but it is only for adding JSDoc support to
_other_ languages like TypeScript.
highlighting already. There's a plugin called [othree/jsdoc-syntax.vim] that
pulls that support out of [othree/yajs.vim], but it is only for adding JSDoc
support to _other_ languages like TypeScript.

- [othree/jsdoc-syntax.vim]

### jQuery Plugins
### JSDoc auto-snippets

The plugin [heavenshell/vim-jsdoc] can automatically insert JSDoc comments for
you if your cursor is on a function definition. It'll check for the function
name, arguments, and add the doc-block comment for you.

I use this plugin quite often (I actually have a fork of it with some additions
but hopefully they get merged into the upstream).

- [heavenshell/vim-jsdoc]

### jQuery plugins

Files named `jquery.*.js` are typically jQuery plugins. There's a specific
syntax highlighting plugin for such files: [itspriddle/vim-jquery], but it's
@@ -204,24 +221,25 @@ I won't go into too much detail about this since it isn't JavaScript specific.

Vim includes basic code completion built in. See [this wikia article] for
information on how to use that. The gist is that the completion system will
run a function, the `omnifunc`, to populate the pop-up it with results.
run a function, the `omnifunc`, to populate autocompletion pop-up with results.

To use the default completion function, add this to your `vimrc`:
To use the default completion function, add this to your vimrc:

```viml
set omnifunc=javascriptcomplete#CompleteJS
autocmd FileType javascript setlocal omnifunc=javascriptcomplete#CompleteJS
```

For even better completion, consider using a plugin like
[Shougo/neocomplete.vim] or [Valloric/YouCompleteMe]. On Neovim, an option is
[Shougo/deoplete.nvim].
These plugins will add features like automatically popping up the completion
menu, caching of keywords, and integration with other sources of completion
(allowing for multiple `omnifunc`s) than what's in the current Vim buffer.
than what's in the current Vim buffer (allowing for multiple `omnifunc`s).

For portability across my systems without needing a recompile, I use
[Shougo/neocomplete.vim]. They're both offer roughly the same feature set,
though, so whatever might be missing in one can probably be configured into it.
[Shougo/neocomplete.vim]. Shougo's plugins and YouCompleteMe both offer roughly
the same feature set, though, so whatever might be missing in one can probably
be configured into it.

With [Shougo/neocomplete.vim], using multiple sources of completion can be done
by providing a list of function names like so:
@@ -253,8 +271,8 @@ the autocompletion for many very robust IDEs. It parses your code and extracts
various symbols, like function names, variable names, and values.

The official vim plugin can also show you function signatures (what parameters
parameters it expects) and can extract values from related files if you
configure it to do so (via a `.tern-project`).
parameters it expects) and can extract values from related files (e.g. CommonJS
`require()`'d files) if you configure it to do so (via a `.tern-project`).

The completion is provided to Vim's auto-completion engine via an `omnifunc`,
`tern#Complete`. Again, you'll have to setup your `omnifunc` appropriately to
@@ -323,24 +341,39 @@ browse through those tags.
Of particular note on the generation side is [ramitos/jsctags], which will
generate ctags using TernJS.

Personally, I find ctags too annoying to use since the files need to be
regenerated to search them (except with [majutsushi/tagbar] which runs ctags
on every open, but only for the current file). Usually just using `git grep` or
[the_silver_searcher] is adequate, and there are plugins for those, too (out
of scope for this article).

- [ramitos/jsctags]

## Linting

While there are actually JSHint, JSLint, eslint, etc. runners for Vim, for your
own sanity just use [scrooloose/syntastic]. It supports a variety of syntax
checkers, but you may need to install them first. Refer to its
[wiki page on configuring various JavaScript linters].
checkers, but you may need to install them first. For example, for eslint
support, which is the standard these days, `npm install -g eslint` first.
Refer to syntastic's [wiki page on configuring various JavaScript linters].

Syntastic's pitfalls are that it is large (it is essentially a linter
framework for Vim) and it doesn't run asynchronously (doesn't mean it is slow
though -- depends on the speed of the lint program).

There's also [osyo-manga/vim-watchdogs], which runs linters asynchronously, but
the docs are only in Japanese. The plugins [Shougo/vimproc.vim] and
[tpope/vim-dispatch] can run any tool async, but
it isn't easily configurable as a lint-runner.
You could alternatively use Vim's built-in makeprg, which can run any program
against your file. Syntastic actually uses that under the covers. There's
[osyo-manga/vim-watchdogs], which runs linters asynchronously, but the docs are
only in Japanese. The plugins [Shougo/vimproc.vim] and [tpope/vim-dispatch] can
run any tool async, but they aren't easily configurable as lint-runners.

If you're running Neovim, [neomake](https://github.com/benekastah/neomake) is
an option.
an option that's gaining popularity. It makes full use of Neovim's asynchronous
job support.

- [scrooloose/syntastic]
- [osyo-manga/vim-watchdogs]
- [neomake](https://github.com/benekastah/neomake)

## Formatting

@@ -357,7 +390,7 @@ something.
## My Vim setup

You can dig through [my Vim configuration on GitHub]. The plugins I use are
all in the main `vimrc` file, and their configurations are interspersed into
all in the main vimrc file, and their configurations are interspersed into
`plugin/`, `ftplugin/`, and `after/*/` to cope with the order in which Vim
loads files.

@@ -380,6 +413,7 @@ loads files.
[actually supports any of them]: https://github.com/mxw/vim-jsx/commit/80dbab7588c615126f47e50fa4d9c329d080ff95#diff-604ad63592f45d351d97cdc9eeae21a3R28
[elzr/vim-json]: https://github.com/elzr/vim-json
[othree/jsdoc-syntax.vim]: https://github.com/othree/jsdoc-syntax.vim
[heavenshell/vim-jsdoc]: https://github.com/heavenshell/vim-jsdoc
[itspriddle/vim-jquery]: https://github.com/itspriddle/vim-jquery
[othree/javascript-libraries-syntax.vim]: https://github.com/othree/javascript-libraries-syntax.vim
[this wikia article]: http://vim.wikia.com/wiki/Omni_completion
@@ -395,6 +429,7 @@ loads files.
[Shougo/unite.vim]: https://github.com/Shougo/unite.vim
[ctrlpvim/ctrlp.vim]: https://github.com/ctrlpvim/ctrlp.vim
[ramitos/jsctags]: https://github.com/ramitos/jsctags
[the_silver_searcher]: https://github.com/ggreer/the_silver_searcher
[scrooloose/syntastic]: https://github.com/scrooloose/syntastic
[wiki page on configuring various JavaScript linters]: https://github.com/scrooloose/syntastic/wiki/JavaScript
[osyo-manga/vim-watchdogs]: https://github.com/osyo-manga/vim-watchdogs

0 comments on commit 2e232bd

Please sign in to comment.