NextJS ESLint & Prettier Manual

yarn을 사용해서 Prettier와 ESLint를 설정하려면 아래 단계를 따라 진행하세요!

---

1. 필요한 패키지 설치

yarn으로 필요한 패키지들을 설치합니다:

yarn add -D prettier eslint-config-prettier eslint-plugin-prettier

---

2. .eslintrc.json 설정

Prettier와 ESLint가 충돌하지 않도록 .eslintrc.json 파일을 아래와 같이 업데이트합니다:

{
  "extends": ["next/core-web-vitals", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "error",
      {
        "printWidth": 120,
        "singleQuote": true,
        "trailingComma": "es5",
        "tabWidth": 2,
        "arrowParens": "avoid"
      }
    ]
  }
}

---

3. .prettierrc 파일 유지

.prettierrc 파일은 그대로 유지하세요:

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "arrowParens": "avoid"
}

---

4. package.json 스크립트 추가

yarn 명령어로 코드 포맷팅과 린트를 쉽게 실행할 수 있도록 package.json에 스크립트를 추가합니다:

{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

---

5. VS Code 설정 (선택 사항)

자동으로 코드 정렬을 적용하려면 VS Code에 settings.json을 추가하세요:

1. VS Code에서 Ctrl + Shift + P를 눌러 Settings (JSON) 파일 열기.
2. 아래 내용을 추가:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

6. 설정 확인

다음 명령어를 실행해 Prettier와 ESLint 설정이 제대로 적용되었는지 확인하세요:

yarn lint
yarn format

이제 코드 작성 시 .prettierrc 설정대로 자동 정렬과 ESLint 검사 기능이 동작할 것입니다! 🚀

Ctrl + S를 눌렀을 때 자동으로 정렬되도록 설정하려면, VS Code 설정을 올바르게 구성해야 합니다. 아래 단계를 따라 진행하세요:

---

1. Prettier 확장 프로그램 설치

1. VS Code에서 Extensions (왼쪽 사이드바)로 이동합니다.
2. Prettier - Code formatter를 검색하고 설치합니다.

---

2. VS Code 기본 포매터 설정

1. Ctrl + , 또는 **Cmd + ,**를 눌러 VS Code 설정을 엽니다.
2. 우측 상단의 열기 (JSON) 아이콘을 클릭해 settings.json 파일을 엽니다.
3. 아래 코드를 추가하여 Prettier를 기본 포매터로 설정합니다:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

---

3. ESLint와 Prettier 통합 (선택 사항)

ESLint와 Prettier를 함께 사용하려면 다음 설정을 추가합니다:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

이 설정은 저장 시 ESLint 규칙 위반 사항도 자동으로 수정합니다.

---

4. 적용 확인

1. Ctrl + S 또는 Cmd + S로 파일을 저장합니다.
2. 코드가 .prettierrc에 설정한 규칙에 따라 자동으로 정렬됩니다.

---

참고

• Prettier와 ESLint 충돌로 인해 자동 정렬이 실패할 경우, 위에서 설치한 eslint-config-prettier와 eslint-plugin-prettier가 제대로 설정되었는지 확인하세요.
• 저장 시 동작하지 않으면 Prettier 확장 프로그램에서 오류 메시지를 확인하고, 필요한 경우 VS Code를 재시작하세요.

이제 Ctrl + S로 자동 정렬이 동작할 것입니다! 🎉