개발 환경 ESLint 공부 및 설정하기

ESLint 개발 환경 공부 및 설정

 

ESLint를 프로젝트에 적용하면서 제대로 적용하고 사용하고 있는지 다른 프로젝트에서는 개발 환경 설정을 어떻게 해야 하는지 어떠한 규칙들이 있는지 제대로 알고 공부하기 위해 ESLint를 한번 정리하고 넘어가려고 한다.

 

ESLint

---

ESLint는 ES(Ecma Script) + Lint를 합친 말로 자바스크립트 에러를 나타내주는 도구이다. 자바스크립트는 대표적인 인터프리터 언어로 런타임 환경에서 코드를 해석하고 한 줄 한 줄 실행하는데 이때 런타임 에러들이 자주 발생한다. 그래서 이러한 Lint 도구들을 통해 사전에 에러를 잡기 위한 도구이다. Prettier가 코드의 스타일을 잡아주었다면 ESLint는 코드의 품질을 보장할 수 있도록 도와준다. 

 

예를 들어 어떠한 함수를 만들 때 누구는 function 키워드를 사용해서 함수를 만들고 누구는 화살표 함수를 사용해서 함수를 만든다. 이렇듯 어떠한 기능을 구현할 때 여러 방식으로 코드를 작성할 수 있는데 이것을 일관성 있게 구현할 수 있도록 잡아준다. 대표적인 예로 ESLint를 검색하면 airbnb의 ESLint가 많이 검색되는 것을 볼 수 있다.

 

ESLint 세팅 방법

---

현재 ESLint 9 이상 버전은 eslint-plugin-react 가 정상적으로 호환되지 않는 오류가 발생해서 eslint v8.57.0 버전을 기준으로 글을 작성한다. 추후에 정상적으로 호환되면 다시 정리하려고 한다.

 

1. npm 프로젝트 생성 

$npm init -y

2. eslint 설치

$npm install -D eslint@8.57.0

 

3. 설정 파일 자동 / 수동 설정

3-1 설정 파일 자동 설정

$npx eslint --init

 

명령어를 통해 ESLint 구성 파일을 몇 가지 질문을 통해 자동으로 생성한다. 현재 많은 글들이 .eslintrc 파일만을 가지고 설명하지만 현재 공식 문서에서는 .eslintrc 파일은 더 이상 권장되지 않는다고 나와있다. 질문들은 완료하면 eslint.config.js(또는 eslint.config.mjs)가 생성되는데 이것은 8.57.0 버전에서도 마찬가지인데 사용하려면 "ESLINT_USE_FLAT_CONFIG" 이 환경 변수를 false로 설정하라는데 이 부분은 정확히 몰라서 패스하고 넘어간다.(추후에 알게 되면 글 수정 예정) 

 

자동 설정 구성 파일 질문들

 

자신의 프로젝트에 맞게 답변을 선택하면 자동 설정 파일이 생성된다. 모든 답변을 완료하면 프로젝트 최상단에 eslint.config.js(또는 eslint.config.mjs)가 생성된다. 하지만 공식 문서 8.57.0버전에서는 .eslintrc 파일을 기준으로 설명하기 때문에 본인은 eslint.config.js 파일을 삭제하고 .eslintrc 파일을 만들어 옵션을 설정했다.

 

간단한 eslintrc.json, index,js

eslintrc.json에 rules 규칙만 추가해서 console을 사용하면 에러가 표시되는 규칙을 추가했고, index.js 파일을 만들어서 console로 코드를 작성하고 npx eslint index.js 명령어로 eslint를 실행하면 아래와 같은 eslint 에러가 표시되는 것을 확인할 수 있다.

 

eslint error

 

3-2 설정 파일 수동 설정

수동 파일 설정도 간편하다. eslint를 설치하고 몇 가지 질문을 통해 자동으로 config 파일을 만들어주던 것을 수동으로 .eslintrc 파일을 만들어 적용하면 된다.

// .eslintrc.js example
module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
}

 

.eslintrc.js 파일의 예시이다. 필자는 자동으로 만들 때 json 형식으로 만들었고, 공식 문서의 예시는 js 형식으로 만들었기 때문에 module.export가 들어간다.

 

4. React에 ESLint 적용하기

현재 React에서는 위에서 한번 언급한 듯이 eslint 9 이상 버전에서  eslint-plugin-react 가 정상적으로 호환되지 않는 오류가 발생해서 eslint v8.57.0을 사용해서 eslint를 적용해야 한다. CRA를 사용해서 React 프로젝트를 생성하면 package.json에 eslintConfig가 이미 포함되어 있다. eslintCOnfig에 적용해도 되고, .eslintrc 파일을 만들어서 적용할 수 있다.