Unable to get working VSCode formatOnSave
See original GitHub issueApologies 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:
- Created 2 years ago
- Reactions:2
- Comments:12 (4 by maintainers)
@MatiasVerdier great find! Adding
"prettier.documentSelectors": ["**/*.svelte"],
to my VSCodesettings.json
and having…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 😃
@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
toesbenp.prettier-vscode
, but it doesn’t seem to pick up prettier when saving .svelte… It formats .svelte file when I runpnpm 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?