ESLint와 Prettier

ESLint

ECMAScript + Linter

자바스크립트 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구

 

대부분의 프로그래밍 언어에는 컴파일 과정에서 수행되는 Linter가 내장되어 있음

인터프리터 언어인 자바스크립트는 Linter가 내장되어 있지 않아 런타임 환경에서 에러 발생 확률이 높다.

 

다양한 방식으로 구현할 수 있는 코드 방식을 일관성있게 구현할 수 있도록 잡아주는 것이 ESLint의 역할

 

Lint란?

소스코드를 분석하여 프로그램 오류, 버그, 스타일 오류, 의심스러운 구조체 등에 표시(flag)를 달아주는 행위

 

Prettier

formatter

스타일을 교정하기 위함

깔끔한 코드와 협업을 위해 일관성 있는 코드 스타일을 유지하는 것이 매우 중요한데

ESLint가 코드 퀄리티를 일관적으로 유지해준다면 Prettier는 일관적인 코드 스타일을 유지할 수 있게 도와주는 툴이다.

 

ESLint는 문법 에러를 잡아주거나 더 좋은 코드 구현방식을 사용하도록 해주지만,

Prettier는 줄바꿈, 공백, 들여쓰기 등과 같은 스타일을 교정해준다.

 

사용법

1. ESLint 설치

npm install -D eslint

 

2. extension도 같이 설치해주기

 

3. .eslintrc 설정

프로젝트 root 디렉토리에 .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
  • 디폴트가 true이며, 이 값이 true가 아니면 eslintrc 파일을 찾을 때 상위 디렉토리까지 검색하게 됨
• plugins
  • 다른사람이 만든 규칙을 가져올 수 있다.
  • 종류는 다양하며 여러 plugin을 가져와서 사용하는 경우가 많다. ESLint에서 기본적으로 제공하는 plugin이 있으며, react/react hooks/typescript를 위한 plugin도 있다. 에어비앤비 lint plugin도 많이 사용한다.
  • plugins에 추가되는게 끝이 아니라 extends나 rules 설정을 해야 적용할 수 있다.
• extends
  • plugin package의 규칙을 그대로 따르고 싶을 때 plugin을 extends에 추가해준다.
  • 가져온 plugin을 일부만 사용할 수 있지만 extends를 통해 통째로 가져와 사용한다.
  • 옵션을 제공하는 경우가 많은데 (recommended/strict/all) 보통 recommended를 많이 사용한다.
• parser
  • 어떤 parser를 사용해 구문분석할지 설정해주는 것이다.
  • 기본적으로는 Espree 파서를 사용하는데 typescript에서는 @typescript-eslint/parser를 사용한다.

 

1. Prettier 설치

npm i prettier eslint-config-prettier eslint-plugin-prettier -D

 

2. extension도 같이 설치해주기

 

3. .prettierrc 설정

{
 "printWidth": 100,
 "tabWidth": 2,
 "semi": true,
 "singleQuote": true,
 "trailingComma": "all",
 "endOfLine": "auto"
}

 

 

ESLint와 Prettier를 함께 사용하다보면 이들의 rule 중 스타일 관련된 것들도 있기 때문에 종종 충돌이 생길 수 있다.

이를 방지하기 위해 다음의 plugin을 사용할 수 있다.

• eslint-config-prettier
  • Prettier를 ESLint plugin으로 추가한다. 즉, Prettier가 인식하는 코드 포맷 오류를 ESLint 오류로 출력하도록 할 수 있다.
• eslint-plugin-prettier
  • ESLint의 코드 포맷과 관련된 rule 중 prettier와 충돌하는 부분을 비활성화할 수 있다.

 

 

출처 : https://eslint.org/docs/latest/user-guide/configuring/configuration-files

Configuration Files - ESLint - Pluggable JavaScript Linter

https://velog.io/@jma1020/Prettier%EC%99%80-ESLint%EB%9E%80

Prettier와 ESLint란 🤔

https://velog.io/@treejy/React-ESLint%EC%99%80-Prettier%EA%B0%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%ED%95%84%EC%9A%94%ED%95%98%EA%B3%A0-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94%EC%A7%80

(1) ESLint와 Prettier가 무엇이며 왜 필요하고 어떻게 사용하는지