ESLint / Prettier 세팅하기

환경

next.js

typeScript

yarn

❓ESLint

: 자바스크립트 코드 문법 오류 및 코드 스타일 가이드를 제공하기 위한 정적 코드 분석 틀이다.

 

자바스크립트와 JSX코드를 위한 오픈소스 린팅 유틸리티로,

프로그램을 작성할 때 발생할 수 있는 오류, 버그, 스타일 오류 그리고 일관성 없는 코드 패턴을 식별해준다.

코드를 분석해 잠지적인 문제를 지적해 주기 때문에 효율적이고 일관성있는 깨끗한 코드를 작성할 수 있도록 도와준다.

 

커스텀도 가능하다. 

팀단위로 프로젝트를 진행하래 코딩 규약에 맞춰 검사 규칙을 조정할 수 있다. 

예를 들면 특정 코딩 스타일을 강제하거나, 사용하지 않는 변수, 미사용 표현식 등을 경고하도록 설정할 수 있다.

플러그 인을 통해 기능을 확장할 수도 있기 때문에 React 같은 기술스택에 맞는 추가적인 린팅 큐칙을 적용할 수도 있다.

 

1. 설치 

//최신버전
yarn add eslint --dev

//8.55.0 버전
yarn add eslint@8.55.0 --dev

 

2. 초기화

npx eslint --init

next.js를 사용하는 경우 기본 셋팅이 되어있기 때문에 해주지 않아도 된다.

3. .eslintrc.json 파일에 원하는 ESLint rules 적용

나는 prettier에 맞춰 사용할 예정이므로 아래와 같이 작성

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks": "warn",
    "react/display-name": "warn"
  }
}

---

 

❓Prettier

: 일관적인 코드 스타일을 유지할 수 있게 도와주는 코드 포매터

 

 

1. 설치

yarn add --dev --exact prettier

yarn add eslint-config-prettier eslint-plugin-prettier --dev

2. 루드 디렉토리에 .prettierrc 파일 생성

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "arrowParens": "always"
}

 

3. 모든 파일에 prettier 적용

 

1. extentions에서 prettier 설치 

빨간색으로 표시해둔 박스부분이 꼭 Disable 로 되어있는지 확인!!

 

 

2. settings 설정 해주기

 

 

2-1. Format On Save 체크

저장할 때마다 format 해줄 것인지 체크

 

2-2 Default Formatter 설정해주기

 

 

 

🚨Error

나의 경우 `yarn lint` 명령어를 이용해 error가 있는지 확인했을 때 아래와 같은 에러가 발생했다.

 

이때는 ` yarn format ` 명령어를 사용해 format을 시켜주면 되는데, 

command "format" not found error 가 발생하는 경우 

package.json에서 script 부분에 아래 내용을 작성해주면 

 

추가 코드

"format": "prettier --write .",

 

전체 코드

  "scripts": {
    "dev": "next dev",
    "build": "prisma generate && next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "postinstall": "prisma generate"
  },