No Programming, No Life
Jan 3, 2017 • 3 min read

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