vue-cli+TypeScriptな環境でTSLintからESLintに移行する方法

この記事は ZOZOテクノロジーズ #5 Advent Calendar 2019 11日目の記事です。
昨日は @gold-kou さんによる NLB配下でgRPC通信するときに考えるALPN対応状況でした。

背景

プロジェクトで使っていたTSLintはロードマップに基づき年内でセキュリティパッチ以外の更新は終了し、今後は @typescript-eslint/parser を推奨！とのことで隙を見て移行してみました。

TSLintの開発ロードマップ：https://github.com/palantir/tslint/issues/4534
typescript-eslintの今後：https://eslint.org/blog/2019/01/future-typescript-eslint

環境

関連するPackageは以下の通りです。formatterにprettierを使っていました。

package.json（一部抜粋）

{
...
  "dependencies": {
    "vue": "^2.6.10",
    ...
  },
  "devDependencies": {
    ...
    "@vue/cli-service": "^3.8.0",
    "prettier": "^1.19.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-plugin-prettier": "^2.0.1",
    "typescript": "^3.4.3",
    ...
  }
}

やったこと

ESLintの追加

まずはESLintのvue-cil用プラグインを追加。
起動時にオプション指定で色々できるようですが今回は指定なしでインストール。
https://www.npmjs.com/package/@vue/cli-plugin-eslint

vue add @vue/cli-plugin-eslint

インストール後のコンフィグ設定。元々使っていた Prettier を継続利用。

? Pick an ESLint config: 
  Error prevention only 
  Airbnb 
  Standard 
❯ Prettier 

Lintの実行タイミングを設定します。

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

これで @vue/cli-plugin-eslint の追加は完了です。
npm run lint を実行するとESLintが走ります。

.eslintrc.ymlの追加

@vue/cli-plugin-eslint を追加すると、 .eslintrc.jsが自動作成されます。デフォルトのままでも使えますがプロジェクトの事情に応じたrules等を設定していきます。この辺の手順は他の記事にも詳しいものが色々あるので詳細は割愛します。それとこれは好みの問題ですが、ymlの方がメンテナンスしやすいと考えているためjsで生成されたものをymlに書き換えました。

.eslintrc.yml

env:
  browser: true
  es6: true
extends:
  - 'eslint:recommended'
  - 'plugin:vue/essential'
  - 'plugin:@typescript-eslint/eslint-recommended'
  - "plugin:prettier/recommended"
globals:
  Atomics: readonly
  SharedArrayBuffer: readonly
parserOptions:
  ecmaVersion: 2018
  parser: '@typescript-eslint/parser'
  sourceType: module
plugins:
  - vue
  - '@typescript-eslint'
  - 'prettier'
rules:
  no-unused-vars: 0
  no-case-declarations: 0

.eslintignoreの追加

お好みで /.eslintignoreファイルを作成し、Lintを無視するファイルを定義しておくと便利かもしれません。例えば今回は openapi を用いたプロジェクトだったので openapi-generator で生成されたコードは無視するよう設定しました。

.eslintignore

src/adapters/backendAPI/openapi-generated/**

TSLintの削除

不要なパッケージ、ファイルを削除していきましょう。

• /tslint.json を削除。お疲れっした！
• /package.json からtslint関連のパッケージを削除。

この辺を削除する

{
    "tslint-config-prettier": "^1.18.0", 
    "tslint-plugin-prettier": "^2.0.1",
}

以上で設定は完了です！これで安心して年が越せますね！

明日は @saitoryuji さんが記事を書いてくれます！乞うご期待！