Make code prettier

This updates ESLint and our shared eslint-config-openlayers to use Prettier.  Most formatting changes were automatically applied with this:

    npm run lint -- --fix

A few manual changes were required:

 * In `examples/offscreen-canvas.js`, the `//eslint-disable-line` comment needed to be moved to the appropriate line to disable the error about the `'worker-loader!./offscreen-canvas.worker.js'` import.
 * In `examples/webpack/exapmle-builder.js`, spaces could not be added after a couple `function`s for some reason.  While editing this, I reworked `ExampleBuilder` to be a class.
 * In `src/ol/format/WMSGetFeatureInfo.js`, the `// @ts-ignore` comment needed to be moved down one line so it applied to the `parsersNS` argument.

examples/earthquake-clusters.js

@@ -1,29 +1,38 @@
+import KML from '../src/ol/format/KML.js';
 import Map from '../src/ol/Map.js';
 import View from '../src/ol/View.js';
-import {createEmpty, getWidth, getHeight, extend} from '../src/ol/extent.js';
-import KML from '../src/ol/format/KML.js';
-import {defaults as defaultInteractions, Select} from '../src/ol/interaction.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {
+  Circle as CircleStyle,
+  Fill,
+  RegularShape,
+  Stroke,
+  Style,
+  Text,
+} from '../src/ol/style.js';
 import {Cluster, Stamen, Vector as VectorSource} from '../src/ol/source.js';
-import {Circle as CircleStyle, Fill, RegularShape, Stroke, Style, Text} from '../src/ol/style.js';
-
+import {
+  Select,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
+import {createEmpty, extend, getHeight, getWidth} from '../src/ol/extent.js';
 
 const earthquakeFill = new Fill({
-  color: 'rgba(255, 153, 0, 0.8)'
+  color: 'rgba(255, 153, 0, 0.8)',
 });
 const earthquakeStroke = new Stroke({
   color: 'rgba(255, 204, 0, 0.2)',
-  width: 1
+  width: 1,
 });
 const textFill = new Fill({
-  color: '#fff'
+  color: '#fff',
 });
 const textStroke = new Stroke({
   color: 'rgba(0, 0, 0, 0.6)',
-  width: 3
+  width: 3,
 });
 const invisibleFill = new Fill({
-  color: 'rgba(255, 255, 255, 0.01)'
+  color: 'rgba(255, 255, 255, 0.01)',
 });
 
 function createEarthquakeStyle(feature) {
@@ -42,14 +51,14 @@ function createEarthquakeStyle(feature) {
       points: 5,
       angle: Math.PI,
       fill: earthquakeFill,
-      stroke: earthquakeStroke
-    })
+      stroke: earthquakeStroke,
+    }),
   });
 }
 
 let maxFeatureCount;
 let vector = null;
-const calculateClusterInfo = function(resolution) {
+const calculateClusterInfo = function (resolution) {
   maxFeatureCount = 0;
   const features = vector.getSource().getFeatures();
   let feature, radius;
@@ -62,8 +71,7 @@ const calculateClusterInfo = function(resolution) {
       extend(extent, originalFeatures[j].getGeometry().getExtent());
     }
     maxFeatureCount = Math.max(maxFeatureCount, jj);
-    radius = 0.25 * (getWidth(extent) + getHeight(extent)) /
-        resolution;
+    radius = (0.25 * (getWidth(extent) + getHeight(extent))) / resolution;
     feature.set('radius', radius);
   }
 };
@@ -81,14 +89,14 @@ function styleFunction(feature, resolution) {
       image: new CircleStyle({
         radius: feature.get('radius'),
         fill: new Fill({
-          color: [255, 153, 0, Math.min(0.8, 0.4 + (size / maxFeatureCount))]
-        })
+          color: [255, 153, 0, Math.min(0.8, 0.4 + size / maxFeatureCount)],
+        }),
       }),
       text: new Text({
         text: size.toString(),
         fill: textFill,
-        stroke: textStroke
-      })
+        stroke: textStroke,
+      }),
     });
   } else {
     const originalFeature = feature.get('features')[0];
@@ -98,12 +106,14 @@ function styleFunction(feature, resolution) {
 }
 
 function selectStyleFunction(feature) {
-  const styles = [new Style({
-    image: new CircleStyle({
-      radius: feature.get('radius'),
-      fill: invisibleFill
-    })
-  })];
+  const styles = [
+    new Style({
+      image: new CircleStyle({
+        radius: feature.get('radius'),
+        fill: invisibleFill,
+      }),
+    }),
+  ];
   const originalFeatures = feature.get('features');
   let originalFeature;
   for (let i = originalFeatures.length - 1; i >= 0; --i) {
@@ -119,31 +129,32 @@ vector = new VectorLayer({
     source: new VectorSource({
       url: 'data/kml/2012_Earthquakes_Mag5.kml',
       format: new KML({
-        extractStyles: false
-      })
-    })
+        extractStyles: false,
+      }),
+    }),
   }),
-  style: styleFunction
+  style: styleFunction,
 });
 
 const raster = new TileLayer({
   source: new Stamen({
-    layer: 'toner'
-  })
+    layer: 'toner',
+  }),
 });
 
 const map = new Map({
   layers: [raster, vector],
-  interactions: defaultInteractions().extend([new Select({
-    condition: function(evt) {
-      return evt.type == 'pointermove' ||
-          evt.type == 'singleclick';
-    },
-    style: selectStyleFunction
-  })]),
+  interactions: defaultInteractions().extend([
+    new Select({
+      condition: function (evt) {
+        return evt.type == 'pointermove' || evt.type == 'singleclick';
+      },
+      style: selectStyleFunction,
+    }),
+  ]),
   target: 'map',
   view: new View({
     center: [0, 0],
-    zoom: 2
-  })
+    zoom: 2,
+  }),
 });