01-3. [재작성] ESLint / Prettier 설정

서론

ESLint는 기본적으로 code linter이다. 코드 품질과 관련.

Prettier는 기본적으로 code formatter이다. 코드를 이쁘게 정렬해준다.

문제는 linter의 기능에 formatter의 기능도 들어가기 때문에 충돌이 생긴다.

이 충돌을 막아주는 것은

eslint-config-prettier

라는 패키지다.

 

지난 번 Airbnb 설정을 따르려고 했지만 수많은 문제점이 생겼다. 너무 엄격하기 때문에 learning curve가 높고, 그로 인해 오히려 개발에 지장을 준다.

또한 예외 rules가 늘어나다보니 linter의 본래 역할을 못 하는 경우도 발생했다.

이번에는 간단하게 Lint의 기본 기능에도 충실하고 Prettier와도 충돌나지 않게 처음부터 다시 설정해보자.

Tailwind CSS를 사용한다고 가정하고 설치 순서를 적어보겠다.

 

create-next-app으로 설치하지 않는 경우

이전처럼 package.json부터 수동으로 다 설치하는 경우에도 기본적으로 다음은 설치해줘야한다.

기본 패키지 2개 설치

pnpm add eslint eslint-config-next

 

그리고 package.json에 

"scripts": {
 	...
 	"lint": "next lint --no-cache"
},

를 추가해준다. 

--no-cache는 빼줘도 된다. 단지 붙이면 변경되지 않을 파일도 처음부터 다시 검사를 하겠다는 의미.

여기까지는 create-next-app으로 설치한 단계까지다. 이어서 다음 단계로 설치한다.

create-next-app으로 설치할 경우 나오는 6가지 질문 

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use src/ directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes

 

중 ESLint에 Yes를 선택하면 위 단계까지 설치가 된다.

 

다음 설치 단계 - standard package

다음 패키지를 설치한다.

pnpm add eslint-config-standard

 

이 패키지에 적용되는 rule은 이 링크에 나와있다. https://standardjs.com/rules.html 

 

.eslintrc.json 을 root에 생성한다.

{
  "extends": ["next/core-web-vitals", "standard"]
}

 

ESLint config for Tailwind CSS

tailwind css를 위한 eslint

pnpm add eslint-plugin-tailwindcss

 

기본 tailwind class가 아닌 것도 체크해주면 (예: text-blue-320)

상반된 속성을 적은 것도 체크 해준다. (예: className="flex grid")

이것도 .eslintrc.json에 추가해준다.

{
  "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended"]
}

 

Prettier 충돌 방지 패키지

다음 패키지 설치 (아래처럼 prettier도 같이 설치)

pnpm add prettier eslint-config-prettier prettier-plugin-tailwindcss

 

VS code의 Headwind 플러그인은 디폴트 세팅에서 eslint와 순서가 맞지 않는다.

위의 prettier-plugin-tailwindcss를 설치한다.

utility class의 순서 정렬과 Prettier 설정에 관해서는 다음 tailwind css 공식문서에 자세히 나와있다.

https://tailwindcss.com/blog/automatic-class-sorting-with-prettier#how-classes-are-sorted

 

이것도 .eslintrc.json에 추가

{
  "extends": ["next/core-web-vitals", "standard", "plugin:tailwindcss/recommended", "prettier"],
  "rules": {
    "spaced-comment": "off"
  }
}

위의 spaced-comment는 주석처리에 warning을 주니깐 위처럼 예외 설정을 한다.

위 plugins는 작성해줘야 Headwind라는 VS code extension이 적용된다.

 

.prettierrc 파일 생성 후

{
  "printWidth": 80,
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "useTabs": false,
  "endOfLine": "auto",
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true,
  "htmlWhitespaceSensitivity": "css",
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "tsxSingleQuote": false,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "vueIndentScriptAndStyle": true,
  "requirePragma": false,
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

VS code에서 필요 extension - 3가지

 

Prettier란 무엇인가?

Prettier는 코드 형식 지정 및 스타일 일관성에 중점을 둔 코드 형식 지정 도구입니다. 미리 정의된 규칙에 따라 코드 형식을 자동으로 지정하여 가독성을 높여줍니다.

Prettier는 code formatter이다. Code formatter란 주로 시각적인 모양과 일관된 코드 형식을 위한 것이다. 코드 구조를 자동으로 분석하고 미리 정의된 형식 지정 규칙을 적용하여 코드베이스 전체에 걸쳐 균일한 스타일을 준다. 코드 포맷터는 들여쓰기, 줄 바꿈, 간격, 중괄호 및 괄호 배치와 같은 측면에 중점을 둔다. Prettier와 같은 코드 포맷터의 목표는 코드 모양을 표준화하여 더 읽기 쉽게 만들고 프로젝트나 팀 내에서 코드 일관성을 향상시킨다.

 

ESLint란 무엇인가?

ESLint는 사용자 정의 린팅 규칙을 정의하고 코딩 표준을 시행할 수 있는 린터이다. 잠재적인 오류를 식별 및 수정하고, 일관된 코딩 스타일을 적용하며, 코드베이스의 모범 사례를 장려하는 데 도움이 된다.

ESLint는 code linter다. Linter란 코드 형식 지정을 넘어 코드 내의 정확성, 품질 및 잠재적인 문제에 중점을 둔다. Linter는 코드에서 잠재적인 오류, 버그, 문체 불일치, 코딩 표준 및 모범 사례 위반을 분석한다. 사용되지 않는 변수, 세미콜론 누락, 잘못된 함수 사용, 메모리 누수 가능성, 코딩 규칙 준수 등의 문제를 확인한다. ESLint와 같은 코드 린터는 개발자에게 문제가 있는 코드 영역에 대한 경고(Warning), 오류(Error) 또는 제안을 제공하여 개발 프로세스 초기에 잠재적인 문제를 식별하고 수정하는 데 도움을 준다. 일관된 코딩 스타일을 적용하고 오류를 감지함으로써 Linter는 코드 품질과 유지 관리성을 향상시키고 버그 가능성을 줄인다.