Skip to content

Instantly share code, notes, and snippets.

@romainl
Last active August 19, 2024 09:11
Show Gist options
  • Save romainl/2f748f0c0079769e9532924b117f9252 to your computer and use it in GitHub Desktop.
Save romainl/2f748f0c0079769e9532924b117f9252 to your computer and use it in GitHub Desktop.
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
  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 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.

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

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