diff --git a/webapp/.eslintrc.js b/webapp/.eslintrc.js
index 5599ee0b..0216ac10 100644
--- a/webapp/.eslintrc.js
+++ b/webapp/.eslintrc.js
@@ -5,14 +5,19 @@ module.exports = {
     node: true,
   },
 
+  parser: "vue-eslint-parser",
+
   parserOptions: {
     parser: "@babel/eslint-parser",
+    requireConfigFile: false,
+    ecmaVersion: 2020,
+    sourceType: "module",
   },
 
+  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
+
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
     "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
   },
-
-  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
 };
diff --git a/webapp/src/App.vue b/webapp/src/App.vue
index dde959f6..b798e568 100644
--- a/webapp/src/App.vue
+++ b/webapp/src/App.vue
@@ -27,7 +27,7 @@ import loadingContent from "./components/loadingContent.vue";
 
 var Mousetrap = require("mousetrap");
 
-Mousetrap.prototype.stopCallback = function(e, element) {
+Mousetrap.prototype.stopCallback = function (e, element) {
   // if the element has the class "mousetrap" then no need to stop
   if ((" " + element.className + " ").indexOf(" mousetrap ") > -1) {
     return false;
@@ -56,7 +56,7 @@ export default {
     loadingContent,
   },
 
-  data: function() {
+  data: function () {
     return {
       appAvailable: false,
       arrowKeysDown: {},
@@ -67,14 +67,14 @@ export default {
   },
 
   computed: {
-    isSystemDark: function() {
+    isSystemDark: function () {
       if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
         return true;
       } else {
         return false;
       }
     },
-    handleTheme: function() {
+    handleTheme: function () {
       var isDark = false;
       if (this.$store.state.appTheme == "dark") {
         isDark = true;
@@ -98,7 +98,7 @@ export default {
       this.systemDark = true;
     }
     // Create a theme observer to watch for changes
-    this.themeObserver = mql.addListener(e => {
+    this.themeObserver = mql.addListener((e) => {
       if (e.matches) {
         this.systemDark = true;
       } else {
@@ -109,7 +109,7 @@ export default {
     this.checkConnection();
   },
 
-  created: function() {
+  created: function () {
     window.addEventListener("beforeunload", this.handleExit);
     // Scrollwheel listener
     window.addEventListener("wheel", this.wheelMonitor);
@@ -131,7 +131,7 @@ export default {
     // Arrow keys
     Mousetrap.bind(
       ["up", "down", "left", "right"],
-      event => {
+      (event) => {
         this.arrowKeysDown[event.keyCode] = true; //Add key to array
         this.navigateKeyHandler();
       },
@@ -139,7 +139,7 @@ export default {
     );
     Mousetrap.bind(
       ["up", "down", "left", "right"],
-      event => {
+      (event) => {
         delete this.arrowKeysDown[event.keyCode]; //Remove key from array
       },
       "keyup",
@@ -192,7 +192,7 @@ export default {
     });
   },
 
-  beforeDestroy: function() {
+  beforeDestroy: function () {
     // Disconnect the theme observer
     if (this.themeObserver) {
       this.themeObserver.disconnect();
@@ -233,12 +233,12 @@ export default {
         this.$store.commit("changeWaiting", false);
       }
     },
-    handleExit: function() {
+    handleExit: function () {
       this.$root.$emit("globalTogglePreview", false);
     },
 
     // Handle global mouse wheel events to be associated with navigation
-    wheelMonitor: function(event) {
+    wheelMonitor: function (event) {
       // Only capture scroll if the event target's parent contains the "scrollTarget" class
       if (
         event.target.parentNode.classList.contains("scrollTarget") ||
@@ -250,7 +250,7 @@ export default {
       }
     },
 
-    navigateKeyHandler: function() {
+    navigateKeyHandler: function () {
       // Calculate movement array
       var x_rel = 0;
       var y_rel = 0;
diff --git a/webapp/src/components/appContent.vue b/webapp/src/components/appContent.vue
index eb084c09..401b6d16 100644
--- a/webapp/src/components/appContent.vue
+++ b/webapp/src/components/appContent.vue
@@ -22,7 +22,7 @@
           >
             <img
               v-if="item.iconURL"
-              style="filter: grayscale(100%);width: 22px;margin-top: 5px;margin-bottom: 8px;"
+              style="filter: grayscale(100%); width: 22px; margin-top: 5px; margin-bottom: 8px"
               :src="item.iconURL"
             />
             <span v-if="!item.iconURL" class="material-symbols-outlined">
@@ -112,7 +112,7 @@ export default {
     TabIcon,
     powerContent,
   },
-  data: function() {
+  data: function () {
     return {
       currentTab: "view",
       bottomTabs: [
@@ -142,7 +142,7 @@ export default {
   },
 
   computed: {
-    tabOrder: function() {
+    tabOrder: function () {
       var ind = [];
       for (const tab of this.topTabs) {
         ind.push(tab.id);
@@ -153,7 +153,7 @@ export default {
       return ind;
     },
 
-    topTabs: function() {
+    topTabs: function () {
       let tabs = [
         {
           id: "view",
@@ -182,21 +182,21 @@ export default {
         },
       ];
       if (!this.$store.state.galleryEnabled) {
-        tabs = tabs.filter(tab => tab.id != "gallery");
+        tabs = tabs.filter((tab) => tab.id != "gallery");
       }
       return tabs;
     },
     allTabs() {
       return [...this.topTabs, ...this.bottomTabs];
     },
-    currentTabIndex: function() {
+    currentTabIndex: function () {
       return this.tabOrder.indexOf(this.currentTab);
     },
   },
 
   mounted() {
     // A global signal listener to switch tab
-    this.$root.$on("globalSwitchTab", tabID => {
+    this.$root.$on("globalSwitchTab", (tabID) => {
       this.currentTab = tabID;
     });
     // A global signal listener to increment tab
@@ -213,22 +213,22 @@ export default {
   },
 
   methods: {
-    setTab: function(event, tab) {
+    setTab: function (event, tab) {
       if (!(this.currentTab == tab)) {
         this.currentTab = tab;
       }
     },
-    incrementTabBy: function(n) {
+    incrementTabBy: function (n) {
       const newIndex =
         (((this.currentTabIndex + n) % this.tabOrder.length) + this.tabOrder.length) %
         this.tabOrder.length;
       const newId = this.tabOrder[newIndex];
       this.currentTab = newId;
     },
-    startModals: function() {
+    startModals: function () {
       this.$refs.calibrationWizard.show_if_needed();
     },
-    enterApp: function() {
+    enterApp: function () {
       // Stuff to do once connected and all init modals are finished
     },
     scrollToTop() {
diff --git a/webapp/src/components/genericComponents/miniStreamDisplay.vue b/webapp/src/components/genericComponents/miniStreamDisplay.vue
index 401ae5fb..d2623334 100644
--- a/webapp/src/components/genericComponents/miniStreamDisplay.vue
+++ b/webapp/src/components/genericComponents/miniStreamDisplay.vue
@@ -20,14 +20,14 @@
 export default {
   name: "MiniStreamDisplay",
 
-  data: function() {
+  data: function () {
     return {
       isVisible: false,
     };
   },
 
   computed: {
-    streamImgUri: function() {
+    streamImgUri: function () {
       return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
     },
   },
diff --git a/webapp/src/components/genericComponents/progressBar.vue b/webapp/src/components/genericComponents/progressBar.vue
index 58794ad2..f56655f1 100644
--- a/webapp/src/components/genericComponents/progressBar.vue
+++ b/webapp/src/components/genericComponents/progressBar.vue
@@ -11,12 +11,12 @@ export default {
   props: {},
 
   computed: {
-    tooltipOptions: function() {
+    tooltipOptions: function () {
       var title = this.id.charAt(0).toUpperCase() + this.id.slice(1);
       return `pos: right; title: ${title}; delay: 500`;
     },
 
-    classObject: function() {
+    classObject: function () {
       return {
         "tabicon-active": this.currentTab == this.id,
         "uk-disabled": this.requireConnection && !this.$store.getters.ready,
diff --git a/webapp/src/components/genericComponents/tabIcon.vue b/webapp/src/components/genericComponents/tabIcon.vue
index 4f448904..538496fc 100644
--- a/webapp/src/components/genericComponents/tabIcon.vue
+++ b/webapp/src/components/genericComponents/tabIcon.vue
@@ -44,7 +44,7 @@ export default {
   },
 
   computed: {
-    computedTitle: function() {
+    computedTitle: function () {
       if (this.title !== undefined) {
         return this.title;
       } else {
@@ -55,7 +55,7 @@ export default {
       }
     },
 
-    tooltipOptions: function() {
+    tooltipOptions: function () {
       if (this.showTooltip) {
         return `pos: right; title: ${this.computedTitle}; delay: 500`;
       } else {
@@ -63,7 +63,7 @@ export default {
       }
     },
 
-    classObject: function() {
+    classObject: function () {
       return {
         "tabicon-active": this.currentTab == this.tabID,
         "uk-disabled": this.requireConnection && !this.$store.getters.ready,
diff --git a/webapp/src/components/labThingsComponents/actionButton.vue b/webapp/src/components/labThingsComponents/actionButton.vue
index b37abc89..fad5f5fb 100644
--- a/webapp/src/components/labThingsComponents/actionButton.vue
+++ b/webapp/src/components/labThingsComponents/actionButton.vue
@@ -145,7 +145,7 @@ export default {
     },
   },
 
-  data: function() {
+  data: function () {
     return {
       taskUrl: null,
       progress: null,
@@ -245,13 +245,13 @@ export default {
       }
       // Check for a task that is ongoing.
       // We can't handle multiple tasks ongoing, so this picks the first.
-      const ongoingTask = response.data.find(t => ["pending", "running"].includes(t.status));
+      const ongoingTask = response.data.find((t) => ["pending", "running"].includes(t.status));
       if (ongoingTask) {
         // There is a started task
         this.taskStarted = true;
         this.$emit("taskStarted");
         // Find its URL
-        const taskUrl = ongoingTask.links.find(t => t.rel == "self").href;
+        const taskUrl = ongoingTask.links.find((t) => t.rel == "self").href;
         try {
           await this.pollOngoingTask(ongoingTask.id, taskUrl);
         } catch (error) {
@@ -262,7 +262,7 @@ export default {
       }
     },
 
-    bootstrapTask: function() {
+    bootstrapTask: function () {
       // Starts the process of creating a new Actiont ask
       if (this.requiresConfirmation) {
         this.modalConfirm(this.confirmationMessage).then(
@@ -309,14 +309,14 @@ export default {
       }
     },
 
-    onTaskEnd: function() {
+    onTaskEnd: function () {
       // Reset taskRunning and taskId
       this.taskRunning = false;
       this.taskStarted = false;
       this.$emit("finished");
     },
 
-    startPolling: function(taskId, taskUrl) {
+    startPolling: function (taskId, taskUrl) {
       if (this.taskRunning != true) {
         // Starts polling an existing Action task
         this.taskUrl = taskUrl;
@@ -327,12 +327,12 @@ export default {
       }
     },
 
-    pollTask: function(taskId, interval) {
+    pollTask: function (taskId, interval) {
       interval = interval * 1000 || 500;
 
       var checkCondition = (resolve, reject) => {
         // If the condition is met, we're done!
-        axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then(response => {
+        axios.get(this.taskUrl, { baseURL: this.$store.getters.baseUri }).then((response) => {
           var result = response.data.status;
           this.taskStatus = result;
           if ((result == "running") | (result == "pending")) {
@@ -382,7 +382,7 @@ export default {
       this.$root.$emit("modalClosed");
     },
 
-    terminateTask: function() {
+    terminateTask: function () {
       axios.delete(this.taskUrl, { baseURL: this.$store.getters.baseUri });
       this.$root.$emit("modalClosed");
     },
diff --git a/webapp/src/components/labThingsComponents/actionLogDisplay.vue b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
index 71778497..3602baa4 100644
--- a/webapp/src/components/labThingsComponents/actionLogDisplay.vue
+++ b/webapp/src/components/labThingsComponents/actionLogDisplay.vue
@@ -17,9 +17,7 @@
       </div>
 
       <!-- Paused banner outside scroll container, positioned relative to wrapper -->
-      <div v-if="userIsHovering" class="paused-banner">
-        Auto-scroll paused
-      </div>
+      <div v-if="userIsHovering" class="paused-banner">Auto-scroll paused</div>
     </div>
   </div>
 </template>
@@ -46,10 +44,10 @@ export default {
   },
 
   watch: {
-    log: function() {
+    log: function () {
       this.scrollToBottom();
     },
-    taskStatus: function() {
+    taskStatus: function () {
       this.scrollToBottom();
     },
   },
diff --git a/webapp/src/components/labThingsComponents/actionProgressBar.vue b/webapp/src/components/labThingsComponents/actionProgressBar.vue
index d83f6bc5..00afc787 100644
--- a/webapp/src/components/labThingsComponents/actionProgressBar.vue
+++ b/webapp/src/components/labThingsComponents/actionProgressBar.vue
@@ -22,12 +22,12 @@ export default {
   },
 
   computed: {
-    barWidthFromProgress: function() {
+    barWidthFromProgress: function () {
       var progress = this.progress <= 100 ? this.progress : 100;
       var styleString = `width: ${progress}%`;
       return styleString;
     },
-    indeterminateProgressBar: function() {
+    indeterminateProgressBar: function () {
       if (this.taskStatus == "pending") return true;
       if ((this.taskStatus == "running") & !this.progress) {
         return true;
diff --git a/webapp/src/components/labThingsComponents/inputFromSchema.vue b/webapp/src/components/labThingsComponents/inputFromSchema.vue
index 30f14857..ea5e6e4d 100644
--- a/webapp/src/components/labThingsComponents/inputFromSchema.vue
+++ b/webapp/src/components/labThingsComponents/inputFromSchema.vue
@@ -128,7 +128,7 @@ export default {
     };
   },
   computed: {
-    internalLabels: function() {
+    internalLabels: function () {
       if (this.dataType == "number_object") {
         let labels = {};
         for (const key in this.internalValue) {
@@ -138,7 +138,7 @@ export default {
       }
       return [];
     },
-    valueLength: function() {
+    valueLength: function () {
       if (this.dataType == "number_array") {
         if (this.internalValue == undefined) {
           return 0;
@@ -148,7 +148,7 @@ export default {
         return 1;
       }
     },
-    dataType: function() {
+    dataType: function () {
       let prop = this.dataSchema;
       if (prop == undefined) {
         return "undefined";
@@ -162,7 +162,7 @@ export default {
           return "number_array";
         }
         if (Array.isArray(prop.items)) {
-          if (prop.items.every(t => num_types.includes(t.type))) {
+          if (prop.items.every((t) => num_types.includes(t.type))) {
             return "number_array";
           }
         }
@@ -210,46 +210,46 @@ export default {
   },
 
   methods: {
-    resetInternalValue: function() {
+    resetInternalValue: function () {
       // Whenever updatirng th internal value stringify and parse as a form of deepcopy.
       // This ensure that the this.value prop is not mutated for when elements of arrays
       // or objects are updated.
       this.internalValue = JSON.parse(JSON.stringify(this.value));
     },
-    requestUpdate: async function() {
+    requestUpdate: async function () {
       this.$emit("requestUpdate");
     },
-    sendValue: async function() {
+    sendValue: async function () {
       this.$emit("sendValue", this.internalValue);
     },
-    checkboxUpdated: function() {
+    checkboxUpdated: function () {
       if (this.internalValue != this.$refs.checkbox.checked) {
         this.internalValue = this.$refs.checkbox.checked;
         this.sendValue();
       }
     },
-    focusIn: function(event) {
+    focusIn: function (event) {
       this.valueOnEnter = event.target.value;
     },
-    focusOut: function(event) {
+    focusOut: function (event) {
       if (this.valueOnEnter != event.target.value) {
         this.sendValue(event.target.value);
       }
     },
-    keyDown: function(event) {
+    keyDown: function (event) {
       // Pressing enter should set the property, whether or not we think it's changed.
       if (event.keyCode == 13) {
         this.sendValue();
       }
     },
-    updateIsEdited: function() {
+    updateIsEdited: function () {
       this.isEdited = this.deepStringify(this.internalValue) !== this.deepStringify(this.value);
     },
-    animationEnd: function() {
+    animationEnd: function () {
       this.animateUpdate = false;
       this.$emit("animationShown");
     },
-    deepStringify: function(val) {
+    deepStringify: function (val) {
       // Create a json string where all internal numbers are also JSON strings. This is
       // needed to robustly check if the value is updated because the raw value may be a
       // number but anything typed in the input is a string. In the case of arrays or
diff --git a/webapp/src/components/labThingsComponents/propertyControl.vue b/webapp/src/components/labThingsComponents/propertyControl.vue
index 530f72a5..e60b21b4 100644
--- a/webapp/src/components/labThingsComponents/propertyControl.vue
+++ b/webapp/src/components/labThingsComponents/propertyControl.vue
@@ -54,7 +54,7 @@ export default {
   },
 
   computed: {
-    propertyDescription: function() {
+    propertyDescription: function () {
       try {
         return this.thingDescription(this.thingName).properties[this.propertyName];
       } catch (error) {
@@ -64,13 +64,13 @@ export default {
   },
 
   watch: {
-    propertyDescription: function() {
+    propertyDescription: function () {
       // Ensure we read the property once the URL is known
       this.readProperty();
     },
   },
 
-  mounted: function() {
+  mounted: function () {
     // Read the property when we're mounted - usually this won't
     // work because the URL isn't set yet. However, it's helpful if
     // the app is reloaded (e.g. from a dev server).
@@ -80,17 +80,17 @@ export default {
   },
 
   methods: {
-    readProperty: async function() {
+    readProperty: async function () {
       let data = await this.readThingProperty(this.thingName, this.propertyName);
       this.value = data;
       return data;
     },
-    writeProperty: async function(requestedValue) {
+    writeProperty: async function (requestedValue) {
       try {
         this.value = requestedValue;
         await this.writeThingProperty(this.thingName, this.propertyName, requestedValue);
         if (this.readBack) {
-          await new Promise(r => setTimeout(r, this.readBackDelay));
+          await new Promise((r) => setTimeout(r, this.readBackDelay));
           let newVal = await this.readProperty();
           if (newVal == requestedValue) {
             this.animate = true;
@@ -112,7 +112,7 @@ export default {
         this.readProperty();
       }
     },
-    resetAnimate: function() {
+    resetAnimate: function () {
       this.animate = false;
     },
   },
diff --git a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
index a38cf1d4..d855092b 100644
--- a/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
+++ b/webapp/src/components/labThingsComponents/serverSpecifiedActionButton.vue
@@ -33,7 +33,7 @@ export default {
   },
 
   methods: {
-    actionResponse: function() {
+    actionResponse: function () {
       if (this.actionData.notify_on_success) {
         this.modalNotify(this.actionData.success_message);
       }
diff --git a/webapp/src/components/loadingContent.vue b/webapp/src/components/loadingContent.vue
index a0b4e8b2..863ea4a4 100644
--- a/webapp/src/components/loadingContent.vue
+++ b/webapp/src/components/loadingContent.vue
@@ -21,7 +21,7 @@ export default {
 
   components: { devTools },
 
-  data: function() {
+  data: function () {
     return {};
   },
 };
diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index 8163633b..6deb09ed 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -30,7 +30,7 @@ export default {
 
   components: {},
 
-  data: function() {
+  data: function () {
     return {
       isNeeded: undefined,
       availableCalibrationTasks: {},
@@ -91,7 +91,7 @@ export default {
       return needsCalibration;
     },
 
-    resetData: function() {
+    resetData: function () {
       this.movingBackward = false;
       this.taskIndex = 0;
     },
@@ -99,7 +99,7 @@ export default {
     /**
      * Create the calibration wizard task list dynamically.
      */
-    create_task_list: function(thingsToCal, includeWelcome = true) {
+    create_task_list: function (thingsToCal, includeWelcome = true) {
       const tasks = [];
 
       // Optionally include the welcome screen
@@ -125,7 +125,7 @@ export default {
       this.tasks = tasks;
     },
 
-    show_if_needed: async function() {
+    show_if_needed: async function () {
       // Check if the calibration modal is needed, and only show it if it is.
       let thingsToCal = await this.check_things_needing_calibration();
       const needed = thingsToCal.length > 0;
@@ -142,7 +142,7 @@ export default {
     },
 
     // Forces modal to show on button press
-    force_show: function() {
+    force_show: function () {
       const allThings = Object.keys(this.availableCalibrationTasks);
 
       this.resetData();
@@ -150,26 +150,26 @@ export default {
       this.show();
     },
 
-    show: function() {
+    show: function () {
       // Show the modal element
       var el = this.$refs["calibrationModalEl"];
       this.showModalElement(el); // Calls the mixin
     },
 
-    hide: function() {
+    hide: function () {
       // Show the modal
       var el = this.$refs["calibrationModalEl"];
       this.hideModalElement(el); // Calls the mixin
     },
 
-    onHide: function() {
+    onHide: function () {
       this.$emit("onClose");
     },
 
     /*
      * Move to the previous task.
      */
-    previousTask: function() {
+    previousTask: function () {
       this.movingBackward = true;
       if (this.taskIndex > 0) {
         this.taskIndex = this.taskIndex - 1;
@@ -179,7 +179,7 @@ export default {
     /*
      * Move to the next task or close the modal if this is the final task.
      */
-    nextTask: function() {
+    nextTask: function () {
       this.movingBackward = false;
       if (this.taskIndex < this.tasks.length - 1) {
         this.taskIndex = this.taskIndex + 1;
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
index 62c821b4..57151b7b 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue
@@ -87,7 +87,7 @@ export default {
     /*
      * Move to the previous step in this task, or the previous task if first step.
      */
-    previousStep: function() {
+    previousStep: function () {
       if (this.stepIndex > 0) {
         this.stepIndex = this.stepIndex - 1;
       } else {
@@ -98,7 +98,7 @@ export default {
     /*
      * Move to the next step in this task, or the next task if final step.
      */
-    nextStep: function() {
+    nextStep: function () {
       if (this.stepIndex < this.steps.length - 1) {
         this.stepIndex = this.stepIndex + 1;
         return true;
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
index 9b7e7bbc..28243aa3 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/camCalibrationExplanation.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
     <p>
-      <b>
-        Before starting camera calibration:
-      </b>
+      <b> Before starting camera calibration: </b>
     </p>
     <ul class="uk-list uk-list-bullet">
       <li>Remove any samples from your microscope</li>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
index 3cb438ff..e393eead 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationSteps/cameraMainCalibrationStep.vue
@@ -25,7 +25,7 @@ export default {
   },
 
   computed: {
-    cameraUri: function() {
+    cameraUri: function () {
       return `${this.$store.getters.baseUri}/camera/`;
     },
   },
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
index d7faebab..62026ab4 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraCalibrationTask.vue
@@ -28,7 +28,7 @@ export default {
     },
   },
 
-  data: function() {
+  data: function () {
     return {
       steps: [{ component: camCalibrationExplanation }, { component: cameraMainCalibrationStep }],
     };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
index a4bbf7f6..a442a9b1 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/cameraStageMappingTask.vue
@@ -29,7 +29,7 @@ export default {
     },
   },
 
-  data: function() {
+  data: function () {
     return {
       steps: [{ component: csmExplanation }, { component: focusStep }, { component: runCsmStep }],
     };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue
index 75140332..175bb7ff 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/csmExplanation.vue
@@ -1,12 +1,8 @@
 <template>
   <div>
+    <p>Camera-stage mapping will calibrate the stage movement using the camera.</p>
     <p>
-      Camera-stage mapping will calibrate the stage movement using the camera.
-    </p>
-    <p>
-      <b>
-        Before starting camera-stage mapping:
-      </b>
+      <b> Before starting camera-stage mapping: </b>
     </p>
     <ul class="uk-list uk-list-bullet">
       <li>Add a sample with dense features to the microscope.</li>
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
index 5710a6fc..2f8584a7 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue
@@ -1,8 +1,6 @@
 <template>
   <stepTemplateWithStream>
-    <p>
-      Use the buttons below to bring the sample into focus.
-    </p>
+    <p>Use the buttons below to bring the sample into focus.</p>
     <p>You may also adjust the z position with <b>page up</b> and <b>page down</b>.</p>
     <template #below-stream>
       <div class="action-button-container">
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue
index 028a1f98..6857f7c0 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/finalStep.vue
@@ -3,12 +3,8 @@
     <p>
       <b>Calibration complete</b>
     </p>
-    <p>
-      You'll need to repeat these steps from the Settings tab if you swap your objective.
-    </p>
-    <p>
-      Click Finish to return to your microscope.
-    </p>
+    <p>You'll need to repeat these steps from the Settings tab if you swap your objective.</p>
+    <p>Click Finish to return to your microscope.</p>
   </div>
 </template>
 
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
index 92c7845a..4dedb280 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/singleStepTask.vue
@@ -52,7 +52,7 @@ export default {
     },
   },
 
-  data: function() {
+  data: function () {
     return {
       steps: [{ component: this.stepComponent, props: this.stepProps }],
     };
diff --git a/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue b/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
index 5756e869..4e4dba20 100644
--- a/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
+++ b/webapp/src/components/modalComponents/calibrationWizardComponents/welcomeStep.vue
@@ -1,9 +1,7 @@
 <template>
   <div>
     <p>
-      <b>
-        Some important microscope calibration data is currently missing.
-      </b>
+      <b> Some important microscope calibration data is currently missing. </b>
     </p>
     <p>
       Your microscope will still function, however some functionality will be limited, and image
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue b/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
index 2459ca7d..2f3a2152 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/devTools.vue
@@ -7,9 +7,7 @@
         <input v-model="reloadWhenOverridingOrigin" class="uk-input uk-checkbox" type="checkbox" />
         Reload web app with new origin
       </label>
-      <button class="uk-button uk-button-default uk-margin-small">
-        Apply
-      </button>
+      <button class="uk-button uk-button-default uk-margin-small">Apply</button>
     </form>
   </div>
 </template>
@@ -21,7 +19,7 @@ export default {
 
   components: {},
 
-  data: function() {
+  data: function () {
     return {
       newOrigin: this.$store.state.overrideOrigin,
       reloadWhenOverridingOrigin: true,
@@ -29,7 +27,7 @@ export default {
   },
 
   methods: {
-    overrideAPIHost: function(event) {
+    overrideAPIHost: function (event) {
       // Save the origin override, so that if we reload the web app, you can easily
       this.$store.commit("changeOverrideOrigin", this.newOrigin);
 
diff --git a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
index 898c4989..2a045bb2 100644
--- a/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
+++ b/webapp/src/components/tabContentComponents/aboutComponents/statusPane.vue
@@ -50,9 +50,7 @@
 
       <hr />
     </div>
-    <div v-else-if="$store.state.waiting">
-      Loading...
-    </div>
+    <div v-else-if="$store.state.waiting">Loading...</div>
     <div v-else-if="$store.state.error"><b>Error:</b> {{ $store.state.error }}</div>
     <div v-else>No active connection</div>
   </div>
@@ -65,7 +63,7 @@ export default {
   name: "StatusPane",
   components: { ActionButton },
 
-  data: function() {
+  data: function () {
     return {
       version: undefined,
       version_source: undefined,
@@ -73,7 +71,7 @@ export default {
   },
 
   computed: {
-    things: function() {
+    things: function () {
       return this.$store.getters["wot/thingDescriptions"];
     },
   },
diff --git a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
index 7469433e..4a41c055 100644
--- a/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
+++ b/webapp/src/components/tabContentComponents/backgroundDetectComponents/paneBackgroundDetect.vue
@@ -89,18 +89,18 @@ export default {
       let label = r.output[0] ? "sample" : "background";
       this.modalNotify(`Current image is ${label} (${r.output[1]})`);
     },
-    readSettings: async function() {
+    readSettings: async function () {
       this.backgroundDetectorStatus = await this.readThingProperty(
         "camera",
         "background_detector_status",
       );
     },
-    writeSettings: async function(requestedValue) {
+    writeSettings: async function (requestedValue) {
       await this.invokeAction("camera", "update_detector_settings", { data: requestedValue });
       this.animate = true;
       this.readSettings();
     },
-    resetAnimate: function() {
+    resetAnimate: function () {
       this.animate = false;
     },
   },
diff --git a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
index a17a2537..6122db74 100644
--- a/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
+++ b/webapp/src/components/tabContentComponents/controlComponents/paneControl.vue
@@ -139,9 +139,7 @@
     </div>
     <div v-else class="uk-text-warning">
       <p>Stage positioning is disabled since no stage is connected.</p>
-      <p>
-        Please check all data and power connections to your motor controller board.
-      </p>
+      <p>Please check all data and power connections to your motor controller board.</p>
     </div>
   </div>
 </template>
@@ -160,7 +158,7 @@ export default {
     syncPropertyButton,
   },
 
-  data: function() {
+  data: function () {
     return {
       setPosition: null,
       isAutofocusing: 0,
@@ -178,13 +176,13 @@ export default {
     invert() {
       return this.$store.state.navigationInvert;
     },
-    baseUri: function() {
+    baseUri: function () {
       return this.$store.getters.baseUri;
     },
-    positionStatusUri: function() {
+    positionStatusUri: function () {
       return `${this.baseUri}/stage/position`;
     },
-    moveInImageCoordinatesUri: function() {
+    moveInImageCoordinatesUri: function () {
       return this.thingActionUrl("camera_stage_mapping", "move_in_image_coordinates");
     },
   },
@@ -235,7 +233,7 @@ export default {
 
   methods: {
     timeout(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
+      return new Promise((resolve) => setTimeout(resolve, ms));
     },
     async move(x, y, z, absolute) {
       // Move the stage, by updating the controls and starting a move task
@@ -260,7 +258,7 @@ export default {
     async startMoveTask() {
       await this.$refs.moveButton.startTask();
     },
-    moveInImageCoordinatesRequest: function(x, y) {
+    moveInImageCoordinatesRequest: function (x, y) {
       // If not movement-locked
       if (!this.moveLock) {
         // Lock move requests
@@ -281,7 +279,7 @@ export default {
           .then(() => {
             this.updatePosition(); // Update the position in text boxes
           })
-          .catch(error => {
+          .catch((error) => {
             this.modalError(error); // Let mixin handle error
           })
           .then(() => {
@@ -294,7 +292,7 @@ export default {
       this.setPosition = await this.readThingProperty("stage", "position");
     },
 
-    handleCaptureResponse: async function(response) {
+    handleCaptureResponse: async function (response) {
       // Retrieve the captured image and save it
       let imageUri = response.output.href;
       if (!imageUri) {
diff --git a/webapp/src/components/tabContentComponents/loggingContent.vue b/webapp/src/components/tabContentComponents/loggingContent.vue
index 46cc6a53..56bb19c6 100644
--- a/webapp/src/components/tabContentComponents/loggingContent.vue
+++ b/webapp/src/components/tabContentComponents/loggingContent.vue
@@ -92,7 +92,7 @@ export default {
     EndpointButton,
   },
 
-  data: function() {
+  data: function () {
     return {
       maxitems: 20,
       page: 1,
@@ -103,11 +103,11 @@ export default {
   },
 
   computed: {
-    filteredLevels: function() {
+    filteredLevels: function () {
       let cutoffIndex = this.allLevels.indexOf(this.filterLevel);
       return this.allLevels.slice(cutoffIndex, -1);
     },
-    filteredItems: function() {
+    filteredItems: function () {
       var items = [];
       for (var item of this.logs) {
         // Add to capture list if matched
@@ -118,17 +118,17 @@ export default {
 
       return items;
     },
-    logURI: function() {
+    logURI: function () {
       return `${this.$store.getters.baseUri}/log/`;
     },
-    logFileURI: function() {
+    logFileURI: function () {
       return `${this.$store.getters.baseUri}/logfile/`;
     },
-    pagedItems: function() {
+    pagedItems: function () {
       let startIndex = (this.page - 1) * this.maxitems;
       return this.filteredItems.slice(startIndex, startIndex + this.maxitems);
     },
-    numberOfPages: function() {
+    numberOfPages: function () {
       return Math.floor(this.filteredItems.length / this.maxitems);
     },
   },
@@ -190,12 +190,12 @@ export default {
       }
       this.logs = logs.reverse(); // Display in reverse chronological order
     },
-    formatDateTime: function(isoDateTimeString) {
+    formatDateTime: function (isoDateTimeString) {
       isoDateTimeString = isoDateTimeString.replace(",", ".");
       let date = new Date(isoDateTimeString);
       return date.toLocaleDateString() + " " + date.toLocaleTimeString();
     },
-    escapeText: function(unsafeText) {
+    escapeText: function (unsafeText) {
       let div = document.createElement("div");
       div.innerText = unsafeText;
       return div.innerHTML;
diff --git a/webapp/src/components/tabContentComponents/powerContent.vue b/webapp/src/components/tabContentComponents/powerContent.vue
index 4257be8a..ecb1c419 100644
--- a/webapp/src/components/tabContentComponents/powerContent.vue
+++ b/webapp/src/components/tabContentComponents/powerContent.vue
@@ -35,14 +35,14 @@ export default {
 
   components: {},
 
-  data: function() {
+  data: function () {
     return {
       isRaspberrypi: undefined,
     };
   },
 
   computed: {
-    things: function() {
+    things: function () {
       return this.$store.getters["wot/thingDescriptions"];
     },
   },
@@ -52,7 +52,7 @@ export default {
   },
 
   methods: {
-    systemRequest: function(action) {
+    systemRequest: function (action) {
       let message = "";
       if (action == "reboot") {
         message = "Restart microscope?";
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
index 8b37c435..212534cf 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/openSeadragonViewer.vue
@@ -29,7 +29,7 @@ export default {
     },
   },
 
-  data: function() {
+  data: function () {
     return {
       osdViewer: null,
     };
diff --git a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
index 5c9e6ea3..a031b914 100644
--- a/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
+++ b/webapp/src/components/tabContentComponents/scanListComponents/scanCard.vue
@@ -35,9 +35,7 @@
             button-label="Download JPEG"
           />
         </div>
-        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">
-          Delete
-        </button>
+        <button class="uk-button uk-button-default uk-width-1-1" @click="deleteScan">Delete</button>
         <action-button
           v-if="scanData.can_stitch | (scanData.stitch_available & !scanData.dzi)"
           submit-label="Stitch Images"
@@ -121,14 +119,8 @@ export default {
       let yyyy = d.getFullYear();
       let mm = d.getMonth() + 1;
       let dd = d.getDate();
-      let HH = d
-        .getHours()
-        .toString()
-        .padStart(2, "0");
-      let MM = d
-        .getMinutes()
-        .toString()
-        .padStart(2, "0");
+      let HH = d.getHours().toString().padStart(2, "0");
+      let MM = d.getMinutes().toString().padStart(2, "0");
       return `${HH}:${MM} ${dd}/${mm}/${yyyy}`;
     },
     formatDuration(duration) {
diff --git a/webapp/src/components/tabContentComponents/scanListContent.vue b/webapp/src/components/tabContentComponents/scanListContent.vue
index 6b4fa48c..bf85dd44 100644
--- a/webapp/src/components/tabContentComponents/scanListContent.vue
+++ b/webapp/src/components/tabContentComponents/scanListContent.vue
@@ -18,9 +18,7 @@
               :button-primary="false"
               :modal-progress="true"
               :requires-confirmation="true"
-              :confirmation-message="
-                '<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'
-              "
+              :confirmation-message="'<h3>Stitch all unstitched scans?</h3><br>Depending on the number and size of scans, this may be slow, and your microscope should not be used during the stitching.'"
               @error="modalError"
             />
           </div>
@@ -62,9 +60,7 @@
       <div class="gallery-grid uk-grid-match" uk-grid>
         <div v-if="scansEmpty">
           <h2>No scans available</h2>
-          <p>
-            There are no scans available to show.
-          </p>
+          <p>There are no scans available to show.</p>
         </div>
         <div v-for="scanData in paginatedScans" :key="scanData.id">
           <scan-card
@@ -110,7 +106,7 @@ export default {
   name: "ScanListContent",
   components: { actionButton, scanCard, ScanViewerModal },
 
-  data: function() {
+  data: function () {
     return {
       scans: [],
       ongoing: null,
@@ -162,13 +158,13 @@ export default {
     });
   },
 
-  created: function() {
+  created: function () {
     // Watch for host 'ready', then update status
     this.unwatchStoreFunction = this.$store.watch(
       (state, getters) => {
         return getters.ready;
       },
-      ready => {
+      (ready) => {
         if (ready) {
           // If the connection is now ready, update capture list
           this.updateScans();
@@ -205,7 +201,7 @@ export default {
         if (!scans | (scans.length == 0)) {
           this.scans = scans;
         }
-        scans.forEach(scan => {
+        scans.forEach((scan) => {
           scan.can_stitch = !scan.stitch_available && scan.number_of_images > 3;
         });
         scans.sort((a, b) => {
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
index 53c909f0..fc3359c4 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/CSMSettingsComponents/CSMCalibrationSettings.vue
@@ -6,9 +6,7 @@
         :button-primary="true"
         :can-terminate="true"
         :requires-confirmation="true"
-        :confirmation-message="
-          'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'
-        "
+        :confirmation-message="'Start recalibration of the stage to the camera? This may take a while, and the microscope will be locked during this time.'"
         thing="camera_stage_mapping"
         action="calibrate_xy"
         :submit-label="'Auto-Calibrate Using Camera'"
@@ -26,9 +24,9 @@
     >
       Download Calibration Data
     </button>
-    <div v-if="csmMatrix != 'undefined'" style="margin:10px;">
-      <details
-        ><summary>Calibration Details</summary>
+    <div v-if="csmMatrix != 'undefined'" style="margin: 10px">
+      <details>
+        <summary>Calibration Details</summary>
         <strong>CSM calculated for images with a resolution of {{ csmResolution }}</strong>
         <ul>
           <li>
@@ -84,7 +82,7 @@ export default {
         this.updateDisplayedCSM();
       }
     },
-    getCalibrationData: async function() {
+    getCalibrationData: async function () {
       try {
         let data = await this.readThingProperty("camera_stage_mapping", "last_calibration");
         if (data == {}) {
@@ -101,7 +99,7 @@ export default {
         this.modalError(error); // Let mixin handle error
       }
     },
-    updateDisplayedCSM: async function() {
+    updateDisplayedCSM: async function () {
       let csmMatrix = await this.readThingProperty(
         "camera_stage_mapping",
         "image_to_stage_displacement_matrix",
@@ -121,7 +119,7 @@ export default {
         Number(((streamResolution[1] ** 2 * this.csmRatio) / this.csmResolution[0]).toFixed(0)),
       ];
     },
-    onRecalibrateResponse: function() {
+    onRecalibrateResponse: function () {
       this.modalNotify("Finished stage-to-camera calibration.");
       this.updateDisplayedCSM();
     },
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue
index a3eed683..615d24a8 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/appSettings.vue
@@ -23,7 +23,7 @@
 export default {
   name: "AppSettings",
 
-  data: function() {
+  data: function () {
     return {};
   },
 
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
index 68276512..85d01345 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/cameraSettings.vue
@@ -43,7 +43,7 @@ export default {
   },
 
   computed: {
-    cameraUri: function() {
+    cameraUri: function () {
       return `${this.$store.getters.baseUri}/camera/`;
     },
   },
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
index 97d8e0d3..ad5d8842 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/stageSettings.vue
@@ -4,16 +4,12 @@
     <div>
       <div class="uk-margin">
         <p>Your z motor is currently {{ z_inverted }} inverted.</p>
-        <p>
-          We expect that moving in +z:
-        </p>
+        <p>We expect that moving in +z:</p>
         <ul>
           <li>Moves your objective up, towards the sample and illumination</li>
           <li>Turns the exposed z gear anti-clockwise (when viewed from above)</li>
         </ul>
-        <p>
-          If this is not the case, click the button below to switch.
-        </p>
+        <p>If this is not the case, click the button below to switch.</p>
         <div class="uk-margin">
           <div class="uk-margin">
             <action-button
@@ -41,14 +37,14 @@ export default {
     ActionButton,
   },
 
-  data: function() {
+  data: function () {
     return {
       z_inverted: "",
     };
   },
 
   computed: {
-    stageType: function() {
+    stageType: function () {
       return this.thingDescription("stage").title;
     },
   },
diff --git a/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue b/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
index aa5fc8e9..0593e69d 100644
--- a/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
+++ b/webapp/src/components/tabContentComponents/settingsComponents/streamSettings.vue
@@ -6,9 +6,7 @@
         ><input v-model="disableStream" class="uk-checkbox" type="checkbox" /> Disable Web
         Stream</label
       >
-      <p class="uk-margin-small">
-        This will disable the embedded web stream of the camera.
-      </p>
+      <p class="uk-margin-small">This will disable the embedded web stream of the camera.</p>
     </div>
   </div>
 </template>
@@ -18,7 +16,7 @@
 export default {
   name: "StreamSettings",
 
-  data: function() {
+  data: function () {
     return {};
   },
 
diff --git a/webapp/src/components/tabContentComponents/settingsContent.vue b/webapp/src/components/tabContentComponents/settingsContent.vue
index 934038bd..7f1003bc 100644
--- a/webapp/src/components/tabContentComponents/settingsContent.vue
+++ b/webapp/src/components/tabContentComponents/settingsContent.vue
@@ -123,7 +123,7 @@ export default {
     calibrationWizard,
   },
 
-  data: function() {
+  data: function () {
     return {
       selected: "display",
       currentTab: "display",
@@ -131,12 +131,12 @@ export default {
   },
 
   methods: {
-    setTab: function(event, tab) {
+    setTab: function (event, tab) {
       if (!(this.currentTab == tab)) {
         this.currentTab = tab;
       }
     },
-    startModals: function() {
+    startModals: function () {
       this.$refs.calibrationWizard.force_show();
     },
   },
diff --git a/webapp/src/components/tabContentComponents/slideScanContent.vue b/webapp/src/components/tabContentComponents/slideScanContent.vue
index 95b0a6bc..21d3ce2a 100644
--- a/webapp/src/components/tabContentComponents/slideScanContent.vue
+++ b/webapp/src/components/tabContentComponents/slideScanContent.vue
@@ -1,7 +1,5 @@
 <template>
-  <div v-if="!backendOK" class="uk-alert-danger">
-    No scan back-end found.
-  </div>
+  <div v-if="!backendOK" class="uk-alert-danger">No scan back-end found.</div>
   <!-- Grid managing tab content -->
   <div v-else uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove">
     <div class="control-component uk-padding-small">
@@ -101,9 +99,7 @@
         </div>
       </div>
       <div v-show="scanning">
-        <h2 v-if="displayImageOnRight" style="text-align: center;">
-          Live stitching preview
-        </h2>
+        <h2 v-if="displayImageOnRight" style="text-align: center">Live stitching preview</h2>
         <mini-stream-display v-if="displayImageOnRight" />
         <action-log-display id="log-display" :log="log" :task-status="taskStatus" />
         <action-progress-bar :progress="progress" :task-status="taskStatus" />
@@ -199,7 +195,7 @@ export default {
   },
 
   methods: {
-    onScanError: function(error) {
+    onScanError: function (error) {
       this.scanRunning = false;
       this.modalError(error);
     },
diff --git a/webapp/src/components/tabContentComponents/streamContent.vue b/webapp/src/components/tabContentComponents/streamContent.vue
index d84e68e9..ee1686d5 100644
--- a/webapp/src/components/tabContentComponents/streamContent.vue
+++ b/webapp/src/components/tabContentComponents/streamContent.vue
@@ -39,7 +39,7 @@
 export default {
   name: "StreamDisplay",
 
-  data: function() {
+  data: function () {
     return {
       isVisible: false,
       displaySize: [0, 0],
@@ -49,14 +49,14 @@ export default {
   },
 
   computed: {
-    streamEnabled: function() {
+    streamEnabled: function () {
       return this.$store.getters.ready && !this.$store.state.disableStream;
     },
-    thisStreamOpen: function() {
+    thisStreamOpen: function () {
       // Only a single MJPEG connection should be open at a time
       return !(this.displaySize[0] == 0) && !(this.displaySize[1] == 0);
     },
-    streamImgUri: function() {
+    streamImgUri: function () {
       return `${this.$store.getters.baseUri}/camera/mjpeg_stream`;
     },
   },
@@ -77,11 +77,11 @@ export default {
     this.sizeObserver.observe(streamDisplayElement);
   },
 
-  created: function() {
+  created: function () {
     // Do nothing: preview stream now runs all the time
   },
 
-  beforeDestroy: function() {
+  beforeDestroy: function () {
     // Remove global signal listener to change the GPU preview state
     this.$root.$off("globalTogglePreview");
     // Remove global signal listener to flash the stream element
@@ -96,18 +96,18 @@ export default {
     visibilityChanged(isVisible) {
       this.isVisible = isVisible;
     },
-    flashStream: function() {
+    flashStream: function () {
       // Run an animation that flashes the stream (for capture feedback)
       let element = this.$refs.streamDisplay;
       element.classList.remove("uk-animation-fade");
       element.offsetHeight; /* trigger reflow */
       element.classList.add("uk-animation-fade");
-      setTimeout(function() {
+      setTimeout(function () {
         element.classList.remove("uk-animation-fade");
       }, 800);
     },
 
-    clickMonitor: function(event) {
+    clickMonitor: function (event) {
       // Calculate steps from event coordinates
       let xCoordinate = event.offsetX;
       let yCoordinate = event.offsetY;
@@ -129,13 +129,13 @@ export default {
       this.$root.$emit("globalMoveInImageCoordinatesEvent", -xRelative, -yRelative);
     },
 
-    handleResize: function() {
+    handleResize: function () {
       // Only fires resize event after no resize in 500ms (prevents resize event spam)
       clearTimeout(this.resizeTimeoutId);
       this.resizeTimeoutId = setTimeout(this.handleDoneResize, 250);
     },
 
-    handleDoneResize: function() {
+    handleDoneResize: function () {
       // Recalculate size
 
       this.recalculateSize();
@@ -151,7 +151,7 @@ export default {
       }
     },
 
-    recalculateSize: function() {
+    recalculateSize: function () {
       // Calculate stream size
       let element = this.$refs.streamDisplay.parentNode;
       let bound = element.getBoundingClientRect();
diff --git a/webapp/src/main.js b/webapp/src/main.js
index b5a5ce4f..c60a7563 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -80,7 +80,7 @@ Vue.mixin({
       );
       return url;
     },
-    modalConfirm: function(modalText) {
+    modalConfirm: function (modalText) {
       var context = this;
 
       // Stop GPU preview to show modal
@@ -89,18 +89,18 @@ Vue.mixin({
       // force OK to be capitalised
       UIkit.modal.i18n = { ok: "OK", cancel: "Cancel" };
 
-      var showModal = function(resolve, reject) {
+      var showModal = function (resolve, reject) {
         UIkit.modal
           .confirm(modalText, { stack: true })
           .then(
-            function() {
+            function () {
               resolve();
             },
-            function() {
+            function () {
               reject();
             },
           )
-          .finally(function() {
+          .finally(function () {
             // Re-enable the GPU preview, if it was active before the modal
             if (context.$store.state.autoGpuPreview) {
               context.$root.$emit("globalTogglePreview", true);
@@ -111,14 +111,14 @@ Vue.mixin({
       return new Promise(showModal);
     },
 
-    modalNotify: function(message, status = "success") {
+    modalNotify: function (message, status = "success") {
       UIkit.notification({
         message: message,
         status: status,
       });
     },
 
-    modalDialog: function(title, message) {
+    modalDialog: function (title, message) {
       UIkit.modal.dialog(
         `
         <button class="uk-modal-close-default" type="button" uk-close></button>
@@ -133,7 +133,7 @@ Vue.mixin({
       );
     },
 
-    modalError: function(error) {
+    modalError: function (error) {
       var errormsg = this.getErrorMessage(error);
       this.$store.commit("setErrorMessage", errormsg);
       UIkit.notification({
@@ -142,7 +142,7 @@ Vue.mixin({
       });
     },
 
-    getErrorMessage: function(error) {
+    getErrorMessage: function (error) {
       // Format the error.
       let data = this.getErrorData(error);
       // Get error data may get an object. Handle edge cases and if not try to use
@@ -156,7 +156,7 @@ Vue.mixin({
         return String(data);
       }
     },
-    getErrorData: function(error) {
+    getErrorData: function (error) {
       // If a response was obtained, extract the most specific message
       if (error.response) {
         // If the response is a nicely formatted JSON response from the server
@@ -182,15 +182,15 @@ Vue.mixin({
       return error;
     },
 
-    showModalElement: function(element) {
+    showModalElement: function (element) {
       UIkit.modal(element).show();
     },
 
-    hideModalElement: function(element) {
+    hideModalElement: function (element) {
       UIkit.modal(element).hide();
     },
 
-    toggleModalElement: function(element) {
+    toggleModalElement: function (element) {
       UIkit.modal(element).toggle();
     },
   },
@@ -198,5 +198,5 @@ Vue.mixin({
 
 new Vue({
   store,
-  render: h => h(App),
+  render: (h) => h(App),
 }).$mount("#app");
diff --git a/webapp/src/store.js b/webapp/src/store.js
index 444a7c1c..625e376b 100644
--- a/webapp/src/store.js
+++ b/webapp/src/store.js
@@ -146,14 +146,14 @@ export default new Vuex.Store({
   actions: {},
 
   getters: {
-    baseUri: state => state.origin,
-    ready: state => state.available,
+    baseUri: (state) => state.origin,
+    ready: (state) => state.available,
   },
 
   plugins: [
-    store => {
+    (store) => {
       // Load initial state from localStorage
-      LOCALSTORAGE_KEYS.forEach(key => {
+      LOCALSTORAGE_KEYS.forEach((key) => {
         console.log(key);
         const saved = localStorage.getItem(key);
         if (saved !== null) {
diff --git a/webapp/src/wot-client.js b/webapp/src/wot-client.js
index 53c2c812..ab717ee9 100644
--- a/webapp/src/wot-client.js
+++ b/webapp/src/wot-client.js
@@ -28,12 +28,7 @@ export const wotStoreModule = {
       // Deduplication should be done elsewhere.
       let response = await axios.get(uri);
       let td = response.data;
-      let thing_name =
-        name |
-        uri
-          .replace(/\/$/, "")
-          .split("/")
-          .pop();
+      let thing_name = name | uri.replace(/\/$/, "").split("/").pop();
       commit("addThingDescription", {
         thingName: thing_name,
         thingDescription: td,
@@ -53,38 +48,40 @@ export const wotStoreModule = {
     },
   },
   getters: {
-    thingDescriptions: state => {
+    thingDescriptions: (state) => {
       return state.thingDescriptions;
     },
-    thingDescription: state => thingName => {
+    thingDescription: (state) => (thingName) => {
       return state.thingDescriptions[thingName];
     },
-    thingAvailable: state => thingName => {
+    thingAvailable: (state) => (thingName) => {
       return thingName in state.thingDescriptions;
     },
-    thingFormUrl: state => (thing, affordanceType, affordance, op, allowUndefined = true) => {
-      // Find the URL for a particular operation
-      let td = state.thingDescriptions[thing];
-      if (!td) {
-        if (allowUndefined) return undefined;
-        throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
-      }
-      let affordances = td[affordanceType];
-      let href = findFormHref(affordances[affordance], op);
-      if (href == undefined) {
-        if (allowUndefined) return undefined;
-        throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
-      }
-      // If we've found an href, prepend the `base` URL if appropriate
-      if (href.startsWith("http")) return href;
-      if ("base" in td) {
-        let base = td.base;
-        if (href.startsWith("/")) href = href.slice(1);
-        if (!base.endsWith("/")) base += "/";
-        return base + href;
-      }
-      return href;
-    },
+    thingFormUrl:
+      (state) =>
+      (thing, affordanceType, affordance, op, allowUndefined = true) => {
+        // Find the URL for a particular operation
+        let td = state.thingDescriptions[thing];
+        if (!td) {
+          if (allowUndefined) return undefined;
+          throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
+        }
+        let affordances = td[affordanceType];
+        let href = findFormHref(affordances[affordance], op);
+        if (href == undefined) {
+          if (allowUndefined) return undefined;
+          throw `Could not find form for ${affordanceType} ${thing}/${affordance} with op ${op}`;
+        }
+        // If we've found an href, prepend the `base` URL if appropriate
+        if (href.startsWith("http")) return href;
+        if ("base" in td) {
+          let base = td.base;
+          if (href.startsWith("/")) href = href.slice(1);
+          if (!base.endsWith("/")) base += "/";
+          return base + href;
+        }
+        return href;
+      },
     thingPropertyUrl: (_state, getters) => (thing, property, op, allowUndefined) => {
       // Find the URL for a particular property
       return getters.thingFormUrl(thing, "properties", property, op, allowUndefined);
@@ -100,7 +97,7 @@ export function findFormHref(affordance, op) {
   // Find the form in the affordance that matches the given operation type
   if (affordance == undefined) return undefined;
   let forms = affordance.forms;
-  let matchingForm = forms.find(f => f.op == op || f.op.includes(op));
+  let matchingForm = forms.find((f) => f.op == op || f.op.includes(op));
   if (matchingForm == undefined) return undefined;
   return matchingForm.href;
 }