React 앱에서 ESLINT 및 PRETTIER 설정
그래서 머리를 너무 많이 고르는 대신에, 우리는 몇 가지를 이해하려고 노력해야 합니다.
ESLint란?
ESLint은 코드를 정적으로 분석하고 문제를 찾습니다. 대부분의 편집기에 있습니다. ESLint 수정 사항은 구문을 인식하므로 기존의 찾기 및 바꾸기 알고리즘에서 발생하는 오류가 발생하지 않습니다.
ESLint의 기본 제공 규칙과 함께 작동하는 고유한 규칙을 작성합니다. 프로젝트에 필요한 방식으로 정확하게 작동하도록 ESLint를 사용자 정의할 수 있습니다.
더 예쁘다는 무엇입니까?
Prettier은 대부분의 언어와 호환되는 독창적인 코드 포맷터입니다. 그것은 많은 시간을 절약합니다. 저장 시 코드를 빠르게 들여씁니다(VSCode/편집기 설정에 따라 다름).
함께 작동하게 하는 방법은 무엇입니까?
ESLint에는 prettier와 충돌할 수 있는 서식 규칙도 있습니다. 따라서 신중하게 구성해야 합니다(어렵게 들리지만 매우 간단합니다 😅).
의 시작하자
1 단계 : -
npm install eslint --save-dev
or
yarn add eslint --dev
2 단계 : -
다음을 실행하여 생성
.eslintrc.json
npx eslint --init
or
yarn run eslint --init
3단계 : -
React - 17.0.0
에서 반응을 파일로 가져오는 것은 선택 사항입니다.이 문제를 해결하기 위해
.eslintrc
파일에 규칙을 추가합니다. 따라서 .eslintrc
파일을 열고 규칙 안에 "react/react-in-jsx-scope": "off"줄을 추가하세요. "rules": {
"react/react-in-jsx-scope": "off"
}
4단계 : -
jest
를 사용하는 경우 eslint
가 test or expect is not defined 오류를 표시한다는 것을 알 수 있습니다. 이 문제를 해결하려면 env 내부에 "jest": true를 추가해야 합니다. "env": {
"browser": true,
"es2021": true,
"jest": true
}
5단계 : -
이제 esling 플러그인을 추가하여 리액트와 연동되도록 하고, eslint와 서로 충돌하지 않도록 예쁘게 설정해줍니다
설치
npm install eslint-config-prettier eslint-plugin-prettier prettier --save-dev
or
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
각 git 저장소를 확인하십시오.
eslint-config-prettier - 불필요하거나 Prettier와 충돌할 수 있는 모든 규칙을 끕니다.
eslint-plugin-prettier - Prettier를 ESLint 규칙으로 실행
위의 설치 후
.eslintrc
파일을 변경합니다. "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"]
별도로 더 예쁘게 실행할 수 있지만
eslint
규칙과 충돌하지 않도록 eslint
에서 실행하기를 원합니다.6단계: -
.prettierrc
를 생성하고 아래 코드를 붙여넣습니다.
{
"semi": true,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"jsxBracketSameLine": true
}
이제 eslint 및 prettier가 설정되었습니다
package.json
에 스크립트를 추가할 수 있습니다."lint": "eslint .",
"lint:fix": "eslint --fix",
"format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc"
이것은 작동하지만 테스트하기 전에 VSCode를 다시 시작하는 것이 좋습니다.
멋진 코드를 작성할 준비가 모두 끝났습니다.
들러주셔서 감사합니다 🌟
마음에 드셨다면 ❤️를 추가하세요. 멋진 프로젝트를 보려면 내 GitHub 프로필을 확인하세요. GitHub
나를 팔로우하여 나를 지원하십시오
Reference
이 문제에 관하여(React 앱에서 ESLINT 및 PRETTIER 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/knowankit/setup-eslint-and-prettier-in-react-app-357b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)