TypeScriptでもLintを張る

TypeScriptの3つめ。

やはり大人の嗜みとしてLintを設定したいと思います。ES6ではEslintでAirbnbをやってました。TypeScriptでもAirbnbを張り付けときます。

$ yarn add tslint tslint-config-airbnb tslint-react tslint-loader -D

名前もそのまま、Tslintというのがあります。設定もJSのAirbnbがTslint版で移植されてましたが、こちらはReact関係が無いので、補いでtslint-reactを。webpackに差し込み用にtslint-loaderを入れます。

{
    "extends": ["tslint-config-airbnb", "tslint-react"],
    "rules": {
        "variable-name": false,
        "ter-indent": [true, 4],
        "max-line-length": [true, 120]
    }
}

Tslintの設定は、プロジェクトルートにtslint.jsonを置きます。私の好みとしてインデント4空白、一行最大120字というのに変えたほか、ReactでStateless Componentで先頭大文字の名前の関数を書くとひっかかかるのを緩和するために、variable-name=falseにしました。それだけ。

// package.jsonの一部
    "scripts": {
        "lint": "tslint --project ./ --type-check './ts/**/*.{ts,tsx}'"
    },

package.jsonのscripts.lintにコマンドを書きますが、型チェック(=文法チェック)も同時にがっつりやってくれるように、–projectと–type-checkスイッチをつけます。–projectはスイッチの引数にルートフォルダを指定。これはtsconfig.jsonのある場所を設定するとのヘルプ説明でした。

$ yarn lint

yarn run lintもショートハンドでyarn lintがあります。本家Eslint版のAirbnbと比べて、このTslint版はなんか緩くあまり怒られない。

// webpack.config.development.tsの一部
    module: {
        rules: [{
            test: /\.(ts|tsx)$/,
            use: [
                'awesome-typescript-loader',
                'tslint-loader',
            ],
        }],
    },

tslint-loaderをローダーチェーンの一番下に入れます。これで一番最初にLintフィルターしてくれる。

設定のベスト

Tslintの設定で、まだまだ何がベストが見えてないです。JSX構文について緩い感じがするので、Eslintのほうを見つつTslintを試行錯誤するってのがおいおいやってきます。

そのココロは、TypeScriptと生きてく決心がついてきた。まだ二日の"にわか"ですけど。