use `prettier-plugin-svelte` in a sub folder project

68 Views Asked by At

I have about 3 hours, adjusting configurations and reloading VS Code with no solution to my issue. Obviously I am doing something dumb and found it's time to make it public, while asking for help...

here is my current project's tree:

.
|-- cmd
|-- internal
|   `-- server
|   # lots of other stuff.... 
|-- .prettierrc.yml
`-- spa
    |-- .eslintrc.yml
    |-- .gitignore
    |-- .prettierrc.yml
    |-- jsconfig.json
    |-- package.json
    |-- node_modules
    |   |-- @eslint
    |   |-- @sveltejs
    |   |-- eslint -> .pnpm/[email protected]/node_modules/eslint
    |   |-- eslint-config-prettier -> .pnpm/[email protected][email protected]/node_modules/eslint-config-prettier
    |   |-- eslint-plugin-svelte -> .pnpm/[email protected][email protected][email protected]/node_modules/eslint-plugin-svelte
    |   |-- prettier -> .pnpm/[email protected]/node_modules/prettier
    |   |-- prettier-plugin-svelte -> .pnpm/[email protected][email protected][email protected]/node_modules/prettier-plugin-svelte
    |   |-- svelte-preprocess -> .pnpm/[email protected][email protected][email protected][email protected][email protected][email protected]/node_modules/svelte-preprocess
    |   # lots of other stuff.... 
    |-- src
    |   |-- app.svelte
    |   |-- index.html
    |   # lots of other stuff.... 
    `-- vite.config.js

My main project is using go. Among other things a simple SPA will be served by it, and we decided to put server's and spa source code all together in a single folder as shown above. The golang part is large but removed as irrelevant for this situation. The spa folder above lists the relevant files for the issue.

To brief the issue:

If I go the the root and run code ., I have access to the whole code (go and svelte). However .svelte files do not prettify on save (the prettier label on vscode shows disabled)

If I run code spa from root or cd spa && code . then prettier works nicely for svelte files, but I do do not have go code available.

Now focus!!!! I am not asking on how I should organize my tree. And I know I can create a VScode workspace that will "virtually" open spa on its own root and solve my problem.

The question is how to make svelte/prettier to work when inside a sub folder.

I have enabled prettier debug mode, and got this when running code .:

["DEBUG" - 1:24:38 PM] Using bundled version of prettier.
["DEBUG" - 1:24:38 PM] Enabling Prettier for Workspace /home/gustavo/project

and svelte is not added to languageSelector array.

When running code spa:

["DEBUG" - 1:54:23 PM] Local prettier module path: '/home/gustavo/project/spa/node_modules/prettier/index.cjs'
["DEBUG" - 1:54:23 PM] Using prettier version 3.0.3
["INFO" - 1:54:23 PM] Using config file at '/home/gustavo/project/spa/.prettierrc.yml'
["DEBUG" - 1:54:24 PM] Enabling Prettier for Workspace /home/gustavo/project/spa

and languageSelector array now includes svelte on it.

as you can see on above tree, I already copied my .prettierrc.yml to the root without success.

its content, by the way:

printWidth: 120
tabWidth: 4
requirePragma: false
overrides:
    - files: ["*.md"]
      options:
          proseWrap: never

plugins: [prettier-plugin-svelte]

svelteIndentScriptAndStyle: false
# svelteSortOrder: options-markup-styles-scripts
svelteStrictMode: false
svelteAllowShorthand: true
svelteSelfCloseElements: "always"
svelteBracketNewLine: false

In the past I already had a similar issue with eslint. That was solved with a .vscode/settings.json file on my project's root adjusting its path. But, after reading prettier and prettier-plugin-svelte documentation, I do not see anything similar to do.

So... what am I missing in here?

0

There are 0 best solutions below