fix: respect global ignores when scanning for vue files to lint (#239)

Author: haoqunjiang

pnpm-lock.yaml

@@ -77,7 +77,7 @@ export class TsEslintConfigForVue {
   toConfigArray(): FlatConfig.ConfigArray {
     return toArray(tseslint.configs[this.configName])
       .flat()
-      .map(config => ({
+      .map((config: FlatConfig.Config) => ({
         ...config,
         ...(config.files && config.files.includes('**/*.ts')
           ? { files: [...config.files, '**/*.vue'] }

src/configs.ts

@@ -51,6 +51,8 @@ export default function createConfig({
     rootDir,
   })
   return defineConfigWithVueTs(
-    ...configNamesToExtend.map(name => vueTsConfigs[name as ExtendableConfigName]),
+    ...configNamesToExtend.map(
+      name => vueTsConfigs[name as ExtendableConfigName],
+    ),
   )
 }

src/createConfig.ts

@@ -1,44 +1,55 @@
 // This file is for some generic helper functions that aren't tied to the main functionality of the project.
 
-export function omit<T extends Record<string, any>, K extends keyof T>(obj: T, keys: K[]): Omit<T, K> {
+export function omit<T extends Record<string, any>, K extends keyof T>(
+  obj: T,
+  keys: K[],
+): Omit<T, K> {
   return Object.fromEntries(
-    Object.entries(obj).filter(([key]) => !keys.includes(key as K))
-  ) as Omit<T, K>;
+    Object.entries(obj).filter(([key]) => !keys.includes(key as K)),
+  ) as Omit<T, K>
 }
 
 // https://dev.to/nexxeln/implementing-the-pipe-operator-in-typescript-30ip
 interface Pipe {
-  <A>(value: A): A;
-  <A, B>(value: A, fn1: (input: A) => B): B;
-  <A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C;
+  <A>(value: A): A
+  <A, B>(value: A, fn1: (input: A) => B): B
+  <A, B, C>(value: A, fn1: (input: A) => B, fn2: (input: B) => C): C
   <A, B, C, D>(
     value: A,
     fn1: (input: A) => B,
     fn2: (input: B) => C,
-    fn3: (input: C) => D
-  ): D;
+    fn3: (input: C) => D,
+  ): D
   <A, B, C, D, E>(
     value: A,
     fn1: (input: A) => B,
     fn2: (input: B) => C,
     fn3: (input: C) => D,
-    fn4: (input: D) => E
-  ): E;
+    fn4: (input: D) => E,
+  ): E
   <A, B, C, D, E, F>(
     value: A,
     fn1: (input: A) => B,
     fn2: (input: B) => C,
     fn3: (input: C) => D,
     fn4: (input: D) => E,
-    fn5: (input: E) => F
-  ): F;
+    fn5: (input: E) => F,
+  ): F
+  <A, B, C, D, E, F, G>(
+    value: A,
+    fn1: (input: A) => B,
+    fn2: (input: B) => C,
+    fn3: (input: C) => D,
+    fn4: (input: D) => E,
+    fn5: (input: E) => F,
+    fn6: (input: F) => G,
+  ): G
   // ... and so on
 }
 
 export const pipe: Pipe = (value: any, ...fns: Function[]): unknown => {
-  return fns.reduce((acc, fn) => fn(acc), value);
-};
-
+  return fns.reduce((acc, fn) => fn(acc), value)
+}
 
 export function partition<T>(
   array: T[],

src/fpHelpers.ts

@@ -1,17 +1,39 @@
 import fs from 'node:fs'
 import fg from 'fast-glob'
 import path from 'node:path'
+import { debuglog } from 'node:util'
+
+const debug = debuglog('@vue/eslint-config-typescript:groupVueFiles')
 
 type VueFilesByGroup = {
   typeCheckable: string[]
   nonTypeCheckable: string[]
 }
 
-export default function groupVueFiles(rootDir: string): VueFilesByGroup {
+export default function groupVueFiles(
+  rootDir: string,
+  globalIgnores: string[],
+): VueFilesByGroup {
+  debug(`Grouping .vue files in ${rootDir}`)
+
+  const ignore = [
+    '**/node_modules/**',
+    '**/.git/**',
+
+    // Global ignore patterns from ESLint config are relative to the ESLint base path,
+    // which is usually the cwd, but could be different if `--config` is provided via CLI.
+    // This is way too complicated, so we only use process.cwd() as a best-effort guess here.
+    // Could be improved in the future if needed.
+    ...globalIgnores.map(pattern =>
+      fg.convertPathToPattern(path.resolve(process.cwd(), pattern)),
+    ),
+  ]
+  debug(`Ignoring patterns: ${ignore.join(', ')}`)
+
   const { vueFilesWithScriptTs, otherVueFiles } = fg
     .sync(['**/*.vue'], {
       cwd: rootDir,
-      ignore: ['**/node_modules/**'],
+      ignore,
     })
     .reduce(
       (acc, file) => {

src/groupVueFiles.ts

@@ -1,7 +1,4 @@
-export {
-  defineConfigWithVueTs,
-  configureVueProject,
-} from './utilities'
+export { defineConfigWithVueTs, configureVueProject } from './utilities'
 export { vueTsConfigs } from './configs'
 
 // Compatibility layer for the `createConfig` function in <= 14.2.0

src/index.ts

@@ -1,6 +1,7 @@
 import process from 'node:process'
 import tseslint from 'typescript-eslint'
 import type { TSESLint } from '@typescript-eslint/utils'
+import type { FlatConfig } from '@typescript-eslint/utils/ts-eslint'
 import pluginVue from 'eslint-plugin-vue'
 
 import { TsEslintConfigForVue } from './configs'
@@ -43,16 +44,16 @@ export type ProjectOptions = {
   /**
    * Whether to override some `no-unsafe-*` rules to avoid false positives on Vue component operations.
    * Defaults to `true`.
-   * 
+   *
    * Due to limitations in the integration between Vue and TypeScript-ESLint,
    * TypeScript-ESLint cannot get the full type information for `.vue` files
    * and will use fallback types that contain some `any`s.
    * Therefore, some `no-unsafe-*` rules will error on functions that operate on Vue components,
    * such as `createApp`, `createRouter`, `useTemplateRef`, etc.
-   * 
+   *
    * Setting this option to `true` will override those `no-unsafe-*` rules
    * to allow these patterns in the project.
-   * 
+   *
    * If you're using a metaframework such as Nuxt or Quasar
    * that handles app creation & router configuration for you,
    * you might not need to interact with component types directly.
@@ -82,7 +83,8 @@ export function configureVueProject(userOptions: ProjectOptions): void {
     projectOptions.tsSyntaxInTemplates = userOptions.tsSyntaxInTemplates
   }
   if (userOptions.allowComponentTypeUnsafety !== undefined) {
-    projectOptions.allowComponentTypeUnsafety = userOptions.allowComponentTypeUnsafety
+    projectOptions.allowComponentTypeUnsafety =
+      userOptions.allowComponentTypeUnsafety
   }
   if (userOptions.scriptLangs) {
     projectOptions.scriptLangs = userOptions.scriptLangs
@@ -104,6 +106,7 @@ export function defineConfigWithVueTs(
   return pipe(
     configs,
     flattenConfigs,
+    collectGlobalIgnores,
     deduplicateVuePlugin,
     insertAndReorderConfigs,
     resolveVueTsConfigs,
@@ -165,6 +168,29 @@ function flattenConfigs(
   )
 }
 
+let globalIgnores: string[] = []
+
+/**
+ * Fields that are considered metadata and not part of the config object.
+ */
+const META_FIELDS = new Set(['name', 'basePath'])
+
+function collectGlobalIgnores(configs: RawConfigItem[]): RawConfigItem[] {
+  configs.forEach(config => {
+    if (config instanceof TsEslintConfigForVue) return
+
+    if (!config.ignores) return
+
+    if (Object.keys(config).filter(key => !META_FIELDS.has(key)).length !== 1)
+      return
+
+    // Configs that only contain `ignores` (and possibly `name`/`basePath`) are treated as global ignores
+    globalIgnores.push(...config.ignores)
+  })
+
+  return configs
+}
+
 function resolveVueTsConfigs(configs: RawConfigItem[]): ConfigItem[] {
   return configs.flatMap(config =>
     config instanceof TsEslintConfigForVue ? config.toConfigArray() : config,
@@ -206,7 +232,7 @@ function insertAndReorderConfigs(configs: RawConfigItem[]): RawConfigItem[] {
     return configs
   }
 
-  const vueFiles = groupVueFiles(projectOptions.rootDir)
+  const vueFiles = groupVueFiles(projectOptions.rootDir, globalIgnores)
   const configsWithoutTypeAwareRules = configs.map(extractTypeAwareRules)
 
   const hasTypeAwareConfigs = configs.some(
@@ -233,7 +259,10 @@ function insertAndReorderConfigs(configs: RawConfigItem[]): RawConfigItem[] {
     ...(needsTypeAwareLinting
       ? [
           ...createSkipTypeCheckingConfigs(vueFiles.nonTypeCheckable),
-          ...createTypeCheckingConfigs(vueFiles.typeCheckable, projectOptions.allowComponentTypeUnsafety),
+          ...createTypeCheckingConfigs(
+            vueFiles.typeCheckable,
+            projectOptions.allowComponentTypeUnsafety,
+          ),
         ]
       : []),
 
@@ -269,7 +298,7 @@ function extractTypeAwareRules(config: RawConfigItem): RawConfigItem {
 }
 
 const rulesRequiringTypeInformation = new Set(
-  Object.entries(tseslint.plugin.rules!)
+  Object.entries((tseslint.plugin as FlatConfig.Plugin).rules!)
     // @ts-expect-error
     .filter(([_name, def]) => def?.meta?.docs?.requiresTypeChecking)
     .map(([name, _def]) => `@typescript-eslint/${name}`)

src/utilities.ts

@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100

test/fixtures/custom-ignored-directory/.editorconfig

@@ -0,0 +1 @@
+* text=auto eol=lf

test/fixtures/custom-ignored-directory/.gitattributes

@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/