ESLint

ESLintはJavaScript、TypeScript用の静的解析ツールです。

潜在的な不具合の発見やベストプラティクスへの追従、コードスタイルの統一など様々なルールを設定できます。

ESLintの実行方法

CLI

以下のコマンドで実行できます。

npm run lint:es

オプションとして、--fixを指定することで、コードのスタイルなど機械的に修正可能なものは自動で修正してくれます。 このアプリでは、--fixを指定したnpm scriptを用意しています。

npm run fix:es

エディタ、IDE

エディタやIDEにプラグインなどを設定することで、コーディング中にルール違反した箇所を明示してくれます。

Visual Studio CodeでESLintを有効にする方法については、Visual Studio Code - Lint、フォーマッタを参照してください。

その他のエディタやIDEについては、ESLintの公式ページにあるIntegrations - Editorsを参照してください。

適用しているルール一覧

このアプリでは、ESLintのルールを.eslintrc.jsに定義しています。

基本的には、Expoが提供しているeslint-config-universeの設定をベースとしています。 その他、eslint-plugin-react-hooksなど、推奨ルールを提供しているプラグインの設定も取り込んでいます。

ただし、一部のルールについては、推奨設定から変更しています。変更したルールについては、以降に記載するルール一覧の該当箇所に理由を記載しているので、そちらを参照してください。

適用している全てのルールは以下のとおりです。

注記

ESLintのCLIで--print-configオプションを指定すると、適用されているルールを確認できます。

以下の例では、src/apps/app/App.tsxに適用されているルールの一覧などが表示されます。

npx eslint --print-config src/apps/app/App.tsx

@typescript-eslint

TypeScriptに特化したルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
@typescript-eslint/array-type	warn	-
@typescript-eslint/await-thenable	error	-
@typescript-eslint/ban-ts-comment	error	推奨設定ではこのルールはoffになっています。 しかし、このアプリではts-checkとts-expect-errorだけを使用できるようにこのルールを設定しています。ts-ignoreを除外している理由は、チェック対象外にする方法 - TypeScriptを参照してください。
@typescript-eslint/ban-types	error	-
@typescript-eslint/consistent-type-assertions	warn	-
@typescript-eslint/no-array-constructor	error	-
@typescript-eslint/no-base-to-string	error	-
@typescript-eslint/no-dupe-class-members	warn	-
@typescript-eslint/no-duplicate-enum-values	error	-
@typescript-eslint/no-duplicate-type-constituents	error	-
@typescript-eslint/no-explicit-any	error	-
@typescript-eslint/no-extra-non-null-assertion	error	-
@typescript-eslint/no-floating-promises	error	-
@typescript-eslint/no-implied-eval	error	-
@typescript-eslint/no-loss-of-precision	error	-
@typescript-eslint/no-misused-new	error	-
@typescript-eslint/no-misused-promises	error	推奨設定でもこのルールはerrorレベルで設定されています。 ただし、このアプリではJSXの場合だけオプションのchecksVoidReturn: attributesをfalseに設定しています。JSX内でコンポーネントのイベントハンドラなどに渡す関数は、Promiseを返却することが多々あります。そのため、JSX内でコンポーネントの属性に渡す関数に関しては、戻り値がvoidかをチェックしないように変更しています。
@typescript-eslint/no-namespace	error	-
@typescript-eslint/no-non-null-asserted-optional-chain	error	-
@typescript-eslint/no-redeclare	warn	-
@typescript-eslint/no-redundant-type-constituents	error	-
@typescript-eslint/no-this-alias	error	-
@typescript-eslint/no-throw-literal	warn	-
@typescript-eslint/no-unnecessary-type-assertion	error	-
@typescript-eslint/no-unnecessary-type-constraint	error	-
@typescript-eslint/no-unsafe-argument	error	-
@typescript-eslint/no-unsafe-assignment	error	-
@typescript-eslint/no-unsafe-call	error	-
@typescript-eslint/no-unsafe-declaration-merging	error	-
@typescript-eslint/no-unsafe-enum-comparison	error	-
@typescript-eslint/no-unsafe-member-access	error	-
@typescript-eslint/no-unsafe-return	error	-
@typescript-eslint/no-unused-vars	error	-
@typescript-eslint/no-useless-constructor	warn	-
@typescript-eslint/no-var-requires	error	-
@typescript-eslint/prefer-as-const	error	-
@typescript-eslint/prefer-nullish-coalescing	warn	-
@typescript-eslint/prefer-optional-chain	warn	-
@typescript-eslint/require-await	error	-
@typescript-eslint/restrict-plus-operands	error	-
@typescript-eslint/restrict-template-expressions	error	-
@typescript-eslint/triple-slash-reference	error	-
@typescript-eslint/unbound-method	error	-

eslint

ESLintが提供するルールです。

ルール	レベル	推奨設定からの変更
curly	error	推奨設定ではこのルールはoffになっています。 しかし、制御構文中（if文など）の括弧を必ず明示することで、コードが統一され可読性が高まると考え、errorレベルに変更しています。
eqeqeq	warn	-
no-caller	warn	-
no-case-declarations	warn	-
no-compare-neg-zero	warn	-
no-cond-assign	warn	-
no-constant-condition	warn	-
no-debugger	warn	-
no-delete-var	error	-
no-duplicate-case	error	-
no-empty-character-class	warn	-
no-empty-pattern	warn	-
no-eval	warn	-
no-ex-assign	warn	-
no-extend-native	warn	-
no-extra-bind	warn	-
no-extra-boolean-cast	warn	-
no-fallthrough	warn	-
no-global-assign	warn	-
no-inner-declarations	warn	-
no-invalid-regexp	error	-
no-irregular-whitespace	warn	-
no-iterator	warn	-
no-label-var	warn	-
no-labels	warn	-
no-lone-blocks	warn	-
no-multi-assign	warn	-
no-new	warn	-
no-new-func	warn	-
no-new-object	warn	-
no-octal	warn	-
no-octal-escape	warn	-
no-proto	warn	-
no-restricted-syntax	error	推奨設定ではこのルールはoffになっています。 しかし、prototypeも取得してループするfor...in文を禁止したいため、このルールを設定しています。 なお、同様の機能を持つルールとして@typescript-eslint/no-for-in-arrayもあります。 しかし、no-restricted-syntaxはオブジェクトのfor...in文も禁止できるため、こちらのルールを設定して@typescript-eslint/no-for-in-arrayをoffにしています。
no-return-assign	warn	-
no-script-url	warn	-
no-self-assign	warn	-
no-self-compare	warn	-
no-sequences	warn	-
no-shadow-restricted-names	warn	-
no-sparse-arrays	warn	-
no-throw-literal	warn	-
no-unneeded-ternary	warn	-
no-unused-expressions	warn	-
no-unused-labels	warn	-
no-useless-computed-key	warn	-
no-useless-concat	warn	-
no-useless-escape	warn	-
no-useless-rename	warn	-
no-useless-return	warn	-
no-var	error	-
no-void	warn	-
no-with	warn	-
object-shorthand	warn	-
prefer-const	error	-
prefer-promise-reject-errors	warn	-
prefer-rest-params	error	-
prefer-spread	error	-
radix	warn	-
use-isnan	error	-
valid-typeof	error	-
yoda	warn	-

eslint-plugin-deprecation

非推奨コードの使用を検出するプラグインです。

ルール	レベル	推奨設定からの変更
deprecation/deprecation	error	推奨設定ではこのルールはoffになっています。 しかし、非推奨コードの使用は自動的に検知したいためこのルールを設定しています。

eslint-plugin-eslint-comments

eslint-disableのようなディレクティブコメントの使用に関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
eslint-comments/disable-enable-pair	error	-
eslint-comments/no-aggregating-enable	error	-
eslint-comments/no-duplicate-disable	error	-
eslint-comments/no-unlimited-disable	error	-
eslint-comments/no-unused-disable	error	推奨設定ではこのルールはoffになっています。 しかし、不要にESLintがチェック対象外になっていないかを検知したいため、このルールを設定しています。
eslint-comments/no-unused-enable	error	-
eslint-comments/no-use	error	推奨設定ではこのルールはoffになっています。 しかし、eslint-disableなどを使用してしまうとファイル単位でESLintのチェック対象外となってしまいます。そのため、eslint-disable-next-line、eslint-disable-lineのみを許可して、チェック対象外にするスコープを限定するようにしています。
eslint-comments/require-description	error	推奨設定ではこのルールはoffになっています。 しかし、ESLintのチェック対象外とした理由を必ず記載する運用にするため、このルールを設定しています。

eslint-plugin-import

ES moduleのimport/export構文に関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
import/export	error	-
import/first	warn	-
import/namespace	error	-
import/no-default-export	error	推奨設定ではこのルールはoffになっています。 しかし、このアプリではTypeScriptのコーディング規約でnamed exportを推奨しています。そのため、このルールを設定しています。
import/no-duplicates	error	-
import/order	warn	-

eslint-plugin-jest

Jestに関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
jest/expect-expect	warn	-
jest/no-alias-methods	error	-
jest/no-commented-out-tests	warn	-
jest/no-conditional-expect	error	-
jest/no-deprecated-functions	error	-
jest/no-disabled-tests	warn	-
jest/no-done-callback	error	-
jest/no-export	error	-
jest/no-focused-tests	error	-
jest/no-identical-title	error	-
jest/no-interpolation-in-snapshots	error	-
jest/no-jasmine-globals	error	-
jest/no-mocks-import	error	-
jest/no-standalone-expect	error	-
jest/no-test-prefixes	error	-
jest/unbound-method	error	推奨設定ではこのルールはoffになっています。 しかし、同様の機能を持つ@typescript-eslint/unbound-methodをerrorレベルで設定しています。それをJest用に拡張したこのルールも設定すべきと考え、このルールを設定しています。 なお、対象がテストファイル（*.test.ts、*.test.tsx）の場合は@typescript-eslint/unbound-methodをoffにして、このルールのみ適用するようにしています。
jest/valid-describe-callback	error	-
jest/valid-expect	error	-
jest/valid-expect-in-promise	error	-
jest/valid-title	error	-

eslint-plugin-node

Node.jsに関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
node/handle-callback-err	warn	-
node/no-new-require	warn	-

eslint-plugin-prettier

ESLintでPrettierを実行し、Prettierのルールに違反する箇所をESLintの警告やエラーとして検出するプラグインです。

ルール	レベル	推奨設定からの変更
prettier/prettier	warn	-

eslint-plugin-react

Reactに関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
react/jsx-boolean-value	warn	-
react/jsx-curly-brace-presence	warn	-
react/jsx-fragments	warn	-
react/jsx-no-bind	warn	-
react/jsx-no-duplicate-props	error	-
react/jsx-no-undef	error	-
react/jsx-uses-react	warn	-
react/jsx-uses-vars	warn	-
react/no-access-state-in-setstate	warn	-
react/no-did-mount-set-state	warn	-
react/no-did-update-set-state	warn	-
react/no-direct-mutation-state	warn	-
react/no-redundant-should-component-update	warn	-
react/no-this-in-sfc	warn	-
react/no-unknown-property	warn	-
react/no-will-update-set-state	warn	-
react/require-render-return	warn	-
react/self-closing-comp	warn	-

eslint-plugin-react-hooks

React Hooksに関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
react-hooks/exhaustive-deps	warn	-
react-hooks/rules-of-hooks	error	-

eslint-plugin-strict-dependencies

Moduleの依存性に関するルールを提供するプラグインです。

ルール	レベル	推奨設定からの変更
strict-dependencies/strict-dependencies	error	推奨設定ではこのルールはoffになっています。 このアプリでは、機能レイヤーの依存関係に準拠した設定をしています。