refactor(lint): eslint and prettier update, format code

Author: rolandszoke

.eslintrc.json

@@ -1,9 +1,30 @@
 {
   "parser": "babel-eslint",
-  "extends": ["airbnb", "prettier"],
-  "plugins": ["prettier"],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "env": {
+    "browser": true,
+    "amd": true,
+    "node": true,
+    "es6": true
+  },
+  "extends": [
+    "airbnb",
+    "eslint:recommended",
+    "plugin:prettier/recommended"
+  ],
   "rules": {
-    "prettier/prettier": ["error"],
+    "prettier/prettier": ["error", {}, { "usePrettierrc": true }],
     "import/prefer-default-export": "off",
     "import/no-extraneous-dependencies": "off",
     "import/no-mutable-exports": "off",
@@ -16,7 +37,8 @@
     "react/state-in-constructor": "off",
     "react/jsx-props-no-spreading": "off",
     "react/prop-types": "off",
-    "react/jsx-one-expression-per-line": "off"
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-closing-bracket-location": "off"
   },
   "globals": {
     "window": true,

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
-  "files.insertFinalNewline": true,
-  "files.trimFinalNewlines": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "editor.formatOnSave": true
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "eslint.validate": ["javascript"]
 }

CONTRIBUTING.md

@@ -22,7 +22,7 @@ Every pull request will require an approved review before merging.
 
 ## Linters
 
-This project is using [ESLint](https://eslint.org/) for linting and [Prettier](https://prettier.io/) for code formatting. Please follow their standards on contributing. Your code is automatically formatted on saving a file when using [VSCode](https://code.visualstudio.com/) or [Atom](https://atom.io/). [Husky](https://github.com/typicode/husky) ensures that your changes are properly linted before making a commit. If you want to lint manually, you can use `lint` and `lint --fix` npm scripts to lint the source code and the test files.
+This project is using [ESLint](https://eslint.org/) for linting and [Prettier](https://prettier.io/) for code formatting. Please follow their standards on contributing. Your code is automatically formatted on saving a file when using [VSCode](https://code.visualstudio.com/) or [Atom](https://atom.io/). [Husky](https://github.com/typicode/husky) ensures that your changes are properly linted before making a commit. If you want to lint manually, you can use `lint` and `lint-fix` npm scripts to lint the source code and the test files.
 
 ## Tests
 

__tests__/batching.test.jsx

@@ -272,7 +272,7 @@ describe('batching', () => {
     expect(renderCount).toBe(1);
     expect(container).toHaveTextContent('Bob');
     await new Promise(
-      resolve =>
+      (resolve) =>
         setTimeout(() => {
           person.name = 'Ann';
           person.name = 'Rick';
@@ -295,7 +295,7 @@ describe('batching', () => {
     const { container } = render(<MyComp />);
     expect(renderCount).toBe(1);
     expect(container).toHaveTextContent('Bob');
-    await new Promise(resolve =>
+    await new Promise((resolve) =>
       // eslint-disable-next-line
       requestAnimationFrame(() => {
         person.name = 'Ann';
@@ -418,18 +418,18 @@ describe('batching', () => {
 
   test('should not break Promises', async () => {
     await Promise.resolve(12)
-      .then(value => {
+      .then((value) => {
         expect(value).toBe(12);
         // eslint-disable-next-line
         throw 15;
       })
-      .catch(err => {
+      .catch((err) => {
         expect(err).toBe(15);
       });
   });
 
   test('should not break setTimeout', async () => {
-    await new Promise(resolve => {
+    await new Promise((resolve) => {
       setTimeout(
         (arg1, arg2, arg3) => {
           expect(arg1).toBe('Hello');
@@ -459,10 +459,10 @@ describe('batching', () => {
     expect(callCount).toBe(1);
   });
 
-  test('should not break method this value and args', done => {
+  test('should not break method this value and args', (done) => {
     const socket = new WebSocket('ws://www.example.com');
 
-    socket.onclose = function(ev) {
+    socket.onclose = function (ev) {
       expect(ev).toBeDefined();
       expect(this).toBe(socket);
       done();
@@ -471,11 +471,11 @@ describe('batching', () => {
     socket.close();
   });
 
-  test('should not break callback this value and args', done => {
+  test('should not break callback this value and args', (done) => {
     const ctx = {};
 
     setTimeout(
-      function(arg1, arg2) {
+      function (arg1, arg2) {
         expect(arg1).toBe('Test');
         expect(arg2).toBe('Test2');
         expect(this).toBe(ctx);

__tests__/edgeCases.test.jsx

@@ -64,7 +64,7 @@ describe('edge cases', () => {
         state = { counter: 0 };
 
         handleIncrement = () => {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
             counter: prevState.counter + 1,
           }));
         };
@@ -91,7 +91,7 @@ describe('edge cases', () => {
         state = { counter: 0 };
 
         handleIncrement = () => {
-          this.setState(prevState => ({
+          this.setState((prevState) => ({
             counter: prevState.counter + 1,
           }));
         };
@@ -127,7 +127,7 @@ describe('edge cases', () => {
         <StrictMode>
           <div>
             <button
-              onClick={() => setChild(value => !value)}
+              onClick={() => setChild((value) => !value)}
               type="button"
             >
               Toggle Child

__tests__/staticProps.test.jsx

@@ -26,7 +26,7 @@ describe('static props', () => {
   });
 
   test('view() should proxy defaultProps for functional components', () => {
-    const MyCustomCompName = props => {
+    const MyCustomCompName = (props) => {
       return <div>{props.name}</div>;
     };
 
@@ -54,7 +54,7 @@ describe('static props', () => {
 
     const errorSpy = jest
       .spyOn(console, 'error')
-      .mockImplementation(message =>
+      .mockImplementation((message) =>
         expect(message.indexOf('Failed prop type')).not.toBe(-1),
       );
     render(<ViewComp number="Bob" />);
@@ -63,7 +63,7 @@ describe('static props', () => {
   });
 
   test('view() should proxy propTypes for functional components', () => {
-    const MyCustomCompName = props => {
+    const MyCustomCompName = (props) => {
       return <div>{props.number}</div>;
     };
 
@@ -75,7 +75,7 @@ describe('static props', () => {
 
     const errorSpy = jest
       .spyOn(console, 'error')
-      .mockImplementation(message =>
+      .mockImplementation((message) =>
         expect(message.indexOf('Failed prop type')).not.toBe(-1),
       );
     render(<ViewComp number="Bob" />);

package-lock.json

@@ -19,6 +19,7 @@
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test-builds": "node ./scripts/testBuilds.js",
     "lint": "eslint --max-warnings 0 --ext js,jsx src scripts __tests__ __mocks__",
+    "lint-fix": "eslint --fix --max-warnings 0 --ext js,jsx src scripts __tests__ __mocks__",
     "install-examples": "node ./scripts/installExamples.js",
     "build-examples": "node ./scripts/buildExamples.js",
     "build": "rollup --config",
@@ -87,7 +88,7 @@
     "coveralls": "^3.1.0",
     "eslint": "^7.18.0",
     "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^6.10.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-prettier": "^3.3.1",
@@ -101,7 +102,7 @@
     "no-hook-react-dom": "npm:react-dom@16.7.0",
     "no-hook-react-testing-library": "npm:react-testing-library@5.4.4",
     "nyc": "^15.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
     "react": "^16.12.0",
     "react-dom": "^16.13.0",
     "react-native": "^0.63.4",

package.json

@@ -7,12 +7,12 @@ const examplesPath = path.resolve('examples');
 const examples = fs
   .readdirSync(examplesPath)
   .filter(
-    dir =>
+    (dir) =>
       dir.indexOf('native') === -1 &&
       fs.statSync(path.join(examplesPath, dir)).isDirectory(),
   );
 
-examples.forEach(example => {
+examples.forEach((example) => {
   example = path.join(examplesPath, example);
   exec('npm run build', {
     cwd: example,

scripts/buildExamples.js

@@ -6,11 +6,11 @@ const examplesPath = path.resolve('examples');
 
 const examples = fs
   .readdirSync(examplesPath)
-  .filter(dir =>
+  .filter((dir) =>
     fs.statSync(path.join(examplesPath, dir)).isDirectory(),
   );
 
-examples.forEach(example => {
+examples.forEach((example) => {
   example = path.join(examplesPath, example);
   exec('rm -rf node_modules && rm -f package-lock.json && npm i', {
     cwd: example,