4. Set up - ESLint, Prettier

설치

우선 기본 패키지 2개 설치

$ pnpm add eslint eslint-config-next

 

package.json에 scripts 추가

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

 

--no-cache는 생략 가능 : 붙여줄 시 변경사항만 검사하지 않고 전체를 다시 검사하는 차이

 

Standard package 설치

$ pnpm add eslint-config-standard

 

.eslintrc.json을 root에 생성하고 다음 입력

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

 

ESlint config for Tailwind CSS

$ pnpm add eslint-plugin-tailwindcss

 

tailwind utility class가 아닌 것을 체크해준다.

상반된 속성을 적은 것도 체크해준다. (예: 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

 

이것도 .eslintrc.json에 추가

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

 

"rules"에서 ESLint 예외처리가 가능하다.

no-undef는 import React from 'react'를 React 17부터 생략해도 되지만 잡아줘서 예외처리

space-comment는 주석처리를 lint 경고로 잡아줘서 예외처리

그리고 tailwindcss/classnames-order는 대부분 tailwind 순서를 공식 홈페이지때문에 잡아주나, 

사용해보니 custom className은 eslint와 규칙이 달라져서 예외처리함.

 

.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 IDE 사용시 필요 extension

• ESLint
• Prettier - Code formatter
• Prettier ESLint

 

ESLint 검사

$ npm run lint

 

를 실행하면 코드 전체 lint 검사를 수행함