Add more linting rules (#2406)

As a precursor to #2394, add a bunch of linting rules to try and catch more mistakes/potential code errors/unnecessary code. Add a bunch of rules from https://eslint.vuejs.org/rules/ in the "uncategorized" section that seem useful to have.
2026-06-19 00:41:41 +00:00 · 2026-03-23 18:41:11 -04:00
parent d4bfe643d5
commit 7b240a027a
16 changed files with 59 additions and 39 deletions
--- a/photon-client/eslint.config.mjs
+++ b/photon-client/eslint.config.mjs
@@ -4,7 +4,7 @@ import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescri
 import skipFormattingConfig from "@vue/eslint-config-prettier/skip-formatting";

 export default defineConfigWithVueTs(
-  pluginVue.configs["flat/recommended"],
+  pluginVue.configs["flat/recommended-error"],
  vueTsConfigs.recommended,
  skipFormattingConfig,
  {
@@ -26,10 +26,24 @@ export default defineConfigWithVueTs(

      semi: ["error", "always"],
      "eol-last": "error",
+      eqeqeq: "error",
+      "no-useless-concat": "error",
      "object-curly-spacing": ["error", "always"],
      "quote-props": ["error", "as-needed"],
      "no-case-declarations": "off",
+      "vue/eqeqeq": "error",
+      "vue/no-useless-concat": "error",
+      "vue/no-constant-condition": "error",
+      "vue/no-empty-pattern": "error",
+      "vue/no-undef-directives": "error",
+      "vue/no-undef-properties": "error",
+      "vue/no-unused-properties": "error",
+      "vue/no-unused-refs": "error",
+      "vue/no-use-v-else-with-v-for": "error",
+      "vue/no-useless-mustaches": "error",
+      "vue/no-useless-v-bind": "error",
      "vue/require-default-prop": "off",
+      "vue/v-for-delimiter-style": "error",
      "vue/v-on-event-hyphenation": "off",
      "@typescript-eslint/no-explicit-any": "off",
      "vue/valid-v-slot": ["error", { allowModifiers: true }]
--- a/photon-client/package.json
+++ b/photon-client/package.json
@@ -41,7 +41,7 @@
    "@vue/eslint-config-typescript": "^14.5.0",
    "@vue/tsconfig": "^0.7.0",
    "eslint": "^9.31.0",
-    "eslint-plugin-vue": "^10.3.0",
+    "eslint-plugin-vue": "^10.7.0",
    "prettier": "^3.6.2",
    "sass": "^1.89.2",
    "typescript": "^5.8.3",
--- a/photon-client/playwright.config.ts
+++ b/photon-client/playwright.config.ts
@@ -74,7 +74,7 @@ export default defineConfig({

  /* Run your local dev server before starting the tests */
  webServer: {
-    command: process.platform == "win32" ? "" : "./" + "gradlew run",
+    command: process.platform === "win32" ? "" : "./gradlew run",
    url: "http://localhost:5800",
    timeout: 300 * 1000,
    reuseExistingServer: !process.env.CI,
--- a/photon-client/pnpm-lock.yaml
+++ b/photon-client/pnpm-lock.yaml
@@ -65,7 +65,7 @@ importers:
        version: 10.2.0(eslint@9.31.0)(prettier@3.6.2)
      '@vue/eslint-config-typescript':
        specifier: ^14.5.0
-        version: 14.5.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)))(eslint@9.31.0)(typescript@5.8.3)
+        version: 14.5.0(eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)))(eslint@9.31.0)(typescript@5.8.3)
      '@vue/tsconfig':
        specifier: ^0.7.0
        version: 0.7.0(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))
@@ -73,8 +73,8 @@ importers:
        specifier: ^9.31.0
        version: 9.31.0
      eslint-plugin-vue:
-        specifier: ^10.3.0
-        version: 10.3.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0))
+        specifier: ^10.7.0
+        version: 10.8.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0))
      prettier:
        specifier: ^3.6.2
        version: 3.6.2
@@ -903,14 +903,17 @@ packages:
      eslint-config-prettier:
        optional: true

-  eslint-plugin-vue@10.3.0:
-    resolution: {integrity: sha512-A0u9snqjCfYaPnqqOaH6MBLVWDUIN4trXn8J3x67uDcXvR7X6Ut8p16N+nYhMCQ9Y7edg2BIRGzfyZsY0IdqoQ==}
+  eslint-plugin-vue@10.8.0:
+    resolution: {integrity: sha512-f1J/tcbnrpgC8suPN5AtdJ5MQjuXbSU9pGRSSYAuF3SHoiYCOdEX6O22pLaRyLHXvDcOe+O5ENgc1owQ587agA==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
    peerDependencies:
+      '@stylistic/eslint-plugin': ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
      '@typescript-eslint/parser': ^7.0.0 || ^8.0.0
-      eslint: ^8.57.0 || ^9.0.0
+      eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
      vue-eslint-parser: ^10.0.0
    peerDependenciesMeta:
+      '@stylistic/eslint-plugin':
+        optional: true
      '@typescript-eslint/parser':
        optional: true

@@ -1276,8 +1279,8 @@ packages:
    engines: {node: '>=18'}
    hasBin: true

-  postcss-selector-parser@6.1.2:
-    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
+  postcss-selector-parser@7.1.1:
+    resolution: {integrity: sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==}
    engines: {node: '>=4'}

  postcss@8.5.3:
@@ -2032,11 +2035,11 @@ snapshots:
    transitivePeerDependencies:
      - '@types/eslint'

-  '@vue/eslint-config-typescript@14.5.0(eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)))(eslint@9.31.0)(typescript@5.8.3)':
+  '@vue/eslint-config-typescript@14.5.0(eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)))(eslint@9.31.0)(typescript@5.8.3)':
    dependencies:
      '@typescript-eslint/utils': 8.32.0(eslint@9.31.0)(typescript@5.8.3)
      eslint: 9.31.0
-      eslint-plugin-vue: 10.3.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0))
+      eslint-plugin-vue: 10.8.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0))
      fast-glob: 3.3.3
      typescript-eslint: 8.32.0(eslint@9.31.0)(typescript@5.8.3)
      vue-eslint-parser: 10.1.3(eslint@9.31.0)
@@ -2074,7 +2077,7 @@ snapshots:
      typescript: 5.8.3
      vue: 3.5.13(typescript@5.8.3)

-  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3)))':
+  '@vuetify/loader-shared@2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3)':
    dependencies:
      upath: 2.0.1
      vue: 3.5.13(typescript@5.8.3)
@@ -2292,13 +2295,13 @@ snapshots:
    optionalDependencies:
      eslint-config-prettier: 10.1.2(eslint@9.31.0)

-  eslint-plugin-vue@10.3.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)):
+  eslint-plugin-vue@10.8.0(@typescript-eslint/parser@8.32.0(eslint@9.31.0)(typescript@5.8.3))(eslint@9.31.0)(vue-eslint-parser@10.1.3(eslint@9.31.0)):
    dependencies:
      '@eslint-community/eslint-utils': 4.7.0(eslint@9.31.0)
      eslint: 9.31.0
      natural-compare: 1.4.0
      nth-check: 2.1.1
-      postcss-selector-parser: 6.1.2
+      postcss-selector-parser: 7.1.1
      semver: 7.7.1
      vue-eslint-parser: 10.1.3(eslint@9.31.0)
      xml-name-validator: 4.0.0
@@ -2660,7 +2663,7 @@ snapshots:
    optionalDependencies:
      fsevents: 2.3.2

-  postcss-selector-parser@6.1.2:
+  postcss-selector-parser@7.1.1:
    dependencies:
      cssesc: 3.0.0
      util-deprecate: 1.0.2
@@ -2838,7 +2841,7 @@ snapshots:

  vite-plugin-vuetify@2.1.1(vite@7.0.5(@types/node@22.15.14)(sass@1.89.2))(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3):
    dependencies:
-      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3(typescript@5.8.3)(vite-plugin-vuetify@2.1.1)(vue@3.5.13(typescript@5.8.3)))
+      '@vuetify/loader-shared': 2.1.0(vue@3.5.13(typescript@5.8.3))(vuetify@3.8.3)
      debug: 4.4.0
      upath: 2.0.1
      vite: 7.0.5(@types/node@22.15.14)(sass@1.89.2)
--- a/photon-client/src/components/app/photon-camera-stream.vue
+++ b/photon-client/src/components/app/photon-camera-stream.vue
@@ -50,7 +50,7 @@ const containerStyle = computed<StyleValue>(() => {
 });

 const overlayStyle = computed<StyleValue>(() => {
-  if (useStateStore().colorPickingMode || streamSrc.value == emptyStreamSrc) {
+  if (useStateStore().colorPickingMode || streamSrc.value === emptyStreamSrc) {
    return { display: "none" };
  } else {
    return {};
--- a/photon-client/src/components/app/photon-error-snackbar.vue
+++ b/photon-client/src/components/app/photon-error-snackbar.vue
@@ -14,7 +14,7 @@ import { useStateStore } from "@/stores/StateStore";
      {{ useStateStore().snackbarData.message }}
    </p>
    <v-progress-linear
-      v-if="useStateStore().snackbarData.progressBar != -1"
+      v-if="useStateStore().snackbarData.progressBar !== -1"
      v-model="useStateStore().snackbarData.progressBar"
      height="15"
      :color="useStateStore().snackbarData.progressBarColor"
--- a/photon-client/src/components/app/photon-sidebar.vue
+++ b/photon-client/src/components/app/photon-sidebar.vue
@@ -38,7 +38,7 @@ const renderCompact = computed<boolean>(() => compact.value || !mdAndUp.value);
      <v-list-item link to="/settings" prepend-icon="mdi-cog">
        <v-list-item-title>Settings</v-list-item-title>
      </v-list-item>
-      <v-list-item ref="camerasTabOpener" link to="/cameras" prepend-icon="mdi-camera">
+      <v-list-item link to="/cameras" prepend-icon="mdi-camera">
        <v-list-item-title>Camera</v-list-item-title>
      </v-list-item>
      <v-list-item
--- a/photon-client/src/components/cameras/CameraCalibrationCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationCard.vue
@@ -28,7 +28,7 @@ const getUniqueVideoFormatsByResolution = (): VideoFormat[] => {
  if (useCameraSettingsStore().currentCameraSettings.validVideoFormats.length === 0) return uniqueResolutions;
  useCameraSettingsStore().currentCameraSettings.validVideoFormats.forEach((format) => {
    const index = uniqueResolutions.findIndex((v) => resolutionsAreEqual(v.resolution, format.resolution));
-    const contains = index != -1;
+    const contains = index !== -1;
    let skip = false;
    if (contains && format.fps > uniqueResolutions[index].fps) {
      uniqueResolutions.splice(index, 1);
@@ -132,7 +132,7 @@ const downloadCalibBoard = async () => {
          const yPos = chessboardStartY + squareY * squareSizeIn.value;

          // Only draw the odd squares to create the chessboard pattern
-          if (squareY % 2 != squareX % 2) {
+          if (squareY % 2 !== squareX % 2) {
            doc.rect(xPos, yPos, squareSizeIn.value, squareSizeIn.value, "F");
          }
        }
@@ -293,7 +293,7 @@ const setSelectedVideoFormat = (format: VideoFormat) => {
          <v-card-subtitle v-if="!isCalibrating" class="pl-0 pb-3 pt-4 opacity-100"
            >Configure New Calibration</v-card-subtitle
          >
-          <v-form ref="form" v-model="settingsValid">
+          <v-form v-model="settingsValid">
            <pv-select
              v-model="uniqueVideoResolutionString"
              label="Resolution"
--- a/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
+++ b/photon-client/src/components/cameras/CameraCalibrationInfoCard.vue
@@ -40,8 +40,8 @@ const importCalibration = async () => {
  const data = await parseJsonFile<CameraCalibrationResult>(uploadedJson);

  if (
-    data.resolution.height != props.videoFormat.resolution.height ||
-    data.resolution.width != props.videoFormat.resolution.width
+    data.resolution.height !== props.videoFormat.resolution.height ||
+    data.resolution.width !== props.videoFormat.resolution.width
  ) {
    useStateStore().showSnackbarMessage({
      color: "error",
@@ -341,7 +341,7 @@ const viewingImg = ref(0);
  <pv-delete-modal
    v-model="confirmRemoveDialog.show"
    :width="500"
-    :title="'Delete Calibration'"
+    title="Delete Calibration"
    :description="`Are you sure you want to delete the calibration for '${confirmRemoveDialog.vf.resolution.width}x${confirmRemoveDialog.vf.resolution.height}'? This action cannot be undone.`"
    :on-confirm="() => removeCalibration(confirmRemoveDialog.vf)"
  />
--- a/photon-client/src/components/cameras/CameraSettingsCard.vue
+++ b/photon-client/src/components/cameras/CameraSettingsCard.vue
@@ -66,10 +66,10 @@ const settingsHaveChanged = (): boolean => {
  const b = useCameraSettingsStore().currentCameraSettings;

  for (const q in ValidQuirks) {
-    if (a.quirksToChange[q] != b.cameraQuirks.quirks[q]) return true;
+    if (a.quirksToChange[q] !== b.cameraQuirks.quirks[q]) return true;
  }

-  return a.fov != b.fov.value;
+  return a.fov !== b.fov.value;
 };

 const resetTempSettingsStruct = () => {
--- a/photon-client/src/components/dashboard/ConfigOptions.vue
+++ b/photon-client/src/components/dashboard/ConfigOptions.vue
@@ -129,7 +129,7 @@ const onBeforeTabUpdate = () => {
      <v-col
        v-for="(tabGroupData, tabGroupIndex) in tabGroups"
        :key="tabGroupIndex"
-        :cols="tabGroupIndex == 1 && useCameraSettingsStore().currentPipelineSettings.doMultiTarget ? 7 : ''"
+        :cols="tabGroupIndex === 1 && useCameraSettingsStore().currentPipelineSettings.doMultiTarget ? 7 : ''"
        :class="tabGroupIndex !== tabGroups.length - 1 && 'pr-3'"
        @vue:before-update="onBeforeTabUpdate"
      >
--- a/photon-client/src/components/dashboard/StreamConfigCard.vue
+++ b/photon-client/src/components/dashboard/StreamConfigCard.vue
@@ -48,8 +48,8 @@ const processingMode = computed<number>({
            :disabled="
              !useCameraSettingsStore().hasConnected ||
              !useCameraSettingsStore().isCurrentVideoFormatCalibrated ||
-              useCameraSettingsStore().currentPipelineSettings.pipelineType == PipelineType.ObjectDetection ||
-              useCameraSettingsStore().currentPipelineSettings.pipelineType == PipelineType.ColoredShape
+              useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ObjectDetection ||
+              useCameraSettingsStore().currentPipelineSettings.pipelineType === PipelineType.ColoredShape
            "
            :variant="theme.global.name.value === 'LightTheme' ? 'elevated' : 'outlined'"
            class="w-50"
--- a/photon-client/src/components/settings/DeviceCard.vue
+++ b/photon-client/src/components/settings/DeviceCard.vue
@@ -453,7 +453,7 @@ watch(metricsHistorySnapshot, () => {
        <v-card-text class="pt-0 flex-0-0 pb-2">
          <div class="d-flex justify-space-between pb-3 pt-3">
            <span>CPU Temperature</span>
-            <span>{{ cpuTempData.at(-1)?.value == -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
+            <span>{{ cpuTempData.at(-1)?.value === -1 ? "--- " : Math.round(cpuTempData.at(-1)?.value ?? 0) }}°C</span>
          </div>
          <Suspense>
            <!-- Allows us to import echarts when it's actually needed  -->
@@ -470,7 +470,10 @@ watch(metricsHistorySnapshot, () => {
              tooltip="Measured rate for this coprocessor ONLY. This FMS limit is for ALL robot communication. If you are experiencing bandwidth issues while under this limit, check other sources."
            />
            <span
-              >{{ networkUsageData.at(-1)?.value == -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3) }} Mb/s</span
+              >{{
+                networkUsageData.at(-1)?.value === -1 ? "---" : networkUsageData.at(-1)?.value.toFixed(3)
+              }}
+              Mb/s</span
            >
          </div>
          <Suspense>
--- a/photon-client/src/components/settings/GlobalSettingsCard.vue
+++ b/photon-client/src/components/settings/GlobalSettingsCard.vue
@@ -185,7 +185,7 @@ watchEffect(() => {
    </v-card-title>
    <div class="pa-5 pt-0">
      <v-card-title class="pl-0 pt-0 pb-10px">Networking</v-card-title>
-      <v-form ref="form" v-model="settingsValid">
+      <v-form v-model="settingsValid">
        <pv-input
          v-model="tempSettingsStruct.ntServerAddress"
          label="Team Number/NetworkTables Server Address"
--- a/photon-client/src/components/settings/ObjectDetectionCard.vue
+++ b/photon-client/src/components/settings/ObjectDetectionCard.vue
@@ -446,8 +446,8 @@ const handleBulkImport = async () => {
      :on-backup="openExportPrompt"
      :on-confirm="nukeModels"
      title="Delete and Reset All Object Detection Models"
-      :description="'This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone.'"
-      :expected-confirmation-text="'Delete Models'"
+      description="This will delete ALL object detection models and re-extract the default object detection models. This action cannot be undone."
+      expected-confirmation-text="Delete Models"
      delete-text="Delete all models"
    />
  </v-card>
--- a/photon-client/src/stores/settings/CameraSettingsStore.ts
+++ b/photon-client/src/stores/settings/CameraSettingsStore.ts
@@ -71,10 +71,10 @@ export const useCameraSettingsStore = defineStore("cameraSettings", {
      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.DriverMode;
    },
    isCalibrationMode(): boolean {
-      return this.currentCameraSettings.currentPipelineIndex == WebsocketPipelineType.Calib3d;
+      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.Calib3d;
    },
    isFocusMode(): boolean {
-      return this.currentCameraSettings.currentPipelineIndex == WebsocketPipelineType.FocusCamera;
+      return this.currentCameraSettings.currentPipelineIndex === WebsocketPipelineType.FocusCamera;
    },
    isCSICamera(): boolean {
      return this.currentCameraSettings.isCSICamera;