使用ESlint整理React + Typescript项目

Question

I read in an article that the TypeScript core team explaining ESLint has a more performant architecture than TSLint. And on the other hand @typescript-eslint/parser makes a more convenient AST which works the best alongside @typescript-eslint/eslint-plugin .

Now I have a feeling that my tslintrc file has not a good setup of plugins and extensions.

• Is it good to follow Airbnb rules in tsx or just go with the standard rules?
• What should be the sequence of including extends and plugins that they do not override each other and get the best linting and auto-fixing out of it?
• The app created with CRA yarn create react-app myapp --typescript and have not changed anything in the tsconfig.json

This is my .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,

Also if someone knows a good setting in a project in GitHub/Gist that would be appritiated.

Answer 1

Is it good to follow Airbnb rules in tsx or just go with the standard rules?

Depends heavily on your preferences. There is no absolute. Look at the rules that are activated in each of them and decide for yourself. AirBnB's style guide is more on the restrictive side, some may like it and some may not.

What should be the sequence of including extends and plugins that they do not override each other and get the best linting and auto-fixing out of it?

The order doesn't matter, as long as the rules are not doing the same thing - each plugin/extension will only turn on/off it's own provided rules, and again it's up to you to decide which one you choose. For example, I try to keep all style related rules to prettier, and let ESLint deal with lint related rules.