React 앱에서 ESLINT 및 PRETTIER 설정

ESlint와 Prettier를 설정하는 것은 초보자에게 지루한 일입니다. 저도 이 문제에 직면했기 때문에 이것을 알고 있습니다. 인터넷에서 linting 설정에 대한 많은 기사를 찾을 수 있습니다. 그들 중 일부는 당신을 위해 작동할 것이고, 일부는 그렇지 않을 것이지만 대부분은 라이브러리의 지속적인 성장으로 인해 구식이 될 것입니다.

그래서 머리를 너무 많이 고르는 대신에, 우리는 몇 가지를 이해하려고 노력해야 합니다.

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
나를 팔로우하여 나를 지원하십시오