tslintが非推奨になり、typescript-eslint 1.0がリリースされた今、あちこちで移行プロジェクトがはじまっていると思います。
それ自体の設定は公式に譲り、本記事では周辺ツールや開発環境における地味に必要な拡張子の設定について共有したいと思います。
ほかにもあれば編集リクエストでご協力ください。
.eslintrcでできないの？
はい。これが理想ですが、現状ではoverrideオプションを使ってもできないらしいです。GitHubにIssueが上がっています。
コマンドライン
eslintは *.js のファイルしかみないので、明示的な指定がいります。
--ext オプションで指定するか単純にglobでできます。
eslint --fix src/**/*.ts
が、globでやるとひとつもファイルがないとき（ボイラープレート作成直後とか）にエラーになってしまうので、--extオプションがよさそうです。
eslint --ext .js,.jsx,.ts,.tsx --fix lib/**
VS Code
vscode-eslintの設定
.vscode/settings.json
{
"tslint.enable": false,
"eslint.enable": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{ "language": "typescript", "autoFix": true },
{ "language": "typescriptreact", "autoFix": true }
],
}
autoFix は明示的に設定する必要があります。でないと電球が出てきません。
参考
Webstorm
未対応のようです。
公式サイトのESLintのページに"Linting TypeScript code with ESLint"というセクションがあるのですが、ラインナップに"@typescript-eslint/eslint-plugin"の記述がありません。
動かす方法をご存知であれば教えてください。
参考
Webpack
……tslint使っていた方なら書くまでもないですよね。 "eslint-loader" を enforce: "pre" の設定で使ってください。
Gatsby
ちょうどGatsby使っているので。
gatsby-plugin-eslintを使います。
npmかyarnでインストールして
yarn add -D gatsby-plugin-eslint eslint-loader eslint
設定ファイルをにプラグインを追加します。
gatsby-config.js
module.exports = {
plugins: [
"gatsby-plugin-sass",
{
resolve: "gatsby-plugin-eslint",
options: {
test: /\.jsx?$|\.tsx?$/,
exclude: /node_modules|\.cache|public/,
stages: ["develop"],
options: {
emitWarning: true,
failOnError: false
}
}
}
]
};