Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Painless ESLint/Standard integration

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 (a relatively popular ESLint wrapper)

  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.

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'
@samundra
Copy link

samundra commented Jun 17, 2020

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.

@romainl
Copy link
Author

romainl commented Jun 17, 2020

Thank you, @samundra.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment