[Eslint] eslintrc.js 설정해서 ignore rule 추가하기

Eslint

• 분명 편리하긴 한데 너무 깐깐한 느낌이 든다.
• → R/N의 경우 기본적으로 eslint를 내장해서 기본 템플릿을 제공하기 때문에 익숙해질 필요가 있다고 생각

너무 오류가 많이 난다. 🥲

• 코딩을 하는데 계속 빨간줄이 떠있으니까 내가 맞게 하고 있는데도 잘못하는 느낌인 경우가 많이 들음
• 가장 큰건 Custom Hooks를 작성할 때...

import {useEffect} from 'react';

export const useTimeout = (
  // -1-
  callback: () => void, 
  duration: number,
  deps: any[] = [],
  // -1-
): void => { // -2-
  useEffect(() => {
    if (duration === 0) return;
    const id = setTimeout(callback, duration);
    return () => clearTimeout(id);
  }, [duration, ...deps]); // -3-
};

1. 함수의 인자로 callback, duration, deps(의존성 배열)을 설정
2. 커스텀 훅에 대한 반환값 타입을 명시 하지 않으면 타입 스크립트 오류 발생하기 때문에 return 명시
3. useEffect에 대한 의존성 배열 : duration, deps의 내용이 변경되면 오류가 나도록 설정

여기에서만 하더라도 빨간줄이 벌써 3개이다.

그렇다고 해서 구동 시 문제가 있나 그게 아니다...

그러면 해결은? 🤔

• 친절하게 빨간줄에 마우스 포인터를 가져다 대면 eslintrc.js 파일에서 rules(규칙)을 추가할 수 있도록 지원을 해준다.

기본 상태의 R/N .eslintrc.js 파일에 rules 추가

module.exports = {
  root: true,
  extends: '@react-native-community',
   rules: {
     curly: ['error', 'multi'], // -1-
   },
};

1. 이런 rules들을 추가해서 사용하면 된다.
   • → 위의 rule은 curly로 if 문에 return을 쓸 경우 자동으로 { } 채워짐
   • → 이를 수정하기 위해 추가

결론

쓰기 편하라고 만들었는데 이런 과정이 더 불편해 보이는게 이상하다.
자신의 입맛에 맞게 수정해서 사용하는 것이 좋다고 봄