tslintをDockerを使って試してみたメモ

概要

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

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

ディレクトリ構成

project
  + src # ソースの入ったディレクトリ
  + webpack # typescriptトランスパイル用のビルドツールの入ったディレクトリ
  - bin
    - tslint.sh
    - tslint_fix.sh
  - tslint 
    - Dockerfile
    - tslint.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 typescript
RUN npm i -D tslint
RUN npm i -D tslint-react

tslintを起動するときに、拡張子を.ts,.tsxを対象とするように以下で設定している。

package.json

{
  "name": "my_lint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "tslint": "tslint -c tslint.json 'src/**/*.ts', 'src/**/*.tsx'",
    "tslint-fix": "tslint --fix -c tslint.json 'src/**/*.ts', 'src/**/*.tsx'"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tslint": "^4.4.2",
    "tslint-react": "^2.3.0",
    "typescript": "^2.1.5"
  }
}

tslintの設定。動作確認用の最低限なので、要カスタマイズ。

tslint.json

{
  "extends": ["tslint:latest", "tslint-react"],
	"rules": {
        "quotemark": [true, "single", "jsx-double", "avoid-escape"],
		"curly": true,
		"class-name": true,
		"semicolon": ["always"],
		"triple-equals": true
	}
}

docker-compose.yml

# lint-tool
lesson_tslint_tool:
  build: ./tslint
  volumes:
    # ビルドするソースファイル
    - ./src:/my_lint/src
    # コンテナ上のpackage.jsonを上書き
    - ./tslint/package.json:/my_lint/package.json
    # tslint設定ファイル
    - ./tslint/tslint.json:/my_lint/tslint.json
    # typescriptの設定ファイル
    - ./webpack/tsconfig.json:/lint/tsconfig.json

上記の設定ファイルでwebpackディレクトリのtypescript設定ファイルを読み込んでいる。
この設定ファイルは以下で作成したものと同じ。
Redux ExampleのTodo ListをはじめからていねいにをTypescriptで(1)

tsconfig.json

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "jsx": "react"
    }
}

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

tslint.sh

#!/bin/bash

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

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

-sオプションで、npmのエラーを消している。
この設定をしないと、tslintでエラーチェックしたときに、ひっかかる項目があると以下のようなエラーメッセージが出てしまう。

npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! my_lint@1.0.0 eslint: `tslint -c tslint.json 'src/**/*.ts', 'src/**/*.tsx'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my_lint@1.0.0 tslint -c tslint.json 'src/**/*.ts', 'src/**/*.tsx'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the my_lint package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     tslint -c tslint.json 'src/**/*.ts', 'src/**/*.tsx'
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs my_lint
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls my_lint
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /my_lint/npm-debug.log

fix用のシェルも同様に作成。

tslint_fix.sh

#!/bin/bash

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

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

./bin/tslint.shでtslintのチェック、./bin/tslint_fix.shで自動修正ができるようになった。

参考

tslint
TypeScript再入門覚書 ① Atom環境構築編
末尾カンマがes6から許可
quotemarkの設定について