왕초보와 ESLint 설정해보기

최근 개인 공부와 사이드 프로젝트를 기획 및 제작을 시작하면서, 개발 초기 세팅을 직접 해보고 있다. 매번 CRA로 자동으로 적용되는 설정만 사용해왔었고 실무 환경에서도 이미 생성되어 있는 프로젝트에서 기능 추가, 유지보수 혹은 정말 작은 프로젝트만 해왔기에 초기 세팅을 직접 적용해본 경험이 없었다. 그래서 이번 프로젝트를 통해 초기 세팅도 해보고 새롭게 습득하는 지식을 차근차근 공유해볼 계획으로 포스팅을 시작해봤다.

ESLint 이미지 출처: www.google.com

ESLint

ES + Lint

개념부터 빠르게 짚고 가자. ES는 ECMAScript의 약어로써 ECMA에서 만든 Script인 표준 Javascript를 의미한다. Lint 또는 Linter라고 불리는 이 개념은 소스 코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체에 표시(Flag) 하기 위한 도구들을 말한다.

ESLint 활용 이유

개념과 중복되는 내용이 많아 빠르게 인용문으로 정리해봤다.

1. 포맷팅
   ESLint를 통해 일관된 코드 스타일을 유지하도록 하고 개발자로 하여금 쉽게 읽히는 코드를 만들어 준다. 한마디로 코드의 가독성을 높여준다.
2. 코드 품질
   프로젝트의 잠재적인 오류나 버그를 ESLint를 통해 예방할 수 있다. 이를테면 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등, 잠재적인 오류 발생 확률을 줄여 준다.

 

.eslintrc 설정해보기

ESLint 구성 요소와 적용방법

내 프로젝트의 .eslintrc

ESLint 설정은 eslintrc 파일 또는 package.json의 eslintConfig 필드에 작성할 수 있다. 지금부터 내가 직접 적용해본 옵션들을 참고하면서 ESLint 구성요소에 대해 배워보자!! 참고로 일부 설정값들은 작성하면서 자동완성 목록을 확인할 수 있으니 다양하게 적용하고 참고해보자!!

 

파서 옵션(parserOptions)

ESLint를 사용하면 지원하려는 JavaScript 언어 옵션을 지정할 수 있다. 기본적으로 ESLint는 ECMAScript 5 구문이 필요하고, 파서 옵션을 사용하여 JSX뿐만 아니라 다른 ECMAScript 버전을 지원하도록 해당 설정을 재정의 할 수 있다.

//파서 옵션 예시
{
  "parserOptions": {
    "ecmaVersion":2021,
    "sourceType":"module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

1. ecmaVersion: ECMAScript 버전을 설정
2. sourceType: parser의 export 형태를 설정
3. ecmaFeatures: ECMAScript의 언어 확장 기능을 설정
   
   • globalReturn: 전역 스코프의 사용 여부
   • impliedStric: strict mode 사용 여부
   • jsx: ECMAScript 규격의 JSX 사용 여부

 

환경(env)

환경 옵션은 미리 정의된 전역 변수를 제공한다.

//환경 옵션 예시
{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  }
}

1. browser: 브라우저 글로벌 변수
2. node: Node.js 전역 변수 및 Node.js 범위
3. es6: 모듈을 제외한 모든 ECMAScript 6 기능 활성

plugins(확장)

ESLint는 서드파티 플러그인을 지원한다. 플러그인 패키지들을 설치하고, 설치한 플러그인들을 plugins에 추가하여 적용한다.

//플러그인 옵션 예시
{
  "plugins": ["import", "react-hooks", "prettier"],
}

1. import: ES2015+의 import/export 구문 지원 플러그인
2. react-hooks: React Hooks의 규칙을 강제해주는 플러그인
3. prettier: prettier는 코드를 좀 더 일관적이고 가독성 있게 만들어 주지만, 반대로 ESLint처럼 코드 품질 관련 기능은 없다. 그래서 어쩔 수 없이 이 둘을 같이 사용하는 것인데, 둘의 성격이 비슷하여 규칙이 서로 충돌하는 경우가 발생한다. 때문에 아래의 패키지를 설치하여 충돌을 방지해준다.

   npm i -D prettier eslint-plugin-prettier eslint-config-prettier

 

extends(확장)

확장 옵션은 ESLint 설정을 확장할 때 사용한다. 또한 추가한 플러그인에서 사용할 규칙을 설정해줘야 한다.(3번 참고)

//확장 옵션 예시
{
  "extends": {
    "next/core-web-vitals",
    "eslint:recommended",
    "plugin:react/recommended"
  }
}

1. next/core-web-vitals: 이 옵션은 Next.js에서 ESLint를 구성 시, 기본으로 제공되는 옵션이다.
2. eslint:recommended: ESLint 공식문서에서 권장하는 규칙들이 적용된 옵션
3. plugin:react/recommended: React 권장 설정 옵션(react-hooks 플러그인이 추가되었으므로 해당 확장 옵션을 통해 규칙을 적용해준다.)

rules(규칙)

프로젝트에서 강제하고 싶은 규칙들을 설정하는 필드. extends에 설정한 기능을 덮어쓸 수 있다. 참고로 ESLint 공식문서에선 규칙을 적용하려면 extends에서 eslint:recommended을 적용하라고 명시하고 있다. 규칙 옵션에선 적용할 수 있는 규칙들이 굉장히 많다. 그러므로 규칙에 대한 설명은 코드 주석으로 대신하고, 기본적인 옵션 값에 대한 설명만 첨부하겠다.

//규칙 옵션 예시
{
  "rules": {
    "linebreak-style": 0, //개행을 체크하는 옵션
                          //Windows는 CRLF, Unix에선 LF를 사용한다.
                          
    "quotes": ["error", "double"], //따옴표 규칙 ' ' or " "
    
    "semi": ["error", "always"], //세미콜론 적용 여부
    
    "react/react-in-jsx-scope": "off", //React 전역 선언 여부
                                       //이 옵션이 없으면 React 프로젝트에서
                                       //항상 react를 import 해야한다.
                                       
    "react/prop-types": "off", //PropTypes 타입검사
    
    "no-unused-vars": "off" //미사용 변수 경고처리 여부
  }
}

1. "off" or 0 : 해당 규칙을 적용하지 않는다(말 그대로 OFF 한다.)
2. "warn" or 1 : 해당 규칙에 어긋나면 경고 발생(코드 영향 없음)
3. "error" or 2 : 해당 규칙에 어긋나면 에러를 발생(에러 발생 시, 1을 exit code로 반환함)

.eslintrc 적용 완료 예시

eslintrc.json 적용완료!!