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

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

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-tslin

次に、 .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に対するご指摘などがありましたら、ご連絡ください。