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, @samundra.