將 ESLint 和 Prettier 與 TypeScript 和 JavaScript 一起使用

Question

我正在嘗試使用 ESLint 和 Prettier 設置我的項目，以支持 VSCode 上的 JavaScript 和 TypeScript linting。 我想使用 Airbnb 風格指南： https://github.com/airbnb/javascript我最初只有 JavaScript 的節點/快遞項目，所以我使用以下說明進行設置：Z5E056C500A1C4B6A7110BADEchobin.com/intrategrating-BADEchobin.com/7110BADEchbin 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，因為我在 my.js 文件中遇到的一些錯誤會消失。

如何為 airbnb 風格指南設置適用於 JavaScript 和 TypeScript 的 a.eslintrc.json？

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

從指定處理器文檔