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/synthetic-points.js

@@ -1,22 +1,23 @@
 import Feature from '../src/ol/Feature.js';
 import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {LineString, Point} from '../src/ol/geom.js';
 import VectorLayer from '../src/ol/layer/Vector.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import {Circle as CircleStyle, Fill, Stroke, Style} from '../src/ol/style.js';
+import {LineString, Point} from '../src/ol/geom.js';
 import {getVectorContext} from '../src/ol/render.js';
 
-
 const count = 20000;
 const features = new Array(count);
 const e = 18000000;
 for (let i = 0; i < count; ++i) {
   features[i] = new Feature({
-    'geometry': new Point(
-      [2 * e * Math.random() - e, 2 * e * Math.random() - e]),
+    'geometry': new Point([
+      2 * e * Math.random() - e,
+      2 * e * Math.random() - e,
+    ]),
     'i': i,
-    'size': i % 2 ? 10 : 20
+    'size': i % 2 ? 10 : 20,
   });
 }
 
@@ -25,27 +26,27 @@ const styles = {
     image: new CircleStyle({
       radius: 5,
       fill: new Fill({color: '#666666'}),
-      stroke: new Stroke({color: '#bada55', width: 1})
-    })
+      stroke: new Stroke({color: '#bada55', width: 1}),
+    }),
   }),
   '20': new Style({
     image: new CircleStyle({
       radius: 10,
       fill: new Fill({color: '#666666'}),
-      stroke: new Stroke({color: '#bada55', width: 1})
-    })
-  })
+      stroke: new Stroke({color: '#bada55', width: 1}),
+    }),
+  }),
 };
 
 const vectorSource = new VectorSource({
   features: features,
-  wrapX: false
+  wrapX: false,
 });
 const vector = new VectorLayer({
   source: vectorSource,
-  style: function(feature) {
+  style: function (feature) {
     return styles[feature.get('size')];
-  }
+  },
 });
 
 const map = new Map({
@@ -53,13 +54,13 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
-    zoom: 2
-  })
+    zoom: 2,
+  }),
 });
 
 let point = null;
 let line = null;
-const displaySnap = function(coordinate) {
+const displaySnap = function (coordinate) {
   const closestFeature = vectorSource.getClosestFeatureToCoordinate(coordinate);
   if (closestFeature === null) {
     point = null;
@@ -81,7 +82,7 @@ const displaySnap = function(coordinate) {
   map.render();
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -89,23 +90,23 @@ map.on('pointermove', function(evt) {
   displaySnap(coordinate);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displaySnap(evt.coordinate);
 });
 
 const stroke = new Stroke({
   color: 'rgba(255,255,0,0.9)',
-  width: 3
+  width: 3,
 });
 const style = new Style({
   stroke: stroke,
   image: new CircleStyle({
     radius: 10,
-    stroke: stroke
-  })
+    stroke: stroke,
+  }),
 });
 
-vector.on('postrender', function(evt) {
+vector.on('postrender', function (evt) {
   const vectorContext = getVectorContext(evt);
   vectorContext.setStyle(style);
   if (point !== null) {
@@ -116,7 +117,7 @@ vector.on('postrender', function(evt) {
   }
 });
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }