configure eslint

static-html/.eslintrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2017,
+  },
+  parser: 'babel-eslint',
+  extends: 'eslint-config-airbnb-base',
+};

static-html/package.json

@@ -13,11 +13,16 @@
   "devDependencies": {
     "@babel/core": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^5.0.1",
     "cssnano-webpack-plugin": "^1.0.3",
     "ejs-compiled-loader": "^3.0.0",
+    "eslint": "^7.2.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-webpack-plugin": "^2.4.1",
     "html-webpack-plugin": "^4.5.0",
     "mini-css-extract-plugin": "^1.3.3",
     "postcss": "^8.2.2",

static-html/postcss.config.js

@@ -1,18 +1,18 @@
-module.exports = {
-	plugins: [
-		"postcss-import",
-		"postcss-mixins",
-		"postcss-preset-env",
-		"postcss-nesting",
-		"postcss-simple-vars",
-		["postcss-functions",
-			{
-				functions: { half },
-			}
-		],
-	],
-};
-
 function half(val) {
-	return val / 2;
+  return val / 2;
 }
+
+module.exports = {
+  plugins: [
+    'postcss-import',
+    'postcss-mixins',
+    'postcss-preset-env',
+    'postcss-nesting',
+    'postcss-simple-vars',
+    ['postcss-functions',
+      {
+        functions: { half },
+      },
+    ],
+  ],
+};

static-html/src/js/index.js

@@ -7,11 +7,11 @@ function component() {
   const element = document.createElement('div');
 
   element.innerHTML = 'Hai There';
-	element.classList.add('hello');
+  element.classList.add('hello');
 
-	const theImage = new Image();
+  const theImage = new Image();
-	theImage.src = MyImage;
+  theImage.src = MyImage;
-	element.appendChild(theImage);
+  element.appendChild(theImage);
 
   return element;
 }

static-html/webpack.config.js

@@ -1,104 +1,101 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const CssnanoPlugin = require ('cssnano-webpack-plugin');
+const CssnanoPlugin = require('cssnano-webpack-plugin');
+const EsLintPlugin = require('eslint-webpack-plugin');
 const StylelintPlugin = require('stylelint-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
-module.exports = env => {
+module.exports = (env) => ({
-	console.log(env);
+  mode: env.production ? 'production' : 'development',
+  target: 'web',
+  entry: './src/js/index.js',
+  output: {
+    filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: env.production ? '[name].[contenthash].css' : '[name].css',
+    }),
+    new CleanWebpackPlugin(),
+    new HtmlWebpackPlugin({
+      template: './src/templates/index.ejs',
+    }),
+    new EsLintPlugin(),
+    new StylelintPlugin(),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.ejs$/,
+        use: {
+          loader: 'ejs-compiled-loader',
+          options: {}, // supply empty options object because of https://github.com/bazilio91/ejs-compiled-loader/issues/46
+        },
+      },
+      {
+        test: /\.js?/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+          },
+        },
+      },
+      {
+        test: /\.inline\.css$/i,
+        include: path.resolve(__dirname, 'src/css'),
+        use: [
+          {
+            loader: 'style-loader',
+            options: {
+              insert: function insertAtTop(element) {
+                const parent = document.querySelector('head');
+                // eslint-disable-next-line no-underscore-dangle
+                const lastInsertedElement = window._lastElementInsertedByStyleLoader;
 
-	return {
+                if (!lastInsertedElement) {
-		mode: env.production ? 'production' : 'development',
+                  parent.insertBefore(element, parent.firstChild);
-		target: 'web',
+                } else if (lastInsertedElement.nextSibling) {
-		entry: './src/js/index.js',
+                  parent.insertBefore(element, lastInsertedElement.nextSibling);
-		output: {
+                } else {
-			filename: env.production ? '[name].[contenthash].bundle.js' : '[name].bundle.js',
+                  parent.appendChild(element);
-			path: path.resolve(__dirname, 'dist'),
+                }
-		},
-		devtool: env.production ? 'cheap-source-map' : 'inline-source-map',
-		devServer: {
-			contentBase: './dist',
-			hot: true,
-		},
-		plugins: [
-			new MiniCssExtractPlugin({
-				filename: env.production ? '[name].[contenthash].css' : '[name].css',
-			}),
-			new CleanWebpackPlugin(),
-			new HtmlWebpackPlugin({
-				template: './src/templates/index.ejs'
-			}),
-			new StylelintPlugin(),
-		],
-		module: {
-			rules: [
-				{
-					test: /\.ejs$/,
-					use: {
-						loader: 'ejs-compiled-loader',
-						options: {}, // supply empty options object because of https://github.com/bazilio91/ejs-compiled-loader/issues/46
-					},
-				},
-				{
-					test: /\.js?/,
-					exclude: /node_modules/,
-					use: {
-						loader: 'babel-loader',
-						options: {
-							presets: ['@babel/preset-env']
-						}
-					}
-				},
-				{
-					test: /\.inline\.css$/i,
-					include: path.resolve(__dirname, 'src/css'),
-					use: [
-						{
-							loader: 'style-loader',
-							options: {
-								insert: function insertAtTop(element) {
-									var parent = document.querySelector('head');
-									// eslint-disable-next-line no-underscore-dangle
-									var lastInsertedElement =
-										window._lastElementInsertedByStyleLoader;
 
-									if (!lastInsertedElement) {
+                // eslint-disable-next-line no-underscore-dangle
-										parent.insertBefore(element, parent.firstChild);
+                window._lastElementInsertedByStyleLoader = element;
-									} else if (lastInsertedElement.nextSibling) {
+              },
-										parent.insertBefore(element, lastInsertedElement.nextSibling);
+            },
-									} else {
+          },
-										parent.appendChild(element);
+          'css-loader',
-									}
+          'postcss-loader'],
-
+      },
-									// eslint-disable-next-line no-underscore-dangle
+      {
-									window._lastElementInsertedByStyleLoader = element;
+        test: /\.css$/i,
-								},
+        include: path.resolve(__dirname, 'src/css'),
-							},
+        exclude: /\.inline\.css$/i,
-						},
+        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
-						'css-loader',
+      },
-						'postcss-loader'],
+      {
-				},
+        test: /.(png|svg|jpg|jpeg|gif)$/i,
-				{
+        include: path.resolve(__dirname, 'src'),
-					test: /\.css$/i,
+        type: 'asset',
-					include: path.resolve(__dirname, 'src/css'),
+      },
-					exclude: /\.inline\.css$/i,
+    ],
-					use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
+  },
-				},
+  optimization: {
-				{
+    minimizer: [
-					test: /.(png|svg|jpg|jpeg|gif)$/i,
+      new CssnanoPlugin({
-					include: path.resolve(__dirname, 'src'),
+        sourceMap: true,
-					type: 'asset',
+      }),
-				},
+      '...', // access defaults (defaults are overridden when specifying minimizer: array)
-			]
+    ],
-		},
+  },
-		optimization: {
+});
-			minimizer: [
-				new CssnanoPlugin({
-					sourceMap: true,
-				}),
-				'...',  // access defaults (defaults are overridden when specifying minimizer: array)
-			],
-		},
-	}
-};