add eslint with our standard config

[jpetto]

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  plugins: [],
  rules: {
    'prettier/prettier': [
      'error',
      {
        useTabs: false, // ＼(￣▽￣)／
        tabWidth: 2,
        semi: true,
        singleQuote: true,
      },
    ],
    // allows unused vars when declared in arguments
    '@typescript-eslint/no-unused-vars': [
      'error',
      { vars: 'all', args: 'none' },
    ],
    // disables case checks for class/interface/type
    '@typescript-eslint/class-name-casing': 0,
    // disables case checks for properties
    '@typescript-eslint/camelcase': 0,
    // allows 'any' typehint
    '@typescript-eslint/no-explicit-any': 0,
    // enforces 2 spaces indent
    indent: [
      'error',
      2,
      {
        SwitchCase: 1,
        VariableDeclarator: { var: 2, let: 2, const: 3 },
        outerIIFEBody: 1,
        MemberExpression: 1,
        FunctionDeclaration: { parameters: 1, body: 1 },
        FunctionExpression: { parameters: 1, body: 1 },
        CallExpression: { arguments: 1 },
        ArrayExpression: 1,
        ObjectExpression: 1,
        ImportDeclaration: 1,
        flatTernaryExpressions: false,
        ignoreComments: false,
      },
    ],
  },
};

[nina-py]

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-prettier eslint-plugin-prettier

I have had to add the following to the eslintrc.js file to get rid of a TypeScript error in the ESLint config file itself:

  env: {
    node: true,
  },

Need to fix a couple of TypeScript errors as well.

[nina-py]

Hi @kkyeboah , @jpetto - here is that TypeScript issue I was talking about in our most recent conversation, where I had to make a change that doesn't make much sense just to keep TS happy. In TabNavigation.tsx, I went from

  const handleChange = (event: React.ChangeEvent<{}>, newValue: number) => {

to

  const handleChange = (
    event: React.ChangeEvent<unknown>,
    newValue: number
  ) => {

rather than use event: React.ChangeEvent<HTMLButtonElement> which would make sense in the circumstances.

This is not a TypeScript issue as such - it is a Material UI problem. It has been discussed at length in the MUI repository: https://github.com/mui-org/material-ui/issues/17454 and eventually fixed for MUI v.5 (currently in alpha) but they won't be backporting it to v.4. The ESLint rule that didn't allow me to use the old code is

ESLint: Don't use `{}` as a type. `{}` actually means "any non-nullish value". (@typescript-eslint/ban-types)

I'm not sure if using <unknown> is any better than <{}>, so I am all ears if there is any other way to make it work.