[webstorm] prettier & lint 설정 방법

1. 프로젝트 설정

   패키지 설치

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

• prettier: 코드 포맷터

• eslint: 코드 린터

• eslint-config-next: Next.js에 적합한 ESLint 설정

• eslint-plugin-prettier: ESLint에서 Prettier 포맷팅 체크

• eslint-config-prettier: ESLint와 Prettier 간 충돌 방지

---

2. Prettier 설정 프로젝트 루트에 .prettierrc 파일 생성 후 아래 내용 추가:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

또는 .prettier.config.js로 작성:

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  tabWidth: 2,
};

---

3. ESLint 설정 eslint 초기화:

npx eslint --init

위 명령어로 초기화 후 .eslintrc 또는 .eslintrc.json 파일을 수정합니다..eslintrc 예시:

{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "prettier/prettier": ["error"],
    "react/react-in-jsx-scope": "off"
  }
}

---

4. Prettier와 ESLint 통합 package.json에 아래 스크립트 추가:

"scripts": {
  "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
  "format": "prettier --write ."
}

---

5. WebStorm 설정

   Prettier

6. Preferences > Languages & Frameworks > Code Style > Prettier

   • Prettier package 경로 설정: node_modules/prettier

   • Run for files 확장자 추가: .js,.jsx,.ts,.tsx

7. Editor > File Watchers

   • Prettier File Watcher 추가.

ESLint

1. Preferences > Languages & Frameworks > Code Quality Tools > ESLint

   • Automatic ESLint configuration 선택.

   • Run eslint --fix on save 활성화.

---

6. 저장 시 자동 적용
   WebStorm에서 저장 시 자동으로 ESLint와 Prettier를 실행하려면:

7. Preferences > Tools > Actions on Save :

   • Run ESLint --fix 활성화.

   • Reformat with Prettier 활성화.

---

7. 필수 파일 추가

• .eslintignore:

node_modules/
.next/
out/

• .prettierignore:

node_modules/
.next/
out/

---

8. VS Code와의 호환 WebStorm에서 설정한 Prettier와 ESLint는 VS Code에서도 그대로 사용 가능하며, Prettier와 ESLint 확장 프로그램만 설치하면 됩니다.

---

추가 참고

이제 저장할 때 Prettier가 코드 포맷팅을, ESLint가 코드 스타일과 규칙을 자동으로 검사합니다. 필요에 따라 설정을 조금씩 조정해 프로젝트에 맞게 최적화하세요.