Formatting doesn't work (with newly released Prettier v2.1.0)

[mcmxcdev]

With Prettier v2.1.0, VSCode stops formatting .svelte files and the Svelte VSCode extension runs into Error: unknown node type: undefined pointing to prettier-plugin-svelte in the stacktrace as culprit.

[solidstatejake]

I've spent the last 5 hours trying to figure out what in God's name is preventing me from formatting my files. I have one vs code project open from yesterday which is still formatting perfectly. I diffed all relevant files in the new project with the old one and only found that the version of Prettier had been updated. Even after changing that, I still can't get it to work. Any idea what the problem is?

[michaelwooley]

For context, this gist contains my:

1. full error from VS Code svelte output
2. System info
3. VS Code extensions

[jasonlyu123]

prettier-plugin-svelte/src/print/helpers.ts

Line 18 in 05bf9cb

return 'html' in n && 'tokens' in n;

The problem seems to be this line. The plugin uses it to check if the AST node is the root level. but for some reason, the new prettier version removes the 'tokens' property. The current workaround is to locate your prettier-plugin-svelte in node_modules. find the isASTNode function and remove && 'tokens' in n.

[x4080]

@dummdidumm Its solved now ?

[michaelwooley]

Working for me. Thanks!

[x4080]

@michaelwooley cool

Edited : Seems still not working for me (no formatter found etc)

My settings :

{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  }
}

What is your configuration @michaelwooley ?

My configuration that works currently :

{
  "files.associations": {"*.svelte": "html" },
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  }
}

But I think format on save not working

[michaelwooley]

@x4080 sorry should have elaborated a bit more on the sense in which this is working for me.

If I use versions:

• prettier 2.1.0
• prettier-plugin-svelte 1.1.1

Then the following command works fine:

prettier --write --plugin-search-dir=. ./**/*.svelte

On VS Code there is a solution but just upgrading doesn't work. The language server is using local versions of the packages. It also assumes a dependency of 2.0.5 for prettier. So within your project try:

npm i prettier@2.0.5            # Pin to "older" version of prettier
npm i prettier-plugin-svelte  # Go ahead and upgrade plugin

I haven't checked to see if having v1.1.1 of the plugin is critical to making it work but it doesn't hurt.

Finally, restart VS Code, etc. to make sure that everything starts afresh.

Hope that helps?

[x4080]

@michaelwooley Thanks for reply, I just use svelte extension - so we need to use npm to make it work then, didnt know that. I'll try it later

[jasonlyu123]

We didn't update the prettier version of svelte-language-server so the bundled one should be 2.0.5. But if there's workspace install we would use it.

[dummdidumm]

How to get this working again

1. If you use the VSCode extension, make sure you have version 101.11.0 or higher installed
2. Delete your node_modules where your npm/yarn installs live
3. Update your package.json: If you have svelte-check / prettier-plugin-svelte / svelte-language-server in there, set them to the latest version. If you don't have them in there, you don't have to install them
4. reinstall (npm i / yarn install)

More indepth

We deployed an update of the VSCode extension which contains the v1.1.1 of prettier-plugin-svelte. It leaves Prettier at 2.0.5 to wait for some more bug fixes, but if you have a different Prettier version in your workspace then that one is used instead.

To get formatting again, you also have to update your prettier-plugin-svelte version in your workspace, which you have installed if you installed svelte-check. Simply update svelte-check for that. If you did not install svelte-check or prettier-plugin-svelte directly, you can skip this.

Reason why you need to do this: Prettier will load prettier-plugin-svelte from both your workspace and our VSCode extension, but for some reason does use the workspace version for parsing and the extension version for formatting, which will break.

[x4080]

@michaelwooley and @dummdidumm

I seems cant make it work, here's what I did :

1. If you use the VSCode extension, make sure you have version 101.11.0 or higher installed (CHECKED)
2. Delete your node_modules where your npm/yarn installs live (CHECKED)
3. Update your package.json: If you have svelte-check / prettier-plugin-svelte / svelte-language-server in there, set them to the latest version (I dont have any of those plugins installed), so I install them below
4. npm i (to install all my deleted packages)
5. npm i prettier@2.0.5
6. npm i prettier-plugin-svelte
7. Change my settings.json to

{
  "[svelte]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "svelte.svelte-vscode"
  }
}

restart the vscode, open file .svelte, format document and no formatter found

This become like rocket science :)

[x4080]

@michaelwooley This command work though : (must add npx)
npx prettier --write --plugin-search-dir=. ./**/*.svelte

[michaelwooley]

@x4080 could you create a gist with:

1. output from the language server. "bottom" panel should contain an output tab. Click on that then in the dropdown find the svelte entry. (If don't see the svelte entry then that's a problem!) Copy+paste a lot of output...
2. additional VS Code configuration._ In top menu: Help ~> "Report an issue". Should see at bottom set of checkboxes. If click then copy+paste each that's good. (Don't report an issue. If anyone knows an easier way to get this that'd be cool..)
3. A package-lock.json (or yarn.lock) in your project folder

---

[edit: getting this info]

Getting the output info

[x4080]

@michaelwooley Thanks for helping me, how to get output from the language server ? Maybe this is why my setting not working ?

[solidstatejake]

Formatting in my editor works with the following setup:

• The VS Code Prettier extension is installed.
• The VS Code Svelte extension is installed and is the default formatter for .svelte files.
• Svelte formatting is enabled.
• The following packages were installed via npm:
  • svelte-check
  • prettier@2.0.5
  • prettier-plugin-svelte
• I reloaded VS Code.

That's what it took for formatting to work again (though, the only thing I changed was the prettier version, one might have settings different from mine that are affecting VS Code).

[x4080]

@michaelwooley Solve it ! It seems that my vs code is not updating, it said that cannot format if version is lower than xxxx, I force it to update and now it works

But before that, I installed svelte-check like @solidstatejake mentioned above

Thanks for all guys

[marcelocra]

Formatting in my editor works with the following setup:

• The VS Code Prettier extension is installed.

• The VS Code Svelte extension is installed and is the default formatter for .svelte files.

• Svelte formatting is enabled.

• The following packages were installed via npm:

  • svelte-check
  • prettier@2.0.5
  • prettier-plugin-svelte

• I reloaded VS Code.

That's what it took for formatting to work again (though, the only thing I changed was the prettier version, one might have settings different from mine that are affecting VS Code).

My setup was somewhat like that (I didn't check prettier version) and all I had to do was to reload the window (ctrl+shift+p, then type "Reload Window") and VSCode started formatting svelte files again.

Thanks!

[JPcorona14]

I was having this same issue and found if I removed the .prettierrc file, then it started working as normal.

Edit: I commented out "plugins": ["prettier-plugin-svelte"] from the .prettierrc file and saved and the formatting seems to work with just that. Hope this helps!

[Foorack]

I was having this same issue and found if I removed the .prettierrc file, then it started working as normal.

Edit: I commented out "plugins": ["prettier-plugin-svelte"] from the .prettierrc file and saved and the formatting seems to work with just that. Hope this helps!

Thank you! ❤️ This fixed it for me. Remove prettier-plugin-svelte from .prettierrc fixes formatting in Svelte files.

[BigAB]

I had this in the output from svelte (language server I presume) in the output tab when I hit save to format a svelte file.

Error: Cannot find module 'prettier-plugin-svelte'
Require stack:
- /Users/me/sveltekit-app/node_modules/prettier/index.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/importPackage.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/configLoader.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/Document.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/index.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/server.js
- /Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/bin/server.js
    at Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
    at resolve (node:internal/modules/cjs/helpers:108:19)
    at /Users/me/sveltekit-app/node_modules/prettier/index.js:51552:21
    at Array.map (<anonymous>)
    at Object.load (/Users/me/sveltekit-app/node_modules/prettier/index.js:51544:61)
    at Object.load [as loadPlugins] (/Users/me/sveltekit-app/node_modules/prettier/index.js:16864:26)
    at /Users/me/sveltekit-app/node_modules/prettier/index.js:51618:28
    at Object.format (/Users/me/sveltekit-app/node_modules/prettier/index.js:51640:12)
    at SveltePlugin.formatDocument (/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/plugins/svelte/SveltePlugin.js:66:40)
    at async PluginHost.tryExecutePlugin (/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/plugins/PluginHost.js:321:20) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/me/sveltekit-app/node_modules/prettier/index.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/importPackage.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/configLoader.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/Document.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/lib/documents/index.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/dist/src/server.js',
    '/Users/me/.vscode/extensions/svelte.svelte-vscode-106.4.1/node_modules/svelte-language-server/bin/server.js'
  ]
}

Maybe that can help figure out the problem?

For now

Edit: I commented out "plugins": ["prettier-plugin-svelte"] from the .prettierrc file and saved and the formatting seems to work with just that. Hope this helps!

Works for me, so I'll go with that, but it seems not the right solution, as CI and such probably need that when running formatting.