使用ESlint整理React + Typescript項目

Question

我在一篇文章中讀到，解釋ESLint的TypeScript核心團隊比TSLint具有更高的性能。 另一方面， @typescript-eslint/parser使AST更方便，與@typescript-eslint/eslint-plugin一起使用效果最佳。

現在，我感覺到我的tslintrc文件沒有很好的插件和擴展程序設置。

• 遵循tsx Airbnb規則還是只遵循標准規則是件好事嗎？
• 包括extends和plugins它們不會相互覆蓋並從中獲得最好的棉絨和自動修復的順序應該是什么？
• 使用CRA yarn create react-app myapp --typescript ，並且未更改tsconfig.json任何tsconfig.json

這是我的.eslintrc.js

module.exports = {
    env: {
        browser: true,
        es6: true,
        node: true
    },
    parser: "@typescript-eslint/parser",
    extends: [
        "plugin:@typescript-eslint/recommended",
        "react-app",
        "plugin:prettier/recommended",
        "prettier",
        "prettier/react"
    ],
    globals: {
        Atomics: "readonly",
        SharedArrayBuffer: "readonly"
    },
    parserOptions: {
        ecmaFeatures: {
            tsx: true
        },
        ecmaVersion: 2018,
        sourceType: "module"
    },
    plugins: ["@typescript-eslint", "react", "prettier"],
    rules: {
        indent: ["error", "tab"],
        "linebreak-style": ["error", "unix"],
        quotes: ["error", "single"],
        semi: ["error", "always"]
    }
};

// and these parts in the VSCode setting
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        { "language": "typescript", "autoFix": true },
        { "language": "typescriptreact", "autoFix": true }
    ],
   "prettier.eslintIntegration": true,

另外，如果有人知道GitHub / Gist中某個項目的良好設置，那將是值得推薦的。

Answer 1

遵循tsx中的Airbnb規則還是只遵循標准規則是件好事嗎？

在很大程度上取決於您的偏好。 沒有絕對的。 查看每個規則中激活的規則，然后自己決定。 AirBnB的樣式指南更多是限制性的，有些人可能喜歡，有些人可能不喜歡。

包括extends和plugins且它們不會相互覆蓋並從中獲得最好的棉絨和自動修復的順序應該是什么？

只要規則不做相同的事情，順序就沒有關系-每個插件/擴展名只會打開/關閉它自己提供的規則，而且由您自己決定選擇哪個規則。 例如，我嘗試使所有與樣式相關的規則保持漂亮，並讓ESLint處理與皮棉相關的規則。