ESLint, Prettier 설정 , 설정 후 ESLint error ?

작성 목적

이전 프로젝트를 처음부터 구축해보지 않았기 때문에 이 글을 참조하여 앞으로 새로운 프로젝트를 시작할 때 원활하게 진행할 수 있도록 정리해둡니다

React 프로젝트에 ESLint 및 관련 플러그인을 설치하려면 다음 단계를 따르세요:

• ESLint 및 필요한 플러그인 설치:
  아래 명령어로 ESLint, React 및 React Hooks 플러그인을 설치하세요.

yarn add --dev eslint eslint-plugin-react eslint-plugin-react-hooks

하지만 여기서 npm 사용하여 ESLint 및 관련 플러그인을 설치하려면 ? 👉

npm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks

• ESLint 구성 파일 생성:
  프로젝트 루트에 .eslintrc.json 파일을 생성하세요.
  
  
• ESLint 구성 내용 추가:
  .eslintrc.json 파일에 아래와 같은 내용을 입력하세요.

json
{
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended"
  ],
  "plugins": ["react", "react-hooks"],
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "es2021": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    // 여기에 프로젝트에서 필요한 추가 규칙을 설정할 수 있습니다.
  }
}

Prettier 설정을 추가하기 위해서는 프로젝트의 루트에 .prettierrc 파일을 생성해야 합니다.

• .prettierrc 파일을 생성하세요.

• 아래의 설정을 .prettierrc 파일에 붙여 넣으세요:

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

semi: 세미콜론을 항상 사용할지 여부를 선택합니다. (true 또는 false)
trailingComma: 객체, 배열 등에서 마지막 항목 뒤에 쉼표를 추가하는 스타일을 설정합니다. ("none", "es5" 또는 "all")
singleQuote: 작은 따옴표를 사용할지 여부를 결정합니다. (true 또는 false)
printWidth: 한 줄의 최대 길이를 설정합니다. 이 값 이상의 길이는 줄바꿈이 적용됩니다.
tabWidth: 들여쓰기에 사용되는 공백 문자 수를 설정합니다.

이 설정을 적용한 후, Prettier를 사용하여 코드가 자동으로 서식이 지정된다는 것을 알 수 있을 것입니다.
설정은 프로젝트에 맞게 필요에 따라 수정할 수 있습니다.
또한, ESLint와 함께 Prettier를 사용하려면 eslint-plugin-prettier 및 eslint-config-prettier를 설치해야 합니다.
다음 명령어를 사용하여 설치하세요:

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

Prettier와 ESLint를 함께 사용하려면 .eslintrc.json 파일을 업데이트해야 합니다.
설정에 아래 내용을 추가하세요:

json
{
  ...,
  "extends": [
    ...,
    "plugin:prettier/recommended" // 이 줄 추가
  ],
  "rules": {
    ...,
    "prettier/prettier": "error" // 이 줄 추가
  }
}

이제 Prettier와 ESLint가 프로젝트에서 함께 작동하며, 서식과 관련된 경고나 오류를 검출할 수 있습니다. 자동으로 코드 서식을 지정하여 일관성있고 읽기 쉬운 코드를 생성할 수 있습니다.

❓ 위처럼 설정을 끝내고 npm start를 실행해봤지만 아래 에러 발생

Line 8:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 10:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 12:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope 
Search for the keywords to learn more about each error.
ERROR in [eslint]
src\App.js
Line 6:5:    'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 7:7:    'React' must be in scope when using JSX  react/react-in-jsx-scope   
Line 8:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope  
Line 9:9:    'React' must be in scope when using JSX  react/react-in-jsx-scope   
Line 10:16:  'React' must be in scope when using JSX  react/react-in-jsx-scope
Line 12:9:   'React' must be in scope when using JSX  react/react-in-jsx-scope 
Search for the keywords to learn more about each error. webpack compiled with 1 error

✍️ 에러 이유 / 해결
이 에러는 React 17 이상의 버전에서 자주 발생하는 에러입니다.
이 버전부터 JSX를 사용할 때 React를 명시적으로 import 할 필요가 없습니다.
그러나 구성된 ESLint 규칙이 여전히 이를 요구하고 있으므로 경고가 표시됩니다.
이 해결 방법 중 하나는, ESLint 규칙에서 이 구체적인 검사를 비활성화하는 것입니다.
.eslintrc.json 파일의 rules 섹션에 다음과 같은 규칙을 추가하면 됩니다

{
  ...,
  "rules": {
    ...,
    "react/react-in-jsx-scope": "off"
  }
}

지금까지 작성한 설정은 ESLint 및 Prettier 설정에 필요한 기본적인 구성이 포함되어 있습니다.
지금까지 작성한 설정을 리뷰하겠습니다
1. .eslintrc.json: ESLint 설정 파일 👉

• 기본 규칙과 같이, React, React Hooks 및 jsx-a11y(접근성) 사용 설정
• 코드 분석을 위한 환경 설정 (브라우저, 노드, ES2021)
• React 버전 감지 설정
• 에러가 발생하지 않도록 "react/react-in-jsx-scope" 규칙을 중지
• jsx-a11y(접근성) 규칙 세부 설정

2. prettierrc: Prettier 설정 파일 👉

• 코드 디자인 및 형식에 대한 핵심 설정 (세미콜론 사용, 트레일링 쉼표, 따옴표 등)
  이 설정으로 다양한 ESLint 규칙과 Prettier를 사용하여 코드가 깔끔하고 일관성있게 보일 것입니다.
  이러한 도구는 코드 품질을 개선하고 협업 시 읽기 쉬운 코드를 작성하는데 도움이 됩니다.