在 TypeScript 和 JavaScript 中使用 ESLint 和 Prettier

Question

我正在尝试使用 ESLint 和 Prettier 设置我的项目，以支持 VSCode 上的 JavaScript 和 TypeScript linting。我想使用 Airbnb 风格指南：https : //github.com/airbnb/javascript 我最初只有 JavaScript 的 node/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文件：

{
    "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",
    }
}

来自指定处理器文档