WebStorm 2021.3访问Nuxt.js插件报Unresolved variable $sdk如何解决

1. 新增全局类型声明文件
   WebStorm依赖类型声明完成代码补全，你需要在项目根目录新建index.d.ts声明文件，补充你注入的$sdk的类型定义：

import Vue from 'vue'

// 给Vue实例补全类型，组件内this.$sdk可以识别
declare module 'vue/types/vue' {
  interface Vue {
    $sdk: {
      thisIsATestMethodThatShouldBeRecognized: () => string
      // 后续OpenAPI客户端的所有端点都可以在这里补充类型定义
    }
  }
}

// 给Nuxt上下文补全类型，asyncData、插件等场景调用也可以识别
declare module '@nuxt/types' {
  interface NuxtAppOptions {
    $sdk: {
      thisIsATestMethodThatShouldBeRecognized: () => string
    }
  }
  interface Context {
    $sdk: {
      thisIsATestMethodThatShouldBeRecognized: () => string
    }
  }
}

2. 配置类型文件索引

• 如果你是JavaScript项目，在根目录新建jsconfig.json，加入以下配置，让IDE识别到声明文件：

{
  "include": ["./**/*", "./index.d.ts"]
}

• 如果你是TypeScript项目，确保tsconfig.json的include数组包含你新建的index.d.ts文件

3. 验证IDE配置

• 打开WebStorm设置，进入「Languages & Frameworks > JavaScript > Libraries」，确认@nuxt/types、vue相关的库已经被勾选启用
• 右键点击项目根目录，选择「Mark Directory as > Not Excluded」，避免项目文件被IDE排除索引
• 如果还是无法识别，尝试清空缓存重启IDE：顶部菜单选择「File > Invalidate Caches...」，勾选清理选项后重启即可

关于你提到的Node.js编码辅助功能问题：只需要进入WebStorm设置的「Languages & Frameworks > Node.js」页，选中你本地安装的Node.js执行路径，勾选启用Node.js核心库即可开启，该功能对本次Nuxt插件补全问题影响较小。

内容的提问来源于stack exchange，提问作者Marian Klühspies