ESLint with React.js & ES6+


ESLint is a static lint tool for JavaScript. Before running your code, the tool find obvious bug.
In addtion, it helps to unify your code styles such as how to use parentheses and spaces, etc.
In this article, I will explain the ESLint configuration for checking React.js written with ES6+.


🎳 Style Guide

Aribnb’s style guide is really great and easy to understand. ESLint also check your code based on the style guide.

🚕 Installation

Install following libraries:

npm install --save-dev eslint babel-eslint eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

🎉 Configuration

ESLint configuration is as follows:

// .eslint.json
{
"extends": "airbnb",
"parser": "babel-eslint",
"env": {
"browser": true
},
"ecmaFeatures": {
"classes": true,
"jsx": true
},
"plugins": [
"react",
"jsx-a11y",
"import"
],
"extends": ["eslint", "eslint:recommended", "plugin:react/recommended"],
"parserOptions": {
"ecmaVersion": 7,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"arrow-body-style": "error",
"arrow-parens": "error",
"arrow-spacing": "error",
"eqeqeq": "error",
"generator-star-spacing": "error",
"no-duplicate-imports": "error",
"no-eq-null": "error",
"no-undefined": "error",
"no-useless-computed-key": "error",
"no-useless-constructor": "error",
"no-useless-rename": "error",
"no-var": "error",
"object-shorthand": "error",
"prefer-arrow-callback": "error",
"prefer-const": "error",
"prefer-rest-params": "error",
"prefer-spread": "error",
"prefer-template": "error",
"rest-spread-spacing": "error",
"semi": "error",
"template-curly-spacing": "error",
"yield-star-spacing": "error"
}
}

Please see moore detail Configuring ESLint.

🐰 Usage in Command Line

./node_modules/bin/eslint sample.js

🐡 Usage in overcommit

overcommit is a git hook management tool which can execute various command before git commit, push or etc.
The following configuration is how to use ESLint with overcommit.

At first, overcommit configuration like this:

# .overcommit.yml (Add following comfigugration)
PreCommit:
# Style Check for JavaScript
EsLint:
enabled: true
command: ['./client/node_modules/.bin/eslint', 'client/components/*', '-c', 'client/.eslintrc.json']
include: '**/*.jsx'

Ater the configuration, execute bundle exec overcommit --sign, so ESLint will be executed automatically before git push.

😸 Usage in wercker

The configuration of free CI wercker is as follows:

eslint:
steps:
- bundle-install:
jobs: 4

- install-packages:
name: Install node.js, build-essential, libpq-dev
packages: build-essential libpq-dev nodejs npm nodejs-legacy

- script:
name: NPM install
code: npm install -D

- script:
name: Run ESLint
code: eslint components/* -c .eslintrc.json

Happy Hacking!

🍣 Special Thanks

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!