将ESLint和Prettier与TypeScript和JavaScript一起使用

问题描述

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

通过此操作，根据airbnb指南，JavaScript棉绒效果完美。当我添加TypeScript支持时，此配置文件变为以下内容：

.eslintrc.json

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

但是，由于我在.js文件中遇到的一些错误刚刚消失，因此这破坏了JavaScript的显示。

如何为airbnb样式指南设置一个同时适用于JavaScript和TypeScript的.eslintrc.json？

解决方法

您应该设置替代项以仅检查带有打字稿的 .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