chore: Use ESLint v9 in development env (#2775)

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>

Author: ota-meshi

.changeset/fast-penguins-reflect.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Added [`@typescript-eslint/parser`](https://typescript-eslint.io/packages/parser) as an optional peer dependency

.changeset/gentle-glasses-tie.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": patch
+---
+
+Fixed false negatives when using typescript-eslint v8 in [`vue/script-indent`](https://eslint.vuejs.org/rules/script-indent.html) rule

.github/workflows/CI.yml

@@ -46,7 +46,7 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
       - name: Install Packages
-        run: npm install -f
+        run: npm install
       - name: Install ESLint v${{ matrix.eslint }}
         run: npm install --save-dev eslint@${{ matrix.eslint }} -f
       - name: Test
@@ -61,8 +61,23 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
       - name: Install Packages
-        run: npm install -f
+        run: npm install
       - name: Uninstall @stylistic/eslint-plugin
         run: npm uninstall -D @stylistic/eslint-plugin
       - name: Test
         run: npm test
+
+  test-with-typescript-eslint-v7:
+    name: Test with typescript-eslint v7
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+      - name: Install Packages
+        run: npm install
+      - name: Install @typescript-eslint/parser@7
+        run: npm install -D @typescript-eslint/parser@7 -f
+      - name: Test
+        run: npm test

.github/workflows/Release.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
       - name: Install Dependencies
-        run: npm install -f
+        run: npm install
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

.gitignore

@@ -8,8 +8,8 @@
 yarn.lock
 yarn-error.log
 /docs/.vitepress/dist
-/docs/.vitepress/build-system/shim/eslint.mjs
-/docs/.vitepress/build-system/shim/assert.mjs
+/docs/.vitepress/build-system/shim/vue-eslint-parser.mjs
+/docs/.vitepress/build-system/shim/@typescript-eslint/parser.mjs
 /docs/.vitepress/.temp
 /docs/.vitepress/cache
 typings/eslint/lib/rules

docs/.vitepress/build-system/build.mts

@@ -9,14 +9,38 @@ import { fileURLToPath } from 'url'
 const dirname = path.dirname(fileURLToPath(import.meta.url))
 
 build(
-  path.join(dirname, './src/eslint.mjs'),
-  path.join(dirname, './shim/eslint.mjs'),
-  ['path', 'assert', 'util', 'esquery']
+  path.join(
+    dirname,
+    '../../../node_modules/@typescript-eslint/parser/dist/index.js'
+  ),
+  path.join(dirname, './shim/@typescript-eslint/parser.mjs'),
+  [
+    'util',
+    'node:util',
+    'path',
+    'node:path',
+    'fs',
+    'node:fs',
+    'semver',
+    'fast-glob',
+    'debug'
+  ]
 )
+
 build(
-  path.join(dirname, '../../../node_modules/assert'),
-  path.join(dirname, './shim/assert.mjs'),
-  ['path']
+  path.join(dirname, '../../../node_modules/vue-eslint-parser/index.js'),
+  path.join(dirname, './shim/vue-eslint-parser.mjs'),
+  [
+    'path',
+    'debug',
+    'semver',
+    'assert',
+    'module',
+    'events',
+    'esquery',
+    'fs',
+    'eslint'
+  ]
 )
 
 function build(input: string, out: string, injects: string[] = []) {
@@ -42,16 +66,22 @@ function bundle(entryPoint: string, externals: string[]) {
 }
 
 function transform(code: string, injects: string[]) {
+  const normalizeInjects = [
+    ...new Set(injects.map((inject) => inject.replace(/^node:/u, '')))
+  ]
   const newCode = code.replace(/"[a-z]+" = "[a-z]+";/u, '')
   return `
-${injects
+${normalizeInjects
   .map(
     (inject) =>
-      `import $inject_${inject.replace(/-/gu, '_')}$ from '${inject}';`
+      `import $inject_${inject.replace(/[\-:]/gu, '_')}$ from '${inject}';`
   )
   .join('\n')}
 const $_injects_$ = {${injects
-    .map((inject) => `${inject.replace(/-/gu, '_')}:$inject_${inject}$`)
+    .map(
+      (inject) =>
+        `"${inject}":$inject_${inject.replace(/^node:/u, '').replace(/[\-:]/gu, '_')}$`
+    )
     .join(',\n')}};
 function require(module, ...args) {
   return $_injects_$[module] || {}

docs/.vitepress/build-system/shim/globby.mjs renamed to docs/.vitepress/build-system/shim/empty.mjs

@@ -3,6 +3,7 @@ import { defineConfig } from 'vitepress'
 import path from 'pathe'
 import { fileURLToPath } from 'url'
 import { viteCommonjs, vitePluginRequireResolve } from './vite-plugin.mjs'
+import eslint4b, { requireESLintUseAtYourOwnRisk4b } from 'vite-plugin-eslint4b'
 
 // Pre-build cjs packages that cannot be bundled well.
 import './build-system/build.mjs'
@@ -142,24 +143,30 @@ export default async () => {
 
     vite: {
       publicDir: path.resolve(dirname, './public'),
-      plugins: [vitePluginRequireResolve(), viteCommonjs()],
+      plugins: [
+        vitePluginRequireResolve(),
+        viteCommonjs(),
+        eslint4b() as any,
+        requireESLintUseAtYourOwnRisk4b()
+      ],
       resolve: {
         alias: {
-          'eslint/use-at-your-own-risk': path.join(
+          'vue-eslint-parser': path.join(
+            dirname,
+            './build-system/shim/vue-eslint-parser.mjs'
+          ),
+          '@typescript-eslint/parser': path.join(
             dirname,
-            './build-system/shim/eslint/use-at-your-own-risk.mjs'
+            './build-system/shim/@typescript-eslint/parser.mjs'
           ),
-          eslint: path.join(dirname, './build-system/shim/eslint.mjs'),
-          assert: path.join(dirname, './build-system/shim/assert.mjs'),
-          path: path.join(dirname, './build-system/shim/path.mjs'),
 
           tslib: path.join(dirname, '../../node_modules/tslib/tslib.es6.js'),
-          esquery: path.join(dirname, './build-system/shim/esquery.mjs'),
-          globby: path.join(dirname, './build-system/shim/globby.mjs')
+          globby: path.join(dirname, './build-system/shim/empty.mjs'),
+          'fast-glob': path.join(dirname, './build-system/shim/empty.mjs'),
+          module: path.join(dirname, './build-system/shim/empty.mjs')
         }
       },
       define: {
-        'process.env.NODE_DEBUG': 'false',
         'require.cache': '{}'
       }
     },

docs/.vitepress/build-system/shim/eslint/use-at-your-own-risk.mjs

@@ -8,8 +8,6 @@
       class="eslint-code-block"
       :filename="filename"
       :language="language"
-      :preprocess="preprocess"
-      :postprocess="postprocess"
       dark
       :format="format"
       :fix="fix"
@@ -20,8 +18,6 @@
 <script>
 import EslintEditor from '@ota-meshi/site-kit-eslint-editor-vue'
 import { markRaw } from 'vue'
-import * as plugin from '../../../..'
-const { rules, processors } = plugin.default || plugin
 
 export default {
   name: 'ESLintCodeBlock',
@@ -61,13 +57,23 @@ export default {
       code: '',
       height: '100px',
       linter: null,
-      preprocess: processors['.vue'].preprocess,
-      postprocess: processors['.vue'].postprocess,
       format: {
         insertSpaces: true,
         tabSize: 2
       },
-      tsEslintParser: null
+      tsEslintParser: null,
+      baseConfig: {
+        files: ['**'],
+        plugins: {},
+        processor: 'vue/vue',
+        languageOptions: {
+          ecmaVersion: 'latest',
+          sourceType: 'module',
+          parserOptions: {
+            ecmaFeatures: { jsx: true }
+          }
+        }
+      }
     }
   },
 
@@ -85,40 +91,13 @@ export default {
         }
       }
       return {
-        globals: {
-          console: false,
-          // ES2015 globals
-          ArrayBuffer: false,
-          DataView: false,
-          Float32Array: false,
-          Float64Array: false,
-          Int16Array: false,
-          Int32Array: false,
-          Int8Array: false,
-          Map: false,
-          Promise: false,
-          Proxy: false,
-          Reflect: false,
-          Set: false,
-          Symbol: false,
-          Uint16Array: false,
-          Uint32Array: false,
-          Uint8Array: false,
-          Uint8ClampedArray: false,
-          WeakMap: false,
-          WeakSet: false,
-          // ES2017 globals
-          Atomics: false,
-          SharedArrayBuffer: false
-        },
+        ...this.baseConfig,
         rules: this.rules,
-        parser: 'vue-eslint-parser',
-        parserOptions: {
-          parser,
-          ecmaVersion: 'latest',
-          sourceType: 'module',
-          ecmaFeatures: {
-            jsx: true
+        languageOptions: {
+          ...this.baseConfig?.languageOptions,
+          parserOptions: {
+            ...this.baseConfig?.languageOptions?.parserOptions,
+            parser
           }
         }
       }
@@ -150,7 +129,8 @@ export default {
 
   methods: {
     async loadTypescriptESLint() {
-      this.tsEslintParser = await import('@typescript-eslint/parser')
+      const tsEslintParser = await import('@typescript-eslint/parser')
+      this.tsEslintParser = tsEslintParser.default || tsEslintParser
     }
   },
 
@@ -161,21 +141,24 @@ export default {
     const lines = this.code.split('\n').length
     this.height = `${Math.max(120, 20 * (1 + lines))}px`
     // Load linter.
-    const [{ Linter }, { parseForESLint }] = await Promise.all([
+    const [plugin, { Linter }, vueEslintParser, globals] = await Promise.all([
+      import('../../../..'),
       import('eslint'),
-      import('espree').then(() => import('vue-eslint-parser'))
+      import('vue-eslint-parser'),
+      import('globals')
     ])
     if (this.langTs || this.typescript) {
       await this.loadTypescriptESLint()
     }
 
-    const linter = (this.linter = markRaw(new Linter()))
-
-    for (const ruleId of Object.keys(rules)) {
-      linter.defineRule(`vue/${ruleId}`, rules[ruleId])
-    }
-
-    linter.defineParser('vue-eslint-parser', { parseForESLint })
+    this.linter = markRaw(new Linter())
+    this.baseConfig.plugins.vue = markRaw(plugin.default || plugin)
+    this.baseConfig.languageOptions.parser = markRaw(
+      vueEslintParser.default || vueEslintParser
+    )
+    this.baseConfig.languageOptions.globals = markRaw({
+      ...globals.browser
+    })
   }
 }