Různé ESLint výsledky při budování Reagovat aplikace

0

Otázka

Jsem začátečník v Reagovat rozvoje.
Snažím se vyřešit všechny chyby/varování mého projektu, ale I získat různé výsledky mezi vývojové prostředí a prostředí výroby. Nechtěl jsem, aby mezi nimi žádný rozdíl v konfiguraci.

Běží npm run lint mi dává tento výstup: npm spustit lint

Běží npm run build mi dává tento výstup: npm spustit build

Je to normální, že jsem si různé ESLint výstupy?

Tady je můj balíček.json:

{
  "name": "immersion-dashboard",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@reduxjs/toolkit": "^1.5.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "@types/jest": "^24.0.0",
    "@types/node": "^12.0.0",
    "@types/react": "^16.9.0",
    "@types/react-dom": "^16.9.0",
    "@types/react-redux": "^7.1.7",
    "bootstrap": "^5.1.3",
    "react": "^17.0.2",
    "react-bootstrap": "^2.0.2",
    "react-dom": "^17.0.2",
    "react-redux": "^7.2.0",
    "react-scripts": "4.0.3",
    "typescript": "~4.1.5"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb": "^19.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-import-resolver-typescript": "^2.5.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jest": "^25.2.4",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "husky": "^7.0.4",
    "lint-staged": "^12.0.2",
    "prettier": "^2.4.1"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:staged": "cross-env CI=true react-scripts test --env=jsdom --passWithNoTests",
    "eject": "react-scripts eject",
    "typescript": "tsc --project tsconfig.json --noEmit",
    "prettier": "prettier . --write",
    "lint": "eslint . --ext .ts --ext .tsx --fix",
    "lint-staged": "lint-staged"
  },
  "lint-staged": {
    "*.{ts,tsx,json,css}": "prettier --write",
    "*.{ts,tsx}": [
      "eslint --fix",
      "npm run test:staged"
    ]
  }
}

a můj .eslintrc.json:

{
  "env": {
    "browser": true,
    "es2021": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:@typescript-eslint/recommended",
    "airbnb",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["react", "@typescript-eslint", "jest"],
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "react/jsx-filename-extension": [
      "warn",
      {
        "extensions": [".tsx"]
      }
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "no-param-reassign": [
      "error",
      {
        "props": false
      }
    ],
    "no-console": "off",
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}
eslint eslintrc package.json reactjs
2021-11-21 15:18:47
1

Nejlepší odpověď

2

Obávám se, že jsou spuštěny dvě instance ESLint s různé konfigurační soubory pro každého, dovolte mi vysvětlit, proč.

Vytvořte Reagovat Aplikace ESLint

CRA již nastaví ESLint (mimo jiné) pro vás:

Pod kapotou, můžeme použít webpack, Babel, ESLint, a další úžasné projekty na výkon vaší aplikace.

V CRA, ESLint je nainstalován a spuštěn vnitřně při spuštění start nebo build příkazy, takže můžete vidět výstup v konzoli při vývoji aplikace, nebo vytvořit konečný balíček. You mohou také získat nepouští vlákna výstup v editoru. CRA již obsahuje výchozí konfigurace pro ESLint, včetně několika pluginů.

Váš projekt ESLint

Jste nainstalovali ESLint individuálně v projektu, a postavil jej v rámci své vlastní .eslintrc.json. To je naprosto v pořádku! To je obvyklý způsob, jak se žmolky vaše projekty. Způsob, jakým si spustit tento ESLint je lint příkaz, které jste přidali na vaše skripty.


Takže při spuštění start nebo buildjste linting svůj projekt s CRA ESLint stupně a config, ale při spuštění lint jste-linting projektu s ESLint stupně a config. Jejich konfigurační soubory se neshodují na 100%, proto na různé chyby hlášeny.

Můžete zkontrolovat, máte dvě instance ESLint nainstalovat spuštěním npm ls eslint,, uvidíte něco jako toto: npm dependencies tree displaying ESLint installed for both the project and CRA

Zde můžete vidět přímý eslint závislost (ten, který jste ručně nainstalovali), a další eslint které patří k react-scripts (jeden instalován jako dílčí závislost CRA).

Jak můžete vyřešit toto?

Máte v podstatě dvě možnosti:

  1. Odstranit vaše ESLint a přizpůsobit CRA ESLint. Můžete odinstalovat eslint závislost z projektu, odstranit své vlastní .eslintrc.jsona rozšířit CRA ESLint config. To musí být provedeno prostřednictvím eslintConfig klíčové ve vašem package.json. Nepotřebuješ, aby tam dal všechno, co jsi měl ve svém .eslintrc.json protože většina z nich je již pokryta CRA config. Nevýhodou této možnosti je, že 1) nelze hadříkem váš kód na vyžádání s npm run lint od CRA neumožňuje, aby tak učinily, a 2) ty jsou vázány na ESLint pluginy, verze používaných RATINGOVÝCH agentur (např. jsou pomocí eslint-plugin-testing-library v3, ale poslední je v5 a nemůžete používat).
  2. Ignorovat ESLint od CRA (doporučeno). To je to, co jsem obvykle dělat. Můžete opt-out z CRA vestavěný ESLint stupně. K tomu, budete muset vytvořit .env soubor v kořenovém adresáři projektu, a pak dal DISABLE_ESLINT_PLUGIN=true uvnitř. Po tom, CRA nebude hadříkem váš kód při spuštění start nebo build,, takže je to na vás, kdy vlákna je se svými lint příkaz. V ideálním případě, budete spustit lint příkaz v CI, a místně pokaždé, když odevzdáváte soubory s nepouští vlákna-představil (možná to nezní povědomě, dejte mi vědět, pokud budete potřebovat pomoc, aby nastavit libovolný z nich), kromě získání okamžité zpětné vazby ESLint chyby prostřednictvím kódu editor (to by mělo být opravdu jednoduché nastavit VSCode nebo WebStorm to tak).

Já doufám, že to pomůže, dejte mi vědět, jestli tam je něco jiného o čem chcete diskutovat!

2021-11-27 14:38:19

Děkuji za kompletní odpověď! Už jsem nastavit nepouští vlákna-představil s husky pro pre-commit, takže jsem připraven začít vyvíjet nyní, ale opět, díky za pomoc!
Kaudaj

Jsem rád, že to bylo užitečné!
Mario Beltrán

V jiných jazycích

Tato stránka je v jiných jazycích

Русский
..................................................................................................................
Italiano
..................................................................................................................
Polski
..................................................................................................................
Română
..................................................................................................................
한국어
..................................................................................................................
हिन्दी
..................................................................................................................
Français
..................................................................................................................
Türk
..................................................................................................................
Português
..................................................................................................................
ไทย
..................................................................................................................
中文
..................................................................................................................
Español
..................................................................................................................
Slovenský
..................................................................................................................