Next.js Discord

Discord Forum

Typescript plugin in webstorm

Unanswered
Eric Burel posted this in #help-forum
Open in Discord
Hi folks, do you know how to activate the TypeScript plugin (https://nextjs.org/docs/app/building-your-application/configuring/typescript) in Webstorm ? I've only found instructions for VS Code

11 Replies

Asian black bear
Open the project in VSCode and run the instructions like in the docs. What it does are only two things: it adds the Next plugin to the tsconfig and then sets up VSCode to use the project-specific TS version. After opening the project in WebStorm you should have the plugin running as well. I always did it like that because I forgot how to manually add the plugin to the tsconfig.
really? i don't think the plugin requires changes to tsconfig.json (else they would've shipped in the default create-next-app tsconfig.json already).

for me to add the plugin, need to add this to .vscode/settings.json
{
  // ...
  "typescript.tsdk": "node_modules/typescript/lib",
}

but this is not applicable to webstorm at all.
@joulev really? i don't think the plugin requires changes to tsconfig.json (else they would've shipped in the default create-next-app tsconfig.json already). for me to add the plugin, need to add this to .vscode/settings.json json { // ... "typescript.tsdk": "node_modules/typescript/lib", } but this is not applicable to webstorm at all.
Pollock
That basically tells vscode to use the typescript package that you have installed with NPM instead of the bundled one. Plugins are defined in tsconfig.json (otherwise they aren't loaded), check this out for language service plugins (what next uses): https://github.com/microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin
oh good to know, thanks!

then in that case the default template already ships with the plugin, no? https://github.com/vercel/next.js/blob/42c991ffc040d001e427826925df038d232d0883/packages/create-next-app/templates/app/ts/tsconfig.json#L16-L20
Pollock
As for how to add a plugin in general, you use this:

{
    "compilerOptions": {
        "plugins": [{
            "name": "<npm_package_name>",
        }]
    }
}
Webstorm is a bit iffy at best, because they use their own version of tsserver
They don't use the microsoft one due to some improvements they've made
There is an article they wrote some time ago about that ^
@Pollock As for how to add a plugin in general, you use this: json { "compilerOptions": { "plugins": [{ "name": "<npm_package_name>", }] } }
that makes sense. I also haven't installed anything, but still get the recommendations from the plugin (see attached). And the plugin seems to handle that pretty well (see attached)
@Pollock Webstorm is a bit iffy at best, because they use their own version of tsserver
Asian black bear
It's a combination of the actual TypeScript server in addition to features supplied by our own model. But we do support the Next plugin very specifically as Beef has demonstrated. As long as the plugin is registered it will be picked up, that what I meant with my initial post.