ESLint & Prettier - Airbnb

 

정말 부끄럽게도

ESLint에 대해서 완전 무지한 상태였다...

 

ESLint? 그거 그냥 Next.js 세팅할때 자동으로 설정되는거 아닌가요?

그냥 항상 당연하게 Would you like to use ESLint? Yes 했던 것 같다.

 

이번 프로젝트에서 Airbnb 세팅을 적용하자는 얘기가 나와서,

먼저 ESLint와, 항상 유용하게 사용하고 있는 Prettier의 역할에 대해 다시 한번 짚어보고

Airbnb 세팅도 좀 들여다보려고 한다.

 

일단 ESLint와 Prettier는 코드의 가독성을 높여주고 에러나 컨벤션에 관해 경고해주는 역할을 하는 툴이다.

 

ESLint 공식문서: https://eslint.org/docs/latest/rules

ECMA Script + Lint

이름부터 그냥 자바스크립트 문법에 어긋나는 에러 표시해주는 도구라고 말하고 있다.

(그냥 궁금해서 찾아봤는데 Lint는 오래된 스웨터의 보푸라기 같은 건데, 보풀 있는 옷을 입을 수는 있듯이 코드가 동작은 하더라도, 유지보수하기 어렵게 만드는 것들을 제거하는 린트 롤러의 역할을 하는 것이 바로 Linter 되시겠다)

 

# airbnb + 종속 패키지까지 한번에 설치하기
npx install-peerdeps --dev eslint-config-airbnb

# TypeScript 관련 airbnb, lint 패키지 설치하기
npm install -D eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser

 

Prettier 공식문서: https://prettier.io/docs/en/

Prettier는 코드 포맷터(formatter)다.

따옴표, 콤마 등 규칙을 정해 예쁘게 코드의 포맷을 맞춰주는 도구다.

VSC extension으로 설치해야 한다.

또한 ESLint와 함께 사용 시 충돌되는 규칙이 있기 때문에 의존성 패키지들을 설치해야 한다.

 

npm install -D prettier eslint-plugin-prettier eslint-config-prettier

 

 

.prettierrc.json 설정파일 생성

{
  "tabWidth": 2, // 탭 너비
  "semi": true, // 세미콜론 사용여부
  "singleQuote": true, // 작은 따옴표 사용
  "bracketSpacing": true, // 객체 선언 시 괄호 양 끝 사이의 간격 사용
  "trailingComma": "all", // 객체 타입 속성 나열 등 마지막에 후행 콤마 사용
  "arrowParens": "always" // 화살표 함수의 매개변수에 괄호 항상 표시
}

 

다른 가능한 옵션들 확인.

https://prettier.io/docs/en/options

없으면 그냥 {}만 남겨놔도 된다.

 

실행

npx prettier . --write

 

ESLint 설정파일

.eslintrc.json

{
  "extends": [
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "next/core-web-vitals"
  ],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

 

실행

npm run lint

 

 

세팅 방법 참고

https://m4xshen.dev/posts/setup-nextjs-with-airbnb-eslint-prettier-typescript-and-tailwindcss

Setup Next.js with Airbnb ESLint, Prettier, TypeScript and Tailwind CSS | Max Shen Dev

 

 

Airbnb JavaScript Style Guide

https://airbnb.io/javascript/

Airbnb JavaScript Style Guide() {