ペペロミア開発ブログ

React Nativeで開発しているアプリ「ペペロミア」の技術系記事を投稿してます

typescript-eslintを設定してみる

Lint系の設定がなかったので追加してみました

最終的な修正

github.com

ESLintとTSLint

eslint.org

公式の発表でtslintはeslintに統合されていく方針で進んでいます。 統語には「typescript-eslint」を使います

github.com

導入は以下の通り

yarn add -D eslint @typescript-eslint/eslint-plugin  @typescript-eslint/eslint-plugin-tslint

■.eslintrc.json

  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "_"
      }
    ],
  },

これでTSLintのrulesが使えるようになります サポートしている内容については、こちらで確認

github.com

Prettier

どうせやるならPrettierも統合していく

 yarn add -D eslint-config-prettier eslint-plugin-prettier

■.eslintrc.json

  "extends": ["prettier"],
  "plugins": ["@typescript-eslint", "prettier"],
  "parser": "@typescript-eslint/parser",
  "env": {
    "es6": true
  },
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "_"
      },
    "prettier/prettier": "error"
    ],
  },

これで一通りOK。

あとは各自必要なルールを設定していけばOK