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/image-load-events.js

@@ -1,8 +1,7 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
 import ImageLayer from '../src/ol/layer/Image.js';
 import ImageWMS from '../src/ol/source/ImageWMS.js';
-
+import Map from '../src/ol/Map.js';
+import View from '../src/ol/View.js';
 
 /**
  * Renders a progress bar.
@@ -15,11 +14,10 @@ function Progress(el) {
   this.loaded = 0;
 }
 
-
 /**
  * Increment the count of loading tiles.
  */
-Progress.prototype.addLoading = function() {
+Progress.prototype.addLoading = function () {
   if (this.loading === 0) {
     this.show();
   }
@@ -27,48 +25,44 @@ Progress.prototype.addLoading = function() {
   this.update();
 };
 
-
 /**
  * Increment the count of loaded tiles.
  */
-Progress.prototype.addLoaded = function() {
+Progress.prototype.addLoaded = function () {
   const this_ = this;
-  setTimeout(function() {
+  setTimeout(function () {
     ++this_.loaded;
     this_.update();
   }, 100);
 };
 
-
 /**
  * Update the progress bar.
  */
-Progress.prototype.update = function() {
-  const width = (this.loaded / this.loading * 100).toFixed(1) + '%';
+Progress.prototype.update = function () {
+  const width = ((this.loaded / this.loading) * 100).toFixed(1) + '%';
   this.el.style.width = width;
   if (this.loading === this.loaded) {
     this.loading = 0;
     this.loaded = 0;
     const this_ = this;
-    setTimeout(function() {
+    setTimeout(function () {
       this_.hide();
     }, 500);
   }
 };
 
-
 /**
  * Show the progress bar.
  */
-Progress.prototype.show = function() {
+Progress.prototype.show = function () {
   this.el.style.visibility = 'visible';
 };
 
-
 /**
  * Hide the progress bar.
  */
-Progress.prototype.hide = function() {
+Progress.prototype.hide = function () {
   if (this.loading === this.loaded) {
     this.el.style.visibility = 'hidden';
     this.el.style.width = 0;
@@ -80,27 +74,25 @@ const progress = new Progress(document.getElementById('progress'));
 const source = new ImageWMS({
   url: 'https://ahocevar.com/geoserver/wms',
   params: {'LAYERS': 'topp:states'},
-  serverType: 'geoserver'
+  serverType: 'geoserver',
 });
 
-source.on('imageloadstart', function() {
+source.on('imageloadstart', function () {
   progress.addLoading();
 });
 
-source.on('imageloadend', function() {
+source.on('imageloadend', function () {
   progress.addLoaded();
 });
-source.on('imageloaderror', function() {
+source.on('imageloaderror', function () {
   progress.addLoaded();
 });
 
 const map = new Map({
-  layers: [
-    new ImageLayer({source: source})
-  ],
+  layers: [new ImageLayer({source: source})],
   target: 'map',
   view: new View({
     center: [-10997148, 4569099],
-    zoom: 4
-  })
+    zoom: 4,
+  }),
 });