2020-06-21
やること宣言
gaaamii.icon
ESLintのTypeScript用ルールとか設定を調べる
勉強中メモ
gaaamii.icon
ESLintのTypeScript用ルールとか設定を調べる
やりたいこと
ESLint設定してないそこそこな規模のTypeScriptなプロジェクトに、ESLintを入れていくと想定して、どういう手順を踏むべきかをまとめたい。
Lint設定
まずはtypescript-eslintのドキュメントを見てみる
この通りにやればよさそう。
ルールをどうするべきか
↑のリンクに書いてあるように、ベースは以下で、あとはReactのルールが追加できればよさそう。
code:.eslintrc.js
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
],
};
Reactのルールは?
がいいらしい。
これを足すと、こうなる。
code:.eslintrc.js
module.exports = {
root: true,
parser: '@typescript-eslint/parser',
plugins: [
'@typescript-eslint',
'eslint-plugin-react',
'eslint-plugin-react-hooks'
],
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react/recommended',
'plugin:react-hooks/recommended'
],
};
ルールをカスタマイズしたいときは?
実行のタイミング
仮にこれらを設定してCIで走らせたら、大量の警告が出てしまう
なので、変更したファイルだけ対象にLintをかけて、コミットできなくすればよさそう。
既存のコードをどうするか
全ソースコードを対象に、CI上でLintをかけるようにしたいので、既存のコードを直す必要もある。
--fix で直るところはまず直す。
それ以外は、少しずつ直す。
これがどういう扱いにするべきか難しい。
直したからといってアプリケーションのパフォーマンスが良くなるものでもないし、優先的にやるべきものでもない。
なので、1人1日1ファイルのように、「これくらいなら機能開発の妨げにならないだろう」くらいのボリューム感で少しずつやっていくのがよさそう。
やったこと
gaaamii.icon
ESLintのTypeScript用ルールとか設定を調べた