.eslintrc.js

const isCI = require("is-ci");

/** @type {import('eslint').Linter.BaseConfig} */
const conf = {
  "reportUnusedDisableDirectives": true,
  // All js/jsx is valid typescript, so this global parser is ok.
  "parser": "@typescript-eslint/parser",
  "extends": [
    "airbnb", //
    "airbnb/hooks", //
    "plugin:@typescript-eslint/recommended", //
    // TODO: enable type-aware lint rules: https://typescript-eslint.io/docs/linting/type-linting/
    // "airbnb-typescript",
    // "plugin:@typescript-eslint/recommended-requiring-type-checking",
    // "prettier", // always disable style rules that may conflict with prettier
  ],
  // Is this less relevant once we are fully converted to typescript?
  "env": {
    "browser": true,
    "node": true,
    "jest": true,
    "es6": true
  },
  "plugins": [
    "@typescript-eslint",
    "react",
    "jsx-a11y"
    // Disable in CI for performance: https://eslint.org/docs/user-guide/configuring#disabling-rules-in-ci
    // `prettier --check .` will run in parallel
    // isCI ? undefined : "prettier",
  ],
  "parserOptions": {
    // TODO: enable type-aware lint rules: https://typescript-eslint.io/docs/linting/type-linting/
    // TODO: create root-level tsconfig.json (maybe all it does is type-check.. this file to start with?)
    // tsconfigRootDir: __dirname,
    // project: ["./tsconfig.json"],
  },
  "root": true,
  "rules": {
    "quotes": ["error", "double"],
    // This can be buggy when autofixing the "prettier/prettier" rule
    //   See: https://github.com/prettier/eslint-plugin-prettier#arrow-body-style-and-prefer-arrow-callback-issue
    "arrow-body-style": [2, "as-needed"], // (this line enforces no curly braces where they can be omitted)
    // ensure always off:
    // "arrow-body-style": 0,
    // "prefer-arrow-callback": 0,

    "import/extensions": [
      "error",
      // TODO: use explicit extensions? https://youtu.be/M3BM9TB-8yA?t=837
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "class-methods-use-this": 0,
    "import/imports-first": 0,
    "import/newline-after-import": 0,
    "import/no-dynamic-require": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-named-as-default": 0,
    "import/no-unresolved": 2,
    "import/no-webpack-loader-syntax": 0,
    "import/prefer-default-export": 0,
    "jsx-a11y/aria-props": 2,
    "jsx-a11y/heading-has-content": 0,
    "jsx-a11y/href-no-hash": 0,
    "jsx-a11y/label-has-for": 2,
    "jsx-a11y/mouse-events-have-key-events": 2,
    "jsx-a11y/role-has-required-aria-props": 2,
    "jsx-a11y/role-supports-aria-props": 2,
    "max-len": 0,
    "newline-per-chained-call": 0,
    "no-confusing-arrow": 0,
    "no-console": 1,
    "no-use-before-define": 0,
    "no-underscore-dangle": 0,
    "prefer-template": 2,
    "react/destructuring-assignment": 0,
    "react/no-children-prop": 0,
    "react/forbid-prop-types": 0,
    "react/jsx-filename-extension": 0,
    "react/jsx-no-target-blank": 0,
    "react/require-default-props": 0,
    "react/require-extension": 0,
    "react/prefer-stateless-function": 0,
    "react/self-closing-comp": 0,
    "require-yield": 0,
    "react/react-in-jsx-scope": "off",
    "react/jsx-uses-react": "off",

    // disabled globally, because it's not possible to satisfy these rules in js files (even with jsdoc comments)
    // These are enabled specifically for TS in `overrides` below.
    // TS may still complain about implicit any, etc in js code.
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-var-requires": "off"
  },
  // TODO: This can be removed once we finish running TS migration scripts:
  "settings": {
    "import/resolver": {
      "webpack": {
        "config": "./config/webpack/production.js"
      }
    }
  },
  "overrides": [
    {
      "files": ["*.ts", "*.tsx"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "rules": {
        // Re-enable rules that can only be fixed with .ts syntax
        "@typescript-eslint/explicit-function-return-type": ["error"],
        "@typescript-eslint/explicit-module-boundary-types": ["error"],
        "@typescript-eslint/no-var-requires": ["error"]
      }
    }
  ]
}

module.exports = conf;

buggy.jsx

export default class Root extends Component {
  getInitialState = () => ({
    errorImporting: null,
    errorParsing: null,
    errorUploading: null,
    file: null,
    fromExtension: false,
    importSuccess: false,
    isImporting: false,
    isParsing: false,
    isUploading: false,
    parsedResults: null,
    showLongRunningMessage: false,
  });
}

package.json

{
  "name": "asdf",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@babel/core": "^7.18.6",
    "@babel/plugin-transform-for-of": "^7.18.8",
    "@babel/plugin-transform-runtime": "^7.18.6",
    "@babel/preset-env": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "babel-loader": "^8.2.5",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "babel-plugin-styled-components": "^1.13.3",
    "react": "^17.0.2"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.30.5",
    "@typescript-eslint/parser": "^5.30.5",
    "eslint": "^8.2.0",
    "eslint-config-airbnb": "19.0.4",
    "eslint-config-airbnb-typescript": "^17.0.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-import-resolver-webpack": "^0.13.2",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-jsx-a11y": "^6.5.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "is-ci": "^3.0.1",
    "prettier": "2.7.1",
    "typescript": "^4.7.4"
  }
}

Tried what I thought would be usable .vscode/settings.json but no go:

{
  // Nice to have for any repo:
  "typescript.tsdk": "./node_modules/typescript/lib",

  // Better safe than sorry:
  "git.useForcePushWithLease": true,

  // Hide files from search and file picker:
  "files.exclude": {
    // Note: You can still enter exact path of any file, and vscode will then show it in file picker.
    // node_modules, .git, etc are still ignored with vscode v1.63.2
    ".yarn/releases/*": true,
    "yarn.lock": true
  },

  // Generic settings for our repo:
  "editor.tabSize": 2,

  // By default, format code with prettier onSave:
  //  (Currently, this mostly just handles markdown files and json files)
  // "editor.formatOnSave": true,
  // "editor.defaultFormatter": "esbenp.prettier-vscode",

  // Enable eslint vscode extension:
  "eslint.enable": true,
  "eslint.lintTask.enable": false,
  "eslint.format.enable": false,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "prettier.useEditorConfig": true,
  "eslint.useESLintClass": true,
  "eslint.packageManager": "yarn",
  "eslint.probe": [],
  "[typescript]": {
    "editor.codeActionsOnSave": [
      "esbenp.prettier-vscode:format",
      "source.fixAll.eslint"
      // "source.fixAll.glean"
      // TODO:
      //   When we have a need to convert some class component to hook component,
      //   enable "glean" above. We could also add:
      //   https://www.npmjs.com/package/eslint-plugin-react-prefer-function-component
    ]
  },
  "[typescriptreact]": {
    "editor.codeActionsOnSave": [
      "esbenp.prettier-vscode:format",
      "source.fixAll.eslint"
    ]
  },
  "[javascript]": {
    "editor.codeActionsOnSave": ["source.fixAll.eslint"]
  },
  "[javascriptreact]": {
    "editor.codeActionsOnSave": ["source.fixAll.eslint"]
  },
  "cSpell.words": [""]
}