Fix eslint

Author: dmt0

.eslintrc

@@ -1,8 +1,8 @@
 {
   "extends": ["eslint:recommended", "prettier"],
-  "parser": "babel-eslint",
+  "parser": "@babel/eslint-parser",
   "parserOptions": {
-    "ecmaVersion": 6,
+    "ecmaVersion": 13,
     "sourceType": "module",
     "ecmaFeatures": {
       "arrowFunctions": true,
@@ -15,6 +15,9 @@
       "modules": true,
       "templateStrings": true,
       "jsx": true
+    },
+    "babelOptions": {
+      "presets": ["@babel/preset-react"]
     }
   },
   "settings": {
@@ -25,24 +28,18 @@
   },
   "env": {
     "browser": true,
-    "es6": true,
+    "es2021": true,
     "jasmine": true,
     "jest": true,
     "node": true
   },
   "globals": {
     "jest": true
   },
-  "plugins": [
-    "react",
-    "import",
-    "react-percy"
-  ],
+  "plugins": ["react", "import", "react-percy", "jsx"],
   "overrides": [
     {
-      "files": [
-        "**/*.percy.{js,jsx}"
-      ],
+      "files": ["**/*.percy.{js,jsx}"],
       "env": {
         "react-percy/globals": true
       }
@@ -120,20 +117,30 @@
     "react/prop-types": "error",
     "valid-jsdoc": ["error"],
     "yoda": ["error"],
-    "spaced-comment": ["error", "always", {
-      "block": {
-        "exceptions": ["*"]
+    "spaced-comment": [
+      "error",
+      "always",
+      {
+        "block": {
+          "exceptions": ["*"]
+        }
       }
-    }],
-    "no-unused-vars": ["error", {
+    ],
+    "no-unused-vars": [
+      "error",
+      {
         "args": "after-used",
         "argsIgnorePattern": "^_",
         "caughtErrorsIgnorePattern": "^e$"
-    }],
-    "no-magic-numbers": ["error", {
-      "ignoreArrayIndexes": true,
+      }
+    ],
+    "no-magic-numbers": [
+      "error",
+      {
+        "ignoreArrayIndexes": true,
         "ignore": [-1, 0, 1, 2, 3, 100, 10, 0.5]
-    }],
+      }
+    ],
     "no-underscore-dangle": ["off"]
   }
 }

babel.config.json

@@ -0,0 +1,26 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ],
+    "@babel/env"
+  ],
+  "plugins": [
+    "react-hot-loader/babel",
+    "@babel/plugin-proposal-object-rest-spread",
+    [
+      "module-resolver",
+      {
+        "root": ["./"],
+        "alias": {
+          "components": "./src/components",
+          "lib": "./src/lib",
+          "styles": "./src/styles"
+        }
+      }
+    ]
+  ]
+}

dev/App.js

@@ -16,15 +16,16 @@ import ACCESS_TOKENS from '../accessTokens';
 
 // import {customConfigTest} from '../src/__stories__';
 
-const dataSourceOptions = Object.keys(dataSources).map(name => ({
+const dataSourceOptions = Object.keys(dataSources).map((name) => ({
   value: name,
   label: name,
 }));
 
 const config = {mapboxAccessToken: ACCESS_TOKENS.MAPBOX, editable: true};
 
+// eslint-disable-next-line no-unused-vars
 const traceTypesConfig = {
-  traces: _ => [
+  traces: (_) => [
     {
       value: 'scatter',
       icon: 'scatter',
@@ -66,16 +67,19 @@ const traceTypesConfig = {
   complex: true,
 };
 
+// eslint-disable-next-line no-unused-vars
 const chartHelp = {
   area: {
     helpDoc: 'https://help.plot.ly/make-an-area-graph/',
     examplePlot: () => {
+      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
   bar: {
     helpDoc: 'https://help.plot.ly/stacked-bar-chart/',
     examplePlot: () => {
+      // eslint-disable-next-line no-console
       console.log('example bar plot!');
     },
   },
@@ -122,8 +126,8 @@ class App extends Component {
     // curl https://api.github.com/repos/plotly/plotly.js/contents/test/image/mocks \
     // | jq '[.[] | .name ]' > mocks.json
     fetch('/mocks.json')
-      .then(response => response.json())
-      .then(mocks => this.setState({mocks}));
+      .then((response) => response.json())
+      .then((mocks) => this.setState({mocks}));
   }
 
   loadMock(mockIndex) {
@@ -135,8 +139,8 @@ class App extends Component {
     fetch(prefix + mockName, {
       headers: new Headers({Accept: 'application/vnd.github.v3.raw'}),
     })
-      .then(response => response.json())
-      .then(figure => {
+      .then((response) => response.json())
+      .then((figure) => {
         const {data, layout, frames} = figure;
         this.updateState(data, layout, frames, mockIndex);
       });
@@ -219,7 +223,7 @@ class App extends Component {
                   }))}
                   searchable={true}
                   searchPromptText="Search for a mock"
-                  onChange={option => this.loadMock(option.value)}
+                  onChange={(option) => this.loadMock(option.value)}
                   noResultsText={'No Results'}
                   placeholder={'Search for a mock'}
                 />
@@ -234,7 +238,7 @@ class App extends Component {
               <AceEditor
                 mode="json"
                 theme="textmate"
-                onChange={json_string => this.setState({json_string})}
+                onChange={(json_string) => this.setState({json_string})}
                 value={this.state.json_string}
                 name="UNIQUE_ID_OF_DIV"
                 style={{height: '80vh'}}

package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "@babel/cli": "7.17.10",
     "@babel/core": "7.17.12",
+    "@babel/eslint-parser": "7.17.0",
     "@babel/node": "7.17.10",
     "@babel/plugin-proposal-object-rest-spread": "7.17.12",
     "@babel/polyfill": "7.12.1",
@@ -63,7 +64,6 @@
     "@percy/storybook": "3.3.1",
     "@storybook/react": "6.2.9",
     "autoprefixer": "10.4.7",
-    "babel-eslint": "10.1.0",
     "babel-jest": "26.6.3",
     "babel-loader": "8.2.5",
     "babel-plugin-module-resolver": "4.1.0",
@@ -74,6 +74,7 @@
     "eslint": "8.15.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-plugin-import": "2.26.0",
+    "eslint-plugin-jsx": "0.1.0",
     "eslint-plugin-react": "7.29.4",
     "eslint-plugin-react-percy": "0.2.4",
     "fs": "0.0.2",

webpack.config.js

@@ -10,27 +10,7 @@ module.exports = {
     rules: [
       {
         test: /\.js?$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/react', '@babel/env'],
-            plugins: [
-              'react-hot-loader/babel',
-              '@babel/plugin-proposal-object-rest-spread',
-              [
-                'module-resolver',
-                {
-                  root: ['./'],
-                  alias: {
-                    components: './src/components',
-                    lib: './src/lib',
-                    styles: './src/styles',
-                  },
-                },
-              ],
-            ],
-          },
-        },
+        use: 'babel-loader',
         exclude: [/node_modules/],
       },
       {