eslint setup for react and typescript

.eslintrc.js

module.exports = {
	env: {
		browser: true,
		es2021: true,
		node: true,
	},
	extends: [
		'plugin:react/recommended',
		'plugin:prettier/recommended',
		'plugin:react-hooks/recommended',
	],
	parser: '@typescript-eslint/parser',
	parserOptions: {
		ecmaFeatures: {
			jsx: true,
		},
		ecmaVersion: 12,
		sourceType: 'module',
	},
	plugins: ['react', 'prettier', 'import', '@typescript-eslint'],
	rules: {
		'@typescript-eslint/no-unused-vars': [
			'warn',
			{
				args: 'after-used',
				argsIgnorePattern: '^_.*?$',
				ignoreRestSiblings: false,
			},
		],
		'import/order': [
			'warn',
			{
				'newlines-between': 'always',
				pathGroups: [
					{
						group: 'external',
						pattern: '~/**',
						position: 'after',
					},
				],
			},
		],
		'no-console': 'warn',
		'padding-line-between-statements': [
			'error',
			{ blankLine: 'always', next: 'return', prev: '*' },
			{ blankLine: 'always', next: '*', prev: ['const', 'let', 'var'] },
			{
				blankLine: 'any',
				next: ['const', 'let', 'var'],
				prev: ['const', 'let', 'var'],
			},
		],
		'prettier/prettier': [
			'error',
			{
				printWidth: 100,
				semi: true,
				singleQuote: true,
				tabWidth: 2,
				trailingComma: 'es5',
				useTabs: true,
			},
		],
		'react/jsx-sort-props': [
			'warn',
			{
				callbacksLast: true,
				noSortAlphabetically: false,
				reservedFirst: true,
				shorthandFirst: true,
			},
		],
		'react/prop-types': 'off',
		'react/self-closing-comp': 'warn',
		'sort-keys': ['warn', 'asc', { caseSensitive: true, minKeys: 2, natural: false }],
	},
};

install.sh

yarn add --dev eslint \
prettier \
@typescript-eslint/eslint-plugin \
@typescript-eslint/parser \
eslint-config-prettier \
eslint-plugin-import \
eslint-plugin-node \
eslint-plugin-prettier \
eslint-plugin-promise \
eslint-plugin-react \
eslint-plugin-react-hooks

settings.json

// .vscode/settings.json

{
	"editor.formatOnPaste": true,
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll": true
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[javascript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	},
	"[typescript]": {
		"editor.defaultFormatter": "dbaeumer.vscode-eslint"
	}
}