React 프로젝트에 ESLint를 추가하는 방법

코드 품질을 향상하고, 코드의 일관성을 높이고, 버그를 방지하려면 React 프로젝트에 Linting 규칙을 추가하는 것이 필수입니다.

이 기사는 MyDevPa.ge 블로그에 처음 게시되었습니다. 소프트웨어 개발자를 위한 유용한 튜토리얼을 확인해 보세요.

자바스크립트 코드에서 발견된 잘못된 패턴을 자동으로 감지하는 데 사용되는 ESLint라는 인기 있는 오픈 소스 JavaScript 린팅 도구가 있습니다.

React 프로젝트에 Linting 규칙을 추가하는 단계별 방법은 다음과 같습니다.

ESLint 설치

먼저 ESLint를 프로덕션 환경에서는 필요하지 않기 때문에 React 프로젝트에 devDependency로 설치해야 합니다.

설치하려면 아래 명령을 사용합니다.

npm i -D eslint

ESLint 초기화

다음으로 프로젝트 루트 폴더에 .eslintrc.json 구성 파일을 추가하여 ESLint 구성을 초기화해야 합니다.

샘플 구성 예시는 다음과 같습니다.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"],
  "rules": {
    // Here we can add our custom rules.
  },
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

.eslintrc.json 내부에 확장 및 플러그인 속성을 추가하세요.

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:react/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "plugins": ["react", "import", "jsx-a11y"]
}

다양한 플러그인을 추가했으므로 먼저 아래 명령을 실행하여 해당 플러그인을 devDependency로 설치해야 합니다.

npm install -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

규칙 추가

규칙은 구성 목적으로 사용됩니다. 세 가지 방법으로 규칙의 오류 수준을 설정할 수 있습니다.

• off 또는 0: 규칙을 해제합니다.
• 경고 또는 1: 규칙을 경고로 설정합니다.
• error 또는 2: 규칙을 오류로 설정합니다.

? JavaScript 문자열 치트시트 모든 방법

구성 파일에 몇 가지 규칙을 추가해 보겠습니다. 위에 언급된 모든 규칙 목록에서 원하는 대로 다른 규칙을 추가할 수 있습니다.

"rules": {
  "react/prop-types": 0,
  "indent": ["error", 2],
  "linebreak-style": 1,
  "quotes": ["error", "double"]
}

Linting을 위한 스크립트 추가

마지막으로 ESLint를 실행하기 위해 package.json “scripts” 속성에 몇 가지 명령을 추가해 보겠습니다.

"scripts": {
  "lint": "eslint \"src/**/*.{js,jsx}\"",
  "lint:fix": "eslint \"src/**/*.{js,jsx}\" --fix"
}

축하합니다. 이제 이 명령 중 하나를 실행하면 문제가 해결될 것입니다!

이후에도 코드 일관성과 품질을 보장하기 위해 린팅 규칙을 원하는 대로 계속 맞춤설정할 수 있습니다.

MyDevPa.ge를 방문하여 무료 포트폴리오 웹사이트를 1분 안에 무료로 만들어보세요!

위 내용은 React 프로젝트에 ESLint를 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!