[JavaScript] ESLint 설정하기 (airbnb-config)

 

Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter

JavaScript 프로젝트를 시작할 때 설정하게 되는 ESLint 설정을 정리하였습니다.

저는 TypeScript를 사용하는 nextJS 프로젝트에 적용을 하였으며, Airbnb-lint의 규칙을 따랐습니다.

---

ESLint

자바스크립트 코드의 문제들을 찾아 고칩니다.

ESLint 공식 페이지에 적힌 소개문입니다.

JavaScript는 개발자가 일으키는 에러들을 엄격하게 감지하지 않습니다.

ESLint는 정적으로 코드를 분석해 JavaScript 코드의 문제를 대신 찾아주는 툴입니다.

사용하지 않을 때의 개발속도가 더 빠를 수도 있겠지만 추후 조용히 발생하는 버그들을 찾아 해결하는 시간비용을 비교해보면 가치있는 투자가 될 수 있습니다.

팀프로젝트가 될 경우 ESLint는 팀원들에게 하나의 코드 스타일을 어느정도 강제하기 때문에 이것에 힘입어 협업에서의 문제 예방과 개발 효율을 늘리는 효과를 노려볼 수도 있습니다. (개인적으로 이 측면이 가장 큰 장점이라고 생각이 드네요)

vscode를 사용중이시라면 ESLint 익스텐션을 설치하셔야 실시간으로 적용 현황을 확인할 수가 있습니다.

---

프로젝트 생성

원하는 디렉토리에 새로운 nextJS 프로젝트를 생성합니다. npx create-next-app@latest

What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? No
What import alias would you like configured? @/*

원하는 옵션들을 선택하고 ESLint 설치도 같이 해줍시다.

저는 TypeScript, ESLint, TailwindCSS 항목에 yes로 설정해주었습니다.

설치 후 .eslintrc.json 파일이 생성됩니다. 이 파일로 이 프로젝트의 ESLint 규칙을 설정할 수 있습니다.

{
  "extends": "next/core-web-vitals"
}

초기 세팅은 위와 같습니다. 여기서 본인의 필요대로 규칙을 설정해나가도 좋지만, 저는 Airbnb의 ESLint 규칙을 사용하려 합니다.

---

eslint-config-airbnb

eslint-config-airbnb

eslint-config-airbnb-typescript

TypeScript에 해당하는 config 설정에 앞서 기본 airbnb-config가 필요합니다.

npm 버전 5이상이라면 아래 커맨드로 한번에 설정할 수가 있습니다.

npx install-peerdeps --dev eslint-config-airbnb

그리고 .eslintrc.json 파일에 "extends": "airbnb”를 추가하시면 JS 프로젝트에서는 끝입니다.

다만 저는 TypeScript를 사용할 것이기 때문에 추가 단계를 거칩니다.

npm install eslint-config-airbnb-typescript \
			@typescript-eslint/eslint-plugin@^7.0.0 \
			@typescript-eslint/parser@^7.0.0 \
			--save-dev

설치가 끝나면 .eslintrc.json 파일에 다음과 같이 추가합니다. tsconfig가 필요합니다.

{
  extends: ['airbnb', 'airbnb-typescript'],
  parserOptions: {
	project: './tsconfig.json'
  }
}

프로젝트 루트 디렉토리에서 아래 커맨드를 실행합니다.

npx eslint . --ext .js,.jsx,.ts,.tsx

ESLint가 적용된 결과가 터미널에 나타납니다. 이제 IDE를 재시작해서 적용이 잘 되는지 확인해보세요.

상수를 선언해놓고 사용하지 않았을 때 발생하는 ESLint Error

위와 같이 간단하게 ESLint가 적용중인지 확인할 수가 있습니다.