ESLint, Prettier 무엇이 다르고 어떻게 Setting 해야 할까?

'ESLint'는 자바스크립트 코드에서 발견된 문제를 식별하기 위한 정적 코드 분석 도구입니다. 이 도구는 2013년에 니콜라스 C. 자카스에 의해 개발되었습니다. ESLint의 규칙들은 구성이 가능하며, 사용자는 지정한 규칙을 정의하고 로드할 수 있습니다.

개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 여러가지 방법이 존재합니다.

예를 들자면 함수를 정의 할 때, function 키워드를 사용하여 할수도 있고 arrow function을 쓸 수도 있습니다.

또한 배열의 반복문을 사용할 때, for문을 사용할 수도 있지만, forEach, map 등 Array 내장 함수를 사용 할 수도 있습니다.

이러한 여러가지 방식들을 일관성있는 방식으로 구현할 수 있도록 도와주고 고쳐주는 것이 ESLint 의 역할입니다.

 

'Prettier'는 코드를 분석하여 깔끔하고 일관된 코드스타일을 유지시켜주게 도와주는 코드 포멧터 입니다.

Prettier 는 ESLint 처럼 '코드 구현 방식'이 아닌 줄 바꿈, 공백, 들여 쓰기 등의 에디터에서 '텍스트'가 일관되게 작성되도록 도와 주는 역할을 합니다.

const foo = () => {
  const a = [1, 2, 3] // 스콮프 내부 작성시 두 공배 들여쓰기
}
  // <= 빈 줄이 한 줄 이상 안됨.
foo()

 

ESLint Setting

• ESLint 설치

$ npm install -D eslint
// or
$ yarn add -D eslint

ESlint 는 설치만 한다고 바로 프로젝트에서 사용할 수 없고, ESLint extension을 같이 설치 해주어야 한다.

ESLint Extionsin의 설명도 같이 살펴보면 해당 워크스페이스에서 ESLint 가 설치되어 있는지 확인하고, 없으면 글로벌 ESLint 를 참조한다. 그리고 필요에 따라 .eslintrc 파일이 필요할 수도 있다고 설명하고 있습니다.

 

ESLint 를 사용하려면  ESLint Library만 설치하거나 ESLint extension만 설치 하는 것이 아니라 둘다 설치 및 세팅이 되어 있어야 한다.

 

.eslintrc 구성

eslint Doc 에 나와 있는 example 을 살펴보자

// .eslintrc
{
    "root": true,
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": { "project": ["./tsconfig.json"] },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "@typescript-eslint/strict-boolean-expressions": [
            2,
            {
                "allowString" : false,
                "allowNumber" : false
            }
        ]
    },
    "ignorePatterns": ["src/**/*.test.ts", "src/frontend/generated/*"]
}

 

root

default 값은 true, 값이 true가 아니면, eslintrc 파일을 찾을 때, 해당 프로젝트 디텍토리 뿐 아니라, 내 PC의 root 파일 시스템 root 디텍토리까지 eslint를 찾습니다.

 

extends

eslint rule 설정이 저장되어 잇는 외부 file을 extends 하는 부분입니다.

extends에 eslint:recommended, plugin:@typescript-eslint/recommended를 추가하면, 사용하려는 해당 플러그인에서 기본적으로 제공하는 rule set이 적용됩니다.

 

parser

각 코드 파일을 검사할 파서를 설정합니다. 기본 설정은 Espree이고,

Babel 과 함께 사용되는 파서로는 babel-eslint 가 있고 Typescript 구문 분석을 위해 사용되는 @typescript-eslint/parser 가 있습니다.

 

parserOptions

ESLint 사용을 위해 지원하려는 javascript 언어 옵션을 지정할 수 있습니다.

• ecmaVersion: 사용할 ECMAScript 버전을 설정
• sourceType: parser의 export 형태를 설정
• ecmaFeatres: ECMAScript의 언어 확장 기능을 설정
  • globalReturn: 전역 스코프의 사용 여부 (node, commonjs 환경에서 최상위 스코프는 module)
  • impliedStric: strict mode 사용 여부
  • jsx: ECMAScript 규격의 JSX 사용 여부

 

plugins

ESLint는 서드파티 플러그인을 지원합니다. 

프로젝트에 필요한 각 플러그인들은 npm 이나 yarn을 통해서 설치 하고, 해당 플러그인을 plugins 에 추가하여 사용할 수 있습니다.

플러그인은 일련의 규칙의 집합이며, 플러그인을 추가하여도 규칙은 적용되지 않습니다.

 

plugin 종류 몇가지를 살펴보겠습니다.

• eslint-config-airbnb-base: 에어비엔비 린트 플러그인
• eslint-config-next: Next.js 전용 린트 플러그인
• eslint-plugin-react: 리액트 전용 플러그인
• eslint-plugin-prettier: 린트 위에 사용할 프리티어 플러그인
• eslint-config-prettier: 린트 설정과 중복되는 부분이 있으면 프리티어 룰에서 제외하는 플러그인
• @typescript-eslint/eslint-plugin: : 타입스크립트 전용 린트

만약 @typescript-eslint/eslint-plugin을 사용 할 려면, eslintrc 파일의 plugins 배열에 해당 모듈에서 제공하는 @typescript-eslint를 추가하고, 다른 모듈도 같이 쓸거면 배열에 같이 추가하면 됩니다.

플러그인을 추가할 때,  eslint-plugin-  접두사를 생략 할 수도 있습니다.

 

rules

직접 lint rule을 적용합니다. extends로 자동설정된 rules 중에 특정 rule을 끄거나 변경하여 설정을 바꿀 수 있습니다.

다음과 같은 방법으로 설정해야 합니다.

• "off" 또는 0: 규칙을 사용하지 않음
• "warn" 또는 1: 규칙을 경고로 사용
• "error" 또는 2: 규칙을 오류로 사용

규칙에 추가 옵션이 있는 경우에는 배열 리터럴 구문을 사용하여 지정할 수 있습니다.

플러그인에서 규칙을 지정할 때는 eslint-plugin- 를 반드시 생략해야 합니다. ESLint는 내부적으로 접두가 없이 이름을 사용하여 규칙을 찾습니다.

 

ignorePatterns

ignorePatterns 필드 또는 eslintignore 파일을 작성하여 파일 및 디텍토리를 제외하도록 지정할 수 있습니다.

 

 

그외 옵션들

processor

다른 형식의 파일로 부터 Javascript 코드를 추출해내고, 추출한 코드를 대상으로 Lint를 수행하는 전처리기와 후처리기를 작성하는 용도로 사용할 수 있습니다.

"plugins": [a-plugin],
"processor": "a-plugin/a-processor"

많이 사용되는 processor로 eslint-plugin-markdown은 eslint 의 preprocessor 와 postprocessor 를 구현하여 markdown 문서와 문서의 Javascript 코드블록에 대해서 정적분석을 수행하고 린팅을 적용합니다.

 

env

사전 정의된 전역 변수 사용을 정의 합니다. 자주 사용되는 설정으로는 browser, node 가 있습니다. (사전 정의된 전역변수는 공식 문서에서 확인할 수 있습니다.

"env": {
  "browser": true,
  "node": true
}

browser, node 설정을 하지 않을 경우 console, require 같은 사전 정의된 전역변수 환경에 있는 static 메서드를 인식할 수 없어서 에러가 발생합니다. 이외에도 선언되지 않은 전역변수를 사용하는 경우 ESLint 경고가 발생하지 않도록, globals 를 이용하여 사용자 전역 변수를 추가할 수 있습니다.

"globals": {
  "$": true
}

# ESLint 데모를 사용하면 UI를 이용해서 ESLint 설정을 테스트 해볼 수 있습니다.

 

 

Prettier Setting

Prettier를 세팅하는 방법은 2가지가 있습니다.

1. 별도의 Prittier 관련 플러그인을 npm, yarn으로 설치하지 않고 VSCode의 extiension을 설치
2. Prettier 플러그인을 직접 설치 후 eslintrc에 세팅

첫번째 방법은 VSCode 에디터 자체에 prettier rule 을 세팅하는 것입니다. 따라서 내 환경의 VSCode에서만 해당 Prettier 방식이 적용 됩니다.

두번째 방법은 프로젝트 자체에 prettier rule 을 세팅하는 것으로, 해당 프로젝트를 다른 환경에서 돌려도 동일하게 prettier rule을 적용해서 사용할 수 있는 방식입니다.

 

VSCode의 Prettier extiension 설치 (Prettier - Code formatter)

Preittier - Code fomatter 는 설치하는 순간 바로 적용됩니다. 상세한 설정 방식은 docs를 참고 하시면 자세히 안내되어 있습니다.

cmd + shift + p 를 눌러서 검색 창에 Open User Setting으로 들어가서 prettier를 검색하면, 설정할수 있는 리스트가 나타납니다.

 

VSCose Settings 는 현재 PC의 VSCode 환경 세팅이기 때문에 VSCode Extension으로 설치한 Prettier 플러그인에만 적용이 가능하고, npm 이나 yarn 으로 직접 설치한 prettier 플러그인에는 적용되지 않습니다.

직접설치 했다면 '반드시 .prettierrc' 파일을 이용해야 합니다.

 

적용 우선 순위
VSCode Extension 으로 설치 한 경우에는 VSCode Settings 와 .prettierrc 파일 둘다에서 설정이 가능하지만, .prettierrc 파일이 있으면 VSCode Settings의 설정은 무시되고 .prettierrc 파일의 룰이 우선 적용됩니다.

직접 설치 (npm 또는 Yarn)

• Prettier 설치

$ npm install -D prettier
// or
$ yarn add -D prettier

자세한 설정 방식은 Prettier Docs 를 참고 하시면 됩니다.

 

 

자동 저장 Setting

저장 시 자동으로 린트를 잡아주는 기능은 VSCode 가 동작하는 기능입니다.  따라서 VSCode Settings 에서 설정을 해주어야 합니다.

cmd + shift + p를 누르고 Open Settins.json 을 선택하면 Settings 설정이 JSON 형식으로 나옵니다.

여기서 자동 저장 기능을 설정하는 옵션이 두가지가 있습니다.

editor.codeActionsOnSave

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

네이밍에서 알 수 있듯이 Save 할 때 코드를 동작하고, 코드 단에서 eslint rule 에 의해 error 로 판단되는 부분들을 lint rule 에 맞게 알아서 수정을 해주는 설정입니다.

editor.formatOnSave

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

위 설정은 Save 할때 VSCode extension으로 설정된 Prettier 환경에 맞게 코드를 수정해주는 옵션입니다.

'editor.codeActionsOnSave'와 다르게 ESLint 에러를 보고 수정하는 것이 아니라 에디터에 있는 텍스트들을 prettier rule에 맞게 정리해줍니다.

 

Reference

https://ko.wikipedia.org/wiki/ESLint

https://helloinyong.tistory.com/325

https://velog.io/@kyusung/eslint-config-2