✨: ESLintのディレクティブコメントに関するルールを追加 (#1192)

以下の課題を改善するために、[eslint-plugin-eslint-comments](https://github.com/mysticatea/eslint-plugin-eslint-comments)を追加しました。

- ページ全体を`eslint-disable`できないようにしたい
- ESLintをdisableにした理由を必ず記載するようにしたい
- 不要な`eslnit-disable`を検知したい

## ✅ What's done

- [x] eslint-plugin-eslint-commentsを追加
  - [eslint-comments/no-restricted-disable | eslint-plugin-eslint-comments](https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/no-restricted-disable.html)以外は、`error`レベルでルールに追加
  - `eslint-comments/no-restricted-disable`は、disableにしたいルールが現状思いつかないので設定を入れていません
- [x] ESLintエラーになった箇所の修正

Author: creature-water-valley

example-app/SantokuApp/.eslintrc.js

@@ -4,8 +4,13 @@
 module.exports = {
   plugins: ['strict-dependencies'],
   root: true,
-  // universe/native: https://github.com/expo/expo/tree/master/packages/eslint-config-universe
-  extends: ['universe/native', 'plugin:react-hooks/recommended'],
+  extends: [
+    // universe/native: https://github.com/expo/expo/tree/master/packages/eslint-config-universe
+    'universe/native',
+    'plugin:react-hooks/recommended',
+    // eslint-comments/recommended: https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/
+    'plugin:eslint-comments/recommended',
+  ],
   overrides: [
     {
       files: ['*.ts', '*.tsx', '*.d.ts'],
@@ -110,5 +115,11 @@ module.exports = {
     ],
     // https://eslint.org/docs/latest/rules/curly
     curly: ['error', 'all'],
+    // https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/no-unused-disable.html
+    'eslint-comments/no-unused-disable': 'error',
+    // https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/no-use.html
+    'eslint-comments/no-use': ['error', {allow: ['eslint-disable-line', 'eslint-disable-next-line']}],
+    // https://mysticatea.github.io/eslint-plugin-eslint-comments/rules/require-description.html
+    'eslint-comments/require-description': 'error',
   },
 };

example-app/SantokuApp/jest/__mocks__/@react-navigation/native.ts

@@ -19,9 +19,11 @@ const mock: jest.Mocked<NavigationProp<ParamListBase>> = {
 
 Object.defineProperty(__mocks, 'navigation', {value: mock});
 
-// @react-navigation/nativeのすべてのNamed Exportを列挙するのは大変なので、
-// ES6のexport/import形式ではなく、module.exportsを使ってexportする。
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+/*
+  eslint-disable-next-line @typescript-eslint/no-unsafe-assignment --
+  @react-navigation/nativeのすべてのNamed Exportを列挙するのは大変なので、
+  ES6のexport/import形式ではなく、module.exportsを使ってexportする。
+ */
 module.exports = {
   ...jest.requireActual('@react-navigation/native'),
   useNavigation: () => mock,

example-app/SantokuApp/jest/__mocks__/expo-secure-store.ts

@@ -3,9 +3,11 @@ export const getItemAsync = jest.fn(() => '1234567890');
 export const deleteItemAsync = jest.fn();
 export const isAvailableAsync = jest.fn();
 
-// expo-secure-storeのすべてのNamed Exportを列挙するのは大変なので、
-// ES6のexport/import形式ではなく、module.exportsを使ってexportする。
-// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+/*
+  eslint-disable-next-line @typescript-eslint/no-unsafe-assignment --
+  expo-secure-storeのすべてのNamed Exportを列挙するのは大変なので、
+  ES6のexport/import形式ではなく、module.exportsを使ってexportする。
+ */
 module.exports = {
   ...jest.requireActual('expo-secure-store'),
   setItemAsync,

example-app/SantokuApp/package-lock.json

@@ -106,6 +106,7 @@
     "eslint-config-universe": "^11.0.0",
     "eslint-formatter-rdjson": "^1.0.3",
     "eslint-plugin-deprecation": "^1.3.2",
+    "eslint-plugin-eslint-comments": "^3.2.0",
     "eslint-plugin-jest": "^27.0.0",
     "eslint-plugin-strict-dependencies": "^1.0.1",
     "expo-module-scripts": "^3.0.4",

example-app/SantokuApp/package.json

@@ -1,6 +1,5 @@
 declare namespace jest {
   import Reanimated from 'react-native-reanimated';
-  // eslint-disable-next-line import/no-duplicates
   import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
 
   interface Matchers<R> {
@@ -14,7 +13,6 @@ declare namespace jest {
 
 declare module 'react-native-reanimated/lib/reanimated2/jestUtils' {
   import {ReactTestInstance} from 'react-test-renderer';
-  // eslint-disable-next-line import/no-duplicates
   import {ImageStyle, TextStyle, ViewStyle} from 'react-native';
   export const withReanimatedTimer: (test: () => unknown) => void;
   export const advanceAnimationByTime: (time: number) => void;

example-app/SantokuApp/src/@types/react-native-reanimated-jest-util.d.ts

@@ -35,14 +35,21 @@ export const AppWithInitialization: React.FC = () => {
     Alert.alert(initializationResult.title, initializationResult.message);
     return null;
   } else {
-    // RootStackNav、WithFirebaseMessagingHandlersをimportしてしまうと、アプリの初期化処理が完了する前に各画面でimportしているモジュールも読み込まれてしまうため、
-    // アプリの初期化処理が完了した時点でrequireする。
-    // requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    /*
+      eslint-disable-next-line @typescript-eslint/no-unsafe-member-access --
+      RootStackNavをimportしてしまうと、アプリの初期化処理が完了する前に各画面でimportしているモジュールも読み込まれてしまうため、
+      アプリの初期化処理が完了した時点でrequireする。
+      requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
+     */
     const RootStackNav = require('./navigators/RootStackNav').RootStackNav as React.FC<
       React.PropsWithChildren<{initialData: AppInitialData}>
     >;
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    /*
+      eslint-disable-next-line @typescript-eslint/no-unsafe-member-access --
+      WithFirebaseMessagingHandlersをimportしてしまうと、アプリの初期化処理が完了する前に各画面でimportしているモジュールも読み込まれてしまうため、
+      アプリの初期化処理が完了した時点でrequireする。
+      requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
+    */
     const FirebaseMessagingHandlers = require('./components/FirebaseMessagingHandlers')
       .FirebaseMessagingHandlers as React.FC<React.PropsWithChildren<{initialData: AppInitialData}>>;
 

example-app/SantokuApp/src/apps/app/AppWithInitialization.tsx

@@ -5,9 +5,11 @@ import {firebaseConfig} from 'bases/firebase/FirebaseConfig';
 
 export const initializeFirebaseCrashlyticsAsync = async () => {
   if (!firebaseConfig.isDummy) {
-    // requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
-    // 型は、typeofで明示するようにします。
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    /*
+      eslint-disable-next-line @typescript-eslint/no-unsafe-member-access --
+      requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
+      型は、typeofで明示するようにします。
+     */
     const crashlytics = require('@react-native-firebase/crashlytics').default as typeof crashlyticsModule;
     // アプリの起動IDを設定
     try {

example-app/SantokuApp/src/apps/app/services/initializeFirebaseCrashlyticsAsync.ts

@@ -4,7 +4,7 @@ class ApplicationErrorSubClass extends ApplicationError {}
 const cause = new ApplicationErrorSubClass('root cause');
 const nested = new ApplicationErrorSubClass('nested cause', cause);
 
-// eslint-disable-next-line jest/unbound-method
+// eslint-disable-next-line jest/unbound-method -- Error.captureStackTraceの復元(再代入)にしか使わないため
 const captureStackTrace = Error.captureStackTrace;
 describe.each([false, true])(
   'new ApplicationError() when captureStackTrace availability is %p',

example-app/SantokuApp/src/bases/core/errors/ApplicationError.test.ts

@@ -4,7 +4,7 @@ class RuntimeErrorSubClass extends RuntimeError {}
 const cause = new RuntimeErrorSubClass('root cause');
 const nested = new RuntimeErrorSubClass('nested cause', cause);
 
-// eslint-disable-next-line jest/unbound-method
+// eslint-disable-next-line jest/unbound-method -- Error.captureStackTraceの復元(再代入)にしか使わないため
 const captureStackTrace = Error.captureStackTrace;
 describe.each([false, true])(
   'new RuntimeError() when captureStackTrace availability is %p',

example-app/SantokuApp/src/bases/core/errors/RuntimeError.test.ts

@@ -29,10 +29,10 @@ const mockDummySettings = {
 describe('Firebase Config', () => {
   test('指定した名前でFirebaseインスタンスが生成されることの検証', () => {
     const spy = jest.spyOn(firebase, 'app');
-    // eslint-disable-next-line no-new
+    // eslint-disable-next-line no-new -- 作成したインスタンスは以降の検証で使用しないため
     new FirebaseConfig('testApp');
     expect(spy).toHaveBeenCalledWith('testApp');
-    // eslint-disable-next-line no-new
+    // eslint-disable-next-line no-new -- 作成したインスタンスは以降の検証で使用しないため
     new FirebaseConfig();
     expect(spy).toHaveBeenCalledWith(undefined);
     spy.mockRestore();

example-app/SantokuApp/src/bases/firebase/FirebaseConfig.test.ts

@@ -13,8 +13,7 @@ const getSvgProps = (view: ReactTestInstance): SVGProps<any> => {
 
 const getSvgPathProps = (view: ReactTestInstance): PathProps => {
   const svgView = view.children[0] as ReactTestInstance;
-  // svgView.props.childrenがany型になってしまうため、型を強制的に指定
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access -- svgView.props.childrenがany型になってしまうため、型を強制的に指定
   return svgView.props.children.props as PathProps;
 };
 

example-app/SantokuApp/src/bases/ui/barcode/Barcode.test.tsx

@@ -5,11 +5,6 @@ import {ReactTestInstance} from 'react-test-renderer';
 
 import {Overlay} from './Overlay';
 
-// If advancing a timer changes the state of a component, the timer must be run within an act.
-// However, since act is `Thenable`, ESLint will issue a warning if you do not do something like await.
-// For convenience, disable the relevant rule in this file.
-/* eslint-disable @typescript-eslint/no-floating-promises */
-
 jest.useFakeTimers();
 
 function getStyle<T>(instance: ReactTestInstance) {
@@ -23,7 +18,7 @@ const ChildComponent = () => {
 const FADE_DURATION = 200;
 
 describe('Overlay', () => {
-  it('Overlayが正常にrenderできることを確認', () => {
+  it('Overlayが正常にrenderできることを確認', async () => {
     render(
       <Overlay visible>
         <ChildComponent />
@@ -36,7 +31,7 @@ describe('Overlay', () => {
     expect(getStyle<ViewStyle>(screen.getByTestId('overlayAnimatedView')).opacity).toBe(0);
     expect(screen).toMatchSnapshot('render直後');
 
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(FADE_DURATION);
     });
 
@@ -49,7 +44,7 @@ describe('Overlay', () => {
       </Overlay>,
     );
 
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(FADE_DURATION);
     });
 

example-app/SantokuApp/src/bases/ui/loading/Overlay.test.tsx

@@ -9,9 +9,11 @@ import {Platform, View} from 'react-native';
  */
 export const FullWindowOverlay = (props: {children: React.ReactNode}) => {
   if (Platform.OS === 'ios') {
-    // iOS以外の場合にreact-native-screensのFullWindowOverlayを使用すると警告が出るので、iOSの場合のみ使用します。
-    // requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+    /*
+      eslint-disable-next-line @typescript-eslint/no-unsafe-member-access --
+      iOS以外の場合にreact-native-screensのFullWindowOverlayを使用すると警告が出るので、iOSの場合のみ使用します。
+      requireした場合の型はanyとなってしまいESLintエラーが発生しますが無視します。
+     */
     const RNSFullWindowOverlay = require('react-native-screens').FullWindowOverlay as typeof View;
     return <RNSFullWindowOverlay testID="FullWindowOverlay">{props.children}</RNSFullWindowOverlay>;
   }

example-app/SantokuApp/src/bases/ui/overlay/FullWindowOverlay.tsx

@@ -6,11 +6,6 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 import {OVERLAY_BACKDROP_DEFAULT_ENTERING, OVERLAY_BACKDROP_DEFAULT_EXITING, OverlayBackdrop} from './OverlayBackdrop';
 
-// If advancing a timer changes the state of a component, the timer must be run within an act.
-// However, since act is `Thenable`, ESLint will issue a warning if you do not do something like await.
-// For convenience, disable the relevant rule in this file.
-/* eslint-disable @typescript-eslint/no-floating-promises */
-
 jest.useFakeTimers();
 
 // TODO: Jest v27にアップデートできたら、withReanimatedTimerでテストを実装できるか検証する。

example-app/SantokuApp/src/bases/ui/overlay/OverlayBackdrop.test.tsx

@@ -6,11 +6,6 @@ import {SafeAreaProvider} from 'react-native-safe-area-context';
 
 import {MODAL_CONTAINER_DEFAULT_ENTERING, MODAL_CONTAINER_DEFAULT_EXITING, OverlayContainer} from './OverlayContainer';
 
-// If advancing a timer changes the state of a component, the timer must be run within an act.
-// However, since act is `Thenable`, ESLint will issue a warning if you do not do something like await.
-// For convenience, disable the relevant rule in this file.
-/* eslint-disable @typescript-eslint/no-floating-promises */
-
 jest.useFakeTimers();
 
 // TODO: Jest v27にアップデートできたら、withReanimatedTimerでテストを実装できるか検証する。

example-app/SantokuApp/src/bases/ui/overlay/OverlayContainer.test.tsx

@@ -4,11 +4,6 @@ import {ModalProps, PressableProps} from 'react-native';
 
 import {DEFAULT_FADE_OUT_DURATION, PickerBackdrop} from './PickerBackdrop';
 
-// If advancing a timer changes the state of a component, the timer must be run within an act.
-// However, since act is `Thenable`, ESLint will issue a warning if you do not do something like await.
-// For convenience, disable the relevant rule in this file.
-/* eslint-disable @typescript-eslint/no-floating-promises */
-
 jest.useFakeTimers();
 
 // TODO: Jest v27にアップデートできたら、withReanimatedTimerでテストを実装できるか検証する。
@@ -21,7 +16,7 @@ describe('PickerBackdrop only with required props', () => {
     expect(screen.toJSON()).toBeNull();
   });
 
-  it('renders successfully only with required props', () => {
+  it('renders successfully only with required props', async () => {
     render(<PickerBackdrop isVisible pressableProps={{testID: 'pressable'}} />);
     //////////////////////////////////////////////////////////////////////////////////
     // 初期表示
@@ -35,7 +30,8 @@ describe('PickerBackdrop only with required props', () => {
     // 非表示にする
     //////////////////////////////////////////////////////////////////////////////////
     screen.update(<PickerBackdrop isVisible={false} pressableProps={{testID: 'pressable'}} />);
-    act(() => {
+
+    await act(() => {
       jest.advanceTimersByTime(DEFAULT_FADE_OUT_DURATION);
     });
     const pressable2 = screen.queryByTestId('pressable');
@@ -63,7 +59,7 @@ describe('PickerBackdrop with `onPress', () => {
 });
 //
 describe('PickerBackdrop with all props', () => {
-  it('should be applied properly', () => {
+  it('should be applied properly', async () => {
     const onPress = jest.fn();
     const onLongPress = jest.fn();
     const afterFadeIn = jest.fn();
@@ -113,12 +109,12 @@ describe('PickerBackdrop with all props', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
 
     // fadeInDurationで指定した時間の1msc前ではafterFadeInは実行されない
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(199);
     });
     expect(afterFadeIn).not.toHaveBeenCalled();
     // fadeInDurationで指定した時間経過後は、afterFadeInが実行される
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(1);
     });
     expect(afterFadeIn).toHaveBeenCalled();
@@ -147,12 +143,12 @@ describe('PickerBackdrop with all props', () => {
     screen.update(<PickerBackdrop isVisible={false} afterFadeOut={afterFadeOut} fadeOutDuration={100} />);
 
     // fadeOutDurationで指定した時間の1msc前ではafterFadeOutは実行されない
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(99);
     });
     expect(afterFadeOut).not.toHaveBeenCalled();
     // fadeOutDurationで指定した時間経過後は、afterFadeOutが実行される
-    act(() => {
+    await act(() => {
       jest.advanceTimersByTime(1);
     });
     expect(afterFadeOut).toHaveBeenCalled();