ESLint?
ESLint는 Javascript 코드에서 발견된 패턴을 식별하고 보고하는 툴로 버그 방지 및 코드의 일관성을 높히는 것을 목표로 합니다.
그동안 문법적인 오류만 잡아주고, 사용하지 않은 변수를 알려주는 역할을 하는 것으로만 알고 있었는데 우아한 테크코스 프리코스를 진행하면서 너무나도 편리한 여러가지 기능이 있다는 것을 알게 되었습니다.
정말 편리한 기능들이 많아서 Prettier와 같이 앞으로도 계속 사용할 것 같아서 사용법을 정리해두려 합니다.
설치
ESLint를 사용하기 위해서는 NodeJS가 설치되어 있어야 합니다. (NodeJS 호환성 정보: ^12.22.0, ^14.17.0, >=16.0.0)
ESLint는 npm 또는 yarn 을 사용해서 설치할 수 있습니다.
npm install eslint --save-dev
# or
yarn add eslint --dev설치를 마친 후에 초기 설정을 해주어야 합니다.
npx eslint --init
# or
yarn run eslint --init--init 명령을 통해 자신의 프로젝트에 맞게 설정을 마치면 프로젝트의 루트 디렉터리에 .eslintrc.js 파일이 생성되고, ESLint를 사용할 수 있게 됩니다.
VS Code 에서 ESLint 자동 적용하기
ESLint 를 사용하는 방법은 터미널에서 npx eslint index.js 또는 yarn run eslint index.js 를 입력하면 문법적 또는 패턴적 문제를 찾아줍니다.
하지만 매번 이렇게 입력하는 것이 번거롭게 느껴질 수 있습니다. 다행히도 VS Code의 ESLint 확장 프로그램을 사용하면 자동으로 프로젝트에 ESLint를 적용하고, 문제로 보이는 부분에 밑줄을 쳐주는 등 코딩 작업 도중 어느 부분이 ESLint 규칙에 어긋나는지 바로 확인할 수 있습니다.
Javascript Module 방식 사용시 문제점
요즘 대부분의 프로젝트에서 Module 방식을 사용해 import/export 를 사용하고 있는데, 이렇게 프로젝트 설정을 마칠경우 (VS Code 에서 ESLint extenstion 사용시) ESLint가 .eslintrc.js 파일에서 에러를 잡아내게 됩니다.
.eslintrc.js 파일이 CommonJS 방식을 사용하기 때문에 발생하는 문제로 저는 .eslintrc.js 파일의 이름을 .eslintrc 로 변경하고, 파일 앞의 module.exports = 부분을 제거해 문제를 해결했습니다.
결론
처음 사용하게 된 것이 프리코스 피드백에 ESLint를 사용하라고 되어 있어서 사용해 봤는데, 요구사항 중 깊이가 2 이하로, 함수의 길이가 15줄 이하로 구현하라는 내용이 있었는데 이런 규칙들도 ESLint에서 설정할 수 있어서 모든 함수의 줄 수를 세지 않아도 되는 점이 너무 편리했습니다.
아직 정확히 확인은 안해봤지만 create-react-app을 사용해 만든 프로젝트에서 적용되어 있는 것처럼 보이는 부분이 있어서, CRA가 내부에 ESLint를 적용하는 부분이 있지 않을까라는 추측을 하고 있습니다.
Prettier와 ESLint를 같이 사용하면 코딩 컨벤션과 같은 고민을 상당히 줄일 수 있을 것으로 판단되고, 이후 프로젝트에서는 시작할 때 필수로 사용하려고 합니다.
