Painless ESLint/Standard integration

eslint-standard.md

Painless ESLint/Standard integration

Our goal, here, is threefold:

• use Vim's built-in features to their fullest,
• be a good project citizen even if we don't use $EDITOR_DU_JOUR,
• have a minimal but beneficial impact on the infrastructure of the project we work on.

Expose a simple interface for linting at the project level

We will add two scripts to our package.json: lint and lint:compact.

Users can run the lint script interactively to get the usual detailed output:

$ npm run lint src

while tools (editors, CI, Git hooks, etc.) can be set up to use the more machine-friendly lint:compact script:

$ npm run lint:compact

ESLint

1. Install the required modules:

   $ npm install --only=dev eslint
   

2. Configure ESLint:

   $ ./node_modules/.bin/eslint --init
   

   or:

   $ npx eslint --init
   

3. Edit the "scripts" section of package.json:

   "scripts": {
       "lint": "eslint",
       "lint:compact": "eslint --format compact"
   },
   

Standard

Standard is a relatively popular ESLint wrapper that comes with its own rules. It defaults to ESLint's --format compact, which is fine from a tooling standpoint, but we must add yet another dependency to get a human-readable output.

NOTE: Standard being an ESLint wrapper, it is an either or situation: ESLint or Standard.

1. Install the required modules:

   $ npm install --only=dev standard snazzy
   

2. Edit the "scripts" section of package.json:

   "scripts": {
       "lint": "standard | snazzy",
       "lint:compact": "standard",
   },
   

Help Vim understand eslint output

Add this line to $MYVIMRC:

set errorformat+=%f:\ line\ %l\\,\ col\ %c\\,\ %m,%-G%.%#

Reference:

:help 'errorformat'

Tell Vim what external command to use for :make

Add this line to after/ftplugin/javascript.vim for linting only:

setlocal makeprg=npm\ run\ --silent\ lint:compact

Or, for linting and fixing:

setlocal makeprg=npm\ run\ --silent\ lint:compact\ --\ --fix

Usage:

:make % | cwindow
:make ## | cwindow

Reference:

:help 'makeprg'
:help :make
:help quickfix
:help quickfix-window
:help :_%
:help :_##

Tell Vim to lint the current file on write

Add this snippet to after/ftplugin/javascript.vim:

augroup JS
    autocmd! * <buffer>
    autocmd BufWritePost <buffer> silent make <afile> | silent redraw!
augroup END

Reference:

:help autocommand

Tell Vim to lint and fix the current file on write

Add this snippet to after/ftplugin/javascript.vim:

setlocal autoread
augroup JS
    autocmd! * <buffer>
    autocmd BufWritePost <buffer> silent make <afile> | checktime | silent redraw!
augroup END

Reference:

:help 'autoread'
:help :checktime

---

My Vim-related gists.

prettier.md

BONUS: Prettier integration

Expose a simple interface for formatting at the project level

1. Install the required modules:

   $ npm install --only=dev prettier
   

2. Edit the "scripts" section of package.json:

   "scripts": {
       "format": "prettier",
   },
   

Tell Vim what external command to use for formatting

Add this line to after/ftplugin/javascript.vim:

setlocal formatprg=npm\ run\ --silent\ format\ --\ --stdin-filepath\ %

Usage:

gqip
gggqG
v{motion}gq

Reference:

:help gq
:help 'formatprg'

Thank you for writing such detailed integrations. This is very rare to find such detailed steps by steps integration of tools that have been around for so long. You are doing an amazing work to VIM community by going into such depth to explain little things in VIM that matters. Keep up amazing work.

Thank you, @samundra.