Setup ESLint

Author: louislo7

.eslintcache

@@ -0,0 +1 @@
+/webapp/public/**

.eslintignore

@@ -0,0 +1,5 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["airbnb"],
+  "rules": {}
+}

.eslintrc

@@ -13,7 +13,7 @@ require (
 	github.com/felixge/fgprof v0.9.1
 	github.com/google/go-cmp v0.5.2 // indirect
 	github.com/google/pprof v0.0.0-20200708004538-1a94d8640e99
-	github.com/google/uuid v1.1.2 // indirect
+	github.com/google/uuid v1.1.2
 	github.com/iancoleman/strcase v0.1.2
 	github.com/ianlancetaylor/demangle v0.0.0-20200715173712-053cf528c12f // indirect
 	github.com/imdario/mergo v0.3.11 // indirect
@@ -25,7 +25,7 @@ require (
 	github.com/mattn/go-runewidth v0.0.9 // indirect
 	github.com/mattn/goreman v0.3.5
 	github.com/mgechev/revive v1.0.2
-	github.com/mitchellh/go-ps v1.0.0 // indirect
+	github.com/mitchellh/go-ps v1.0.0
 	github.com/morikuni/aec v1.0.0 // indirect
 	github.com/onsi/ginkgo v1.14.0
 	github.com/onsi/gomega v1.10.1

go.mod

@@ -9,13 +9,15 @@
   },
   "scripts": {
     "dev": "webpack --progress --colors --config scripts/webpack/webpack.dev.js",
-    "test": "jest"
+    "test": "jest",
+    "lint": "eslint ./ --ext .js --cache"
   },
   "devDependencies": {
     "@babel/core": "7.8.4",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "7.8.3",
     "autoprefixer": "^9.8.5",
+    "babel-eslint": "^10.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "clean-webpack-plugin": "^3.0.0",
     "contributor-faces": "^1.1.0",
@@ -24,6 +26,13 @@
     "css-loader": "^4.0.0",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",
+    "eslint": "7.2.0",
+    "eslint-config-airbnb": "18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "4.0.0",
+    "eslint-webpack-plugin": "^2.4.1",
     "html-webpack-plugin": "^4.3.0",
     "jest": "^26.6.3",
     "mini-css-extract-plugin": "^0.9.0",

package.json

@@ -1,39 +1,41 @@
-'use strict';
+"use strict";
 
-const webpack = require('webpack');
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const CopyPlugin = require('copy-webpack-plugin');
-const fs = require('fs');
+const webpack = require("webpack");
+const path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+
+const fs = require("fs");
 
 module.exports = {
-  target: 'web',
+  target: "web",
 
   entry: {
-    app: './webapp/javascript/index.jsx',
-    styles: './webapp/sass/profile.scss',
+    app: "./webapp/javascript/index.jsx",
+    styles: "./webapp/sass/profile.scss",
   },
 
   output: {
-    publicPath: '',
-    path: path.resolve(__dirname, '../../webapp/public/build'),
-    filename: '[name].[hash].js',
+    publicPath: "",
+    path: path.resolve(__dirname, "../../webapp/public/build"),
+    filename: "[name].[hash].js",
   },
 
   resolve: {
-    extensions: ['.ts', '.tsx', '.es6', '.js', '.jsx', '.json', '.svg'],
+    extensions: [".ts", ".tsx", ".es6", ".js", ".jsx", ".json", ".svg"],
     alias: {
       // rc-trigger uses babel-runtime which has internal dependency to core-js@2
       // this alias maps that dependency to core-js@t3
-      'core-js/library/fn': 'core-js/stable',
+      "core-js/library/fn": "core-js/stable",
     },
     modules: [
-      'node_modules',
-      path.resolve('webapp'),
-      path.resolve('node_modules'),
+      "node_modules",
+      path.resolve("webapp"),
+      path.resolve("node_modules"),
     ],
   },
 
@@ -55,30 +57,30 @@ module.exports = {
         exclude: /node_modules/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: "babel-loader",
             options: {
               cacheDirectory: true,
               babelrc: true,
               // Note: order is bottom-to-top and/or right-to-left
               presets: [
                 [
-                  '@babel/preset-env',
+                  "@babel/preset-env",
                   {
                     targets: {
-                      browsers: 'last 3 versions',
+                      browsers: "last 3 versions",
                     },
-                    useBuiltIns: 'entry',
+                    useBuiltIns: "entry",
                     corejs: 3,
                     modules: false,
                   },
                 ],
                 [
-                  '@babel/preset-typescript',
+                  "@babel/preset-typescript",
                   {
                     allowNamespaces: true,
                   },
                 ],
-                '@babel/preset-react',
+                "@babel/preset-react",
               ],
             },
           },
@@ -88,9 +90,9 @@ module.exports = {
         test: /\.js$/,
         use: [
           {
-            loader: 'babel-loader',
+            loader: "babel-loader",
             options: {
-              presets: [['@babel/preset-env']],
+              presets: [["@babel/preset-env"]],
             },
           },
         ],
@@ -100,7 +102,7 @@ module.exports = {
         exclude: /(index|error)\.html/,
         use: [
           {
-            loader: 'html-loader',
+            loader: "html-loader",
             options: {
               attrs: [],
               minimize: true,
@@ -113,81 +115,84 @@ module.exports = {
       {
         test: /\.css$/,
         // include: MONACO_DIR, // https://github.com/react-monaco-editor/react-monaco-editor
-        use: ['style-loader', 'css-loader'],
+        use: ["style-loader", "css-loader"],
       },
       {
         test: /\.scss$/,
         use: [
           MiniCssExtractPlugin.loader,
           {
-            loader: 'css-loader',
+            loader: "css-loader",
             options: {
               importLoaders: 2,
               url: true,
-              sourceMap: true
+              sourceMap: true,
             },
           },
           {
-            loader: 'postcss-loader',
+            loader: "postcss-loader",
             options: {
               sourceMap: true,
               config: { path: __dirname },
             },
           },
           {
-            loader: 'sass-loader',
+            loader: "sass-loader",
             options: {
-              sourceMap: true
+              sourceMap: true,
             },
           },
         ],
       },
       {
         test: /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
-        loader: 'file-loader',
-        options: { name: 'static/img/[name].[hash:8].[ext]' },
+        loader: "file-loader",
+        options: { name: "static/img/[name].[hash:8].[ext]" },
       },
     ],
   },
 
   plugins: [
+    new ESLintPlugin(),
     new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
+      $: "jquery",
+      jQuery: "jquery",
     }),
     new HtmlWebpackPlugin({
-      filename: path.resolve(__dirname, '../../webapp/public/index.html'),
-      template: path.resolve(__dirname, '../../webapp/templates/index.html'),
+      filename: path.resolve(__dirname, "../../webapp/public/index.html"),
+      template: path.resolve(__dirname, "../../webapp/templates/index.html"),
       inject: false,
-      chunksSortMode: 'none',
+      chunksSortMode: "none",
       templateParameters: (compilation, assets, options) => {
-        return ({
-          extra_metadata: process.env.EXTRA_METADATA ? fs.readFileSync(process.env.EXTRA_METADATA) : "",
+        return {
+          extra_metadata: process.env.EXTRA_METADATA
+            ? fs.readFileSync(process.env.EXTRA_METADATA)
+            : "",
           mode: process.env.NODE_ENV,
           webpack: compilation.getStats().toJson(),
           compilation: compilation,
           webpackConfig: compilation.options,
           htmlWebpackPlugin: {
             files: assets,
-            options: options
-          }
-        })
+            options: options,
+          },
+        };
       },
     }),
     new MiniCssExtractPlugin({
-      filename: '[name].[hash].css',
+      filename: "[name].[hash].css",
     }),
     new webpack.DefinePlugin({
-      PYROSCOPE_VERSION: JSON.stringify(require("../../package.json").version)
+      PYROSCOPE_VERSION: JSON.stringify(require("../../package.json").version),
     }),
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
     new CopyPlugin({
       patterns: [
         {
-          from: 'webapp/images',
-          to: 'images'
-        }
-      ]
+          from: "webapp/images",
+          to: "images",
+        },
+      ],
     }),
   ],
 };