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/vector-esri.js

@@ -1,17 +1,17 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import EsriJSON from '../src/ol/format/EsriJSON.js';
-import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
-import {tile as tileStrategy} from '../src/ol/loadingstrategy.js';
-import {fromLonLat} from '../src/ol/proj.js';
+import Map from '../src/ol/Map.js';
 import VectorSource from '../src/ol/source/Vector.js';
+import View from '../src/ol/View.js';
 import XYZ from '../src/ol/source/XYZ.js';
 import {Fill, Stroke, Style} from '../src/ol/style.js';
+import {Tile as TileLayer, Vector as VectorLayer} from '../src/ol/layer.js';
 import {createXYZ} from '../src/ol/tilegrid.js';
+import {fromLonLat} from '../src/ol/proj.js';
+import {tile as tileStrategy} from '../src/ol/loadingstrategy.js';
 
-
-const serviceUrl = 'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' +
-    'Petroleum/KSFields/FeatureServer/';
+const serviceUrl =
+  'https://sampleserver3.arcgisonline.com/ArcGIS/rest/services/' +
+  'Petroleum/KSFields/FeatureServer/';
 const layer = '0';
 
 const esrijsonFormat = new EsriJSON();
@@ -19,86 +19,106 @@ const esrijsonFormat = new EsriJSON();
 const styleCache = {
   'ABANDONED': new Style({
     fill: new Fill({
-      color: 'rgba(225, 225, 225, 255)'
+      color: 'rgba(225, 225, 225, 255)',
     }),
     stroke: new Stroke({
       color: 'rgba(0, 0, 0, 255)',
-      width: 0.4
-    })
+      width: 0.4,
+    }),
   }),
   'GAS': new Style({
     fill: new Fill({
-      color: 'rgba(255, 0, 0, 255)'
+      color: 'rgba(255, 0, 0, 255)',
     }),
     stroke: new Stroke({
       color: 'rgba(110, 110, 110, 255)',
-      width: 0.4
-    })
+      width: 0.4,
+    }),
   }),
   'OIL': new Style({
     fill: new Fill({
-      color: 'rgba(56, 168, 0, 255)'
+      color: 'rgba(56, 168, 0, 255)',
     }),
     stroke: new Stroke({
       color: 'rgba(110, 110, 110, 255)',
-      width: 0
-    })
+      width: 0,
+    }),
   }),
   'OILGAS': new Style({
     fill: new Fill({
-      color: 'rgba(168, 112, 0, 255)'
+      color: 'rgba(168, 112, 0, 255)',
     }),
     stroke: new Stroke({
       color: 'rgba(110, 110, 110, 255)',
-      width: 0.4
-    })
-  })
+      width: 0.4,
+    }),
+  }),
 };
 
 const vectorSource = new VectorSource({
-  loader: function(extent, resolution, projection) {
-    const url = serviceUrl + layer + '/query/?f=json&' +
-        'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
-        encodeURIComponent('{"xmin":' + extent[0] + ',"ymin":' +
-            extent[1] + ',"xmax":' + extent[2] + ',"ymax":' + extent[3] +
-            ',"spatialReference":{"wkid":102100}}') +
-        '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
-        '&outSR=102100';
-    $.ajax({url: url, dataType: 'jsonp', success: function(response) {
-      if (response.error) {
-        alert(response.error.message + '\n' +
-            response.error.details.join('\n'));
-      } else {
-        // dataProjection will be read from document
-        const features = esrijsonFormat.readFeatures(response, {
-          featureProjection: projection
-        });
-        if (features.length > 0) {
-          vectorSource.addFeatures(features);
+  loader: function (extent, resolution, projection) {
+    const url =
+      serviceUrl +
+      layer +
+      '/query/?f=json&' +
+      'returnGeometry=true&spatialRel=esriSpatialRelIntersects&geometry=' +
+      encodeURIComponent(
+        '{"xmin":' +
+          extent[0] +
+          ',"ymin":' +
+          extent[1] +
+          ',"xmax":' +
+          extent[2] +
+          ',"ymax":' +
+          extent[3] +
+          ',"spatialReference":{"wkid":102100}}'
+      ) +
+      '&geometryType=esriGeometryEnvelope&inSR=102100&outFields=*' +
+      '&outSR=102100';
+    $.ajax({
+      url: url,
+      dataType: 'jsonp',
+      success: function (response) {
+        if (response.error) {
+          alert(
+            response.error.message + '\n' + response.error.details.join('\n')
+          );
+        } else {
+          // dataProjection will be read from document
+          const features = esrijsonFormat.readFeatures(response, {
+            featureProjection: projection,
+          });
+          if (features.length > 0) {
+            vectorSource.addFeatures(features);
+          }
         }
-      }
-    }});
+      },
+    });
   },
-  strategy: tileStrategy(createXYZ({
-    tileSize: 512
-  }))
+  strategy: tileStrategy(
+    createXYZ({
+      tileSize: 512,
+    })
+  ),
 });
 
 const vector = new VectorLayer({
   source: vectorSource,
-  style: function(feature) {
+  style: function (feature) {
     const classify = feature.get('activeprod');
     return styleCache[classify];
-  }
+  },
 });
 
 const raster = new TileLayer({
   source: new XYZ({
-    attributions: 'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
-        'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
-    url: 'https://server.arcgisonline.com/ArcGIS/rest/services/' +
-        'World_Topo_Map/MapServer/tile/{z}/{y}/{x}'
-  })
+    attributions:
+      'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
+      'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
+    url:
+      'https://server.arcgisonline.com/ArcGIS/rest/services/' +
+      'World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
+  }),
 });
 
 const map = new Map({
@@ -106,13 +126,13 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: fromLonLat([-97.6114, 38.8403]),
-    zoom: 7
-  })
+    zoom: 7,
+  }),
 });
 
-const displayFeatureInfo = function(pixel) {
+const displayFeatureInfo = function (pixel) {
   const features = [];
-  map.forEachFeatureAtPixel(pixel, function(feature) {
+  map.forEachFeatureAtPixel(pixel, function (feature) {
     features.push(feature);
   });
   if (features.length > 0) {
@@ -129,7 +149,7 @@ const displayFeatureInfo = function(pixel) {
   }
 };
 
-map.on('pointermove', function(evt) {
+map.on('pointermove', function (evt) {
   if (evt.dragging) {
     return;
   }
@@ -137,6 +157,6 @@ map.on('pointermove', function(evt) {
   displayFeatureInfo(pixel);
 });
 
-map.on('click', function(evt) {
+map.on('click', function (evt) {
   displayFeatureInfo(evt.pixel);
 });