Add format/lint step for select files for now

Prettier will use defaults, we skip a bunch of files for now.

.prettierignore

@@ -0,0 +1,9 @@
+*.html
+*.css
+*.scss
+*.js
+*.yml
+*.yaml
+# Actually check these files
+!static-src/client.js
+!webpack.config.js

package.json

@@ -7,7 +7,9 @@
     "build": "webpack --config webpack.config.js --mode=development --progress --colors",
     "watch": "webpack --config webpack.config.js --mode=development --watch",
     "dist": "webpack --config webpack.config.js --mode=production --progress --colors",
-    "deploy": "npm run dist && gh-pages -d www"
+    "deploy": "npm run dist && gh-pages -d www",
+    "lint": "prettier -c .",
+    "format": "prettier --write ."
   },
   "repository": {
     "type": "git",
@@ -32,6 +34,7 @@
     "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "prettier": "^2.0.5",
     "sass-loader": "^7.3.1",
     "style-loader": "^1.0.0",
     "webpack": "^4.39.2",

webpack.config.js

@@ -1,55 +1,52 @@
-const webpack = require('webpack');
-const path = require('path');
+const webpack = require("webpack");
+const path = require("path");
 
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-const TerserPlugin = require('terser-webpack-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 
 module.exports = {
-  entry: './static-src/index.js',
+  entry: "./static-src/index.js",
   output: {
-    path: path.resolve(__dirname, './www/bundle'),
-    filename: 'bundle.js'
+    path: path.resolve(__dirname, "./www/bundle"),
+    filename: "bundle.js",
   },
   module: {
-    rules: [{
+    rules: [
+      {
         test: /\.scss$/,
-        use: [
-          MiniCssExtractPlugin.loader,
-          'css-loader',
-          'sass-loader'
-        ]
-    }, {
-      // the file-loader emits files directly to OUTPUT_DIR/fonts
-      test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-      loader: 'file-loader?name=./fonts/[name].[ext]',
-    }, {
-      // Image loader
-      // the file-loader emits files directly to OUTPUT_DIR/img
-      test: /\.(png|gif|jpg|jpeg)$/,
-      loaders: ['file-loader?name=./img/[name].[ext]']
-    }]
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+      {
+        // the file-loader emits files directly to OUTPUT_DIR/fonts
+        test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+        loader: "file-loader?name=./fonts/[name].[ext]",
+      },
+      {
+        // Image loader
+        // the file-loader emits files directly to OUTPUT_DIR/img
+        test: /\.(png|gif|jpg|jpeg)$/,
+        loaders: ["file-loader?name=./img/[name].[ext]"],
+      },
+    ],
   },
   optimization: {
-    minimizer: [
-      new TerserPlugin(),
-      new OptimizeCSSAssetsPlugin({})
-    ]
+    minimizer: [new TerserPlugin(), new OptimizeCSSAssetsPlugin({})],
   },
   plugins: [
     new MiniCssExtractPlugin({
       // Options similar to the same options in webpackOptions.output
-      filename: '[name].css',
-      path: path.resolve(__dirname, './www/bundle'),
-      chunkFilename: '[id].css'
+      filename: "[name].css",
+      path: path.resolve(__dirname, "./www/bundle"),
+      chunkFilename: "[id].css",
     }),
 
     // Makes jQuery (required for bootstrap4) available to other JS includes
     // https://webpack.js.org/plugins/provide-plugin/
     new webpack.ProvidePlugin({
-      $: 'jquery',
-      jQuery: 'jquery',
-      'window.jQuery': 'jquery'
+      $: "jquery",
+      jQuery: "jquery",
+      "window.jQuery": "jquery",
     }),
-  ]
+  ],
 };