React(리액트): ESLint - 자바스크립트 문법 검사 도구(vscode ESLint)

이번에는 ESLint라는 도구에 대해서 알아보자. 

이 도구는 자바스크립트 문법을 검사해줄 수 있는 도구인데, 기본적인 자바스크립트 문법을 검사해주는 것을 떠나서

정말 다양한 커스텀 규칙들을 설정할 수 있다.

이전에 학습했던 Prettier 같은 경우는 따옴표, 들여 쓰기, 세미콜론, 라인길이와 같은 모양만 신경 쓰고 자동으로 고쳐

주는 것에 중점이 되어있다면, ESLint는 Prettier에서도 커버하는 코드 스타일을 포함해서 정말 다양한 옵션들이 있다.

 

공식 홈페이지에서 규칙들을 확인해볼 수 있다. 렌치 모양이 있는 규칙들은 ESLint를 통해서 바로 고칠 수 있는 규칙이다

 

몇 가지 규칙들을 알아보자.

 

max-params라는 규칙은 코드에 함수를 작성하게 될 때 파라미터의 개수를 제한시키는 작업을 한다. 

max 값을 3으로 설정할 경우 파라미터가 3개를 넘어가면 파라미터의 개수가 많다는 오류가 발생할 것이다.

 

다음 규칙은 '==' 와 같이 equal sign을 두 개만 사용하면 오류가 발생하도록 하는 규칙이다.

 

if-else 안에 if-else를 또 사용하면 오류가 발생하는 규칙도 있다. 대신 else if를 사용하도록 알려준다.

 

이 외에도 세미콜론, 작은 따옴표, camel case 등도 있다.

 

ESLint도 Prettier와 마찬가지로 확장으로 들어가서 설치해 사용할 수 있다.

 

현재 프로젝트의 ESLint 규칙은 package.json의 eslintConfig 항목에 작성되어있다.

eslint-config-react-app 라이브러리에는 리액트 앱에서 필요한 대부분의 ESLint 옵션들이 적용되어 있고,

create-react-app으로 프로젝트를 만들게 되면 자동으로 탑재된다.

 

'파일 > 기본 설정 > 설정'으로 이동해서 ESlint를 검색하고 Code Actions On Save를 all로 해주면 자동으로 오류를

검사해준다.