question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unable to get working VSCode formatOnSave

See original GitHub issue

Apologies if this is a naive question, not had much experience with how prettier & plugins work…

I am trying to get this to work in a Svelte (+TS) setup, and it seems to run fine if I run the pnpm run format script across all files, but the plugin is not running on save with formatOnSave enabled in VSCode.

Is there something I need to set to enable plugins when running within VSCode formatOnSave? Or is it because the formatOnSave uses the Prettier extension, so doesn’t see the project installed plugin and would only work if a Tailwind Prettier extension appeared?

VSCode settings.json "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode"

Current set up… .prettierrc

{
	"useTabs": true,
	"trailingComma": "none",
	"semi": true,
	"printWidth": 100,
	"tailwindConfig": "./tailwind.config.cjs"
}

tailwind.config.cjs in the root of application (same as .prettierrc)

module.exports = {
	content: ["./src/**/*.{html,js,svelte,ts}"],
	theme: {
		extend: {}
	},
	plugins: []
};

.vscode/settings.json

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

Any guidance would be great!

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Reactions:2
  • Comments:12 (4 by maintainers)

github_iconTop GitHub Comments

4reactions
markjwigginscommented, Feb 18, 2022

@MatiasVerdier great find! Adding "prettier.documentSelectors": ["**/*.svelte"], to my VSCode settings.json and having…

plugins: [require("prettier-plugin-tailwindcss")],
overrides: [
	{
		files: "*.svelte",
		options: { parser: "svelte" }
	}
],

in my prettier.config.cjs seems to get formatOnSave to work!

May be worth adding a note in the documentation unless I’m in a minority of Svelte + pnpm + tailwindcss 😃

4reactions
markjwigginscommented, Jan 30, 2022

@dylanmichaelryan sorry I missed your comment the other day, adding an override doesn’t seem to help. I added it to the prettier config, also changed the settings.json to esbenp.prettier-vscode, but it doesn’t seem to pick up prettier when saving .svelte… It formats .svelte file when I run pnpm run format but not on save… So running manually is my workaround at the moment, but definitely still would like it to work on save, if there are any more ideas?

Read more comments on GitHub >

github_iconTop Results From Across the Web

VS-Code Prettier Format On Save doesn't work - Stack Overflow
Follow these steps: CTRL + SHIFT + P; Format Document (in pop-up bar); Select Format Document; Select Configure Default Formatter.
Read more >
Format on Save (prettier) stopped working with latest update
I'm using ruby as well, and I've got the same problem with rubocop formatter: it stopped working as of 1.50.0. And I can't...
Read more >
VSCode Format On Save – everything you need to know
Try to format your code manually by pressing Ctrl + Shift + P to open Command Palette and select Format Document. If your...
Read more >
How to enable auto format on save with prettier in VS Code ...
Explainer video about How to enable auto format on save in VS Code ( Visual Studio Code ) editor with prettier code formatter...
Read more >
How to fix Prettier Extension not working issue in VS CODE
Your browser can't play this video. Learn more. Switch camera.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found