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

@@ -1,14 +1,14 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import TileLayer from '../src/ol/layer/Tile.js';
-import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 import GeoJSON from '../src/ol/format/GeoJSON.js';
-import Vector from '../src/ol/source/Vector.js';
+import Map from '../src/ol/Map.js';
 import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
+import Vector from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
+import WebGLPointsLayer from '../src/ol/layer/WebGLPoints.js';
 
 const vectorSource = new Vector({
   url: 'data/geojson/world-cities.geojson',
-  format: new GeoJSON()
+  format: new GeoJSON(),
 });
 
 const predefinedStyles = {
@@ -19,8 +19,8 @@ const predefinedStyles = {
       size: [18, 28],
       color: 'lightyellow',
       rotateWithView: false,
-      offset: [0, 9]
-    }
+      offset: [0, 9],
+    },
   },
   'triangles': {
     symbol: {
@@ -30,11 +30,13 @@ const predefinedStyles = {
         'interpolate',
         ['linear'],
         ['get', 'population'],
-        20000, '#5aca5b',
-        300000, '#ff6a19'
+        20000,
+        '#5aca5b',
+        300000,
+        '#ff6a19',
       ],
-      rotateWithView: true
-    }
+      rotateWithView: true,
+    },
   },
   'triangles-latitude': {
     symbol: {
@@ -43,21 +45,27 @@ const predefinedStyles = {
         'interpolate',
         ['linear'],
         ['get', 'population'],
-        40000, 12,
-        2000000, 24
+        40000,
+        12,
+        2000000,
+        24,
       ],
       color: [
         'interpolate',
         ['linear'],
         ['get', 'latitude'],
-        -60, '#ff14c3',
-        -20, '#ff621d',
-        20, '#ffed02',
-        60, '#00ff67'
+        -60,
+        '#ff14c3',
+        -20,
+        '#ff621d',
+        20,
+        '#ffed02',
+        60,
+        '#00ff67',
       ],
       offset: [0, 0],
-      opacity: 0.95
-    }
+      opacity: 0.95,
+    },
   },
   'circles': {
     symbol: {
@@ -66,8 +74,10 @@ const predefinedStyles = {
         'interpolate',
         ['linear'],
         ['get', 'population'],
-        40000, 8,
-        2000000, 28
+        40000,
+        8,
+        2000000,
+        28,
       ],
       color: '#006688',
       rotateWithView: false,
@@ -76,68 +86,76 @@ const predefinedStyles = {
         'interpolate',
         ['linear'],
         ['get', 'population'],
-        40000, 0.6,
-        2000000, 0.92
-      ]
-    }
+        40000,
+        0.6,
+        2000000,
+        0.92,
+      ],
+    },
   },
   'circles-zoom': {
     symbol: {
       symbolType: 'circle',
-      size: [
-        'interpolate',
-        ['exponential', 2.5],
-        ['zoom'],
-        2, 1,
-        14, 32
-      ],
+      size: ['interpolate', ['exponential', 2.5], ['zoom'], 2, 1, 14, 32],
       color: '#240572',
       offset: [0, 0],
-      opacity: 0.95
-    }
+      opacity: 0.95,
+    },
   },
   'rotating-bars': {
     symbol: {
       symbolType: 'square',
-      rotation: ['*', [
-        'time'
-      ], 0.1],
-      size: ['array', 4, [
-        'interpolate',
-        ['linear'],
-        ['get', 'population'],
-        20000, 4,
-        300000, 28]
+      rotation: ['*', ['time'], 0.1],
+      size: [
+        'array',
+        4,
+        [
+          'interpolate',
+          ['linear'],
+          ['get', 'population'],
+          20000,
+          4,
+          300000,
+          28,
+        ],
       ],
       color: [
         'interpolate',
         ['linear'],
         ['get', 'population'],
-        20000, '#ffdc00',
-        300000, '#ff5b19'
+        20000,
+        '#ffdc00',
+        300000,
+        '#ff5b19',
       ],
-      offset: ['array', 0, [
-        'interpolate',
-        ['linear'],
-        ['get', 'population'],
-        20000, 2,
-        300000, 14]
-      ]
-    }
-  }
+      offset: [
+        'array',
+        0,
+        [
+          'interpolate',
+          ['linear'],
+          ['get', 'population'],
+          20000,
+          2,
+          300000,
+          14,
+        ],
+      ],
+    },
+  },
 };
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
-    })
+      source: new OSM(),
+    }),
   ],
   target: document.getElementById('map'),
   view: new View({
     center: [0, 0],
-    zoom: 2
-  })
+    zoom: 2,
+  }),
 });
 
 let literalStyle;
@@ -147,7 +165,7 @@ function refreshLayer(newStyle) {
   pointsLayer = new WebGLPointsLayer({
     source: vectorSource,
     style: newStyle,
-    disableHitDetection: true
+    disableHitDetection: true,
   });
   map.addLayer(pointsLayer);
 
@@ -168,7 +186,7 @@ function setStyleStatus(errorMsg) {
 }
 
 const editor = document.getElementById('style-editor');
-editor.addEventListener('input', function() {
+editor.addEventListener('input', function () {
   const textStyle = editor.value;
   try {
     const newLiteralStyle = JSON.parse(textStyle);