ESLint

ECMAScript 코드를 분석하는 린트 도구중의 하나

Lint란?

• lint는 보푸라기라는 뜻
• 프로그래밍 분야에서는 소스 코드를 분석하여 오류 또는 버그가 있는 코드에 표시(flag)를 달아놓기 위한 도구를 가리킨다.
• 문법적인 오류 또는 안티 패턴을 찾아주어 일관된 코드스타일을 유지하고 가독성 높은 코드 작성을 목표로 한다.

ESLint의 역할

• 포맷팅
• 코드 품질

포맷팅

• 일관된 코드 스타일을 유지하도록 하고 쉽게 읽히는 코드를 만들어 준다.
• ex:) '들어쓰기 규칙', '코드 라인의 최대 너비 규칙' 등

코드 품질

• 어플리케이션의 잠재적인 오류나 버그를 사전에 예방하기 위함
• ex:) '사용하지 않는 변수 쓰지 않기', '글로벌 스코프 함부로 다루지 않기' 등

ESLint 활용

설치

$ npm i -D eslint

.eslintrc.js

• eslint 설정 파일
• eslint를 실행하기 위해서는 설정 파일이 꼭 필요하다.

실행

• 규칙 목록중 왼쪽에 렌치 표시가 붙은 것이 --fix 옵션으로 자동 수정이 가능한 것

$ npx eslint app.js // 검사할 파일


/*
--fix 옵션으로 자동으로 고쳐질수있는 코드한해서는 eslint가 수정해준다.
*/
$ npx eslint app.js --fix

Rules

• ESLint는 코드 검사 규칙을 미리 정해 놓는다.
• 규칙 목록 확인하기
• ESLint 설정파일(.eslintrc.js)에 규칙을 작성
• React 추천 규칙

.eslintrc.js

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

• 규칙에 설정하는 값은 3가지
  • "off" 또는 0: 끔
  • "warn" 또는 1: 경고
  • "error" 또는 2: 오류

Extensible Config

• 규칙을 여러개 미리 정해놓은 것이 eslint:recommended 설정
• 규칙 목록 중에 왼쪽에 체크 표시되어 있는 것이 이 설정에서 활성화 되어있는 규칙

.eslintrc.js

• extends 설정을 추가해주어야 한다.
• 이 설정 외에 규칙을 추가하고 싶다면 rules 속성으로 확장 가능

module.exports = {
  extends: [
    "eslint:recommended"
  ]
}

ESLint에서 기본으로 제공하는 설정외에 자주 사용하는 규칙

airbnb

• airbnb 스타일 가이드를 따르는 규칙 모음
• eslint-config-airbnb-base 패키지로 제공

.eslintrc.js

module.exports = {
  extends: [
    "airbnb"
  ]
}

standard

• 자바스크립트 스탠다드 스타일을 사용
• eslint-config-standard 패키지로 제공

.eslintrc.js

module.exports = {
  extends: [
    "standard"
  ]
}

초기화

ESLint 설정파일은 --init 옵션을 사용하면 손쉽게 구성 가능하다.

• 보통은 eslint를 직접 구성하지 않고 자동으로 생성되는 설정파일을 사용하여 커스텀하는 식으로 구성.

실행

$ npx eslint --init

? How would you like to use ESLint?
? What type of modules does your project use?
? Which framework does your project use?
? Where does your code run?
? How would you like to define a style for your project?
? Which style guide do you want to follow?
? What format do you want your config file to be in?

자동화

• ESLint는 코드를 작성할때마다 수시로 실행되어 검사해야하므로 자동화하는것이 좋다.
• 자동화하는 방법으로 에디터 확장 도구 또는 git hooks를 사용하는 방법이 있다.

에디터 확장 도구

• 에디터에서 코드를 작성할 때 실시간으로 검사하는 방법
• vs-code의 extenstion 또는 intellij의 plugin으로 eslint와 prettier를 제공

vscode 자동 포맷팅 설정

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

git hooks

• 소스 트래킹 도구로 깃을 사용한다면 깃 훅을 이용하는 것이 좋다.
• 깃 커맨드 실행 시점에 끼여들수 있는 훅을 제공
• 즉, 커밋 혹은 리모트 푸시 직전에 린트 검사를 하여 검사를 통과해야만 푸시를 허용하는 방식
• husky: 깃 훅을 쉽게 사용할 수 있는 도구

설치

$ npm i -D husky

사용법