TSLintとは?
単純に言うと、TSLintはTypeScriptに向けているESLintのようなリントツール(つまり、リンター)だ。
リンターとルールのインストール
オススメのルールはAirbnbのJavaScriptに向けているESLintルールのTypeScript版だ。
npm install tslint@^5.6.0 --save-dev
npm install tslint-config-airbnb@^5.2.0 --save-dev
npm install tsutils@^2.8.0 --save-dev
tslint-config-airbnbの依存のpeer dependencyのためにtsutilsのインストールもインストールしたほうがいい(インストールしないと不具合が発生する可能性ある)。
React開発の場合、tslint-reactに参考。
リンターとルールの設定
プロジェクトのルートに下記のtslint.jsonを追加:
{
"extends": ["tslint-config-airbnb"],
"rules": {
"max-line-length": [true, 120],
"object-shorthand-properties-first": false,
"radix": false,
"ter-arrow-parens": false
}
}
下記のようなクラスのdefault importをしたい場合"import-name": false
が必要。
import TextareaAutosize from 'react-textarea-autosize';
キャメルケースの関数名などは希望なら"variable-name": false
が必要。例えば、ReactでよくStatelessComponentという関数をクラスのように利用する:
export const Routes: React.StatelessComponent<{}> = () => (...);
リントスクリプト
package.jsonのscriptsに下記のようなスクリプトを追加:
"lint": "tslint 'src/**/*.ts'"
Reactなどで使うtsxファイルもlintしたいなら:
"lint": "tslint 'src/**/*.ts{,x}'"
上記のスクリプトはnpm run lint
及びyarn lint
で実行できる。
注意:tslintのパラメータの周りに ' ' <=が必要!
"scripts"のサンプル:
"scripts": {
"build": "npm run clean && npm run lint && tsc",
"clean": "del-cli lib/* !.gitignore",
"lint": "tslint --format stylish 'src/**/*.ts{,x}'",
"start": "cross-env NODE_ENV=production node .",
"start:dev": "cross-env NODE_ENV=development nodemon -e ts -w src -x ts-node src/app.ts",
"test": "cross-env NODE_ENV=test mocha --recursive test"
}
備考:
- del-cli: rmはWindowsとかのプラットフォームを対応しないからdel-cliでクロスプラットフォーム対応のrmができる
- cross-env:環境編集の渡すことも環境によって異なるのでcross-envでクロスプラットフォーム対応の環境変数の渡すことができる
ルールについて
tslint-config-airbnbのルールは4つのルールセットに基づく: