在 TypeScript 和 JavaScript 中使用 ESLint 和 Prettier答案

【问题标题】：Using ESLint and Prettier with both TypeScript and JavaScript在 TypeScript 和 JavaScript 中使用 ESLint 和 Prettier
【发布时间】：2020-11-30 13:05:08
【问题描述】：

我正在尝试使用 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？

【问题讨论】：

标签： javascript typescript visual-studio-code eslint

【解决方案1】：

您应该设置覆盖以仅使用 typescript 检查 .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",
    }
}

来自Specifying a Processor docs

【讨论】：