feat: update dependencies & add new rules (#105)

README.md

@@ -102,7 +102,8 @@ for it.
   _eslint-import-resolver-webpack_)
 - `@typescript-eslint`:
   [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser)
-  and [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin).
+  and
+  [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin).
 
 ### Things to know
 

es6/index.js

@@ -1,7 +1,6 @@
 module.exports = {
   extends: [
     './non-rules-config.js',
-    './deprecated-rules.js',
     './stylistic.js',
     './best-practices.js',
     './possible-errors.js',

es6/non-rules-config.js

@@ -1,13 +1,17 @@
 module.exports = {
-  parser: 'babel-eslint',
+  parser: '@babel/eslint-parser',
   env: {
     es6: true,
   },
   parserOptions: {
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
     ecmaVersion: 2018,
     sourceType: 'module',
+    requireConfigFile: false,
   },
-  plugins: ['babel'],
+  plugins: ['@babel'],
   overrides: [
     {
       files: ['**/*.ts?(x)'],

es6/possible-errors.js

@@ -9,10 +9,7 @@ module.exports = {
     'no-unsafe-optional-chaining': 'error',
 
     'no-unused-expressions': 'off',
-    'babel/no-unused-expressions': 'error',
-
-    'valid-typeof': 'off',
-    'babel/valid-typeof': 'error',
+    '@babel/no-unused-expressions': 'error',
   },
   overrides: [
     {
@@ -22,12 +19,11 @@ module.exports = {
         'no-const-assign': 'off', // ts(2588)
         'no-new-symbol': 'off', // ts(2588)
         'no-this-before-super': 'off', // ts(2376)
-        'babel/valid-typeof': 'off', // ts(2367)
 
         'no-dupe-class-members': 'off',
         '@typescript-eslint/no-dupe-class-members': 'off', // ts(2393) & ts(2300)
 
-        'babel/no-unused-expressions': 'off',
+        '@babel/no-unused-expressions': 'off',
         '@typescript-eslint/no-unused-expressions': 'error',
       },
     },

es6/stylistic.js

@@ -10,10 +10,8 @@ module.exports = {
     'prefer-destructuring': 'off', // nah, I like it, but not that much...
     'sort-imports': 'off',
 
-    'babel/camelcase': 'off',
-
     'new-cap': 'off',
-    'babel/new-cap': [
+    '@babel/new-cap': [
       'error',
       {
         newIsCap: true,
@@ -22,13 +20,13 @@ module.exports = {
     ],
 
     'no-invalid-this': 'off',
-    'babel/no-invalid-this': 'error',
+    '@babel/no-invalid-this': 'error',
   },
   overrides: [
     {
       files: ['**/*.ts?(x)'],
       rules: {
-        'babel/no-invalid-this': 'off',
+        '@babel/no-invalid-this': 'off',
         '@typescript-eslint/no-invalid-this': 'error',
       },
     },

import/best-practices.js

@@ -7,11 +7,13 @@ module.exports = {
     'import/no-deprecated': 'warn', // this is an in progress rule
     'import/no-duplicates': 'error',
     'global-require': 'off', // disable because no need to have both!
+    'import/no-import-module-exports': 'error',
     'import/no-internal-modules': 'off',
     'import/no-mutable-exports': 'error',
+    'import/no-relative-packages': 'warn',
     'import/no-restricted-paths': 'off',
     'import/no-unassigned-import': 'off',
-    'import/no-webpack-loader-syntax': 'error',
     'import/no-unused-modules': 'off',
+    'import/no-webpack-loader-syntax': 'error',
   },
 }

jest.js

@@ -111,6 +111,7 @@ module.exports = {
           'testing-library/no-node-access': 'error',
           'testing-library/no-promise-in-fire-event': 'error',
           'testing-library/no-render-in-setup': 'error',
+          'testing-library/no-unnecessary-act': 'error',
           'testing-library/no-wait-for-empty-callback': 'error',
           'testing-library/no-wait-for-multiple-assertions': 'error',
           'testing-library/no-wait-for-side-effects': 'error',

package.json

@@ -33,32 +33,34 @@
   },
   "homepage": "https://github.com/kentcdodds/eslint-config-kentcdodds#readme",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^4.21.0",
-    "@typescript-eslint/parser": "^4.21.0",
-    "babel-eslint": "^10.1.0",
-    "eslint-config-prettier": "^8.1.0",
-    "eslint-import-resolver-webpack": "^0.13.0",
-    "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.3.5",
-    "eslint-plugin-jest-dom": "^3.8.0",
+    "@babel/core": "^7.14.2",
+    "@babel/eslint-parser": "^7.14.2",
+    "@babel/eslint-plugin": "^7.13.16",
+    "@babel/preset-react": "^7.13.13",
+    "@typescript-eslint/eslint-plugin": "^4.23.0",
+    "@typescript-eslint/parser": "^4.23.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-webpack": "^0.13.1",
+    "eslint-plugin-import": "^2.23.0",
+    "eslint-plugin-jest": "^24.3.6",
+    "eslint-plugin-jest-dom": "^3.9.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "eslint-plugin-testing-library": "^4.0.0",
+    "eslint-plugin-testing-library": "^4.4.0",
     "read-pkg-up": "^7.0.1",
     "semver": "^7.3.5",
-    "webpack": "^5.31.2"
+    "webpack": "^5.37.0"
   },
   "devDependencies": {
-    "@testing-library/dom": "^7.30.3",
-    "@testing-library/jest-dom": "^5.11.10",
-    "eslint": "^7.24.0",
+    "@testing-library/dom": "^7.31.0",
+    "@testing-library/jest-dom": "^5.12.0",
+    "eslint": "^7.26.0",
     "eslint-find-rules": "^3.6.1",
     "husky": "^4.3.8",
     "jest": "^26.6.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "2.2.1",
+    "prettier": "2.3.0",
     "pretty-quick": "^3.1.0",
     "react": "^17.0.2",
     "typescript": "^4.2.4"

samples/users.js

@@ -4,9 +4,10 @@ import PropTypes from 'prop-types'
 export default Users
 
 function Users({nameFilter}) {
-  const users = [
-    {name: 'Janice', friends: ['Albert', 'Nancy'], id: 23},
-  ].filter(({name}) => name.toLowerCase().includes(nameFilter))
+  const users = [{name: 'Janice', friends: ['Albert', 'Nancy'], id: 23}].filter(
+    ({name}) => name.toLowerCase().includes(nameFilter),
+  )
+
   return (
     <div className="user-list" id="users-section" data-testid="users">
       {users.map(user => (

samples/users.tsx

@@ -6,9 +6,10 @@ type Props = {
   nameFilter: string
 }
 function Users({nameFilter}: Props) {
-  const users = [
-    {name: 'Janice', friends: ['Albert', 'Nancy'], id: 23},
-  ].filter(({name}) => name.toLowerCase().includes(nameFilter))
+  const users = [{name: 'Janice', friends: ['Albert', 'Nancy'], id: 23}].filter(
+    ({name}) => name.toLowerCase().includes(nameFilter),
+  )
+
   return (
     <div className="user-list" id="users-section" data-testid="users">
       {users.map(user => (