fix: ensure there's only one instance of plugin-vue in the config (#184)

Fixes #161

Author: haoqunjiang

pnpm-lock.yaml

@@ -5,7 +5,8 @@
     "schedule:monthly"
   ],
   "ignorePaths": [
-    "**/node_modules/**"
+    "**/node_modules/**",
+    "test/fixtures/redefine-plugin-vue"
   ],
   "ignoreDeps": ["espree"]
 }

renovate.json

@@ -1,6 +1,7 @@
 import process from 'node:process'
 import tseslint from 'typescript-eslint'
 import type { TSESLint } from '@typescript-eslint/utils'
+import pluginVue from 'eslint-plugin-vue'
 
 import { TsEslintConfigForVue } from './configs'
 import groupVueFiles from './groupVueFiles'
@@ -78,9 +79,10 @@ export function defineConfigWithVueTs(
   return pipe(
     configs,
     flattenConfigs,
+    deduplicateVuePlugin,
     insertAndReorderConfigs,
     resolveVueTsConfigs,
-    tseslint.config,  // this might not be necessary, but it doesn't hurt to keep it
+    tseslint.config, // this might not be necessary, but it doesn't hurt to keep it
   )
 }
 
@@ -191,7 +193,10 @@ function insertAndReorderConfigs(configs: RawConfigItem[]): RawConfigItem[] {
 
   return [
     ...configsWithoutTypeAwareRules.slice(0, lastExtendedConfigIndex + 1),
-    ...createBasicSetupConfigs(projectOptions.tsSyntaxInTemplates, projectOptions.scriptLangs),
+    ...createBasicSetupConfigs(
+      projectOptions.tsSyntaxInTemplates,
+      projectOptions.scriptLangs,
+    ),
 
     // user-turned-off type-aware rules must come after the last extended config
     // in case some rules re-enabled by the extended config
@@ -248,3 +253,34 @@ const rulesRequiringTypeInformation = new Set(
 function doesRuleRequireTypeInformation(ruleName: string): boolean {
   return rulesRequiringTypeInformation.has(ruleName)
 }
+
+function deduplicateVuePlugin(configs: RawConfigItem[]): RawConfigItem[] {
+  return configs.map(config => {
+    if (config instanceof TsEslintConfigForVue || !config.plugins?.vue) {
+      return config
+    }
+
+    const currentVuePlugin = config.plugins.vue
+    if (currentVuePlugin !== pluginVue) {
+      const currentVersion: string = currentVuePlugin.meta?.version || 'unknown'
+      const expectedVersion: string = pluginVue.meta?.version || 'unknown'
+
+      const configName: string = config.name || 'unknown config'
+
+      console.warn(
+        `Warning: Multiple instances of eslint-plugin-vue detected in ${configName}. ` +
+          `Replacing version ${currentVersion} with version ${expectedVersion}.`,
+      )
+
+      return {
+        ...config,
+        plugins: {
+          ...config.plugins,
+          vue: pluginVue,
+        },
+      }
+    }
+
+    return config
+  })
+}

src/utilities.ts

@@ -0,0 +1,9 @@
+[*.{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/redefine-plugin-vue/.editorconfig

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

test/fixtures/redefine-plugin-vue/.gitattributes

@@ -0,0 +1,30 @@
+# 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
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo

test/fixtures/redefine-plugin-vue/.gitignore

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "EditorConfig.EditorConfig"
+  ]
+}

test/fixtures/redefine-plugin-vue/.vscode/extensions.json

@@ -0,0 +1,39 @@
+# redefine-plugin-vue
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Type Support for `.vue` Imports in TS
+
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vite.dev/config/).
+
+## Project Setup
+
+```sh
+pnpm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+pnpm dev
+```
+
+### Type-Check, Compile and Minify for Production
+
+```sh
+pnpm build
+```
+
+### Lint with [ESLint](https://eslint.org/)
+
+```sh
+pnpm lint
+```

test/fixtures/redefine-plugin-vue/README.md

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

test/fixtures/redefine-plugin-vue/env.d.ts

@@ -0,0 +1,20 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{ts,mts,tsx,vue}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+)