인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. 김민정(질풍가도)님.

현재 리액트 프로젝트에서 .eslintrc.cjs 파일 대신 eslint.config.js 파일을 사용하고 계신 것 같습니다. 이는 ESLint 설정을 위한 다른 구조일 뿐, 해당 파일에서 설정을 관리하시면 됩니다.

eslint.config.js 파일에서 규칙을 추가하거나 변경하는 방법에 대해 간단히 설명드리겠습니다.

ESLint 규칙 설정하기

1. 파일 구조 확인하기: eslint.config.js 파일에서 현재 있는 규칙들을 확인하고, 배열 또는 객체 리터럴의 형태로 규칙을 추가합니다.

2. React 관련 규칙 추가하기: React에서 사용하는 규칙을 추가할 경우, 보통 eslint-plugin-react 패키지를 통해 추가할 수 있습니다. 예를 들면 react/prop-types 규칙을 끄는 경우 다음과 같이 설정하면 됩니다:

rules: {
  "no-unused-vars": "off",
  "react/prop-types": "off", // React prop-types 규칙을 끕니다.
}

이렇게 설정하면 해당 ESLint 규칙에 대해 오류 메시지가 발생하지 않을 것입니다.

추가 팁

• 만약 eslint.config.js 파일에서 module.exports로 설정을 내보내는 형태일 경우, 적절히 내보냄 부분을 추가하셔야 합니다.
  
• 예를 들어, 설정 파일이 다음과 같을 수 있습니다:
  

module.exports = {
  extends: [
    "react-app",
    "react-app/jest",
  ],
  rules: {
    "no-unused-vars": "off",
    "react/prop-types": "off",
  },
};

🔗 관련 링크

• “ES Lint 9에서의 rule 설정” - ESLint 9에서 리액트 및 타입스크립트 규칙을 설정하는 방법에 대해 참고할 수 있습니다.
  

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.