自动导入的组件在PhpStorm/WebStorm中标记为自定义html标记。

Question

使用NuxtJS 3识别自动导入的组件，如：

../foo/bar.vue -> <FooBar />

不起作用，尽管.nuxt/components.d.ts中有映射，这在tsconfig.json中是引用的

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

./.nuxt/tsconfig.json含量

// Generated by nuxi
{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "strict": false,
    "allowJs": true,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "baseUrl": "..",
    "paths": {
      "~~": [
        "."
      ],
      "~~/*": [
        "./*"
      ],
      "@@": [
        "."
      ],
      "@@/*": [
        "./*"
      ],
      "~": [
        "."
      ],
      "~/*": [
        "./*"
      ],
      "@": [
        "."
      ],
      "@/*": [
        "./*"
      ],
      "assets": [
        "assets"
      ],
      "assets/*": [
        "assets/*"
      ],
      "public": [
        "public"
      ],
      "public/*": [
        "public/*"
      ],
      "#app": [
        "node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "node_modules/nuxt/dist/app/*"
      ],
      "vue-demi": [
        "node_modules/nuxt/dist/app/compat/vue-demi"
      ],
      "@intlify/shared": [
        "node_modules/@intlify/shared/dist/shared.esm-bundler"
      ],
      "@intlify/core-base": [
        "node_modules/@intlify/core-base/dist/core-base.esm-bundler"
      ],
      "@intlify/devtools-if": [
        "node_modules/@intlify/devtools-if/dist/devtools-if.esm-bundler"
      ],
      "vue-i18n": [
        "node_modules/vue-i18n/dist/vue-i18n.esm-bundler"
      ],
      "#auth/runtime": [
        "node_modules/@nuxtjs-alt/auth/dist/runtime"
      ],
      "#auth/runtime/*": [
        "node_modules/@nuxtjs-alt/auth/dist/runtime/*"
      ],
      "#head": [
        "node_modules/nuxt/dist/head/runtime"
      ],
      "#head/*": [
        "node_modules/nuxt/dist/head/runtime/*"
      ],
      "#components": [
        ".nuxt/components"
      ],
      "#imports": [
        ".nuxt/imports"
      ],
      "#build": [
        ".nuxt"
      ],
      "#build/*": [
        ".nuxt/*"
      ]
    }
  },
  "include": [
    "./nuxt.d.ts",
    "../**/*"
  ]
}

和nuxt.d.ts

// Generated by nuxi
/// <reference types="@intlify/nuxt3" />
/// <reference types="@nuxtjs-alt/google-fonts" />
/// <reference types="@nuxtjs-alt/auth" />
/// <reference types="@nuxtjs-alt/axios" />
/// <reference types="@nuxtjs-alt/pinia" />
/// <reference types="@nuxt/content" />
/// <reference types="@nuxtjs/tailwindcss" />
/// <reference types="@nuxt/telemetry" />
/// <reference types="nuxt" />
/// <reference path="types/plugins.d.ts" />
/// <reference path="types/vue-shim.d.ts" />
/// <reference path="types/schema.d.ts" />
/// <reference path="types/content.d.ts" />
/// <reference types="vue-router" />
/// <reference path="types/middleware.d.ts" />
/// <reference path="types/layouts.d.ts" />
/// <reference path="components.d.ts" />
/// <reference path="types/auto-imports.d.ts" />
/// <reference path="imports.d.ts" />
/// <reference path="types/nitro.d.ts" />

export {}

这就是一个例子：

​

​

有谁有同样的问题吗？我的配置有什么问题吗？

Answer 1

WEB-56566在即将到来的2022.3更新中得到修正

Answer 2

在根目录中创建包含tsconfig.json内容的文件tsconfig.json

示例