EsLint and Prettier for JavaScript/React in Vim

These are the plugins and settings that I use for JavaScript/React.js-development with (Neo)Vim.

Vim Plugins

I use minpac as my package manager. VimCasts has a good introduction video on minpac if you’re interested.

Useful plugins:

Optional:

If you use tern.js you need to install the npm package, too.

Installing NPM Packages and Setup

I use ESLint and Prettier. If you use Create React App skip the ESLint installation because it doesn’t play nice.

npm -i -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react or
yarn add --dev prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react

Create an .eslintrc file in your project directory:

{
  "plugins": ["prettier", "react"],
  "extends": ["prettier", "eslint:recommended", "plugin:react/recommended"],
  "rules": {
    "prettier/prettier": "error"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

You can also add a .prettierrc file:

{
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2
}

This adds a basic setup. If you want to get fancy, you can also use presets, for example, the AirBnB settings. David Tran has a nice example for his gatsby blog.
You might need to install additional npm packages, e.g. eslint-config-airbnb, eslint-plugin-import, eslint-plugin-jsx-a11y and eslint-plugin-react.

Customizing ALE, EsLint and Prettier

Enable Syntax Highlighting for JSX files and configure ALE.
The ALE Plugin helps with linting and fixing JavaScript files. Add the following to your ~/.vimrc file:

let g:jsx_ext_required = 0

let g:ale_linters = {
\   'javascript': ['standard'],
\}

let g:ale_fixers = {
\   'javascript': ['prettier', 'eslint'],
\   '*': ['remove_trailing_lines', 'trim_whitespace'],
\}

let g:ale_sign_error = '✘'
let g:ale_sign_warning = '⚠'
let g:ale_lint_on_enter = 0
let g:ale_lint_on_text_changed = 'never'
highlight ALEErrorSign ctermbg=NONE ctermfg=red
highlight ALEWarningSign ctermbg=NONE ctermfg=yellow
let g:ale_linters_explicit = 1
let g:ale_lint_on_save = 1
let g:ale_fix_on_save = 1
let g:ale_javascript_prettier_options = '--no-semi --single-quote --trailing-comma none'

This creates nicer error messages for ALE, doesn’t lint on entereing the file or when editing a file, but automatically lints and fixes when you save. The explicit option makes sure that there are no conflicts with other linters.

I prefer no trailing commas, single quotes and no semicolons in my files, so I added this to my Prettier options.

You can also set up keybindings:

nnoremap <leader>af :ALEFix<cr>
"Move between linting errors
nnoremap ]r :ALENextWrap<CR>
nnoremap [r :ALEPreviousWrap<CR>

EsLint and Prettier for JavaScript/React in Vim

Vim Plugins

Installing NPM Packages and Setup

Customizing ALE, EsLint and Prettier

Further Reading