TSLintからESLintに雑に移行する

雑の極みです

f:id:treeapps:20180418115102p:plain

ESLint v7.0.0がついに正式リリースされました👏
github.com

そしてgitリポジトリ見ると解りますが、TSLintは既にDeprecatedなのです😱

そんな状況のTSLintで騙し騙し継続して使っていましたが（まだTSLintが使われるscaffoldingも結構あります）、v7リリースという事で、これは絶好の移行機会だと思い、早速移行しました。

また、最近Nest.jsを試しているのですが、Nest.jsは既にTypeScript + ESLintでscaffoldingされたので、それを参考にしています。

環境
TSLintの削除
ESLintの追加
おまけ
- TypeScript + Next.js + Material-UI + Redux + Redux Saga
  - git repository
  - live demo
- TypeScript + Next.js + Material-UI + Redux + Redux Toolkit
  - git repository
  - live demo

環境

React + TypeScript + Prettier + ESLintの組み合わせの設定になります。

TSLintの削除

package.jsonからtslintを削除する

package.jsonを開き、tslintと名の付くものを全てuninstallします。

npm uninstall tslint tslint-config-prettier tslint-config-standard tslint-plugin-prettier

package.jsonからtslint関連のnpm scriptを削除する

例えばscriptsセクションに以下のようなtslintコマンドが有る場合は全て削除します。

  "scripts": {
    "lint": "tslint -c ./tslint.json --exclude **/*.d.ts --exclude ./node_modules --project . --fix **/*.tsx --fix **/*.ts",
    "tslint-check": "tslint-config-prettier-check ./tslint.json"
  }

tslint.jsonを削除する

rm -rfv tslint.json

ESLintの追加

package.jsonにtslintを追加する

npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-import

package.jsonにeslint関連のnpm scriptを追加する

components,constans...の部分は適宜対象フォルダ名を羅列して下さい。

  "scripts": {
    "lint": "eslint \"{components,constants,hooks,model,pages,store,types}/**/*.{ts,tsx}\" --fix"
  },

.eslint.jsを追加する

cat <<EOF > .eslintrc.js
module.exports = {
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "tsconfig.json",
    sourceType: "module",
    ecmaFeatures: {
      jsx: true,
    },
    useJSXTextNode: true,
  },
  plugins: ["@typescript-eslint/eslint-plugin", "react"],
  extends: [
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:react/recommended",
    "prettier/react",
  ],
  root: true,
  env: {
    node: true,
    jest: true,
  },
  rules: {
    "@typescript-eslint/interface-name-prefix": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        argsIgnorePattern: "^_",
      },
    ],
  },
}
EOF