Search code examples
typescriptvisual-studio-codejsxqwik

Qwik attribute "q:slot" becames "q: slot" after formatting in VSCode

I'm developing Qwik app in VSCode, there are some special Qwik attributes, for example: q:slot and bind:value. However, when I do format, the editor auto add space after colon, so they become: q: slot and bind: value.

My question is, is there any setting to ignore format attributes like that? I'm currently using the default TypeScript and JavaScript Language Features

When I have a code like this, and I format with the default TypeScript and JavaScript Language Features

<div q:slot="heading">
{heading}
</div>

However, the editor splits q: and slot so the code became:

<div q: slot="heading">
{heading}
</div>

It should not split q: and slot

Solution

  • this issue is really similar to this one https://github.com/tailwindlabs/tailwindcss/discussions/6284

    I tried many TypeScript and JavaScript Language Features configurations without any success. e.g. disable all javascript.format.insertSpace* and typescript.format.insertSpaceA* configs

    Btw you can use prettier because it's so good https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode