fix: eslint .tsx file failed (#8358)

packages/vant-eslint-config/index.js

@@ -1,8 +1,8 @@
 module.exports = {
   extends: [
+    'plugin:vue/vue3-recommended',
     'airbnb-base',
     'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
     'prettier',
     'prettier/vue',
     'prettier/@typescript-eslint',
@@ -67,6 +67,10 @@ module.exports = {
   },
 
   overrides: [
+    {
+      files: ['*.vue'],
+      parser: require.resolve('vue-eslint-parser')
+    },
     {
       files: ['**/*.md/*.js', '**/*.md/*.ts'],
       rules: {

packages/vant-eslint-config/test/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": ["../index"]
+}

packages/vant-eslint-config/test/index.spec.js

@@ -0,0 +1,38 @@
+const { ESLint } = require('eslint');
+const path = require('path');
+
+const eslint = new ESLint();
+
+async function lintProject(name) {
+  const projectPath = path.resolve(__dirname, name);
+  const filesToLint = path.resolve(projectPath, '**');
+  const rest = await eslint.lintFiles(filesToLint);
+  const ruleId = [];
+  rest.forEach((res) =>
+    res.messages.forEach((msg) => {
+      if (ruleId.indexOf(msg.ruleId) < 0) {
+        ruleId.push(msg.ruleId);
+      }
+    })
+  );
+  return ruleId;
+}
+
+test('a vue project should pass lint', async () => {
+  const rest = await lintProject('vue');
+  expect([
+    'no-const-assign',
+    '@typescript-eslint/no-unused-vars',
+    'no-undef',
+  ]).toEqual(rest);
+});
+
+test('a vue-tsx project should pass lint', async () => {
+  const rest = await lintProject('vue-tsx');
+
+  expect([
+    '@typescript-eslint/no-unused-vars',
+    'vue/no-ref-as-operand',
+    '@typescript-eslint/no-empty-interface',
+  ]).toEqual(rest);
+});

packages/vant-eslint-config/test/vue-tsx/app.tsx

@@ -0,0 +1,12 @@
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'App',
+  setup() {
+    return () => (
+      <>
+        <h1>App</h1>
+      </>
+    )
+  }
+})

packages/vant-eslint-config/test/vue-tsx/index.tsx

@@ -0,0 +1,23 @@
+import { defineComponent, ref } from 'vue';
+import App from './app';
+
+const h2 = 1;
+
+export default defineComponent({
+  name: 'Index',
+  setup() {
+    const count = ref(0);
+
+    count++;
+    count + 1;
+    1 + count;
+
+    return () => (
+      <>
+        <h1>About</h1>
+
+        <App />
+      </>
+    );
+  },
+});

packages/vant-eslint-config/test/vue-tsx/main.ts

@@ -0,0 +1 @@
+interface Foo {}

packages/vant-eslint-config/test/vue-tsx/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "include": ["**/*.ts", "**/*.tsx", "**/*.vue"],
+  "exclude": ["node_modules"]
+}

packages/vant-eslint-config/test/vue/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <span v-for="a in arr">{{ a }}</span>
+  </div>
+</template>
+
+<script>
+const a = 1
+a = 1
+export default {
+  data() {
+    return {
+      arr: [1, 2, 3]
+    }
+  }
+}
+</script>
+
+<style></style>

packages/vant-eslint-config/test/vue/main.js

@@ -0,0 +1,2 @@
+const a = b + 1
+export default a