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

ww8007·2021년 8월 12일
1

Eslint

목록 보기
1/1
post-thumbnail

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**의 내용이 변경되면 오류가 나도록 설정

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

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


그러면 해결은? 🤔

  • 친절하게 빨간줄에 마우스 포인터를 가져다 대면 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을 쓸 경우 자동으로 **{ }** 채워짐
    • 이를 수정하기 위해 추가

결론

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

profile
Frontend 개발자를 꿈꾸는 대학생 입니다.

0개의 댓글