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

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

## typescript-eslintについて

**typescript-eslint** は、  @mysticatea さんの[記事](https://qiita.com/mysticatea/items/aaf677928e965abe093d)でもあったように、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` を利用して、任意のサンプルを作ります。

```Shell
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

```Shell:パッケージインストール
typescript-eslint $ yarn add eslint @typescript-eslint/parser @typescript-eslint/typescript-estree @typescript-eslint/eslint-plugin -D
```

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

```json:.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
    }
  }
}
```

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

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

<img width="881" alt="1____w_1_0_q_t_typescript-eslint-react-sample__fish_.png" src="https://qiita-image-store.s3.amazonaws.com/0/170140/c224e121-daa5-d9d6-13e1-b0121e1dbf77.png">


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

## tslintの設定を利用する

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

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

- @typescript-eslint/eslint-plugin-tslint

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

```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` キーワードの使用に対するチェックを追加します。

```json: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` を宣言しています。

```tsx: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` で追加したルールが機能しているか確認します。

<img width="878" alt="1____w_1_0_q_t_typescript-eslint-react-sample__fish_.png" src="https://qiita-image-store.s3.amazonaws.com/0/170140/f0d075de-e4a8-7b23-eb4f-c7290e06e571.png">


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

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

今回作成したリポジトリは、[こちら](https://github.com/supaiku2452/typescript-eslint-react-sample)です。

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