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-edit.js

@@ -1,66 +1,91 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import EsriJSON from '../src/ol/format/EsriJSON.js';
-import {defaults as defaultInteractions, Draw, Modify, Select} from '../src/ol/interaction.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 {
+  Draw,
+  Modify,
+  Select,
+  defaults as defaultInteractions,
+} from '../src/ol/interaction.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://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' +
-    'services/PDX_Pedestrian_Districts/FeatureServer/';
+const serviceUrl =
+  'https://services.arcgis.com/rOo16HdIMeOBI4Mb/arcgis/rest/' +
+  'services/PDX_Pedestrian_Districts/FeatureServer/';
 const layer = '0';
 
 const esrijsonFormat = new EsriJSON();
 
 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
+  source: vectorSource,
 });
 
 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 draw = new Draw({
   source: vectorSource,
-  type: 'Polygon'
+  type: 'Polygon',
 });
 
 const select = new Select();
@@ -68,7 +93,7 @@ select.setActive(false);
 const selected = select.getFeatures();
 
 const modify = new Modify({
-  features: selected
+  features: selected,
 });
 modify.setActive(false);
 
@@ -78,17 +103,16 @@ const map = new Map({
   target: document.getElementById('map'),
   view: new View({
     center: fromLonLat([-122.619, 45.512]),
-    zoom: 12
-  })
+    zoom: 12,
+  }),
 });
 
 const typeSelect = document.getElementById('type');
 
-
 /**
  * Let user change the interaction type.
  */
-typeSelect.onchange = function() {
+typeSelect.onchange = function () {
   draw.setActive(typeSelect.value === 'DRAW');
   select.setActive(typeSelect.value === 'MODIFY');
   modify.setActive(typeSelect.value === 'MODIFY');
@@ -96,22 +120,25 @@ typeSelect.onchange = function() {
 
 const dirty = {};
 
-selected.on('add', function(evt) {
+selected.on('add', function (evt) {
   const feature = evt.element;
-  feature.on('change', function(evt) {
+  feature.on('change', function (evt) {
     dirty[evt.target.getId()] = true;
   });
 });
 
-selected.on('remove', function(evt) {
+selected.on('remove', function (evt) {
   const feature = evt.element;
   const fid = feature.getId();
   if (dirty[fid] === true) {
-    const payload = '[' + esrijsonFormat.writeFeature(feature, {
-      featureProjection: map.getView().getProjection()
-    }) + ']';
+    const payload =
+      '[' +
+      esrijsonFormat.writeFeature(feature, {
+        featureProjection: map.getView().getProjection(),
+      }) +
+      ']';
     const url = serviceUrl + layer + '/updateFeatures';
-    $.post(url, {f: 'json', features: payload}).done(function(data) {
+    $.post(url, {f: 'json', features: payload}).done(function (data) {
       const result = JSON.parse(data);
       if (result.updateResults && result.updateResults.length > 0) {
         if (result.updateResults[0].success !== true) {
@@ -125,13 +152,16 @@ selected.on('remove', function(evt) {
   }
 });
 
-draw.on('drawend', function(evt) {
+draw.on('drawend', function (evt) {
   const feature = evt.feature;
-  const payload = '[' + esrijsonFormat.writeFeature(feature, {
-    featureProjection: map.getView().getProjection()
-  }) + ']';
+  const payload =
+    '[' +
+    esrijsonFormat.writeFeature(feature, {
+      featureProjection: map.getView().getProjection(),
+    }) +
+    ']';
   const url = serviceUrl + layer + '/addFeatures';
-  $.post(url, {f: 'json', features: payload}).done(function(data) {
+  $.post(url, {f: 'json', features: payload}).done(function (data) {
     const result = JSON.parse(data);
     if (result.addResults && result.addResults.length > 0) {
       if (result.addResults[0].success === true) {