eslintをdockerを使って試してみたメモ

概要

eslintをdockerでインストールして動かしてみる。(tslintでもやってみた)
以下の2点をそれぞれ確認できるようにする。
今回はReactを対象にしているのでjsxもチェックできるようにする。

• 最低限の文法チェック
• エラーが出た部分の自動修正

ディレクトリ構成

project
  + src # ソースの入ったディレクトリ
  + webpack # react,es6トランスパイル用のビルドツールの入ったディレクトリ
  - bin
    - eslint.sh
    - eslint_fix.sh
  - eslint 
    - Dockerfile
    - .eslintrc.json
    - package.json
  - docker-compose.yml

各ファイルの内容

Dockerfile

# docker-hubからnode入りコンテナを取得
# https://hub.docker.com/_/node/
FROM node:7.5.0

# コンテナ上の作業ディレクトリ作成
WORKDIR /my_lint

# 後で確認出来るようにpackage.jsonを作成
RUN npm init -y

RUN npm i -D eslint
RUN npm i -D eslint-plugin-react
RUN npm i -D babel-eslint

eslintを起動するときに、拡張子を.js,.jsxを対象とするように以下で設定している。
チェック対象にはsrcディレクトリを指定している。

package.json

{
  "name": "my_lint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "eslint": "eslint --ext .js --ext .jsx src",
    "eslint-fix": "eslint --fix --ext .js --ext .jsx src"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-eslint": "^7.1.1",
    "eslint": "^3.15.0",
    "eslint-plugin-react": "^6.9.0"
  }
}

以下のルールは動作確認用に最小限となっている。
実際に使用するときはair-bnbなどのルールを使うのがよいかも。

.eslintrc.json

{
    "parser": "babel-eslint",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "no-unused-vars": ["off"],
        "indent": [
            "error",
            2
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single",
            {
                "allowTemplateLiterals": false
            }
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

docker-compose.yml

lesson_eslint_tool:
  build: ./eslint
  volumes:
    # ビルドするソースファイル
    - ./src:/my_lint/src
    # eslint設定ファイル
    - ./eslint/.eslintrc.json:/my_lint/.eslintrc.json
    # コンテナ上のpackage.jsonを上書き
    - ./eslint/package.json:/my_lint/package.json

eslintを起動するdocker-composeのコマンドを毎回書くのは面倒なのでシェルスクリプトで実行する。

#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)

# docker-composeの起動。 コンテナ内に入る
cd $bin_dir/../ && docker-compose run lesson_eslint_tool npm run -s eslint

-sオプションで、npmのエラーを消している。

eslint_fix.sh

#!/bin/bash

# このシェルスクリプトのディレクトリの絶対パスを取得。
bin_dir=$(cd $(dirname $0) && pwd)

# docker-composeの起動。 コンテナ内に入る
cd $bin_dir/../ && docker-compose run lesson_eslint_tool npm run -s eslint-fix

補足

.eslintrc.jsonファイルで"parser": "babel-eslint",を使わないと、クラスのプロパティとしてラムダ式を使った場合にパースエラーが出てしまう。そのような書き方がなければ不要かも。

/my_lint/src/toggle.jsx
  9:15  error  Parsing error: Unexpected token =

✖ 1 problem (1 error, 0 warnings)

パースエラーがでているのは以下のソースのhandleClick = () => {の行

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
  }

  handleClick = () => {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

参考

eslint最初の一歩
eslint rules
npm ERR 非表示
ESLintでReactとES2015の構文チェック(eslint-config-airbnb)
babel-eslintでチェックする
mochaのitとifを間違えるのでESLintのrule pluginを自作した
Class Propertiesを使ったReactコンポーネントをESLintで静的検証
ESLintでReactをチェックする
TypeScript を ESLint を使ってチェックする
tslint-react
typescript-eslint-parser