使用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处理与皮棉相关的规则。