How to make Vim plugin with Javascript

vim For persons knowing how to use vim, vim runtime can be used without plugins as it developed with omni-completion and syntax ready features. If you are amongst those without prior knowledge of vim or who find the standard vim runtime difficult to understand, then read on.

Getting started

  • Plugins Install the recommended plugins.
    Vim-plug is recommended for its simplicity, and it works both on Vim and Neovim.
  • Syntax A JavaScript syntax file accompanies Vim.
    It automatically loads when a JavaScript file is opened.
    You will need to enable automatic filetype detection as Vim does not detect filetypes automatically by default. If you use any plugin other than vim-plug, you have to enable it manually.

Some plugins providing better syntax support

  • For Highlighting The JavaScript syntax highlighting is good enough.
    If you want more features, the ES2015 can come handy and it is better in distinguishing keywords.

    Other options include:

    sheerun/ vim-polyglot which comes with a bunch of language syntax in one;
    pangloss/ vim-JavaScript which makes your code look pretty at a glance by adding concealing symbols;
    jelera/ vim-JavaScript syntax which excludes custom indent settings but is updated very frequently;
    othree/ yajs.vim which is highly suitable if you use ES2016 (ES7) which is similar to the jelera syntax as it does not come with a custom indent settings and is often updated;
    bigfish/ vim-js-context-coloring which is a new tool in highlighting syntax.
    By default, vim does not provide JSDoc and ES2015 (ES6) support unlike all the syntaxes mentioned above which provides JSDoc support and ES2015 (ES6) apart from vim-js-context-coloring.

  • Plugins supporting better indentation Although vim's JavaScript indent bundle is generally efficient, especially if you are using a C-style whitespace. Since 2016, a modified pangloss/ vim-JavaScript version comes along with vim. The modified version rules implied that most persons wont need to change their indent file.
    Other options for indenting include: pangloss/vim-JavaScript; gavocanov/vim-js-indent; itspriddle/vim-JavaScript-indent; vim-js-indent; jiangmiao/simple-JavaScript-indenter; mxw/vim-jsx.

  • Plugins for plain JavaScript development JSON is widely used for configuration.
    A plugin recommended for this is the elzr/vim-json.
    For JSDoc syntax highlighting, othree/ jsdoc-syntax.vim is needed to pull the support from othree/yajs.vim.
    For JavaScript libraries, othree/JavaScript-libraries-syntax.vim supports highlighting of keywords and functions for libraries such as; jQuery, lodash, React, Handlebars, Chai, e.t.c.

  • Autocomplete Also known as intellisense, this feature is a built-in completion features by vim.
    By pressing CTRL + X and any other control sequence such as CTRL + O used for omni-completion or CTRL + F for completing filenames.

  • Linting Numerous linters exist, these broad list includes JSHint, JSLint, eslint amongst others.
    For ease of use, scrooloose/syntastic is recommended.
    Although you have to install their checkers first, their various configurations can be found on syntastic's wiki page.
    Makeprg is another option to go to.
    It is built in by Vim.
    Even at its simplicity, it does not support grouping results but is efficient at running any program and outputting results to vim.
    osyo-manga/vim-watchdogs can also be used in running linters asynchronously.
    The downside to using this is that its documents are in Japanese language.

  • Formatting Selecting a text and using the '=' key will re-indent it.
    This is how the in-built re-formatter for vim works.

  • vim-jsbeautify* is a plugin used for minifying JavaScript.

AUTHOR

READ NEXT

Boostlog is an online community for developers
who want to share ideas and grow each other.

Delete an article

Deleted articles are gone forever. Are you sure?