Fix web code linting to be portable across environments

client/web/src/App.vue

@@ -3,7 +3,9 @@
 </template>
 
 <style lang="scss">
-html, body, #app {
+html,
+body,
+#app {
 	margin: 0;
 	height: 100%;
 	font-family: "Source Sans Pro", Arial, sans-serif;

client/web/src/components/panel-system/DockablePanel.vue

@@ -3,7 +3,7 @@
 		<div class="tab-bar" :class="{ 'min-widths': tabMinWidths }">
 			<div class="tab-group">
 				<div class="tab" :class="{ active: tabIndex === tabActiveIndex }" v-for="(tabLabel, tabIndex) in tabLabels" :key="tabLabel">
-					<span>{{tabLabel}}</span>
+					<span>{{ tabLabel }}</span>
 					<IconButton :size="16" v-if="tabCloseButtons">
 						<CloseX />
 					</IconButton>
@@ -54,7 +54,8 @@
 					border-radius: 8px 8px 0 0;
 					position: relative;
 
-					&::before, &::after {
+					&::before,
+					&::after {
 						content: "";
 						width: 16px;
 						height: 8px;

client/web/src/components/panel-system/PanelArea.vue

@@ -1,10 +1,16 @@
 <template>
 	<LayoutRow class="dockable-grid-subdivision">
-		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597;">
-			<DockablePanel :panelType="'Document'" :tabCloseButtons="true" :tabMinWidths="true" :tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']" :tabActiveIndex="0" />
+		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 1597">
+			<DockablePanel
+				:panelType="'Document'"
+				:tabCloseButtons="true"
+				:tabMinWidths="true"
+				:tabLabels="['X-35B Over Death Valley*', 'Document 2', 'Document 3', 'Document 4', 'Document 5']"
+				:tabActiveIndex="0"
+			/>
 		</LayoutCol>
 		<LayoutCol class="dockable-grid-resize-gutter"></LayoutCol>
-		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319;">
+		<LayoutCol class="dockable-grid-subdivision" style="flex-grow: 319">
 			<LayoutRow class="dockable-grid-subdivision">
 				<DockablePanel :panelType="'Properties'" :tabLabels="['Properties', 'Spreadsheet', 'Palettes']" :tabActiveIndex="0" />
 			</LayoutRow>
@@ -13,7 +19,7 @@
 				<DockablePanel :panelType="'LayerTree'" :tabLabels="['Layer Tree']" :tabActiveIndex="0" />
 			</LayoutRow>
 			<LayoutRow class="dockable-grid-resize-gutter"></LayoutRow>
-			<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0;">
+			<LayoutRow class="dockable-grid-subdivision" style="flex-grow: 0; height: 0">
 				<DockablePanel :panelType="'Minimap'" :tabLabels="['Minimap', 'Asset Manager']" :tabActiveIndex="0" />
 			</LayoutRow>
 		</LayoutCol>

client/web/src/components/panels/Document.vue

@@ -83,14 +83,8 @@
 				<div class="spacer"></div>
 				<div class="working-colors">
 					<div class="swatch-pair">
-						<button
-							class="secondary swatch"
-							style="background: white;"
-						></button>
-						<button
-							class="primary swatch"
-							style="background: black;"
-						></button>
+						<button class="secondary swatch" style="background: white"></button>
+						<button class="primary swatch" style="background: black"></button>
 					</div>
 					<div class="swap-and-reset">
 						<IconButton :size="16">
@@ -103,12 +97,7 @@
 				</div>
 			</LayoutCol>
 			<LayoutCol :class="'viewport'">
-				<div
-					class="canvas"
-					@mousedown="canvasMouseDown"
-					@mouseup="canvasMouseUp"
-					@mousemove="canvasMouseMove"
-				>
+				<div class="canvas" @mousedown="canvasMouseDown" @mouseup="canvasMouseUp" @mousemove="canvasMouseMove">
 					<svg v-html="viewportSvg"></svg>
 				</div>
 			</LayoutCol>
@@ -195,7 +184,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { registerResponseHandler, ResponseType } from "../../response-handler";
+import { ResponseType, registerResponseHandler } from "../../response-handler";
 import LayoutRow from "../layout/LayoutRow.vue";
 import LayoutCol from "../layout/LayoutCol.vue";
 import ShelfItem from "../widgets/ShelfItem.vue";
@@ -328,13 +317,18 @@ export default defineComponent({
 			select_tool(toolName);
 		},
 		async viewModeChanged(toolIndex: number) {
-			function todo(_: number) { return _; }
+			function todo(_: number) {
+				return _;
+			}
 			todo(toolIndex);
 		},
 	},
 	mounted() {
 		registerResponseHandler(ResponseType.UpdateCanvas, (responseData) => {
-			this.viewportSvg = responseData.split("\n").map((shape, i) => shape.replace("#fff", `#${Math.floor(Math.abs(Math.sin(i + 1)) * 16777215).toString(16)}`)).join("\n");
+			this.viewportSvg = responseData
+				.split("\n")
+				.map((shape, i) => shape.replace("#fff", `#${Math.floor(Math.abs(Math.sin(i + 1)) * 16777215).toString(16)}`))
+				.join("\n");
 		});
 		registerResponseHandler(ResponseType.SetActiveTool, (responseData) => {
 			this.activeTool = responseData;

client/web/src/components/panels/LayerTree.vue

@@ -1,19 +1,14 @@
 <template>
-	<div>
-	</div>
+	<div></div>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
-	props: {
-	},
+	components: {},
+	props: {},
 });
 </script>

client/web/src/components/panels/Minimap.vue

@@ -1,19 +1,14 @@
 <template>
-	<div>
-	</div>
+	<div></div>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
-	props: {
-	},
+	components: {},
+	props: {},
 });
 </script>

client/web/src/components/panels/Properties.vue

@@ -1,19 +1,14 @@
 <template>
-	<div>
-	</div>
+	<div></div>
 </template>
 
-<style lang="scss">
-
-</style>
+<style lang="scss"></style>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
-	props: {
-	},
+	components: {},
+	props: {},
 });
 </script>

client/web/src/components/widgets/ItemDivider.vue

@@ -42,8 +42,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
+	components: {},
 	props: {
 		horizontal: { type: Boolean, default: false },
 	},

client/web/src/components/widgets/NumberInput.vue

@@ -78,7 +78,6 @@
 			}
 		}
 	}
-
 }
 </style>
 
@@ -86,9 +85,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
-	props: {
-	},
+	components: {},
+	props: {},
 });
 </script>

client/web/src/components/widgets/RadioPicker.vue

@@ -44,8 +44,7 @@
 import { defineComponent } from "vue";
 
 export default defineComponent({
-	components: {
-	},
+	components: {},
 	props: {
 		initialIndex: { type: Number, required: true },
 		setIndex: { type: Function, required: false },
@@ -66,7 +65,9 @@ export default defineComponent({
 		});
 	},
 	watch: {
-		activeIndex() { this.updateActiveIconButton(); },
+		activeIndex() {
+			this.updateActiveIconButton();
+		},
 	},
 	methods: {
 		// This method may be called by the user of this component by setting a `ref="radioPicker"` attribute and calling `(this.$refs.viewModePicker as typeof RadioPicker).setActive(...)`

client/web/src/components/window/footer-bar/FooterBar.vue

@@ -69,5 +69,4 @@ export default defineComponent({
 		InputHint,
 	},
 });
-
 </script>

client/web/src/components/window/footer-bar/InputHint.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="input-hint">
 		<span class="input-key" v-for="inputKey in inputKeys" :key="inputKey" :class="keyCapWidth(inputKey)">
-			{{inputKey}}
+			{{ inputKey }}
 		</span>
 		<span class="input-mouse" v-if="inputMouse">
 			<MouseHintNone v-if="inputMouse === MouseInputInteraction.None" width="16" height="16" />
@@ -29,7 +29,8 @@
 	align-items: center;
 	white-space: nowrap;
 
-	.input-key, .input-mouse {
+	.input-key,
+	.input-mouse {
 		margin-right: 4px;
 	}
 

client/web/src/components/window/title-bar/WindowTitle.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="window-title">
-		<span>{{title}}</span>
+		<span>{{ title }}</span>
 	</div>
 </template>
 

client/web/src/response-handler.ts

@@ -3,7 +3,9 @@ type ResponseMap = {
 	[response: string]: ResponseCallback | undefined;
 };
 declare global {
-	interface Window { responseMap: ResponseMap }
+	interface Window {
+		responseMap: ResponseMap;
+	}
 }
 
 export enum ResponseType {

client/web/src/types.d.ts

@@ -1,12 +1,9 @@
 declare module "*.vue" {
-	import type { DefineComponent, DefineComponent } from "vue";
-
 	const component: DefineComponent;
 	export default component;
 }
 
 declare module "*.svg" {
-
 	const component: DefineComponent;
 	export default component;
 }