vue文件中书写tsx语法

老师为什么我这里报错了，可以正常运行

codermey 2025-03-06

源自：通用管理后台组件库：业务组件&页面开发 6-5 第三方登录+LoginForm组件封装

收起

2回答

Brian 2025-03-29 11:05:03

你在项目的根目录中打开文件目录，或者使用上面的快捷命令

检察一下上面的typescript的位置有没有报错

修改如下文件tsconfig.app.json：

{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue", "typed-router.d.ts", "auto-imports.d.ts", "components.d.ts"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "moduleResolution": "node",
    "noImplicitAny": false,
    "composite": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    "types": ["element-plus/global", "@intlify/unplugin-vue-i18n/messages"]
  }
}

修改如下文件tsconfig.node.json：

{
  "extends": "@tsconfig/node22/tsconfig.json",
  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "nightwatch.conf.*", "playwright.config.*"],
  "compilerOptions": {
    "composite": true,
    "noEmit": true,
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

    "module": "ESNext",
    "moduleResolution": "Node",
    "types": ["node"]
  }

使用pnpm run dev

然后重启扩展宿主，即可

收起回答

Brian 2025-03-08 19:36:01

你的eslint配置发上来看看？是怎么配置的~

收起回答

提问者 codermey #1

eslint 配置：

import pluginVue from 'eslint-plugin-vue'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVitest from '@vitest/eslint-plugin'
import pluginCypress from 'eslint-plugin-cypress/flat'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
import unocss from '@unocss/eslint-config/flat'

export default [
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},

{
name: 'app/files-to-ignore',
ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'],
},

...defineConfigWithVueTs(pluginVue.configs['flat/recommended'], vueTsConfigs.recommended),

{
...pluginVitest.configs.recommended,
files: ['src/**/__tests__/*'],
},

{
...pluginCypress.configs.recommended,
files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
},

{
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-unused-expressions': ['error', { allowShortCircuit: true }],
'vue/block-lang': [
'error',
{
script: {
lang: ['ts', 'tsx'],
},
},
],
'vue/block-order': [
'error',
{
order: ['script', 'template', 'style'],
},
],
'vue/define-macros-order': [
'error',
{
order: ['defineOptions', 'defineModel', 'defineProps', 'defineEmits', 'defineSlots'],
defineExposeLast: false,
},
],
},
},

skipFormatting,
unocss,
]

代码git：https://github.com/codermey/pk-admin-vue3.git

2025-03-10 14:14:47