Type Support with Webstorm / PhpStorm

[harlan-zw]

Environment

PhpStorm 2021.3

---

• Operating System: Linux
• Node Version: v16.11.1
• Nuxt Version: 3.0.0-27313139.1c88580
• Package Manager: yarn@1.22.15
• Bundler: Vite
• User Config: windicss, buildModules
• Runtime Modules: -
• Build Modules: nuxt-windicss@2.1.1

---

Reproduction

Follow steps here: https://v3.nuxtjs.org/getting-started/installation

Optionally to test this with a third-party module, do:

1. yarn add nuxt-windicss
2. Modify nuxt.config.ts

import { defineNuxtConfig } from 'nuxt3'

// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({

    windicss: {

    },

    buildModules: [
        'nuxt-windicss'
    ]

})

Describe the bug

When booting Nuxt v3 the .nuxt folder is correctly created, however, PhpStorm (and presumably WebStorm) determine the .nuxt folder to be a content root that should be excluded automatically. I'm not exactly sure what logic they've used to determine this, but possibly because it's a dot folder.

<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
  <component name="NewModuleRootManager">
    <content url="file://$MODULE_DIR$">
      <excludeFolder url="file://$MODULE_DIR$/.nuxt" />
    </content>
    <content url="file://$MODULE_DIR$/.nuxt" />
    <orderEntry type="inheritedJdk" />
    <orderEntry type="sourceFolder" forTests="false" />
  </component>
</module>

Due to this, when working on the project, the "magic imports" of the typescript definitions fail, leaving the user confused and with errors.

This is also an issue for third-party modules

This can be easily resolved by cancelling the exclusion (right-click -> Mark directory as -> Cancel Exclusion), for the onboarding of new users there should be either some documentation for this or a way to not have to do this at all.

Additional context

While I'm fairly sure this isn't some special configuration or plugin in my PhpStorm/Webstorm creating this problem, it would be good to get confirmation from someone else who uses it.

Logs

No response

[viii47]

This is mentioned in the buildDir section for the nuxt.config. A lot of toolsets assume that a leading dot/underscore is a folder to ignore. Do note: Sometimes you need to reload your working space / window of your editor to revalidate the created fileset.

[harlan-zw]

Thanks for the link @viii47 good that it's covered in the doc somewhere. I did assume there was a way to change it.

The resolution to this issue should be shipping a nuxt v3 where the end-user doesn't need to mess around with build dirs, types should just work. We're talking about ~25% of people getting stuck on this issue when setting up Nuxt (according to the State of JS 2020).

Ideally the .nuxt runtime folder would be separate to the types, though I'm sure some people would prefer the extra folder.

A solution that fixes some of the types having the config is this:

{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "include": [
    "**/*.d.ts"
  ],
}

Seems relatively safe but I'm probably overlooking something

[elHornair]

TLDR:
Option 1: in Webstorm / PhpStorm, right click on the .nuxt folder, select Mark directory as -> Not excluded
Option 2: in nuxt.config.ts, configure a custom build directory as described here.

[danielroe]

Nuxt 3 support rolling out in EAP build: https://blog.jetbrains.com/webstorm/category/eap/

See https://twitter.com/PiotrekTomiak/status/1487105766024695819.

[Sergei8888]

Components types just don`t work

[mrBrownys]

@Sergei8888

The point is in the types of generated Components Discovery. They extend vue GlobalComponents
declare module 'vue' { export interface GlobalComponents {

WebStorm expects them from @vue/runtime-core GlobalComponents. The following type definition should help:

import '@vue/runtime-core'
import type { GlobalComponents as GlobalComponentsVue } from 'vue'

declare module '@vue/runtime-core' {
  //eslint-disable-next-line @typescript-eslint/no-empty-interface
  export interface GlobalComponents extends GlobalComponentsVue {}
}

export {}

But it would be better to fix the extend in Components Discovery. (.nuxt/components.d.ts)

https://github.com/nuxt/framework/blob/8685bfa9e9cb209ecb4233ad3619a63561da59be/packages/nuxt/src/components/templates.ts#L72

[ennioVisco]

The thread can be closed: these issues will be fixed in next Webstorm EAP.
See: https://youtrack.jetbrains.com/issue/WEB-56392/Nuxt-3-functions-exposed-in-importsdts-file-are-suggested-to-be-imported