[Web] ESlint 적용기

ESLint 및 그 외 도구들

eslint: javascript 문법 검사를 해준다.

 

prettier: 코드를 자동으로 정리해줌. 코드 스타일 통일 할 때 많이 쓰인다.

 

@typescript-eslint/eslint-plugin: typescript에 esline 적용하기 위함. 이걸 안하면 typescript interface 마다 no-used-vars 규칙이 걸린다. 설정은 공식 문서에서 안내하는대로 하면 된다.

=> 원래는 tslint가 따로 있었는데, 작년 중순쯤부터 업데이트가 중단되었다.(tslint의 성능이 eslint 보다 좋지도 않고 따로 설정하려니 번거롭다는? 이유로) 그래서 지금은 eslint에 이 플러그인을 적용하는 추세.

 

** eslint + prettier 설치 시, 요것들 설치해줘야함

 

eslint-plugin-prettier : prettier에서 인식하는 코드의 포맷 오류를 eslint 오류로 출력해준다.

eslint-config-prettier : prettier와 충돌나는 eslint 규칙 비활성화해주는 모듈

 

설정한 규칙들

react/jsx-filename-extension: [.js, .jsx, .ts, .tsx] 로 설정하였다.

 

react/jsx-uses-react, react/jsx-uses-vars: eslint에서 jsx로 처리되는 변수들은 shadowing 돼서 못 찾는 문제가 있는데, 이 친구들을 설정해주면 해결된다고 함. 설정하지 않을 시 사용한 컴포넌트임에도 미사용했다는 에러문구가 뜨게된다.

 

꺼버린 규칙들

react/destructuring-assignment : markup 쪽에서 state와 props를 명시하지 못하고 render 밑에서 미리 변수에 값을 저장해서 사용해야하는 규칙. 그런데 프로젝트에서 typescript를 쓰고 있고, 인터페이스를 명시하고 있으므로 없어도 괜찮다고 생각해서 꺼버렸다.

 

Bad

const MyComponent = (props) => {
  return (<div id={props.id} />)
};

Good

const MyComponent = ({id}) => {
  return (<div id={id} />)
};
 
const MyComponent = (props, context) => {
  const { id } = props;
  return (<div id={id} />)
};

 

react/jsx-props-no-spreading: props를 전달할 때 {...props} 로 spread하여 전달하지 못하도록 하는 규칙. 일일이 명시하여 넘기거나 HOC를 통해 넘기면 된다고하는데 템플릿을 자주 사용하는 프로젝트 특성에 맞추어 {...props} 로 넘기기 위해 꺼버렸음.

 

import/prefer-default-export: export default를 권장하는 rule. 프로젝트 내에서 한 파일에서 여러가지 함수, 클래스를 동시에 export 하는 일이 많아 꺼버렸다.

 

기타

no-restricted-syntax: for-in은 prototype chain까지 돈다(numeric index만 도는 것이 아님). 그래서 그냥 for문 쓰는것이 더 낫다. 스택오버플로우에 좋은 설명이 있음

 

* eslint가 어떻게 적용되는지 + 커스텀 규칙 만들기

https://tech.kakao.com/2019/12/05/make-better-use-of-eslint/

 

IDE에서 eslint + prettier 설정하기

**각자 IDE에 eslint, prettier 를 따로 설정해놨더라도, 프로젝트에 eslint, prettier 설정이 있으면 이쪽을 따르게 됨. 

 

Visual Studio

https://feynubrick.github.io/2019/05/20/eslint-prettier.html

 

Intellij

https://minjung-jeon.github.io/eslint-prettier-intellij/