[ESLint] ESLint는 무엇이며 왜 필요하고 어떻게 사용하는가

SSAFY 2학기 공통 프로젝트가 시작됐다!
본격적으로 프로젝트를 세팅을 하면서 기술 스택을 선정하게 되었고 선정된 기술들의 WHAT, WHY, HOW에 대해 정리해보려고 한다.

그 첫번째, ESLint와 Prettier!
React 프로젝트에서 코드 품질을 위해 ESLint, Prettier를 많이들 사용한다. 사실 클론 코딩으로 공부를 할 때 사용해본 적은 있지만 무작정 따라해서 그런지 스스로 왜 ESLint를 사용해야 하는지도 잘 모르겠고, 설정은 어떻게 해야 하는지는 더 몰랐다. 그래서 이번 기회에 온 몸으로 느끼며(?) 알아보려고 한다.

1) ESLint는 무엇이며 왜 필요하고 어떻게 사용하는가
2) Prettier는 무엇이며 왜 필요하고 어떻게 사용하는가

 

ESLint란?

Lint는 소스 코드에 문제가 있는지 탐색하는 작업을 의미하며, linter는 이 작업을 도와주는 소프트웨어 도구를 의미한다.

자바스크립트와 같이 컴파일 과정이 없는 인터프리터 언어의 경우, 런타임 에러가 발생할 확률이 높기 때문에 린트 작업을 통해 사전에 에러를 잡아주는 것이 중요하다!

 

ESLint는 이런 린트 작업을 제공하는 린터로 자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구이다

 

자바스크립트는 하나의 기능을 구현할 때 굉장히 다양한 방식을 사용할 수 있다.

예를 들어 함수를 선언 할 때도 크게 4가지 방식이 있다.

// 함수 선언문
function square(number) {
  return number * number;
}

// 기명 함수 표현식(named function expression)
const foo = function multiply(a, b) {
  return a * b;
};

// 익명 함수 표현식(anonymous function expression)
const bar = function(a, b) {
  return a * b;
};

// 생성자 함수
const square = new Function('number', 'return number * number');
console.log(square(10)); // 100

// 화살표 함수
// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

이렇게 다양한 방식으로 구현할 수 있는 코드들을 일관성 있게 구현할 수 있도록 코드 스타일을 잡아주는(강제하는)것이 ESLint가 하는 역할이다

 

다양한 플러그인을 통해 React , React Hooks / TypeScript 등 자바스크립트 기반으로 한 다양한 환경에서의 코드 규칙을 설정할 수 있다!

 

ESLint 설치 및 기본 설정

ESLint를 설치하고자 하는 경로에 eslint를 설치한다.

$ npm i -D eslint​

-D 옵션
개발 시에만 사용하는 개발 의존성(dev Dependencies)으로 package.json에 설치되게 된다. 개발 의존성으로 설치된 패키지는 --production 옵션을 통해 운영 버전에서는 설치되지 않게 할 수 있다 

 

설치가 완료되면 eslint 실행 파일이  node_modulues 안에 생성된다. ESLint 설정 파일을 자동으로 작성하기 위해 다음 명령어를 실행한다.

$ eslint --init

ESLint 설정 파일 생성을 위해 여러 가지 질문이 나오게 되는데, 진행하는 프로젝트의 상황에 맞게 선택하면 된다.

모든 선택이 끝나면 선택한 내용에 따라 자동으로 ESLint 설정 파일을 최상위 경로에 생성된다. (.eslintrc.js / .eslintrc.json) 

 

 

ESLint 터미널에서 사용

터미널에서 eslint 명령어 뒤에 검사할 파일의 이름을 넣어서 실행한다. 그러면 ESLint가 해당 파일을 검사하고 코드의 문제점을 터미널에 출력해준다

$ eslint App.tsx

 

 

ESLint는 소스 코드에 문제가 있는지 검사를 해줄 뿐 아니라 가능한 경우에는 위 명령어에 --fix를 붙여 실행하면 코드를 교정까지 해준다. 

 

ESLint 프로젝트 세팅

실제 프로젝트에서는 파일이 굉장히 많기 때문에 위와 같이 매번 터미널에서 ESLint를 실행하는 것은 비효율적이다.

그래서 일반적으로  ESLint를 사용할 때는 프로젝트 레벨에서 설정을 해두고 사용하는 경우가 대부분이다.

 

 

설정 파일 형식

ESLint는 JSON, YAML, JS와 같이 다양한 형식의 설정 파일을 지원한다. 설정 파일의 이름은 항상 .eslintrc가 되어야 하며 원하는 포맷에 따라 파일 확장자를 사용하면 된다.  예를 들어 JSON 형식을 사용하고 싶다면 .eslintrc.json,  js 형식을 사용하고 싶다면 .eslintr.js를 사용하면 된다.

 

 

root 옵션

ESLint를 설정할 때는 여러 개의 설정 파일을 사용할 수 있다. 하나의 레포지토리에 여러 개의 프로젝트가 있을 때 유용하다. ESLint는 현재 린트 대상의 파일이 위차한 폴더 안에 설정 파일이 있는지 확인 후 없으면 그 상위 폴더로 한 단계씩 올라가면서 설정 파일을 찾게 된다 하지만 root 옵션이 true로 설정되어 있는 설정 파일을 만나면 더 이상 상위 폴더로 올라가지 않는다. 

 

예를 들어 프로젝트 별 설정 파일에는 root 옵션을 false로 설정하고, 레포지토리 최상위 경로에는 root 옵션을 true로 설정하면 레포지토리 공통 설정과 프로젝트 별 설정을 분리해서 관리할 수 있어서 편리하다.

 

 

Plugins 옵션

ESLint에는 기본으로 제공되는 규칙(rule)외에도 추가적인 규칙(rule)을 사용할 수 있도록 만들어주는 다양한 플러그인이 있다. 플러그인은 설정 파일의 plugins 옵션을 통해서 설정한다. 

 

예를 들어 import와 react 관련 규칙은 이렇게 추가할 수 있다.

// .eslintrc.json
{
  "plugins": ["import", "react"]
}

 

한 가지 확인해야 하는 것은! plugins에 등록을 하기 위해서는 먼저 프로젝트에 해당 플러그인을 개발 의존성으로 설치를 해놨어야 한다. 보통 ESLint 플로그인의 npm 이름은 eslint-plugin-으로 시작한다:)

 

$ npm i -D eslint-plugin-import eslint-plugin-react

 

 

플러그인에 추가하는 것만으로는 관련 규칙이 바로 적용되지 않는다. 플러그인은 새로운 규칙을 단순히 설정 가능한 상태로 만들어주기만 한다. 그렇기 때문에 규칙을 위반하면 오류(error)를 나타낼지 경고(warn)을 나타낼지, 규칙을 off 할지는 extends 옵션이나 rules 옵션을 통해 추가 설정을 해줘야한다.

 

 

extends 옵션

구글, 페이스북, 에어비앤비 등 수많은 글로벌 기업들이 ESLint로 자바스크립트 코드를 린트한다. 설정 파일의 extends 옵션을 통해 수많은 유명한 기업들이 공개해 놓은 설정들을 그대로 가져와 사용할 수 있다.

 

예를 들어 에어비앤비에서 공개한 ESLint 설정을 사용한다면 이렇게 사용할 수 있다.

// .eslintrc.json
{
  "extends": ["airbnb"]
}

 

이렇게 확장이 가능한 ESLint 설정은 npm 패키지 이름이 eslint-confing-로시작하며 extends 옵션에 명시할 때는 위와 같이 앞 부분을 생략해도 된다.

 

또한 대부분의 ESLint 플러그인은 추천 설정을 제공하는데, 추천 설정을 적용할 때도 사용한다.

예를 들어 plugins 옵션에서 나왔던 import, react 관련 추천 설정을 적용한다면 이렇게 사용할 수 있다.

// .eslintrc.json
{
  "plugins": ["import", "react"],
  "extends": ["plugin:import/recommended", "plugin:react/recommended"]
}

 

 

rules 옵션

rules 옵션은 규칙을 하나 하나 세세하게 제어하기 사용되는데, 일반적으로는 extends 옵션을 통해 설정된 규칙을 덮어쓰고 싶을 때 유용하게 사용할 수 있다.

 

예를 들어, 에어비앤비 설정에서는 no-console 규칙을 어기면 경고(warn)이 나타나고, import/prefer-default-export 규칙을 어기면 오류(error)가 나타나도록 되어 있는데, 이 둘을 반대로 설정할 수 있다.

// .eslintrc.json
{
  "extends": ["airbnb"],
  "rules": {
    "no-console": "error",
    "import/prefer-default-export": "off"
  }
}

 

이렇게 ESLint는 rules 옵션으로 명시된 규칙을 extends 옵션에 적용한 규칙보다 우선시 해준다. 하지만 rules 옵션을 많이 사용할수록 직접 관리해야 하는 설정이 늘어나기 때문에 주의가 필요하다!

 

 

---

참고 자료

(1) ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지

(1) ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지

 

[자바스크립트] ESLint로 소스 코드의 문제 찾기

[자바스크립트] ESLint로 소스 코드의 문제 찾기

 

ESLint 상세 설정 가이드

ESLint 상세 설정 가이드