Reconfigure ESLint

Author: armandabric

.eslintrc.js

@@ -1,14 +1,10 @@
 module.exports = {
-  extends: ['airbnb-typescript', 'prettier'],
+  extends: ['airbnb', 'airbnb-typescript', 'prettier'],
 
   parserOptions: {
     project: './tsconfig.eslint.json',
   },
 
-  // ecmaFeatures: {
-  //   jsx: true,
-  // },
-
   env: {
     es6: true,
   },
@@ -19,12 +15,12 @@ module.exports = {
     },
   },
 
-  // rules: {
-  //   'max-params': ['error', 10],
-  //   'no-warning-comments': 'error',
-
-  //   'import/no-commonjs': 'off',
-  // },
+  rules: {
+    'import/no-cycle': 'off', // TODO: We have to fix our cycle issue before being able to activate it again
+    'no-underscore-dangle': 'off',
+    'prefer-destructuring': 'off',
+    'react/jsx-fragments': 'off',
+  },
 
   overrides: [
     {

package.json

@@ -30,33 +30,34 @@
     "@babel/preset-env": "7.15.6",
     "@babel/preset-react": "7.14.5",
     "@babel/preset-typescript": "^7.15.0",
-    "@commitlint/cli": "8.3.5",
-    "@commitlint/config-angular": "8.3.4",
     "@types/enzyme": "^3.10.9",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^27.0.2",
     "@types/react": "^17.0.26",
     "@types/react-is": "^17.0.2",
+    "@typescript-eslint/eslint-plugin": "^4.29.3",
+    "@typescript-eslint/parser": "^4.29.3",
     "babel-eslint": "10.1.0",
-    "babel-jest": "24.9.0",
+    "babel-jest": "27.2.4",
     "babel-register": "6.26.0",
     "conventional-changelog-cli": "2.1.1",
     "doctoc": "1.4.0",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
-    "eslint": "7.25.0",
-    "eslint-config-airbnb-typescript": "12.3.1",
-    "eslint-config-algolia": "14.0.1",
+    "eslint": "7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb-typescript": "^14.0.0",
+    "eslint-config-algolia": "19.0.2",
     "eslint-config-prettier": "8.3.0",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jest": "22.21.0",
+    "eslint-plugin-import": "2.24.2",
+    "eslint-plugin-jest": "24.5.0",
     "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-react": "7.23.2",
+    "eslint-plugin-react": "7.26.1",
     "eslint-plugin-react-hooks": "4.2.0",
     "esm": "3.2.25",
-    "expect": "27.2.3",
+    "expect": "27.2.4",
     "husky": "3.1.0",
-    "jest": "27.2.3",
+    "jest": "27.2.4",
     "json": "10.0.0",
     "lint-staged": "10.5.4",
     "mversion": "2.0.1",

src/AnonymousStatelessComponent.tsx

@@ -1,5 +1,6 @@
-import React from 'react'; // eslint-disable-next-line react/display-name
+import React from 'react';
 
+// eslint-disable-next-line func-names
 export default function (props: { children: React.ReactNode }) {
   const { children } = props; // eslint-disable-line react/prop-types
 

src/formatter/createPropFilter.ts

@@ -4,8 +4,8 @@ export default function createPropFilter(
 ) {
   if (Array.isArray(filter)) {
     return (key: string) => filter.indexOf(key) === -1;
-  } else {
-    // @ts-expect-error: flow to TS
-    return (key: string) => filter(props[key], key);
   }
+
+  // @ts-expect-error: flow to TS
+  return (key: string) => filter(props[key], key);
 }

src/formatter/formatComplexDataStructure.ts

@@ -1,11 +1,11 @@
 import { isValidElement } from 'react';
 import { prettyPrint } from '@base2/pretty-print-object';
 import sortObject from './sortObject';
-import parseReactElement from './../parser/parseReactElement';
+import parseReactElement from '../parser/parseReactElement';
 import formatTreeNode from './formatTreeNode';
 import formatFunction from './formatFunction';
 import spacer from './spacer';
-import type { Options } from './../options';
+import type { Options } from '../options';
 
 export default (
   value: Record<string, any> | Array<any>,

src/formatter/formatFunction.ts

@@ -1,4 +1,4 @@
-import type { Options } from './../options';
+import type { Options } from '../options';
 
 function noRefCheck() {}
 

src/formatter/formatProp.ts

@@ -1,6 +1,6 @@
 import spacer from './spacer';
 import formatPropValue from './formatPropValue';
-import type { Options } from './../options';
+import type { Options } from '../options';
 
 export default (
   name: string,

src/formatter/formatPropValue.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import formatPropValue from './formatPropValue';
-import parseReactElement from './../parser/parseReactElement';
+import parseReactElement from '../parser/parseReactElement';
 import formatTreeNode from './formatTreeNode';
 import formatComplexDataStructure from './formatComplexDataStructure';
 

src/formatter/formatPropValue.ts

@@ -3,8 +3,8 @@ import { isValidElement } from 'react';
 import formatComplexDataStructure from './formatComplexDataStructure';
 import formatFunction from './formatFunction';
 import formatTreeNode from './formatTreeNode';
-import type { Options } from './../options';
-import parseReactElement from './../parser/parseReactElement';
+import type { Options } from '../options';
+import parseReactElement from '../parser/parseReactElement';
 
 const escape = (s: string): string => s.replace(/"/g, '"');
 
@@ -49,7 +49,7 @@ const formatPropValue = (
   }
 
   if (propValue instanceof Date) {
-    if (isNaN(propValue.valueOf())) {
+    if (Number.isNaN(propValue.valueOf())) {
       return `{new Date(NaN)}`;
     }
 

src/formatter/formatReactElementNode.ts

@@ -4,8 +4,8 @@ import formatProp from './formatProp';
 import mergeSiblingPlainStringChildrenReducer from './mergeSiblingPlainStringChildrenReducer';
 import sortPropsByNames from './sortPropsByNames';
 import createPropFilter from './createPropFilter';
-import type { Options } from './../options';
-import type { ReactElementTreeNode } from './../tree';
+import type { Options } from '../options';
+import type { ReactElementTreeNode } from '../tree';
 
 const compensateMultilineStringElementIndentation = (
   element: any,

src/formatter/formatReactFragmentNode.ts

@@ -1,11 +1,12 @@
 import type { Key } from 'react';
 import formatReactElementNode from './formatReactElementNode';
-import type { Options } from './../options';
+import type { Options } from '../options';
 import type {
   ReactElementTreeNode,
   ReactFragmentTreeNode,
   TreeNode,
-} from './../tree';
+} from '../tree';
+
 const REACT_FRAGMENT_TAG_NAME_SHORT_SYNTAX = '';
 const REACT_FRAGMENT_TAG_NAME_EXPLICIT_SYNTAX = 'React.Fragment';
 

src/formatter/formatTree.ts

@@ -1,6 +1,6 @@
 import formatTreeNode from './formatTreeNode';
-import type { Options } from './../options';
-import type { TreeNode } from './../tree';
+import type { Options } from '../options';
+import type { TreeNode } from '../tree';
 
 export default (node: TreeNode, options: Options): string =>
   formatTreeNode(node, false, 0, options);

src/formatter/formatTreeNode.ts

@@ -1,7 +1,7 @@
 import formatReactElementNode from './formatReactElementNode';
 import formatReactFragmentNode from './formatReactFragmentNode';
-import type { Options } from './../options';
-import type { TreeNode } from './../tree';
+import type { Options } from '../options';
+import type { TreeNode } from '../tree';
 
 const jsxStopChars = ['<', '>', '{', '}'];
 const shouldBeEscaped = (s: string) =>

src/formatter/mergeSiblingPlainStringChildrenReducer.spec.ts

@@ -3,8 +3,8 @@ import {
   createNumberTreeNode,
   createStringTreeNode,
   createReactElementTreeNode,
-} from './../tree';
-import type { TreeNode } from './../tree';
+} from '../tree';
+import type { TreeNode } from '../tree';
 
 test('mergeSiblingPlainStringChildrenReducer should merge sibling string tree nodes', () => {
   const childrens: TreeNode[] = [

src/formatter/mergeSiblingPlainStringChildrenReducer.ts

@@ -1,5 +1,5 @@
-import { createStringTreeNode } from './../tree';
-import type { TreeNode } from './../tree';
+import { createStringTreeNode } from '../tree';
+import type { TreeNode } from '../tree';
 
 export default (
   previousNodes: TreeNode[],

src/index.ts

@@ -1,6 +1,6 @@
+import type { ReactElement } from 'react';
 import formatTree from './formatter/formatTree';
 import parseReactElement from './parser/parseReactElement';
-import type { ReactElement } from 'react';
 import type { Options } from './options';
 
 const reactElementToJsxString = (

src/options.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactElement } from 'react';
 
 export type Options = {
   filterProps: string[];
@@ -11,5 +11,5 @@ export type Options = {
   sortProps: boolean;
 
   maxInlineAttributesLineLength?: number;
-  displayName?: (element: React.ReactElement) => string;
+  displayName?: (element: ReactElement) => string;
 };

src/parser/parseReactElement.spec.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+
 import React, { Fragment } from 'react';
 import parseReactElement from './parseReactElement';
 

src/parser/parseReactElement.ts

@@ -12,14 +12,14 @@ import {
   isSuspense,
   Memo,
 } from 'react-is';
-import type { Options } from './../options';
+import type { Options } from '../options';
 import {
   createStringTreeNode,
   createNumberTreeNode,
   createReactElementTreeNode,
   createReactFragmentTreeNode,
-} from './../tree';
-import type { TreeNode } from './../tree';
+} from '../tree';
+import type { TreeNode } from '../tree';
 
 const supportFragment = Boolean(Fragment);
 
@@ -112,7 +112,9 @@ const filterProps = (
   const filteredProps: Record<string, any> = {};
   Object.keys(originalProps)
     .filter((key) => cb(originalProps[key], key))
-    .forEach((key) => (filteredProps[key] = originalProps[key]));
+    .forEach((key) => {
+      filteredProps[key] = originalProps[key];
+    });
   return filteredProps;
 };
 
@@ -124,9 +126,13 @@ const parseReactElement = (
 
   if (typeof element === 'string') {
     return createStringTreeNode(element);
-  } else if (typeof element === 'number') {
+  }
+
+  if (typeof element === 'number') {
     return createNumberTreeNode(element);
-  } else if (!React.isValidElement(element)) {
+  }
+
+  if (!React.isValidElement(element)) {
     throw new Error(
       `react-element-to-jsx-string: Expected a React.Element, got \`${typeof element}\``
     );