create-react-app에서 제공하는 ESLint 사용 안 함

create-react-app에서 제공하는 ESLint 사용 안 함

create-react-app v3.0.0이 출력되었습니다.TypeScript의 보풀을 내부적으로 지원합니다.(좋습니다!)TSLint가 켜져 있는 상황을 이해하고 ESLint로 대체할 예정입니다만, 지금은 아닙니다.

의 보풀을 무효로 하는 방법react-scripts start?

/* eslint-disable */다른 사람들은 내가 찾고 있는 게 아니야.

현재react-scriptsv4.0.2에서는 환경변수를 사용하여 ESLint를 해제할 수 있습니다.이 작업을 수행하려면 이 작업을.env파일 또는 패키지에 스크립트 접두사를 붙여서 파일을 만듭니다.json 파일.

예를 들어,.env:

DISABLE_ESLINT_PLUGIN=true

아니면 네 소포 안에.json:

{
  "scripts": {
    "start": "DISABLE_ESLINT_PLUGIN=true react-scripts start",
    "build": "DISABLE_ESLINT_PLUGIN=true react-scripts build",
    "test": "DISABLE_ESLINT_PLUGIN=true react-scripts test"
  }
}

https://github.com/facebook/create-react-app/pull/10170

EXTEND_ESLINT 환경변수를 다음과 같이 설정할 수 있습니다.true예를 들어,.env파일:

EXTEND_ESLINT=true

이것으로 eslint 설정을package.json파일:

...
"eslintConfig": {
    "extends": "react-app",
    "rules": {
      "jsx-a11y/anchor-is-valid": "off"
    }
  },
...

eslint를 비활성화하려면 파일을 추가합니다..eslintignore다음 내용을 포함:

*

자세한 내용은https://create-react-app.dev/docs/setting-up-your-editor/#experimental-extending-the-eslint-config 를 참조하십시오.

Craco를 사용하여 eslint를 비활성화할 수 있습니다(및 다른 설정을 덮어쓸 수도 있습니다.

4가지 변경이 필요합니다.

1. npm install @craco/craco --save
2. 만들다craco.config.js(package.json과 같은 폴더에 있습니다)
3. 기입하다craco.config.js포함:

module.exports = {
  eslint: {
    enable: false,
  },
};

마지막으로 치환react-script와 함께craco당신의 안에서package.json스크립트, 즉

"scripts": {
  "build": "craco build",
  "start": "craco start",
}

ESLint가 비활성화됩니다.ESLint 설정을 확장하는 방법의 예에 대해서는, Craco 의 메뉴얼을 참조해 주세요.

순서 1

만들다.env파일(프로젝트 루트가 없는 경우)

EXTEND_ESLINT=true

순서 2

더하다.eslintrc.js프로젝트 루트에 다음 내용을 포함시킵니다.

module.exports = {
  "extends": ["react-app"],
  "rules": {
  },
  "overrides": [
    {
      "files": ["**/*.js?(x)"],
      "rules": {
// ******** add ignore rules here *********
        "react/no-unescaped-entities": "off",
        "react/display-name": "off",
        "react/prop-types": "off",
      }
    }
  ]
}

을 주목하다override > rulessection: "off" 플래그가 있는 규칙을 추가하여 비활성화합니다.

이젝트하지 않는 회피책:

1. .eslintrc.js의 환경변수를 다음과 같이 사용합니다.

module.exports = {
    "extends": process.env.REACT_APP_DEV_DISABLE_ESLINT ? [] : [
      "eslint:recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:json/recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:jsx-a11y/recommended",
      "plugin:react/recommended",
    ],
    "rules": process.env.REACT_APP_DEV_DISABLE_ESLINT ? {} : {
      // ...rules for production CI
    }
}

2. 패키지의 시작 스크립트에 변수를 설정합니다.json:

{
      "scripts": {
          "eslint:disable": "REACT_APP_DEV_DISABLE_ESLINT=true",
          "start": "npm run eslint:disable  react-scripts start"
      }
}

우선 확인EXTEND_ESLINT환경변수가 true로 설정되어 있습니다.설정할 수 있습니다..env파일.

Typescript의 경우 아래 예시와 같이 오버라이드 배열에 규칙을 추가해야 합니다.

{
  "eslintConfig": {
    "extends": ["react-app"],
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "eqeqeq": "warn"
        }
      }
    ]
  }
}

회피책:

.eslintignore 파일을 추가합니다.

*

그리고 eslint를 실행한다.--no-ignore독자적인 eslint를 설정할 수 있습니다.ignore 파일이 필요한 경우 다음과 같이 정의할 수 있습니다.--ignore-path를 사용하는 대신--no-ignore선택.

하는 것도 방법 중 하나다eject react-scripts- 실행 중yarn eject/npm run eject- 전원을 끕니다.eslint에webpack수동으로 설정합니다.

단, 꺼내기 전에 가볍게 꺼내는 것이 아니라 다른 옵션을 고려해야 합니다.Create React App의 의미와 그 이유를 이해하려면 Create React App을 꺼내지 마십시오를 읽어보십시오.

이 포크를 봐주세요.create-react-app 상세보기 특히eject-tic_tac_toe서 「」, 「」가 있습니다.scripts/start.js그 후에 - 마법이 일어나는 대본yarn startnpm start - 아, 네~config/webpack.config.dev.js되는 웹.start.js이치노력하다

// …
module.exports = {
  // …
  module: {
    preLoaders: [
      {
        test: /\.(js|jsx)$/,
        loader: 'eslint',
        include: paths.appSrc,
      }
    ]
  }
  // …
};

언급URL : https://stackoverflow.com/questions/55821078/disable-eslint-that-create-react-app-provides