Show an info/error card in VS Code whenever required modules are not installed

[JL102]

Describe the bug

I was quite confused as to why "Format Document" in Svelte files seemed to do nothing. Turns out that I didn't have prettier-plugin-svelte installed, and when the Svelte extension attempted to load it, it simply logged an error into the Output tab without notifying me through the UI. I believe the extension should show an error to the user instead of just logging the error.

Reproduction

1. Set up the Svelte language extension, but EITHER:
   a. Do not install prettier-plugin-svelte in your project OR
   b. Install prettier-plugin-svelte and prettier in a subfolder, i.e. not the root of your Code instance (related to Not formatting monorepo prettier-plugin-svelte#311)
2. Attempt to format a Svelte file via right click -> Format Document

Expected behaviour

If any required modules are not found, instead of just logging into the output console, the Svelte extension should create an info card in the bottom-right corner of the screen, displaying the error, so the user can understand why it's doing nothing.

System Info

• OS: Reproducible on both Windows and Ubuntu
• IDE: VS Code

Which package is the issue about?

None

Additional Information, eg. Screenshots

In this screenshot, note that ScoringApp-Serverless is the workspace root, while offline is the Svelte project. The Svelte project has both prettier and prettier-plugin-svelte installed.

[dummdidumm]

We pushed a fix which hopefully resolved the issue. I don't think a popup window is necessary or helpful since there's nothing you can do about it, therefore closing.

If this happens again in the future, we could think about an icon or sth in the bottom right (similar to how prettier does it when it fails to format a document)

[JL102]

We pushed a fix which hopefully resolved the issue. I don't think a popup window is necessary or helpful since there's nothing you can do about it, therefore closing.

If this happens again in the future, we could think about an icon or sth in the bottom right (similar to how prettier does it when it fails to format a document)

@dummdidumm Apologies for the late response but I don't believe you understand the problem. "I don't think a popup window is necessary or helpful since there's nothing you can do about it" - The Svelte language extension needs "prettier" to be installed in the project, doesn't it? It has to be installed by the user into the root of the workspace, otherwise a stack trace displays in the "Output" tab without notifying the user. I just tested it again with the most recent version of Svelte language tools, and the behavior is exactly the same.

[jasonlyu123]

It doesn't need prettier to be installed. The problem at the time is that if you specified a plugin in your config file. Prettier resolves it with process.cwd so it'll fail. But we change to resolve the plugin path by ourselves before passing it to prettier. The resolving is wrapped with try catch. If it fails, our bundled version will kick in.

We'll still log the error in the output channel, but the error message is prepended with failed to resolve plugin prettier-plugin-svelte with error. Not sure if you're seeing that or what. Another possibility is that your VSCode version is too old, so you're still using an old version of the Svelte extension. The fix was released in 107.0.2 after we bumped the required VSCode version to 1.67.

[JL102]

It doesn't need prettier to be installed. The problem at the time is that if you specified a plugin in your config file. Prettier resolves it with process.cwd so it'll fail. But we change to resolve the plugin path by ourselves before passing it to prettier. The resolving is wrapped with try catch. If it fails, our bundled version will kick in.

Another possibility is that your VSCode version is too old, so you're still using an old version of the Svelte extension. The fix was released in 107.0.2 after we bumped the required VSCode version to 1.67.

@jasonlyu123 This is not true. I just checked with the latest version of the Svelte extension (107.9.0) and vs code version 1.80.1, on a brand new instance of the npm create svelte@latest demo app.

We'll still log the error in the output channel, but the error message is prepended with failed to resolve plugin prettier-plugin-svelte with error. Not sure if you're seeing that or what.

Yes, I do see them in the output channel. If prettier is not installed in the project, then this error gets output:

failed to resolve plugin prettier-plugin-svelte with error:
 Error: Cannot find module 'prettier-plugin-svelte'
Require stack:
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\index.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\server.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\bin\server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1010:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at resolvePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:140:32)
    at Array.map (<anonymous>)
    at SveltePlugin.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:105:22)
    at async PluginHost.tryExecutePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:342:20)
    at async Promise.all (index 0)
    at async PluginHost.execute (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:319:24)
    at async PluginHost.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:114:38) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\plugins\\svelte\\SveltePlugin.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\plugins\\index.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\server.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\bin\\server.js'
  ]
}
ConfigError: Couldn't resolve parser "svelte"
    at requireParser (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:6616:15)
    at resolveParser (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:7497:16)
    at normalize (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:7741:22)
    at formatWithCursor2 (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:9006:50)
    at c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:38183:12
    at Object.format (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\prettier\index.js:38197:12)
    at SveltePlugin.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:101:46)
    at async PluginHost.tryExecutePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:342:20)
    at async Promise.all (index 0)
    at async PluginHost.execute (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:319:24)

and if prettier is in the project, but prettier-plugin-svelte is not, then this error is output:

failed to resolve plugin prettier-plugin-svelte with error:
 Error: Cannot find module 'prettier-plugin-svelte'
Require stack:
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\index.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\server.js
- c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\bin\server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:1010:15)
    at Function.resolve (node:internal/modules/cjs/helpers:108:19)
    at resolvePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:140:32)
    at Array.map (<anonymous>)
    at SveltePlugin.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:105:22)
    at async PluginHost.tryExecutePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:342:20)
    at async Promise.all (index 0)
    at async PluginHost.execute (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:319:24)
    at async PluginHost.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:114:38) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\plugins\\svelte\\SveltePlugin.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\plugins\\index.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\dist\\src\\server.js',
    'c:\\Users\\draki\\.vscode\\extensions\\svelte.svelte-vscode-107.9.0\\node_modules\\svelte-language-server\\bin\\server.js'
  ]
}
ConfigError: Couldn't resolve parser "svelte".
    at getParserPluginByParserName (file:///c:/Users/draki/Nextcloud/Projects/Programming/myapp/node_modules/prettier/index.mjs:16912:9)
    at normalizeFormatOptions (file:///c:/Users/draki/Nextcloud/Projects/Programming/myapp/node_modules/prettier/index.mjs:16983:24)
    at formatWithCursor (file:///c:/Users/draki/Nextcloud/Projects/Programming/myapp/node_modules/prettier/index.mjs:18588:52)
    at file:///c:/Users/draki/Nextcloud/Projects/Programming/myapp/node_modules/prettier/index.mjs:21784:12
    at async Module.format2 (file:///c:/Users/draki/Nextcloud/Projects/Programming/myapp/node_modules/prettier/index.mjs:21789:25)
    at async SveltePlugin.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\svelte\SveltePlugin.js:101:31)
    at async PluginHost.tryExecutePlugin (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:342:20)
    at async Promise.all (index 0)
    at async PluginHost.execute (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:319:24)
    at async PluginHost.formatDocument (c:\Users\draki\.vscode\extensions\svelte.svelte-vscode-107.9.0\node_modules\svelte-language-server\dist\src\plugins\PluginHost.js:114:38)

Which is fine, but crucially, it's not obvious what's happening if you don't have the output window open. This is why I requested that a pop-up card gets displayed when one of these errors occur. I do not believe it's obvious or self-explanatory to check the output console when the "Format document" / "Format selection" does nothing visible. I would expect an error to be displayed in the UI, not simply logged into the console.

Note: I do see, however, that problem 1b (prettier & prettier-plugin-svelte being installed into a subfolder, instead of the Code workspace root) has been fixed. Thanks!

[jasonlyu123]

Sorry for the confusion. That ConfigError is a new issue and it is not related to the original problem. It's because of prettier v3 breaking changes. We discussed it before and concluded that we couldn't reliably detect if the error was because of compatibility. And because Prettier will throw an error if there is a syntax error, there will be too many false alarms if we have pop-up notifications for v3 compatibility.

But you misunderstood what I meant. The language server is by design to not require a workspace version of the plugin. If it doesn't, We consider those as bugs that we need to address. The actual reason it failed is not because of the "failed to resolve". it's expected to load a bundled version if that happens.