编译时不要运行linter和prettier

Question

我和一些朋友有一个个人项目，我们已经配置了eslint和更漂亮的，当项目编译时，他们像“自动”一样运行。所以，当我在我的任务和项目运行时，如果我在某个地方遇到更漂亮的错误，或者linter错误(我输入的导入或变量，但我还没有使用)，项目将直接失败，不再编译……示例：

​

​

这真是超级烦人。这些都是不应该破坏应用程序的东西，我应该能够继续工作并看到应用程序的编译。

在我之前和现在的公司，我们在项目中有更漂亮的和/或eslint，但它们不会自动运行，它们只是在你在终端上键入命令时运行，或者在提交时，赫斯基为你运行命令。配置是不同的，我试图复制它，但它从来没有工作过。

我已经用谷歌搜索了好几天了，但是什么都不起作用。

我希望prettier和eslint只在我自己在终端上编写命令(npm run lint和npm run format)时才通知我错误，但看起来它们在每次项目编译时都是自己运行的……

这是package.json：

{
    "name": "gamma-project",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^16.9.53",
        "@types/react-dom": "^16.9.8",
        "firebase": "8.0.2",
        "i18next": "^19.9.0",
        "i18next-browser-languagedetector": "^6.0.1",
        "moment": "^2.29.1",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-i18next": "^11.8.8",
        "react-phone-input-2": "^2.13.9",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.1",
        "react-use-gesture": "^9.1.3",
        "react-verification-code-input": "^1.2.9",
        "styled-components": "^5.2.1",
        "typescript": "^4.1.3",
        "web-vitals": "^0.2.4"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint": "eslint . --fix ",
        "format": "prettier --write \"./**/*.{ts,tsx}\" --config ./.prettierrc"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "@types/react-router-dom": "^5.1.6",
        "@types/styled-components": "^5.1.7",
        "@types/webpack-env": "^1.16.0",
        "@typescript-eslint/eslint-plugin": "^4.11.1",
        "@typescript-eslint/parser": "^4.11.1",
        "eslint": "^7.17.0",
        "eslint-config-prettier": "^7.1.0",
        "eslint-plugin-jsx-a11y": "^6.4.1",
        "eslint-plugin-prettier": "^3.3.0",
        "eslint-plugin-react": "^7.22.0",
        "eslint-plugin-react-hooks": "^4.2.0",
        "husky": ">=4",
        "lint-staged": ">=10",
        "prettier": "^2.2.1"
    }
}

.prettierrc：

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 100,
    "singleQuote": false,
    "jsxSingleQuote": false,
    "trailingComma": "none",
    "jsxBracketSameLine": true,
    "endOfLine": "auto"
}

.eslintrc.js：

module.exports = {
    parser: "@typescript-eslint/parser",
    root: true, // Make sure eslint picks up the config at the root of the directory
    parserOptions: {
        ecmaVersion: 2020, // Use the latest ecmascript standard
        sourceType: "module", // Allows using import/export statements
        ecmaFeatures: {
            jsx: true // Enable JSX since we're using React
        }
    },
    settings: {
        react: {
            version: "detect" // Automatically detect the react version
        }
    },
    env: {
        browser: true, // Enables browser globals like window and document
        amd: true, // Enables require() and define() as global variables as per the amd spec.
        node: true // Enables Node.js global variables and Node.js scoping.
    },
    extends: [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended",
        "plugin:prettier/recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended",
        "prettier/@typescript-eslint"
    ],
    plugins: ["@typescript-eslint"],
    rules: {
        "react/jsx-sort-props": 2,
        "no-console": 2,
        "prettier/prettier": ["error", {}, { usePrettierrc: true }], // Use our .prettierrc file as source
        "@typescript-eslint/explicit-module-boundary-types": ["error"],
        "@typescript-eslint/no-explicit-any": ["error"],
        "@typescript-eslint/no-unused-vars": ["error"],
        "@typescript-eslint/explicit-function-return-type": [
            "error",
            {
                allowExpressions: false,
                allowTypedFunctionExpressions: true,
                allowHigherOrderFunctions: true,
                allowDirectConstAssertionInArrowFunctions: true,
                allowConciseArrowFunctionExpressionsStartingWithVoid: true
            }
        ],
        "@typescript-eslint/naming-convention": [
            "error",
            {
                selector: "interface",
                format: ["PascalCase"],
                custom: {
                    regex: "^I[A-Z]",
                    match: true
                }
            }
        ]
    }
};

我向上帝祈祷，Stack Overflow中的某个人知道如何准确地配置它，让它不那么做，因为它真的让我很恼火，以至于我关闭了vcode，不再编码了。哈哈。

Answer 1

如果您不希望eslint破坏您的项目，只需将错误重命名为警告即可。执行此操作的方法是设置emitWarning: true

module.exports = {
  entry: '...',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        options: {
          emitWarning: true,
        },
      },
    ],
  },
};

如果这样不起作用，请尝试这个插件，它会将所有eslint错误转换为warnings：https://github.com/bfanger/eslint-plugin-only-warn。