eslint-config-typescript-react-pro

eslint-config-typescript-react-pro 🌈

ESLint rules for all of my React + TypesScript projects. Without exhaustive-deps rule :-)

---

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',
    },
  },
}

And all extended rules by extends: ['plugin:jsx-a11y/recommended']

Rule	Recommended
accessible-emoji	error
alt-text	error
anchor-has-content	error
anchor-is-valid	error
aria-activedescendant-has-tabindex	error
aria-props	error
aria-proptypes	error
aria-role	error
aria-unsupported-elements	error
autocomplete-valid	error
click-events-have-key-events	error
control-has-associated-label	error
heading-has-content	error
html-has-lang	error
iframe-has-title	error
img-redundant-alt	error
interactive-supports-focus	error
label-has-associated-control	error
label-has-for	error
lang	error
media-has-caption	error
mouse-events-have-key-events	error
no-access-key	error
no-autofocus	error
no-distracting-elements	error
no-interactive-element-to-noninteractive-role	error, with options
no-noninteractive-element-interactions	error, with options
no-noninteractive-element-to-interactive-role	error, with options
no-noninteractive-tabindex	error, with options
no-onchange	error
no-redundant-roles	error
no-static-element-interactions	error, with options
role-has-required-aria-props	error
role-supports-aria-props	error
scope	error, with options
tabindex-no-positive	error

---

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.¹ 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"
}

1. 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

Footnotes

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.) ↩