ESLint란?
javascript 코드에서 문제를 찾아주고 (find) 고쳐주는 (fix) 정적 코드 분석 도구다.
- create-react-app으로 리액트 앱을 런칭하면 기본적으로 eslint-config-react-app이라는 eslint 설정이 세팅되어 있다.
ESLint는 EcmaScript(javascript) 와 Lint를 합친 것으로 여기서 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미한다. 즉, ESLint는 자바스크립트 문법에서 에러가 발생하면 표시해주는 도구이다.
ESLint는 기능적으로 JSLint, JSHint와 유사하지만, 더 많은 기능을 제공합니다.
린트를 통해 잡고 싶은 에러의 기준은 직접설정 할 수 있다. 문법적인 오류만 잡아낼 수도 있고, 세미콜론(;) 사용과 같은 전반적인 코딩 스타일을 정해둘 수도 있다.
기능
ESLint는 여러 가지 기능을 제공한다. 그 중에서도 가장 중요한 기능은 코드 검사이다. ESLint는 코드에서 에러와 버그를 검사할 뿐만 아니라, 코드 스타일 가이드에 맞지 않는 부분을 찾아내고, 개발자가 일관성 있는 스타일을 유지할 수 있도록 도와준다. 이를 통해 코드 품질을 높이고, 유지보수성을 개선할 수 있다.
또한, ESLint는 다양한 플러그인을 제공한다. 이러한 플러그인을 사용하면 개발자가 필요한 기능을 추가할 수 있다. 예를 들어, React를 사용하는 프로젝트에서는 eslint-plugin-react를 사용하여 React 관련 규칙을 추가할 수 있다. 이를 통해 개발자는 더욱 효율적으로 코드를 작성할 수 있습니다.
사용 방법
ESLint는 쉽게 사용할 수 있다. 먼저 프로젝트에 ESLint를 설치해야 한다. 이후에는 .eslintrc 파일을 생성하여 원하는 규칙을 설정할 수 있다. 예를 들어, 다음과 같은 .eslintrc 파일을 만들면 no-console 규칙을 적용할 수 있다.
{
"rules": {
"no-console": "error"
}
}이제 ESLint를 실행하여 코드 검사를 수행할 수 있다. ESLint는 커맨드 라인에서 실행할 수도 있고, 편집기와 연동하여 실시간으로 검사할 수도 있다. 이를 통해 개발자는 개발 도중에 발생하는 에러와 버그를 빠르게 찾아낼 수 있다.
ESLint 비활성화
아래 주석을 코드 최상단에 입력함으로써 쉽게 ESLint를 비활성화할 수 있다.
/* eslint-disable */
정리
ESLint는 자바스크립트 코드의 품질을 높이기 위한 필수 도구이다. 코드 검사와 스타일 가이드 검사를 통해 개발자가 일관성 있는 코드를 작성할 수 있도록 도와주며, 다양한 플러그인을 제공하여 필요한 기능을 추가할 수 있다. ESLint를 사용하여 개발자는 더욱 효율적으로 코드를 작성할 수 있고, 프로젝트의 유지보수성을 개선할 수 있다.
p0_lygon.log는 독학으로 공부한 내용들을 기록하는 곳입니다. 잘못된 정보가 있을 수 있습니다. 잘못된 정보를 발견하신다면 언제든 댓글을 통해 알려주시면 수정하고 다시 공부하겠습니다.
