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;
 }
+
+module.exports = {
+  plugins: [
+    'postcss-import',
+    'postcss-mixins',
+    'postcss-preset-env',
+    'postcss-nesting',
+    'postcss-simple-vars',
+    ['postcss-functions',
+      {
+        functions: { half },
+      },
+    ],
+  ],
+};

static-html/webpack.config.js

@@ -1,14 +1,12 @@
 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 => {
-	console.log(env);
-
-	return {
+module.exports = (env) => ({
   mode: env.production ? 'production' : 'development',
   target: 'web',
   entry: './src/js/index.js',
@@ -27,8 +25,9 @@ module.exports = env => {
     }),
     new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-				template: './src/templates/index.ejs'
+      template: './src/templates/index.ejs',
     }),
+    new EsLintPlugin(),
     new StylelintPlugin(),
   ],
   module: {
@@ -46,9 +45,9 @@ module.exports = env => {
         use: {
           loader: 'babel-loader',
           options: {
-							presets: ['@babel/preset-env']
-						}
-					}
+            presets: ['@babel/preset-env'],
+          },
+        },
       },
       {
         test: /\.inline\.css$/i,
@@ -58,10 +57,9 @@ module.exports = env => {
             loader: 'style-loader',
             options: {
               insert: function insertAtTop(element) {
-									var parent = document.querySelector('head');
+                const parent = document.querySelector('head');
                 // eslint-disable-next-line no-underscore-dangle
-									var lastInsertedElement =
-										window._lastElementInsertedByStyleLoader;
+                const lastInsertedElement = window._lastElementInsertedByStyleLoader;
 
                 if (!lastInsertedElement) {
                   parent.insertBefore(element, parent.firstChild);
@@ -90,7 +88,7 @@ module.exports = env => {
         include: path.resolve(__dirname, 'src'),
         type: 'asset',
       },
-			]
+    ],
   },
   optimization: {
     minimizer: [
@@ -100,5 +98,4 @@ module.exports = env => {
       '...', // access defaults (defaults are overridden when specifying minimizer: array)
     ],
   },
-	}
-};
+});