.eslintrc.js

module.exports = {
    'env': {
        'browser': true,
        'es2021': true,
        'node': true
    },
    'extends': [
        'eslint:recommended',
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended'

        // Turn this on when debugging or refactoring, otherwise leave
        // it off, it's oppressive and unhelpful most of the time.
        //
        // "plugin:react-hooks/recommended"
    ],
    'parser': '@typescript-eslint/parser',
    'parserOptions': {
        'ecmaFeatures': {
            'jsx': true
        },
        'ecmaVersion': 12,
        'sourceType': 'module',
        'project': [
            './tsconfig.json',
            './tsconfig-server.json'
        ]
    },
    'plugins': [
        'react',
        '@typescript-eslint'
    ],
    'settings': {
        'react': {
            'version': 'detect'
        }
    },
    "overrides": [{
        "excludedFiles": ["webpack.config.js"],
    }],
    'rules': {
        'indent': ['error', 4],
        'linebreak-style': ['error', 'windows'],
        'semi': ['error', 'never'],

        // ---------- Specific Rules ----------
        //
        // The rules down here are all the extra stuff we want
        // enabled. Everything that's enabled below needs a comment
        // justifying its need.
        //
        // ---------- Specific Rules ----------

        "@typescript-eslint/member-delimiter-style": [
            "warn",
            {
                "multiline": {
                    "delimiter": "none",
                    "requireLast": true
                }
            }
        ],

        // Warn for console.log usage so we don't accidentally leave
        // it in.
        "no-console": [
            "warn",
            { allow: ["debug", "warn", "error", "trace"] }
        ],

        // Use a consistent bracket location in JSX
        "react/jsx-closing-bracket-location": "warn",

        // We don't want a bunch of unused variables in our codebase,
        // remove them instead.
        //
        // Disable the normal one, doesn't play well with TS.
        "no-unused-vars": "off",
        "@typescript-eslint/no-unused-vars": "warn",

        // Ban triple-equals when working with null, as null and
        // undefined should both be true when compared to null
        "eqeqeq": [
            "error",
            "always",
            {
                // If null, never use triple-equals
                "null": "never"
            }
        ],

        // Don't use await on non-Promise objects, this helps clean up
        // any await statements that are no longer valid after a
        // refactor.
        "@typescript-eslint/await-thenable": "warn",

        // This isn't so much about the await, as it is about the
        // async. It will warn us if we're using an async function
        // without ever using await inside. — It will NOT warn us when
        // we're missing await statements before calls in our async
        // function however. As long as there is one, this rule is
        // happy.
        "require-await": "off",
        "@typescript-eslint/require-await": "error",

        // This enforces more strict boolean checks, see docs for
        // details, it gets a little complicated.
        //
        // The gist is, JS thinks the values: "", 0 and null all
        // should evaluate to a falsy value.
        //
        // This can cause some cryptic errors if you for example
        // null-check a number using `if (maybeNumber)`. This
        // expression will work until `maybeNumber` is 0, then it will
        // evaluate to false.
        //
        // This rule forces you to instead do `if (maybeNumber !=
        // null)`, which eliminates the chance of that mistake
        // happening.
        "@typescript-eslint/strict-boolean-expressions": [
            "error",
            {
                "allowNullableBoolean": true,
                "allowNullableString": false,
                "allowNullableNumber": false
            }
        ],

        // This blocks the `!nullableVariable` assertion. The
        // reasoning behind this is that if something can be null, you
        // should explicitly assert that it isn't before continuing
        // execution.
        //
        // This helps avoid cryptic errors downstream when a null
        // value eventually hits a point where an NPE is raised. It's
        // easier to troubleshoot if it crashes at the earliest point
        // where an unexpected null is encountered.
        //
        // A terse way of handling all the extra null-checks is to
        // write a non-null asserter in Typescript and call that to
        // exclude the null-branch, or crash if it's null.
        "@typescript-eslint/no-non-null-assertion": [
            "warn"
        ],

        // Ensures we only throw actual error objects.
        "no-throw-literal": "off",
        "@typescript-eslint/no-throw-literal": ["error"],

        // Disallow plain text inside JSX elements, prefer a JSX
        // container: {"plain text here"}. This reduces the chance of
        // text getting mangled during refactoring.
        "react/jsx-no-literals": "warn",

        // ---------- Extension overrides ----------
        //
        // The rules down here are only relevant as long as their
        // respective extensions are active.
        //
        // ---------- Extension overrides ----------

        // Turn this off when using react/recommended and Typescript,
        // they don't play well together.
        'react/prop-types': 'off',

        // This is too much, turn it off
        '@typescript-eslint/explicit-module-boundary-types': "off",

        // Typescript handles this
        "react/react-in-jsx-scope": 'off',
    }
}