酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

ESLint で React.js / ES6+ のコードをチェックする手順

ESLint は JavaScript のための静的検証ツールです。コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのスタイルを統一したりするのに役立ちます。 この記事では、 ESLint で ES6+ で書かれた React.js のチェックをするための設定を説明します。


Style guide

Airbnb のスタイルガイドがわかりやすくておすすめです。ESLint でもこのスタイルガイドをベースにチェックをしてくれます。

Installation

npm でインストールするライブラリはこちら:

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

Configuration

ESLint の設定はこちら:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// .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

1
./node_modules/bin/eslint sample.js

Usage in overcommit

overcommit という git event を hook して様々なコマンドを実行できるツールがあります。 このツールと ESLint を組み合わせる手順も書いておきます。

まずは設定:

1
2
3
4
5
6
7
# .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'

あとは bundle exec overcommit --sign としておけば git commit の前に自動でESLintが実行されます。

Usage in wercker

無料で使えるCIツールの wercker で ESLint を実行するための設定も書いておきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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: cd client && npm install -D

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

Happy Hacking!

Special Thanks

おすすめの書籍