nextjs typescript, tailwindcss의 eslint, prettier 설정 정리

글을 적는 계기

프론트엔드를 혼자할 때는 신경쓸 필요 없던 eslint, prettier 규칙이 협업을 하면서 환경설정이 서로 다르다보니 불필요한 변경사항이 생기는 문제가 있었습니다. 그래서 파일 기반으로 규칙을 정의하여 문제가 없도록 했습니다.

---

.prettierrc.js

module.exports = {
  printWidth: 80,
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,

  plugins: [require("prettier-plugin-tailwindcss")],
};

.eslintrc.json

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:@typescript-eslint/recommended",
    "next",
    "next/core-web-vitals",
    "prettier"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"]
}

env: 사용 환경
extends : 확장 기능
parserOptions: 버전과 모듈 사용 여부
plugins : 사용되는 플러그인
rules : 세부 설정 (경고, 에러 처리 설정 등)

설치한 패키지

    "@typescript-eslint/eslint-plugin": "^5.59.11",
    "@typescript-eslint/parser": "^5.59.11",
    "eslint": "^8.42.0",
    "eslint-config-next": "^13.4.6",
    "eslint-config-prettier": "^8.8.0",
    "eslint-import-resolver-typescript": "^3.5.5",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.8",
    "prettier-plugin-tailwindcss": "^0.3.0",

위의 방식으로 프로젝트를 6주간 개발했을 때 만족스러운 설정이었습니다. 하지만! 프로젝트의 규모가 커지면서 코드 줄이 길어지니, vscode가 버거워져서 하드웨어 리소스를 많이 잡아먹게 되어서 nextjs 서버와 docker로 django 서버를 동시에 켰을 때 prettier 적용이 느려서 답답하다보니 종종 끄고 개발을 진행해야 했었습니다.

---

https://www.sandromaglione.com/techblog/create-nextjs-project-with-typescript-eslint-prettier-tailwindcss

Create a NextJs project with Typescript, ESLint, Prettier and TailwindCSS | Sandro Maglione