jackmiwamiwa devblog

フロントエンドをメインに行ったことをまとめていくサイトになります。

tslintから@typescript-eslintに変更する

tslintから@typescript-eslintに変更したので、その時のメモ 。
あくまでも自分の環境の話になります。

変更した内容

1. tslintアンインストール

$ yarn remove tslint tslint-loader tslint-config-airbnb tslint-config-prettier tslint-plugin-prettier tsutils

パッケージ一覧

  • tslint
  • tslint-loader
  • tslint-config-airbnb
  • tslint-config-prettier
  • tslint-plugin-prettier
  • tsutils

2. @typescript-eslintインストール

$ yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-plugin-prettier eslint-loader

パッケージ一覧

  • @typescript-eslint/eslint-plugin
  • @typescript-eslint/parser
  • eslint
  • eslint-config-prettier
  • eslint-plugin-prettier
  • eslint-loader

3. tslint.jsonを削除し、.eslintrcを追加

tslint.json

{
    "extends": [
        "tslint-config-airbnb",
        "tslint-config-prettier"
    ],
    "rulesDirectory": [ "tslint-plugin-prettier" ],
    "rules": {
        "prettier": [
            true, {
                "singleQuote": true,
                "trailingComma": "es5",
                "semi": false
            }
        ]
    }
}

.eslintrc

{
  "root": true,
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "plugins": [
    "@typescript-eslint"
  ],
  "globals": {
    "window": true,
    "document": true,
    "location": true,
    "ga": true
  },
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120,
        "singleQuote": true,
        "trailingComma": "es5",
        "semi": false
      }
    ]
  },
  "parserOptions": {
    "sourceType": "module",
    "project": "./tsconfig.json"
  }
}

4. webpack.config.jsのloaderをeslint-loaderに変更

webpack.config.js

module.exports = {
  module: {
    rules: [
      enforce: 'pre',
      test: /\.ts$/,
      exclude: /node_modules/,
      use: [
        'ts-loader',
        {
-         loader: 'tslint-loader',
+         loader: 'eslint-loader',
          options: {
            typeCheck: true,
          },
        }
      ],
    ]
  },
}