Fix incompatibility with typescript-eslint v6 in vue/script-indent rule (#2256)

Author: ota-meshi

.circleci/config.yml

@@ -44,7 +44,7 @@ jobs:
       - run:
           name: Install eslint@6
           command: |
-            npm install --save-exact eslint@6.8.0
+            npm install --save-exact eslint@6.8.0 @typescript-eslint/parser@5
       - run:
           name: Install dependencies
           command: npm install
@@ -62,7 +62,7 @@ jobs:
       - run:
           name: Install eslint@7
           command: |
-            npm install eslint@7
+            npm install eslint@7 @typescript-eslint/parser@5
       - run:
           name: Install dependencies
           command: npm install
@@ -88,9 +88,23 @@ jobs:
           name: Test
           command: npm test
   node-v14:
-    <<: *node-base
     docker:
       - image: node:14
+    steps:
+      - run:
+          name: Versions
+          command: npm version
+      - checkout
+      - run:
+          name: Install @typescript-eslint/parser@5
+          command: |
+            npm install @typescript-eslint/parser@5 --save-exact
+      - run:
+          name: Install dependencies
+          command: npm install
+      - run:
+          name: Test
+          command: npm test
   node-v16:
     <<: *node-base
     docker:

.github/workflows/CI.yml

@@ -17,8 +17,6 @@ jobs:
       uses: actions/checkout@v3
     - name: Install Node.js
       uses: actions/setup-node@v3
-      with:
-        node-version: 16
     - name: Install Packages
       run: npm install --legacy-peer-deps
     - name: Lint
@@ -28,7 +26,7 @@ jobs:
     name: Test
     strategy:
       matrix:
-        node: [17, 18]
+        node: [17, 18, 20]
         os: [ubuntu-latest]
 
     runs-on: ${{ matrix.os }}
@@ -43,3 +41,20 @@ jobs:
       run: npm install --legacy-peer-deps
     - name: Test
       run: npm test
+
+  test-for-ts-eslint-v5:
+    name: Test
+    runs-on: ubuntu-latest
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v3
+    - name: Install Node.js v${{ matrix.node }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install Packages
+      run: npm install --legacy-peer-deps
+    - name: Install typescript-eslint v5
+      run: npm install -D @typescript-eslint/parser
+    - name: Test
+      run: npm test

docs/.vitepress/config.ts

@@ -1,4 +1,6 @@
+// @ts-expect-error -- Cannot change `module` option
 import type { DefaultTheme } from 'vitepress'
+// @ts-expect-error -- Cannot change `module` option
 import { defineConfig } from 'vitepress'
 import { BUNDLED_LANGUAGES } from 'shiki'
 import path from 'path'

docs/.vitepress/theme/index.ts

@@ -9,7 +9,9 @@ if (typeof window !== 'undefined') {
     }
   }
 }
+// @ts-expect-error -- Cannot change `module` option
 import type { Theme } from 'vitepress'
+// @ts-expect-error -- Cannot change `module` option
 import DefaultTheme from 'vitepress/theme'
 // @ts-expect-error -- ignore
 import Layout from './Layout.vue'

docs/.vitepress/vite-plugin.ts

@@ -1,3 +1,4 @@
+// @ts-expect-error -- Cannot change `module` option
 import type { UserConfig } from 'vitepress'
 import path from 'path'
 import { fileURLToPath } from 'url'

lib/utils/indent-ts.js

@@ -1168,18 +1168,24 @@ function defineVisitor({
         isOpeningParenToken
       )
       setOffset(leftParenToken, 1, firstToken)
+      const argument =
+        node.argument ||
+        /** @type {any} typescript-eslint v5 */ (node).parameter
       const rightParenToken = tokenStore.getTokenAfter(
-        node.parameter,
+        argument,
         isClosingParenToken
       )
-      processNodeList([node.parameter], leftParenToken, rightParenToken, 1)
+      processNodeList([argument], leftParenToken, rightParenToken, 1)
       if (node.qualifier) {
         const dotToken = tokenStore.getTokenBefore(node.qualifier)
         const propertyToken = tokenStore.getTokenAfter(dotToken)
         setOffset([dotToken, propertyToken], 1, firstToken)
       }
-      if (node.typeParameters) {
-        setOffset(tokenStore.getFirstToken(node.typeParameters), 1, firstToken)
+      const typeArguments =
+        node.typeArguments ||
+        /** @type {any} typescript-eslint v5 */ (node).typeParameters
+      if (typeArguments) {
+        setOffset(tokenStore.getFirstToken(typeArguments), 1, firstToken)
       }
     },
     TSParameterProperty(node) {

package.json

@@ -70,7 +70,8 @@
     "@types/node": "^14.18.54",
     "@types/semver": "^7.5.0",
     "@types/xml-name-validator": "^4.0.1",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "@typescript-eslint/types": "^6.2.0",
     "assert": "^2.0.0",
     "env-cmd": "^10.1.0",
     "esbuild": "^0.18.17",

tests/fixtures/script-indent/ts-class-declaration-04.vue

@@ -5,6 +5,11 @@ class
     <
       T
     >
+  extends
+    Bar
+      <
+        T
+      >
   implements
     Baz1
       <
@@ -15,11 +20,6 @@ class
       <
         T
       >
-  extends
-    Bar
-      <
-        T
-      >
 {
   prop:string
 }

tests/fixtures/script-indent/ts-class-declaration-05.vue

@@ -2,12 +2,12 @@
 <script lang="ts">
 class
   Foo
+  extends
+    Bar
   implements
     Baz1
     ,
     Baz2
-  extends
-    Bar
 {
   prop:string
 }

tests/fixtures/script-indent/ts-class-declaration-06.vue

@@ -23,6 +23,6 @@ class
       boolean
       =
       false
-  )
+  ) {}
 }
 </script>

tests/fixtures/script-indent/ts-interface-declaration-05.vue

@@ -4,10 +4,10 @@ interface Foo
   <
     T
   >
-implements // visitor key is not provided
-Bar
-<
-T
->
+// implements // parsing error
+// Bar
+// <
+// T
+// >
 { }
 </script>

tests/lib/rules/no-required-prop-with-default.js

@@ -508,47 +508,6 @@ tester.run('no-required-prop-with-default', rule, {
         }
       ]
     },
-    {
-      filename: 'test.vue',
-      code: `
-        <script setup lang="ts">
-          interface TestPropType {
-            readonly foo(): void
-            age?: number
-          }
-          const props = withDefaults(
-            defineProps<TestPropType>(),
-            {
-              foo() {console.log(123)},
-            }
-          );
-        </script>
-      `,
-      output: `
-        <script setup lang="ts">
-          interface TestPropType {
-            readonly foo?(): void
-            age?: number
-          }
-          const props = withDefaults(
-            defineProps<TestPropType>(),
-            {
-              foo() {console.log(123)},
-            }
-          );
-        </script>
-      `,
-      options: [{ autofix: true }],
-      parserOptions: {
-        parser: require.resolve('@typescript-eslint/parser')
-      },
-      errors: [
-        {
-          message: 'Prop "foo" should be optional.',
-          line: 4
-        }
-      ]
-    },
     {
       filename: 'test.vue',
       code: `

tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "target": "ES2019",
     "module": "commonjs",
+    "moduleResolution": "Node16",
     "lib": ["es2020"],
     "allowJs": true,
     "checkJs": true,

typings/eslint-plugin-vue/util-types/ast/es-ast.ts

@@ -341,6 +341,9 @@ export type Expression =
 export interface Identifier extends HasParentNode {
   type: 'Identifier'
   name: string
+
+  // for typescript-eslint
+  typeAnnotation?: any
 }
 export interface PrivateIdentifier extends HasParentNode {
   type: 'PrivateIdentifier'