typescript-eslintの拡張子設定

tslintが非推奨になり、typescript-eslint 1.0がリリースされた今、あちこちで移行プロジェクトがはじまっていると思います。

それ自体の設定は公式に譲り、本記事では周辺ツールや開発環境における地味に必要な拡張子の設定について共有したいと思います。

ほかにもあれば編集リクエストでご協力ください。

.eslintrcでできないの？

はい。これが理想ですが、現状ではoverrideオプションを使ってもできないらしいです。GitHubにIssueが上がっています。

https://github.com/eslint/eslint/issues/2274

コマンドライン

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 は明示的に設定する必要があります。でないと電球が出てきません。

参考

• https://github.com/Microsoft/vscode-eslint/issues/609

Webstorm

未対応のようです。

公式サイトのESLintのページに"Linting TypeScript code with ESLint"というセクションがあるのですが、ラインナップに"@typescript-eslint/eslint-plugin"の記述がありません。

動かす方法をご存知であれば教えてください。

参考

• https://www.jetbrains.com/help/webstorm/eslint.html

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
        }
      }
    }
  ]
};

参考

• https://www.gatsbyjs.org/packages/gatsby-plugin-eslint/