React/TypeScriptなアプリで TSLint
+ Prettier
でlint/formatをかけていたところを ESLint-TypeScript
+ Prettier
に移行したときのメモ。急いでやる必要はないのですが、仕事の方で使いたかったので個人プロジェクトで試しました。
必要なライブラリの追加
yarn add -D eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react @typescript-eslint/eslint-plugin
eslintの設定の追加
- .eslintrc.jsonを追加 (フォーマットはいろいろ選べる)
{ "extends": [ // とりあえず推奨ルールに従っておく。後でメンテ。 "eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended" ], "plugins": [ "@typescript-eslint", // TypeScript用 "react" // react用 ], "env": { "browser": true, // 事前に定義済みの条件を設定。例えばjestを入れないと`describe`や`it`が未定義の参照でlintにひっかかる "jest": true, "es6": true, "node": true }, "parser": "@typescript-eslint/parser", // TypeScript用 "parserOptions": { "sourceType": "module", // iTypeScriptはimportが使われるので "project": "./tsconfig.json", // TypeScriptのconfig path "ecmaFeatures": { "jsx": true // react用 } }, "rules": { "no-unused-vars": "off", "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }], // TypeScript用のno-unused-varsを有効にしている。 "no-console": ["error", { "allow": ["info", "error"] }], // この辺はなくても "react/prop-types": "off" // TypeScriptではprop-types不要。というかoffらないとlintに引っかかる }, "settings": { "react": { "version": "detect" // デフォルトっぽい設定だけど入れないとwarningが出た。。。どこか間違ったのだろうか。。。 } } }
- tslint.jsonを削除
package.json の更新
- npmコマンドの修正
"scripts": { "lint": "eslint '{src,helper}/**/*.{ts,tsx}'", }
- tslint系の依存を削除
必要な人はVSCodeの設定の更新
- tslint系の設定を削除して以下を追加。保存時にlintのruleに従って自動で修正されるようになります。
"eslint.autoFixOnSave": true, "eslint.validate": [ "javascript", "javascriptreact", { "language": "typescript", "autoFix": true }, { "language": "typescriptreact", "autoFix": true } ]
おしまい
- 割とすっと移行できました。実際のPRはこちら