使用ESlint整理React + Typescript项目

时间:2019-05-23 13:56:04

标签: reactjs typescript eslint eslintrc react-tsx

我在一篇文章中读到,解释ESLint的TypeScript核心团队比TSLint具有更高的性能。另一方面,@typescript-eslint/parser使AST更方便,与@typescript-eslint/eslint-plugin一起使用效果最佳。

现在,我感觉我的tslintrc文件的插件和扩展名设置不正确。

  • 遵循tsx中的Airbnb规则还是只遵循标准规则是很好吗?
  • extendsplugins包括在内的顺序应该是什么,它们之间不能互相覆盖,并能获得最好的棉绒和自动固定效果?
  • 使用CRA yarn create react-app myapp --typescript创建的应用程序,但尚未更改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中某个项目的良好设置,那将是有益的。

1 个答案:

答案 0 :(得分:2)

  

遵循tsx中的Airbnb规则还是仅遵循标准规则是件好事吗?

在很大程度上取决于您的偏好。没有绝对的。查看每个规则中激活的规则,然后自己决定。 AirBnB的样式指南更多是限制性的,有些人可能喜欢,有些人可能不喜欢。

  

包括扩展和插件而不会相互覆盖并从中获得最好的棉绒和自动固定的顺序应该是什么?

顺序不重要,只要规则不做相同的事情-每个插件/扩展将仅打开/关闭它自己提供的规则,而且由您自己决定选择哪个规则。例如,我尝试使所有与样式相关的规则保持漂亮,并让ESLint处理与皮棉相关的规则。