7. Set up - ESLint, Prettier [보완]

기존 개발 가이드 3번의 ESLint, Prettier 설정을 했을경우 vscode에서는 문제가 없었지만 IntelliJ에서는 정상동작하지 않는 문제가 발견되었다. 해당 문제 문제를 해결하며 알게 된 방법과 내용을 남기도록 하겠다.

 

1. 우선 plugin을 추가하였다.

"eslint-plugin-prettier": "^5.1.2"

 

해당 플러그인은 lint 위에 사용할 prettier 기능을 추가해준다고 한다.

 

2. .eslintrc.json의 설정을 변경해주었다.

AS-IS

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

기존에는  extends에 prettier로 단순히 명시해주었지만 해당 방법으론 Intellij에선 정상동작하지 않았고 해당 방법 외 2가지 방식으로 변경할 경우 정상동작 하는것을 확인할 수 있었다.

 

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

• 위 와 같은 방법이 아닌 extends 를 변경하여 하는 방법도 있었다.

위와 같은 2가지 방식으로 변경하니 prettier가 정상 동작하는것을 확인할 수 있었다.

 

기존 설정에 대한 설명이 필요할 시 https://x2bee.tistory.com/211 의 글을 참고하길 바란다.