[Lint] ESLint

상민·2022년 8월 14일

프론트엔드 개발환경의 이해와 실습

목록 보기

8/14

ESLint

ESLint는 ECMAScript 코드에서 문제점을 검사하고 일부는 더 나은 코드로 정정하는 린트 도구 중의 하나다.
ESLint의 목적은 코드 가독성을 높이고 잠재적인 오류와 버그를 제거해 단단한 코드를 만드는 것.

ESLint가 하는 역할은 크게 두가지로 나눌 수 있다.

포멧팅

코드 품질

포맷팅은 코드를 일관되게 만들어 준다. 들여쓰기나 코드 라인의 최대 너비 등 정해진 규칙에 따라 코드를 일관되게 만들어 코드 가독성을 좋게 만들어준다.

코드 품질은 코드의 잠재적인 오류나 버그를 예방하기 위함이다. 사용하지 않는 변수 쓰지 않기, 글로벌 스코프 함부로 다루지 않기 등이 오류 발생 확률을 줄여준다.

설치 및 사용법

우선 ESLint를 설치한다

npm install -D eslint

app.js에서 아래 코드를 작성한다

app.js

console.log()
(function () {})()

위 코드는 console.log()에 세미콜론을 붙히지 않아서 타입 에러를 내뱉는 코드이다

ESLint를 통해 app.js를 실행해보자

npx eslint app.js

// 실행 결과
Oops! Something went wrong! :(

ESLint: 8.22.0

ESLint couldn't find a configuration file. To set up a configuration file for this project, please run:

    npm init @eslint/config

ESLint looked for configuration files in /Users/soone/Desktop/공부/webpack-babel and its ancestors. If it found none, it then looked in your home directory.

If you think you already have a configuration file or if you need more help, please stop by the ESLint chat room: https://eslint.org/chat/help

ESLint는 기본적으로 configuration 파일이 있어야한다
ESLint는 설정파일의 이름을 .eslintrc.js로 만든다

.eslintrc.js

module.exports = {}

우선 아무런 값도 입력하지 않고 설정파일만 만들고 eslint를 실행시켜보자

npx eslint app.js

아까와는 다르게 에러메세지가 나오지 않는 것을 보아 잘 실행되었음을 확인할 수 있다

규칙(Rules)

ESLint 미리 정해둔 검사 규칙이 있다
공식 문서의 Rules 메뉴에서 규칙 목록을 확인할 수 있다

우리가 우려했던 문제와 관련된 규칙은 "no-unexpected-multiline"이다
설정 파일의 rules 객체에 이 규칙을 추가해보자

.eslintrc.js

module.exports = {
  rules: {
    "no-unexpected-multiline": 'error'
  }
}

다시 ESLint로 app.js를 실행시켜 보면 다음과 같은 에러 메세지가 나온다

함수와 ( 사이에 기대하지 않는 줄바꿈이 있다는 에러이다
"no-unexpected-multiline" 규칙에 어긋나는 것이 있으면 에러를 반환해주는 것이다

ESLint에서 규칙에 어긋나는 코드가 있다면 위 경우 처럼 에러를 반환해준다.

ESLint를 통과하기 위해 app.js를 수정하자

app.js

console.log();
(function () {})();

console.log 함수와 다음 즉시실행함수 사이에 세미콜론을 붙혀주어서 unexpected-multiline 에러가 나오지 않도록 한다

다시 ESlint로 app.js를 실행하면 에러메세지 없이 코드가 통과되는 것을 확인할 수 있다

이번에는 app.js에 세미콜론을 여러개 붙혀보자

app.js

console.log();;;;
(function () {})();

자바스크립트 에서는 세미콜론을 여러개 붙혀도 에러가 발생하지 않는다
하지만 코드 가독성이나 잠재적인 에러를 잡기 위해 이러한 것을 방지하는 규칙을 추가해보자

"no-extra-semi" 규칙을 이용하면 된다

.eslintrc.js

module.exports = {
  rules: {
    "no-unexpected-multiline": "error",
    "no-extra-semi": "error"
  }
}

불필요한 세미콜론이 사용된 곳을 찾아주는 에러를 발생해준다

에러메세지의 마지막 줄에 --fix 옵션을 적용하면 에러코드를 수정해 줄 수 있다고 나와있다

npx eslint app.js --fix

위와 같이 명령어를 입력하면 app.js의 코드에서 세미콜론이 전부 수정되고 코드가 실행되어 ESLint를 통과한다

이렇게 ESLint에는 자동으로 수정할 수 있는 규칙들이 있다
공식 문서의 Rules에서 공구 모양 아이콘이 표시되어 있다면 해당 규칙은 자동으로 수정할 수 있는 규칙이다

Extensible Config

이러한 규칙들을 여러 개 미리 정해 놓은 것이 eslint:recommended 설정이다
공식 문서의 Rules에서 체크 모양 아이콘이 표시되어 있다면 이 설정에서 활성화되어 있는 규칙이다

이것을 사용하려면 extends 설정을 추가한다

eslintrc.js

module.exports = {
  extends: [
    'eslint:recommended'
  ],
  env: {
    browser: true,
    node: true,
  }
  // rules: {
  //   "no-unexpected-multiline": "error",
  //   "no-extra-semi": "error"
  // }
}
}

기존의 rules는 주석처리 하고 extends에 배열로 'eslint:recommended'를 추가한다

env는 사전 정의된 전역 변수 사용을 정의한다. 자주 사용되는 설정으로는 browser, node가 있다.
당연한 얘기지만 browser, node 설정을 하지 않을경우 console,require 같은 사전 정의된 전역변수 환경에 있는 static 메서드를 인식할 수 없어서 에러가 발생한다.

초기화

사실 위와 같이 ESLint 설정은 직접 작성하기 보다는 --init 옵션을 추가하면 손쉽게 구성할 수 있다.

npx exlint --init

위 명령어를 입력하면 대화식으로 진행이 된다

선택을 완료하면 eslintrc.js가 새로 생성된 것을 확인할 수 있다

eslintrc.js

module.exports = {
  "env": {
    "node": true, // 내가 임의로 추가함
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "overrides": [
  ],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
  }
}