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/reprojection-by-code.js

@@ -1,44 +1,42 @@
-import Map from '../src/ol/Map.js';
-import View from '../src/ol/View.js';
-import {applyTransform} from '../src/ol/extent.js';
 import Graticule from '../src/ol/layer/Graticule.js';
+import Map from '../src/ol/Map.js';
+import OSM from '../src/ol/source/OSM.js';
+import Stroke from '../src/ol/style/Stroke.js';
+import TileImage from '../src/ol/source/TileImage.js';
 import TileLayer from '../src/ol/layer/Tile.js';
+import View from '../src/ol/View.js';
+import proj4 from 'proj4';
+import {applyTransform} from '../src/ol/extent.js';
 import {get as getProjection, getTransform} from '../src/ol/proj.js';
 import {register} from '../src/ol/proj/proj4.js';
-import OSM from '../src/ol/source/OSM.js';
-import TileImage from '../src/ol/source/TileImage.js';
-import Stroke from '../src/ol/style/Stroke.js';
-import proj4 from 'proj4';
-
 
 const graticule = new Graticule({
   // the style to use for the lines, optional.
   strokeStyle: new Stroke({
     color: 'rgba(255,120,0,0.9)',
     width: 2,
-    lineDash: [0.5, 4]
+    lineDash: [0.5, 4],
   }),
   showLabels: true,
   visible: false,
-  wrapX: false
+  wrapX: false,
 });
 
 const map = new Map({
   layers: [
     new TileLayer({
-      source: new OSM()
+      source: new OSM(),
     }),
-    graticule
+    graticule,
   ],
   target: 'map',
   view: new View({
     projection: 'EPSG:3857',
     center: [0, 0],
-    zoom: 1
-  })
+    zoom: 1,
+  }),
 });
 
-
 const queryInput = document.getElementById('epsg-query');
 const searchButton = document.getElementById('epsg-search');
 const resultSpan = document.getElementById('epsg-result');
@@ -48,11 +46,13 @@ const showGraticuleCheckbox = document.getElementById('show-graticule');
 function setProjection(code, name, proj4def, bbox) {
   if (code === null || name === null || proj4def === null || bbox === null) {
     resultSpan.innerHTML = 'Nothing usable found, using EPSG:3857...';
-    map.setView(new View({
-      projection: 'EPSG:3857',
-      center: [0, 0],
-      zoom: 1
-    }));
+    map.setView(
+      new View({
+        projection: 'EPSG:3857',
+        center: [0, 0],
+        zoom: 1,
+      })
+    );
     return;
   }
 
@@ -75,55 +75,60 @@ function setProjection(code, name, proj4def, bbox) {
   const extent = applyTransform(worldExtent, fromLonLat, undefined, 8);
   newProj.setExtent(extent);
   const newView = new View({
-    projection: newProj
+    projection: newProj,
   });
   map.setView(newView);
   newView.fit(extent);
 }
 
-
 function search(query) {
   resultSpan.innerHTML = 'Searching ...';
-  fetch('https://epsg.io/?format=json&q=' + query).then(function(response) {
-    return response.json();
-  }).then(function(json) {
-    const results = json['results'];
-    if (results && results.length > 0) {
-      for (let i = 0, ii = results.length; i < ii; i++) {
-        const result = results[i];
-        if (result) {
-          const code = result['code'];
-          const name = result['name'];
-          const proj4def = result['proj4'];
-          const bbox = result['bbox'];
-          if (code && code.length > 0 && proj4def && proj4def.length > 0 &&
-              bbox && bbox.length == 4) {
-            setProjection(code, name, proj4def, bbox);
-            return;
+  fetch('https://epsg.io/?format=json&q=' + query)
+    .then(function (response) {
+      return response.json();
+    })
+    .then(function (json) {
+      const results = json['results'];
+      if (results && results.length > 0) {
+        for (let i = 0, ii = results.length; i < ii; i++) {
+          const result = results[i];
+          if (result) {
+            const code = result['code'];
+            const name = result['name'];
+            const proj4def = result['proj4'];
+            const bbox = result['bbox'];
+            if (
+              code &&
+              code.length > 0 &&
+              proj4def &&
+              proj4def.length > 0 &&
+              bbox &&
+              bbox.length == 4
+            ) {
+              setProjection(code, name, proj4def, bbox);
+              return;
+            }
           }
         }
       }
-    }
-    setProjection(null, null, null, null);
-  });
+      setProjection(null, null, null, null);
+    });
 }
 
-
 /**
  * Handle click event.
  * @param {Event} event The event.
  */
-searchButton.onclick = function(event) {
+searchButton.onclick = function (event) {
   search(queryInput.value);
   event.preventDefault();
 };
 
-
 /**
  * Handle checkbox change event.
  */
-renderEdgesCheckbox.onchange = function() {
-  map.getLayers().forEach(function(layer) {
+renderEdgesCheckbox.onchange = function () {
+  map.getLayers().forEach(function (layer) {
     if (layer instanceof TileLayer) {
       const source = layer.getSource();
       if (source instanceof TileImage) {
@@ -136,6 +141,6 @@ renderEdgesCheckbox.onchange = function() {
 /**
  * Handle checkbox change event.
  */
-showGraticuleCheckbox.onchange = function() {
+showGraticuleCheckbox.onchange = function () {
   graticule.setVisible(showGraticuleCheckbox.checked);
 };