javascript - 在 TypeScript 和 JavaScript 中使用 ESLint 和 Prettier

Question

我正在尝试使用 ESLint 和 Prettier 设置我的项目，以支持 VSCode 上的 JavaScript 和 TypeScript linting。我想使用 Airbnb 风格指南:https://github.com/airbnb/javascript
我最初只有 JavaScript 节点/express 项目，所以我使用以下说明进行设置:https://blog.echobind.com/integrating-prettier-eslint-airbnb-style-guide-in-vscode-47f07b5d7d6a一切正常。
当我开始添加 TypeScript 时，我按照此处的说明进行操作:https://github.com/typescript-eslint/typescript-eslint
我更漂亮的配置文件如下所示:
.prettierrc

{
    "tabWidth": 4,
    "printWidth": 200,
    "singleQuote": true,
    "endOfLine": "auto",
    "trailingComma": "all"
}

当我只为 JavaScript 设置项目时，我的配置文件是:
.eslintrc.json

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    }
}

有了这个，JavaScript linting 根据 airbnb 指南完美运行。当我添加 TypeScript 支持时，此配置文件变为以下内容:
.eslintrc.json

{
    "extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "plugins": ["prettier", "@typescript-eslint"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    }
}

但是，这会破坏 JavaScript linting，因为我在 .js 文件中遇到的一些错误会消失。
如何为 airbnb 样式指南设置适用于 JavaScript 和 TypeScript 的 .eslintrc.json？

Answer 1

您应该将覆盖设置为仅检查 .ts 带有 typescript 的文件:

{
    "extends": ["airbnb", "prettier"],
    "plugins": ["prettier"],
    "rules": {
        "prettier/prettier": ["error"],
        "no-console": "off"
    },
    "overrides": {
        "files": ["*.ts", "*.tsx"],
        "extends": ["airbnb", "prettier", "airbnb-typescript", "prettier/@typescript-eslint"],
        "plugins": ["prettier", "@typescript-eslint"],
        "parser": "@typescript-eslint/parser",
    }
}

From Specifying a Processor docs