使用ESLint和更漂亮的TypeScript和JavaScript

Question

我正在尝试用ESLint和更漂亮的工具来设置我的项目，以支持JavaScript和TypeScript在VSCode上的应用。我想使用Airbnb样式指南：https://github.com/airbnb/javascript，我最初只使用JavaScript节点/快递项目，所以我使用以下说明设置它：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"
    }
}

根据airbnb的指南，有了这个，JavaScript的衬里就完美的工作了。当我添加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文件中出现的一些错误消失时，这破坏了.js的线性化。

如何为airbnb样式指南设置一个与JavaScript和TypeScript同时工作的TypeScript？

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

来自指定处理器文档