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/animation.js

@@ -1,9 +1,9 @@
 import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import TileLayer from '../src/ol/layer/Tile.js';
 import View from '../src/ol/View.js';
 import {easeIn, easeOut} from '../src/ol/easing.js';
-import TileLayer from '../src/ol/layer/Tile.js';
 import {fromLonLat} from '../src/ol/proj.js';
-import OSM from '../src/ol/source/OSM.js';
 
 const london = fromLonLat([-0.12755, 51.507222]);
 const moscow = fromLonLat([37.6178, 55.7517]);
@@ -13,7 +13,7 @@ const bern = fromLonLat([7.4458, 46.95]);
 
 const view = new View({
   center: istanbul,
-  zoom: 6
+  zoom: 6,
 });
 
 const map = new Map({
@@ -21,10 +21,10 @@ const map = new Map({
   layers: [
     new TileLayer({
       preload: 4,
-      source: new OSM()
-    })
+      source: new OSM(),
+    }),
   ],
-  view: view
+  view: view,
 });
 
 // A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
@@ -32,18 +32,18 @@ function bounce(t) {
   const s = 7.5625;
   const p = 2.75;
   let l;
-  if (t < (1 / p)) {
+  if (t < 1 / p) {
     l = s * t * t;
   } else {
-    if (t < (2 / p)) {
-      t -= (1.5 / p);
+    if (t < 2 / p) {
+      t -= 1.5 / p;
       l = s * t * t + 0.75;
     } else {
-      if (t < (2.5 / p)) {
-        t -= (2.25 / p);
+      if (t < 2.5 / p) {
+        t -= 2.25 / p;
         l = s * t * t + 0.9375;
       } else {
-        t -= (2.625 / p);
+        t -= 2.625 / p;
         l = s * t * t + 0.984375;
       }
     }
@@ -53,77 +53,85 @@ function bounce(t) {
 
 // An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
 function elastic(t) {
-  return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
+  return (
+    Math.pow(2, -10 * t) * Math.sin(((t - 0.075) * (2 * Math.PI)) / 0.3) + 1
+  );
 }
 
 function onClick(id, callback) {
   document.getElementById(id).addEventListener('click', callback);
 }
 
-onClick('rotate-left', function() {
+onClick('rotate-left', function () {
   view.animate({
-    rotation: view.getRotation() + Math.PI / 2
+    rotation: view.getRotation() + Math.PI / 2,
   });
 });
 
-onClick('rotate-right', function() {
+onClick('rotate-right', function () {
   view.animate({
-    rotation: view.getRotation() - Math.PI / 2
+    rotation: view.getRotation() - Math.PI / 2,
   });
 });
 
-onClick('rotate-around-rome', function() {
+onClick('rotate-around-rome', function () {
   // Rotation animation takes the shortest arc, so animate in two parts
   const rotation = view.getRotation();
-  view.animate({
-    rotation: rotation + Math.PI,
-    anchor: rome,
-    easing: easeIn
-  }, {
-    rotation: rotation + 2 * Math.PI,
-    anchor: rome,
-    easing: easeOut
-  });
+  view.animate(
+    {
+      rotation: rotation + Math.PI,
+      anchor: rome,
+      easing: easeIn,
+    },
+    {
+      rotation: rotation + 2 * Math.PI,
+      anchor: rome,
+      easing: easeOut,
+    }
+  );
 });
 
-onClick('pan-to-london', function() {
+onClick('pan-to-london', function () {
   view.animate({
     center: london,
-    duration: 2000
+    duration: 2000,
   });
 });
 
-onClick('elastic-to-moscow', function() {
+onClick('elastic-to-moscow', function () {
   view.animate({
     center: moscow,
     duration: 2000,
-    easing: elastic
+    easing: elastic,
   });
 });
 
-onClick('bounce-to-istanbul', function() {
+onClick('bounce-to-istanbul', function () {
   view.animate({
     center: istanbul,
     duration: 2000,
-    easing: bounce
+    easing: bounce,
   });
 });
 
-onClick('spin-to-rome', function() {
+onClick('spin-to-rome', function () {
   // Rotation animation takes the shortest arc, so animate in two parts
   const center = view.getCenter();
-  view.animate({
-    center: [
-      center[0] + (rome[0] - center[0]) / 2,
-      center[1] + (rome[1] - center[1]) / 2
-    ],
-    rotation: Math.PI,
-    easing: easeIn
-  }, {
-    center: rome,
-    rotation: 2 * Math.PI,
-    easing: easeOut
-  });
+  view.animate(
+    {
+      center: [
+        center[0] + (rome[0] - center[0]) / 2,
+        center[1] + (rome[1] - center[1]) / 2,
+      ],
+      rotation: Math.PI,
+      easing: easeIn,
+    },
+    {
+      center: rome,
+      rotation: 2 * Math.PI,
+      easing: easeOut,
+    }
+  );
 });
 
 function flyTo(location, done) {
@@ -141,21 +149,28 @@ function flyTo(location, done) {
       done(complete);
     }
   }
-  view.animate({
-    center: location,
-    duration: duration
-  }, callback);
-  view.animate({
-    zoom: zoom - 1,
-    duration: duration / 2
-  }, {
-    zoom: zoom,
-    duration: duration / 2
-  }, callback);
+  view.animate(
+    {
+      center: location,
+      duration: duration,
+    },
+    callback
+  );
+  view.animate(
+    {
+      zoom: zoom - 1,
+      duration: duration / 2,
+    },
+    {
+      zoom: zoom,
+      duration: duration / 2,
+    },
+    callback
+  );
 }
 
-onClick('fly-to-bern', function() {
-  flyTo(bern, function() {});
+onClick('fly-to-bern', function () {
+  flyTo(bern, function () {});
 });
 
 function tour() {
@@ -166,7 +181,7 @@ function tour() {
       ++index;
       if (index < locations.length) {
         const delay = index === 0 ? 0 : 750;
-        setTimeout(function() {
+        setTimeout(function () {
           flyTo(locations[index], next);
         }, delay);
       } else {