JS코드를 깔끔하게 해주는 ESLint 알아보기! (적용방법과 상세 옵션)

 

1. ESLint란?

Lint는 협업하며 개발을 하신 분이라면 많이 들어보셨을 것입니다. Lint(혹은 Linter)란 에러가 있는 코드에 표시를 달아주는 것을 뜻하는데요, 에러와 코딩 스타일을 잡아주기 때문에 여러 명이 코드를 작성하더라도 한 사람이 코딩한 것처럼 깔끔하게 만들어줄 수 있죠.

 

ESLint는 ES(Ecma Script)와 Lint를 합친 것으로, (Ecma라는 기구에서 만든 Script가 표준 Javascript이기 때문에) 자바스크립트 코드의 에러를 표시해 줍니다.

 

린트를 통해 잡아내고 싶은 에러의 기준은 직접 설정할 수 있는데요, 문법적인 오류만 잡아낼 수도 있고 세미콜론(;) 사용과 같은 전반적인 코딩 스타일을 정해둘 수도 있습니다.

 

 

2. ESLint 설정하는 방법

(1) 패키지 설치

(node만 설치되어 있다면) 우선 다음 명령어를 통해서 패키지를 설치합니다

npm install eslint --save-dev
# or
yarn add eslint --dev

 

(2) 설정 파일 세팅하기

그리고 설정 파일을 세팅하면 되는데요, --init 플래그를 사용한 다음 명령어를 이용한다면 쉽게 설정할 수 있습니다.

$ npx eslint --init
# or
$ yarn run eslint --init

 

그럼 아마 몇 가지 질문이 나올텐데요, 각 질문에서 본인의 상황에 맞는 선택지를 고르면 됩니다!

(저는 리액트, 타입스크립트, 스타일 강제, 브라우저에서 실행 등등의 선택지를 골랐습니다)

 

질문을 다 고르고 나면 .eslintrc.js 라는 파일이 만들어지고

다음과 같은 내용이 작성되어 있을 것입니다

(설정한 선택지에 따라 조금씩 다릅니다)

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
};

 

(3) 확장 프로그램 설치

파일까지 잘 생성이 되었다면, VSCode (또는 다른 에디터)에서 ESLint 확장 프로그램을 설치합니다.

(VSCode 플러그인 이름도 ESLint입니다)

그러면 이제 문법검사를 하고 오류가 생기는 부분이 있으면 에디터에 나타나게 될 것입니다.

그리고 ESLint 를 설정하고 나서는, 에디터를 재시작해야 제대로 작동합니다.

 

사실 ESLint 를 사용하는것은 필수사항은 아닙니다.

단지 원활한 디버깅과, 좀 더 깨끗한 코드를 작성하기 위해 사용하는 것이니, 여러분의 취향이나 회사의 컨벤션에 따라 설정하시면 되겠습니다.

 

3. 상세 설정 옵션

처음 --init을 통해 생성된 파일에 많은 설정이 되어있는데요, 각각 어떤 설정을 의미하는 것이지 한 번 살펴보겠습니다! 

 

※ 간단 요약 정리

# env
env는 eslint를 적용할 환경을 설정하는 부분으로, 쉽게 생각해서 프로젝트가 어떤 환경에서 실행되는 코드인지를 설정하는 것입니다.

# extends
extends는 설정을 특정(specify)하는 문자열이거나, 이전 설정을 확장(extends)하는 추가적인 설정에 대한 문자열 리스트입니다.

# parser
parser는 코드를 ESLint에 맞게 파싱하기 위해 사용하는 것으로, 값을 주지 않으면 기본적으로 'Espree'로 설정됩니다.

# parserOptions
parserOption는 자바스크립트 지원 옵션을 설정하기 위한 부분으로, 기본적으로는 ECMAScript 5 syntax를 지원합니다.

# plugins
ESLint는 다양한 설정을 위한 외부 플러그인을 지원하는데, 사용하기 전에 패키지 다운로드가 필요합니다.

# rules
rules는 린트로 잡아낼 에러에 대한 규칙을 설정하는 부분으로, Eslint에는 built-in된 다양한 rules이 있고 직접 추가할 수도 있습니다.

 

(0) 린트 설정 위치

init 명령어를 통해 ESLint를 설정하면 .eslintrc라는 파일이 생성됩니다. 그런데 사실 꼭 새로운 파일을 통해서만 ESLint를 적용할 수 있는 것은 아닙니다. 패키지를 다운받았다면 크게 다음과 같은 세 가지 방법으로 린트를 설정할 수 있습니다.

1. 개별 파일의 주석
2. .eslintrc 파일
3. package.json 파일의 eslintConfig 옵션

그래도 저는 --init의 편리함과 파일 분리의 깔끔함이 좋아서 .eslintrc 파일에서 설정하는 것을 선호합니다

 

(1) env

env는 environment의 줄임말로, 설정 환경에 대한 값을 나타냅니다. env의 값은 미리 정의된 전역 변수를 제공하는데, 쉽게 생각해서 프로젝트가 어떤 환경에서 실행되는 코드인지에 대한 파트인 것이죠.

 

--init으로 제가 설정했던 env는 다음과 같았습니다.

(env에 올 수 있는 값은 많은데요, ESLint 웹사이트에서 확인하실 수 있습니다!)

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
    },
    ...
};

 

만약 package.json이나 개별 파일에서 설정했다면 다음과 같이 사용도 가능하겠죠

// package.json 이라면
{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "es2021": true
        }
    },
    ...
}

// 개별 파일에서 적용한다면
/* eslint-env browser, es2021 */

 

(2) extends

extends는 설정을 특정(specify)하는 문자열(config 파일을 향한 path이거나 shareable한 config의 이름: ex. eslint:recommended, eslint:all)이거나, 이전 설정을 확장(extends)하는 추가적인 설정에 대한 문자열 리스트입니다.

 

제가 처음에 설정했던 파일의 extends 부분은 다음과 같았습니다.

module.exports = {
    ...
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
    ],
    ...
};

 

eslint --init 명령어로 생성하면 유명한 스타일 가이드들을 extends할 수 있도록 자동으로 설정을 생성해줍니다. (standard, airbnb 등이 있는데 저는 standard를 사용했습니다.)

 

디폴트로 생성된 eslint:recommend 의 경우에는 일반적인 문제를 report하는 핵심 rules의 subset을 사용할 수 있게 만들어줍니다.

(rules에 대해서는 아래에 보다 구체적으로 설명되어 있습니다)

 

(3) parser

파서는 값을 주지 않으면 기본적으로 Espree로 설정됩니다.

파서는 npm 등으로 설치할 수 있는 노드 모듈이어야 하고, 파서 인터페이스와 일치해야 하는데요, 보통 Esprima, @babel/eslint-parser, @typescript-eslint/parser을 씁니다.

 

저는 처음 --init 할 때의 질문에서 타입스크립트를 사용한다고 답해서 parser에 @typescript-eslint/parser 가 추가되어 있습니다.

module.exports = {
    ...
    "parser": "@typescript-eslint/parser",
    ...
};

 

(4) parserOptions

ESlint는 지원하고 싶은 JS 언어 옵션을 특정할 수 있도록 허용합니다.

parserOption는 자바스크립트 지원 옵션을 설정하기 위한 부분으로, 기본적으로는 ECMAScript 5 syntax를 지원합니다.

다른 ECMAScript 버전이나 JSX는 parserOption을 통해 설정하면 지원이 가능하죠.

--init을 통해 생성한 파일은 다음과 같은 설정을 만들어 주었는데요.

ecmaVersion이 12인 것을 보아, 2021년 버전 최신 자바스크립트 문법을 지원할 수 있도록 한 것을 확인할 수 있습니다.

(parserOption 오브젝트의 구체적인 설정은 ESLint 사이트에서 확인하실 수 있습니다.)

module.exports = {
    ...
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    ...
};

 

(5) plugins

ESLint는 다양한 설정을 위한 외부 플러그인을 지원하는데, 사용하기 전에 패키지 다운로드가 필요합니다.

(그리고 사용할 때 eslint-plugin- prefix는 생략될 수 있습니다)

 

기본으로 설정된 제 파일의 플러그인은 다음과 같았습니다.

리액트와 타입스크립트를 사용한다고 응답했었는데, 설정에 맞는 플러그인이 적용되어 있네요.

module.exports = {
    ...
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    ...
};

 

(6) rules

rules는 린트로 잡아낼 에러에 대한 규칙을 설정하는 부분인데요,

Eslint에는 built-in된 다양한 rules이 있고 직접 추가할 수도 있습니다.

 

그리고 rule을 켰다 끌 수도 있다.

플러그인에 있는 rule을 사용할 수도 있는데, 그 때는 eslint-plugin- prefix를 생략해야 합니다.

 

기본으로 설정된 제 ESLint 파일에는 rules가 없었는데, 

아래와 같은 방식으로 사용하실 수 있습니다.

{
	...,
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    },
    ...
}

// 플러그인 사용한다면
{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

// 몇몇 파일들에 적용하고 싶다면
{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

// inline config comment를 막고 싶다면
{
  "rules": {...},
  "noInlineConfig": true
}

// 사용하지 않는 eslint-disable 코멘트를 리포트하고 싶다면
{
  "rules": {...},
  "reportUnusedDisableDirectives": true
}

 

 

한 번 린트에 대해 자세히 알아보았는데요, 앞으로 적절히 활용한다면 보다 좋은 JS 코드 퀄리티를 유지하실 수 있을 것입니다.