Devex: Faster linting

eslint.config.js → eslint.config.ts

@@ -5,13 +5,14 @@ import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
 import storybook from 'eslint-plugin-storybook'
 import unusedImports from 'eslint-plugin-unused-imports'
 import pluginVue from 'eslint-plugin-vue'
+import { defineConfig } from 'eslint/config'
 import globals from 'globals'
 import tseslint from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
 
-export default [
-  {
-    files: ['src/**/*.{js,mjs,cjs,ts,vue}']
-  },
+const extraFileExtensions = ['.vue']
+
+export default defineConfig([
   {
     ignores: [
       'src/scripts/*',
@@ -24,35 +25,49 @@ export default [
     ]
   },
   {
+    files: ['./**/*.{ts,mts}'],
     languageOptions: {
       globals: {
         ...globals.browser,
         __COMFYUI_FRONTEND_VERSION__: 'readonly'
       },
-      parser: tseslint.parser,
       parserOptions: {
-        project: ['./tsconfig.json', './tsconfig.eslint.json'],
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
         ecmaVersion: 2020,
         sourceType: 'module',
-        extraFileExtensions: ['.vue']
+        extraFileExtensions
       }
     }
   },
-  pluginJs.configs.recommended,
-  ...tseslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
-  eslintPluginPrettierRecommended,
   {
-    files: ['src/**/*.vue'],
+    files: ['./**/*.vue'],
     languageOptions: {
+      globals: {
+        ...globals.browser,
+        __COMFYUI_FRONTEND_VERSION__: 'readonly'
+      },
+      parser: vueParser,
       parserOptions: {
-        parser: tseslint.parser
+        parser: tseslint.parser,
+        projectService: true,
+        tsConfigRootDir: import.meta.dirname,
+        ecmaVersion: 2020,
+        sourceType: 'module',
+        extraFileExtensions
       }
     }
   },
+  pluginJs.configs.recommended,
+  tseslint.configs.recommended,
+  pluginVue.configs['flat/recommended'],
+  eslintPluginPrettierRecommended,
+  storybook.configs['flat/recommended'],
   {
     plugins: {
       'unused-imports': unusedImports,
+      // @ts-expect-error Bad types in the plugin
       '@intlify/vue-i18n': pluginI18n
     },
     rules: {
@@ -67,6 +82,7 @@ export default [
       'vue/multi-word-component-names': 'off', // TODO: fix
       'vue/no-template-shadow': 'off', // TODO: fix
       'vue/one-component-per-file': 'off', // TODO: fix
+      'vue/require-default-prop': 'off', // TODO: fix -- this one is very worthwhile
       // Restrict deprecated PrimeVue components
       'no-restricted-imports': [
         'error',
@@ -135,6 +151,5 @@ export default [
         }
       ]
     }
-  },
-  ...storybook.configs['flat/recommended']
-]
+  }
+])

lint-staged.config.js

@@ -3,13 +3,13 @@ export default {
 
   './**/*.{ts,tsx,vue,mts}': (stagedFiles) => [
     ...formatAndEslint(stagedFiles),
-    'vue-tsc --noEmit'
+    'pnpm typecheck'
   ]
 }
 
 function formatAndEslint(fileNames) {
   return [
-    `eslint --fix ${fileNames.join(' ')}`,
-    `prettier --write ${fileNames.join(' ')}`
+    `pnpm exec eslint --cache --fix ${fileNames.join(' ')}`,
+    `pnpm exec prettier --cache --write ${fileNames.join(' ')}`
   ]
 }

package.json

@@ -38,10 +38,10 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@eslint/js": "^9.8.0",
+    "@eslint/js": "^9.35.0",
     "@iconify-json/lucide": "^1.2.66",
     "@iconify/tailwind": "^1.2.0",
-    "@intlify/eslint-plugin-vue-i18n": "^3.2.0",
+    "@intlify/eslint-plugin-vue-i18n": "^4.1.0",
     "@lobehub/i18n-cli": "^1.25.1",
     "@nx/eslint": "21.4.1",
     "@nx/playwright": "21.4.1",
@@ -64,11 +64,11 @@
     "@vitest/ui": "^3.0.0",
     "@vue/test-utils": "^2.4.6",
     "eslint": "^9.34.0",
-    "eslint-config-prettier": "^10.1.2",
-    "eslint-plugin-prettier": "^5.2.6",
-    "eslint-plugin-storybook": "^9.1.1",
-    "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-vue": "^9.27.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "eslint-plugin-storybook": "^9.1.6",
+    "eslint-plugin-unused-imports": "^4.2.0",
+    "eslint-plugin-vue": "^10.4.0",
     "fs-extra": "^11.2.0",
     "globals": "^15.9.0",
     "happy-dom": "^15.11.0",
@@ -79,13 +79,13 @@
     "lint-staged": "^15.2.7",
     "nx": "21.4.1",
     "prettier": "^3.3.2",
-    "storybook": "^9.1.1",
+    "storybook": "^9.1.6",
     "tailwindcss": "^4.1.12",
     "tailwindcss-primeui": "^0.6.1",
     "tsx": "^4.15.6",
     "tw-animate-css": "^1.3.8",
     "typescript": "^5.4.5",
-    "typescript-eslint": "^8.42.0",
+    "typescript-eslint": "^8.44.0",
     "unplugin-icons": "^0.22.0",
     "unplugin-vue-components": "^0.28.0",
     "uuid": "^11.1.0",
@@ -94,7 +94,8 @@
     "vite-plugin-html": "^3.2.2",
     "vite-plugin-vue-devtools": "^7.7.6",
     "vitest": "^3.2.4",
-    "vue-tsc": "^2.1.10",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-tsc": "^3.0.7",
     "zip-dir": "^2.0.0",
     "zod-to-json-schema": "^3.24.1"
   },