javascript - 编译时不要运行 linter 和 prettier

问题描述

我和一些朋友有一个个人项目，我们在其中配置了 eslint 和 prettier，并且在项目编译时它们像“自动”一样运行。所以，当我在处理我的任务并且项目正在运行时，如果我在某个地方有一个更漂亮的错误，或者一个 linter 错误（我输入但我还没有使用的导入或变量），项目将直接失败并且不会再编译.... 示例：

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

在我以前和现在的公司中，我们在项目中拥有并且拥有更漂亮和/或 eslint，但它们不会自动运行，它们只是在您在终端上键入命令时运行，或者在提交时，husky 为您运行命令。配置不同，我试图复制它，但它从来没有奏效。

我已经尝试了几天谷歌搜索但没有任何工作......

我希望 prettier 和 eslint 仅在我自己在终端上编写命令时才通知我错误（npm run lint 和 npm run 格式），但看起来它们每次项目编译时都是自己运行的......

这是 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 并且不再编码哈哈。

标签： javascripteslintprettier

javascript - 编译时不要运行 linter 和 prettier

问题描述

解决方案

推荐阅读