JavaScript - ESLint


see also JavaScript - Flow.

  1. https://github.com/eslint/eslint
  2. https://objectcomputing.com/resources/publications/sett/january-2017-eslint-dont-write-javascript-without-it

installation

install ESLint locally

$ yarn add eslint --dev

install babel-eslint

  1. https://github.com/babel/babel-eslint/
$ yarn add babel-eslint --dev

use babel-eslint as default ESLint parser:

# .eslintrc.yml

parser: 'babel-eslint'

standard ESLint parser marks some ES7/ES8/ES.Next syntax as invalid, say field declarations:

class Counter extends HTMLElement {
  x = 0;
}

install eslint-plugin-react

NOTE: this plugin will be installed automatically if you generate ESLint config from anew and opt for React support.

install this plugin if you use react plugin in ESLint config:

$ yarn add eslint-plugin-react --dev

install eslint-plugin-flowtype

NOTE: this plugin will be installed automatically if you generate ESLint config from anew and opt for Flow type support.

install this plugin if you use flowtype plugin in ESLint config:

$ yarn add eslint-plugin-flowtype --dev

see JavaScript - Flow on how to configure this plugin.

configuration

generate ESLint config

$ yarn run eslint --init
...
Successfully created .eslintrc.yml file in <project-directory>

also ESLint config is required for syntastic to work (see below).

this will also install any additional plugins (based on your answers) locally as development dependencies in package.json:

"devDependencies": {
  // ...
  "eslint": "^3.19.0",
  "eslint-plugin-react": "^7.0.1",
  // ...
}

configure ESLint rules

  1. http://eslint.org/docs/user-guide/configuring

extending eslint:recommended configuration enables subset of core rules having a check mark on the rules page:

# .eslintrc.yml

extends:
  - 'eslint:recommended'

rule modifications are picked immediately on next syntastic run. all the rules are added to rules section of .eslintrc.yml.

rule format: name: setting or name: [setting, config] where

some rules worth mentioning are listed below:

usage

ignore ESLint errors on a one-off basis

  1. https://github.com/eslint/eslint/issues/6903#issuecomment-239646089
// eslint-disable-next-line
const foo = 123;
const foo = 123; // eslint-disable-line

render () {
  /* eslint-disable react/jsx-handler-names */
  return (
    <ReactTags
      tags={this.props.tags}
      handleAddition={this.props.onAdd}
      handleDelete={this.props.onRemove}
    />
  );
  /* eslint-enable react/jsx-handler-names */
}

run ESLint

$ yarn run eslint file.js

Vim integration

[NOT USED] syntastic

  1. https://medium.com/@hpux/vim-and-eslint-16fa08cc580f
  2. http://remarkablemark.org/blog/2016/09/28/vim-syntastic-eslint/
  3. https://github.com/vim-syntastic/syntastic/issues/1692

NOTE: ESLint must be installed globally for syntastic eslint checker to be available (like for Flow).

syntastic error message when ESLint is not installed globally:

CacheErrors: Checker javascript/eslint is not available
$ yarn global add eslint
" ~/.vim/vimrc

let g:syntastic_javascript_eslint_exe = '$(npm bin)/eslint'
let g:syntastic_javascript_checkers=['eslint']

ale

unlike syntastic, ALE doesn’t require ESLint to be installed globally - it finds ESLint script ($(npm bin)/eslint) somehow.

" ~/.vim/vimrc

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