[JS] ESLint 적용하기

lint는 우리말로 하면 보푸라기입니다. 필요없고 옷을 더럽게 보이게 하는 보푸라기와 같이 소스코드에도 필요없고 소스코드를 더럽게 보이게 하는 것들을 lint라고 합니다. 이러한 lint들을 찾아서 표시하는 프로그램을 lint, linter라고 합니다.
ESLint는 JavaScript 소스 코드를 분석하여 코딩 컨벤션을 위반하는 코드를 찾아주는 도구입니다.
본 글에서는 특정 JavaScript 프로젝트에 ESLint를 적용하는 방법에 대해 알아볼 것입니다.

1. Node.js 설치하기

ESLint는 Node.js가 설치되어 있어야 사용 가능합니다.
Node.js를 설치하는 법은 링크에서 보실 수 있습니다.

2. ESLint 설치하기

Node.js가 설치되어 있다면 ESLint를 적용할 프로젝트 디렉토리에서 아래 명령어를 통해 ESLint를 설치할 수 있습니다.

• npm을 사용하는 경우

npm install eslint --save-dev

• yarn을 사용하는 경우

yarn add eslint --dev

3. ESLint 설정하기

아래 명령어를 통해 프로젝트에서 사용할 ESLint를 설정할 수 있습니다. 여러 질문이 있는데, 본인이 사용할 경우에 따라 설정하면 된다. 어떤 코딩 스타일을 사용할지도 여기에서 설정할 수 있습니다.

npx eslint --init

4. ESLint 실행하기

필자는 react-create-app과 vscode의 ESlint Extension를 사용하여 별도로 ESlint를 실행하지 않아도 vscode에서, 실행하면서 ESLint의 결과를 확인할 수 있지만 터미널에서 아래 명령어를 실행하여 결과를 확인할 수도 있습니다.

• npm을 사용하는 경우

npx eslint yourfile.js

• yarn을 사용하는 경우

yarn run eslint yourfile.js