Search code examples
vimeslintneovim

ESLint / Vim (or neovim) workflow

I have used ESLint with Vim and various other plugins like Ale and Prettier. I am now having a lot of difficulty setting things up again. It would be useful for me to know what the ESLint plugin does without any other plugins at all or any other configuration of Vim or neovim.

I am finding the documentation very difficult to follow. I think this is partly because ESLint works in many contexts not just Vim` and also much of what is written assumes other plugins are installed e.g. Ale.

I am guessing that if you are editing a Vim file (perhaps only if it has .js extension?) you can then go into normal mode and invoke ESLint (e.g. :eslint) and then see any errors in the code indicated.

Solution

  • The basics

    1. For the sake of simplification, ESLint is best thought of as a standalone command-line linter, that is not related in any way to Vim or any other text editor/IDE.

    2. The default usage pattern is to execute it in your shell with files as arguments:

      $ eslint goodfile.js
(no output)

$ eslint badfile.js
(list of errors)

      It can also be used as filter:

      $ echo 'console.log(1)' | eslint --stdin
(list of errors)

    3. It can also be told to fix what it can instead of merely reporting it:

      $ eslint --fix badfile.js

    In Vim

    Like lots of command-line programs (linters or not), ESLint can be used from Vim in lots of ways.

    The simplest is to execute it directly on the current file:

    :!eslint %
(list of errors)

    or on the current buffer if it is not written to disk:

    :w !eslint --stdin
(list of errors)

    But that method, while informative, is not very useful because the errors disappear as soon as you press <CR>.

    A much better approach is to use the :make command, which populates the quickfix list with the errors reported by the underlying linter or compiler or whatever. In general, it works like this:

    1. Tell Vim to use program foo for :make with set makeprg=foo.
    2. Tell Vim how to parse the output of foo with set errorformat+=<pattern>.
    3. Do :make % to run the current file through foo.
    4. Do :cwindow to show the list of errors reported by foo, if any.

    In the case of ESLint, if your Vim is recent enough, it should come with what it calls a "compiler script" (that I wrote), which basically does steps #1 and #2 above for you. You can check if you have it with:

    :compiler eslint

    If you get an error, consider this as an opportunity to upgrade.

    After you have selected a compiler, you can perform steps #3 and #4 above to lint your file, which is, let's be honest, tedious.

    From there, you can choose one of three paths:

    1. keep doing it like that because it's fine,
    2. learn a little more of your editor in order to automatise the whole process,
    3. give up on the tinkering and use a third-party plugin.

    Path #2 looks like this. It is not particularly hard or complicated but I wouldn't recommend to a copy/pasting newbie.

    Path #3 involves installing a plugin like ALE, which is throughly documented and has a dedicated issue tracker.