작성 목적
이전 프로젝트를 처음부터 구축해보지 않았기 때문에 이 글을 참조하여 앞으로 새로운 프로젝트를 시작할 때 원활하게 진행할 수 있도록 정리해둡니다
React 프로젝트에 ESLint 및 관련 플러그인을 설치하려면 다음 단계를 따르세요:
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
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(접근성) 규칙 세부 설정
- prettierrc: Prettier 설정 파일 👉
- 코드 디자인 및 형식에 대한 핵심 설정 (세미콜론 사용, 트레일링 쉼표, 따옴표 등)
이 설정으로 다양한 ESLint 규칙과 Prettier를 사용하여 코드가 깔끔하고 일관성있게 보일 것입니다.
이러한 도구는 코드 품질을 개선하고 협업 시 읽기 쉬운 코드를 작성하는데 도움이 됩니다.
좋은 정보 얻어갑니다, 감사합니다.