ESLint를 설정해보자!

우선 용어에 대해 알아보자.

 

린트(lint): 소스 코드에 문제가 있는지 탐색하는 작업

린터(linter): 린트 작업을 도와주는 소프트웨어 도구

 

오늘은 많은 기업들이 쓰고있는 ESLint를 사용해보자. 아래는 ESLint의 스폰서들이다. Airbnb, Chrome도 있따!

ESLint sponsors

ESLint 설치, 기본 설정

- package.json 추가 및 설치 (ESLint getting-started)

yarn init
yarn add --dev eslint

- .eslintrc.js 생성

node_modules/.bin/eslint --init

알맞은 자신의 상황에 맞춰 선택지를 선택해준다.

그러면 아래와 같이 파일이 생성된다.

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    }
};

extends와 rules를 가장 많이 건드리게 될 것이다.

 

extends: ESLint 설정을 확장 (airbnb, prettier의 설정을 적용할 수 있다.)

rules: 자체적으로 정의한 규칙을 적용 (ESLint rules) 

List of available rules

사용법

index.js 파일을 생성한뒤 아래 명령어를 실행해보자.

// index.js
var foo = bar;;

node_modules/.bin/eslint index.js

ESLint가 해당 파일을 검사하고 코드의 문제점을 터미널에 출력해준다.

 

ESLint가 수정 가능한 옵션들이 있으며 --fix 옵션이 붙은 옵션들은 자동 수정을 할 수 있다. --fix를 붙여서 다실 실행하면 no-extra-semi 옵션에대해 ESLint가 수정해준다.

node_modules/.bin/eslint index.js --fix

 

// 자동 수정된 index.js
var foo = bar;

yarn  설정 및  .eslintignore

// package.json
 ...
  "scripts": {
    "lint": "eslint ."
  },
 ...

이제 우리는 yarn 명령어로 프로젝트 전체 파일에 대해 ESLint 검사를 할 수 있게 되었다.

yarn lint

.eslintignore 파일을 설정해서 ESLint 검사 예외 파일, 디렉토리를 설정 할 수 있다. (세부 참조)

// .eslintignore
node_modules
.eslintrc.js

Prettier와 통합하기

Prettier는 단독 CLI 도구가 아닌 일반적으로 ESLint와 같은 린터(Linter)와 통합해서 사용하는 경우가 많다.

Prettier와 ESLint 통합을 위한 2개의 패키지를 설치한다.

yarn add --dev prettier eslint-config-prettier eslint-plugin-prettier

.eslintrc.js에 extends 옵션을 변경해준다.

// .eslintrc.js
 ...
  "extends": ["plugin:prettier/recommended"],
 ...

기존 설정된 extends 옵션보다 우선하려면 배열 맨 뒤에 추가하면 된다.

VSCODE  플러그인

vscode 플러그인 ESLint를 통해 실시간으로 문법 검사를 받을 수 있다.

// .vscode/settings.json
{
  "eslint.enable": true
}

 

.vscode/settings.json 파일에 다음 옵션을 추가해주면 자동 적용된다!

자동적으로 빨간줄로 검사가 이뤄진다! 아래 옵션을 추가하면 파일을 저장할 때 수정 가능한 오류에 대해 자동으로 오류를 수정해준다.

// .vscode/settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

끝으로

ESLint와 기본 사용법에 대해 알아보았다. 요즘에는 github actions 로 전체 workflow에 ESLint 포함시켜 개발 생산성을 많이 향상시키기도 한다. ESLint을 사용하여 개발 생산성을 향샹시켜보자.