Next.js 13 ESLint +Prettier 세팅

 

 

 

.eslintrc.json 

 

prettier

npm install --save-dev prettier

npm install --save-dev eslint-config-prettier

touch .prettierrc.json

.prettierrc.json

{
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "plugins": ["prettier-plugin-tailwindcss"]
}

 

.eslintrc.json

 

{
  "extends": ["next", "prettier"]
}

 

npm i --save-dev @typescript-eslint/eslint-plugin

 

 

---

 

최종

.eslintrc.json

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": [
    "next",
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error", // 사용되지 않는 변수를 에러로 인식
    "@typescript-eslint/no-explicit-any": "error" // any 타입 정의를 에러로 인식
  }
}

package.json

 "dependencies": {
    "@types/node": "20.5.7",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.15",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "postcss": "8.4.28",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@next/eslint-plugin-next": "^13.4.19",
    "@typescript-eslint/eslint-plugin": "^6.5.0",
    "eslint-config-prettier": "^9.0.0",
    "prettier": "^3.0.2"
  }

 

 

참고자료

https://github.com/prettier/eslint-config-prettier

https://gist.github.com/Nivethan-Ar/2375bf451d4c30148916b59c7e0c51c0

https://findmypiece.tistory.com/203

https://velog.io/@2taesung/Next.js-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD-%EC%85%8B%ED%8C%85%ED%95%98%EA%B8%B0