eslint-config-typescript-react-pro v1.9.1

This config is:

• ✅ No meaningless rules.
• ✅ All containing rules are explicit.
• ✅ Only extend eslint-plugin-jsx-a11y:recommend for UX.
• ✅ Include all dependency package.(except eslint-prettier-plugin)
• 👋 Good by // eslint-disable-next-line react-hooks/exhaustive-deps

Explicit all rule set 🔔

• index.js

module.exports = {
  env: {
    browser: true,
    es6: true,
    jest: true,
    node: true,
  },
  extends: ['plugin:jsx-a11y/recommended'],
  globals: {
    JSX: 'readonly',
  },
  parser: '@typescript-eslint/parser',
  plugins: [
    'jsx-a11y',
    'import',
    'sort-keys-fix',
    'react-hooks',
    '@typescript-eslint',
    'prettier',
  ],
  root: true,
  rules: {
    '@typescript-eslint/consistent-type-imports': 'warn',
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/prefer-as-const': 'warn',
    'import/default': 'error',
    'import/export': 'error',
    'import/named': 'error',
    'import/no-anonymous-default-export': 'off',
    'import/no-duplicates': 'error',
    'import/no-named-as-default': 'error',
    'import/no-named-as-default-member': 'off',
    'import/no-unresolved': 'error',
    'import/order': [
      'warn',
      {
        alphabetize: {
          caseInsensitive: true,
          order: 'asc',
        },
        groups: [
          'builtin',
          'external',
          'internal',
          'parent',
          'sibling',
          'index',
          'object',
        ],
        'newlines-between': 'always',
      },
    ],
    'no-alert': 'error',
    'no-console': 'error',
    'no-dupe-keys': 'error',
    'no-unused-private-class-members': 'error',
    'prefer-const': 'error',
    'prettier/prettier': [
      'warn',
      {},
      {
        properties: {
          usePrettierrc: true,
        },
      },
    ],
    'react-hooks/rules-of-hooks': 'error',
    'sort-keys-fix/sort-keys-fix': 'warn',
  },
  settings: {
    'import/parsers': {
      '@typescript-eslint/parser': ['.ts', '.tsx'],
    },
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
      typescript: {
        alwaysTryTypes: true,
        // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
        project: ['tsconfig.json'],
      },
    },
    react: {
      version: 'detect',
    },
  },
}

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-typescript-react-pro typescript eslint-config-prettier eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-prettier eslint-plugin-react-hooks eslint-plugin-sort-keys-fix eslint-plugin-jsx-a11y prettier

or using yarn

yarn add -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-typescript-react-pro typescript eslint-config-prettier eslint-plugin-import eslint-import-resolver-typescript eslint-plugin-prettier eslint-plugin-react-hooks eslint-plugin-sort-keys-fix eslint-plugin-jsx-a11y prettier

Typescript install is not required if you have aleady installed a Typescript.^1 Because This package has a peerDependencies for TypeScirpt.

Required Setup

1. Add the extends to your .eslintrc.js or .eslintrc.json or .eslintrc.

• .eslintrc.json

{
  "extends": "typescript-react-pro"
}

2. And need .prettierrc file because this package refers your .prettierrc and use directly.
   If you don't have .prettierrc, please touch .prettierrc and set prettier rules depends on your preferece like this.

• .prettierrc

{
  "singleQuote": true,
  "semi": false
}

LICENSE

MIT

^1: The same thing The same thing can be said for React. General install guide skiped because author assumed almost peaople who trying getting start the library are already installed React and developing React application.)