Typescript ESLint Rules

eslint.rc.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true
  },
  extends: [
    'eslint:recommended',
    'plugin:import/recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint'
  ],
  settings: {
    react: {
      version: 'detect'
    },
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      // use <root>/tsconfig.json
      "typescript": {},
    }
  },
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly'
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    project: './tsconfig.json',
    ecmaVersion: 2018,
    sourceType: 'module'
  },
  plugins: ['@typescript-eslint', 'react', 'prettier', 'react-hooks', 'emotion', 'import'],
  rules: {
    'prettier/prettier': [
      "warn",
      {
        semi: true,
        singleQuote: true,
        trailingComma: 'all',
        printWidth: 100,
        tabWidth: 2,
        arrowParens: 'avoid',
        jsxSingleQuote: false,
        jsxBracketSameLine: false
      }
    ],
    // next.js automatically adds React to jsx/tsx scope.
    'react/react-in-jsx-scope': 0,
    'no-unused-vars': ['error', { 'argsIgnorePattern': '^_', 'varsIgnorePattern': '^_' }],
    '@typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_', 'varsIgnorePattern': '^_' }],
    "@typescript-eslint/explicit-function-return-type": ['error', {
      "allowExpressions": true,
      "allowTypedFunctionExpressions": true,
      "allowHigherOrderFunctions": true,
    }],
    "camelcase": "off",
    "@typescript-eslint/camelcase": ['warn', { 'properties': 'never' }],
    // Disabled prop-types rule for the React components because we already did specify it by typescript
    "react/prop-types": "off",
    // Disabled camelcase rule because we don't using it
    "@typescript-eslint/camelcase": "off",
    // Disable because just duplicates "@typescript-eslint/no-unused-vars" rule
    "no-unused-vars": "off"
  }
}