typescript-eslintのversion1.x系がリリースされたので使ってみる #JavaScript

typescript-eslintのVersion 1.X系がリリースされましたので、サンプルアプリを使って試してみたいと思います。

typescript-eslintについて

typescript-eslint は、 @mysticatea さんの記事でもあったように、ESLintチームがTypeScriptのサポートする宣言があり、 1月20日にVersion 1.0.0がリリースされました。さらに3日後にはVersion1.1.0がリリースされています。

現在、TypeScriptが利用されているプロジェクトは、TypeScriptの普及により多くなってきたこともあり、後々TSLintからESLintへの移行が必須になるかと思います（しばらくは大丈夫だと思いますが...）。

そこで、今回は、TypeScript + React のサンプルアプリでtypescript-eslintを試してみたいと思います。また、既存のtslint.jsonを利用したサンプルも試してみたいと思います。

ESLintの導入

create-react-app を利用して、任意のサンプルを作ります。

typescript-eslint $ create-react-app typescript-eslint-react-sample --scripts-version=react-scripts-ts

サンプルアプリに移動して、以下のパッケージをインストールします。

eslint
@typescript-eslint/parser
@typescript-eslint/typescript-estree
@typescript-eslint/eslint-plugin

パッケージインストール

typescript-eslint $ yarn add eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin -D

ESLintの設定

eslintの必要最低限の設定をしていきます。

.eslintrc.json

{
  "root": true,
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true,
    "browser": true
  },
  "rules": {
    "no-console": "error" // console.logなどのコンソール出力に対してエラーを出す設定
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

package.json

{
  // ...
  "scripts": {
    "eslint": "eslint -c ./.eslintrc.json 'src/**/*.{ts,tsx}'"
  },
  // ...
}

上記、設定が完了したら、コンソールに対するエラーが出るか確認してみます。

servicework用のtsが引っかかっているのが確認できましたので、最低限の設定に問題がないことを確認できました。

tslintの設定を利用する

既存のプロジェクトでTSLintを利用している場合、その設定をそのまま利用したくなる場合があるかと思います。今回は、tslint.jsonがある場合を想定して試してみたいと思います。

まず、以下のパッケージを追加します。

@typescript-eslint/eslint-plugin-tslint

次に、 .eslintrc.json の設定を変更します。

.eslintrc.json

{
  "root": true,
  "plugins": ["@typescript-eslint", "@typescript-eslint/tslint"], // <- 追加
  // ..
  "rules": { // <- 追加(先ほどのconsoleのルールは削除して、このルールだけにします)
    "@typescript-eslint/tslint/config": [
      "warn",
      {
        "lintFile": "./tslint.json"
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    },
    "project": "./tsconfig.json"// <- 追加
  }
}

次に、　tslint.json を変更します。今回は、 var キーワードの使用に対するチェックを追加します。

tslint.json

{
  "extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
  "linterOptions": {
    "exclude": [
      "config/**/*.js",
      "node_modules/**/*.ts",
      "coverage/lcov-report/*.js"
    ]
  },
  "rules": { // <-追加
    "no-var-keyword": true
  }
}

次に、適当なファイルを修正します。今回は適当な関数を追加して、その中で var を宣言しています。

App.tsx

// ..
class App extends React.Component {
  public fn = () => { // <- 追加
    var arg = "aaa";
    return arg.toUpperCase();
  };
  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
        {this.fn()} // <- 追加
      </div>
    );
  }
}
// ..

最後に、 yarn eslint で追加したルールが機能しているか確認します。

上がESLintの実行結果で、下が、TSLintの実行結果です。
同じエラーが出ていることが確認できたので、正常にtslint.jsonが機能していることが確認できました。

最後に

今回は必要最低限の設定のみで実践しましたが、ルールを整備したり、オリジナルのルールを追加する必要があります。が、導入自体のハードルはそんなに高くないように感じました。

今回作成したリポジトリは、こちらです。

ESLint、TSLintに対するご指摘などがありましたら、ご連絡ください。