Javascript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구
코딩 스타일 문제와 코드 품질 모두 제어해주고 규칙을 정의할 수 있다.
주로 하드코딩에서 문법적으로 문제가 있는 코드를 Lint 해주기 위해서만 사용하는 분석도구이므로 설치 시, 의존성 라이브러리에 위치한다.
Installation
$> yarn add --dev
eslint eslint-config-airbnb-base eslint-import-resolver-webpack
eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
eslint-plugin-react-hookseslint
ESLint 그 주체이다. Coding Convention Guide를 사용하기 위해서 필요
eslint-config-airbnb-base
Javascript의 코딩 컨벤션 중 하나인 airbnb 코드 스타일의 base이다.
깔끔하며, 가독성의 혼란을 주지 않고 사용할 수 있다.
다만, 외국계 기업이기 때문에 한국어를 지원하지 않는다.
코딩 컨벤션의 종류는 다양하다. Naver의 경우는 airbnb를 기반으로 만들어져 있다.
라이브러리 명은 naver/eslint-config-naver 이며, 후에 자세히 다룰 것이다.
가장 대중적으로 사용하는 airbnb 스타일을 가져가져도록 하며, 그 중에서도 base는 리액트 관련 규칙이 들어있지 않다. 때문에 base를 설치할 때에는 리액트 관련 규칙도 커스텀해주는 것이 좋다.
eslint-import-resolver-webpack
Webpack에서 import 문제를 해결해주는 의존성 라이브러리
eslint-plugin-import
import 문제를 해결해주는 플러그인 라이브러리
eslint-plugin-jsx-a11y
Jsx파일에서 HTML 접근성 문제를 야기하는 부분을 lint로 체크하고 해결방법을 알려준다.
eslint-plugin-react
리액트 관련 규칙이 들어있는 플러그인이다.
eslint-plugin-react-hooks
Eslint-plugin-react가 리액트 관련 규칙 플러그인이라면, 이 플러그인은 리액트의 훅 관련 규칙이다.
리액트의 예전 방식은 클래스형 컴포넌트였다. 클래스형 컴포넌트는 프론트엔드 프레임워크의 생명주기가 있는 컴포넌트였다. 컴포넌트가 변경될 때 생명주기가 실행되는데, 그걸 제어하는 방법이다. 하지만 클래스형 컴포넌트는 작은 컴포넌트에서 실행하기엔 무거운 방식이였고, 리액트는 함수형 컴포넌트 방식을 권장했다.
적절하게 사용하라지만 그냥 함수형을 모든 컴포넌트에서 사용해라
함수형에도 생명주기가 있기 때문에, 훅 관련 규칙 플러그인을 사용한다.