CODEWITHSUNDEEP
cssvisual-studio-codeautocompleteemmet
Thibaut
Thibaut

Reputation: 182

Visual Studio Code and emmet !important CSS modifier

I have problems with the use of ! in my CSS code.

If I take the example in the Emmet documentation :

p!+m10e!

Should produce:

padding:  !important;
margin: 10em !important;

On my side, it doesn't work. p!+m10e works, but p!+m10e! does not. The final exclamation point seems to be a problem.

I did another test with dn! to display display: none !important;, the problem is the same.

enter image description here

Do you have an idea?

Upvotes: 0

Views: 488

Answers (3)

the Hutt
the Hutt

Reputation: 18418

A few observations, this may help future readers:

  • CTRL + Space forces the non-suggested(intellisense) expansion.

  • "emmet.triggerExpansionOnTab": true also expands non-suggested option.

  • If you type dn!i it will give you suggestion dn: i !important; then you delete 'i' then hit enter/tab, it expands as expected. enter image description here

  • I think the bug https://github.com/microsoft/vscode/issues/120245 still hasn't been resolved completely. Otherwise you could've typed 'dn!important` and it would've expanded as expected.

Upvotes: 0

Thibaut
Thibaut

Reputation: 182

The solution lies in disabling text-suggestions. In fact, I think the fact that IntelliSense shows the !important and !default when you type an exclamation mark, makes Emmet mess up.

So I disabled this:

"editor.suggest.showWords": false

If you prefer the UI, you can also find it by doing the following:

  1. Navigate the menus: click on - File > Preferences > Settings (or press Ctrl + ,)

  2. Type Show Words in the search box at the top

  3. Uncheck the setting Editor > Suggest: Show Words

Upvotes: 1

lamsal
lamsal

Reputation: 354

Enabling Trigger Expansion on Tab seems to have solved the problem on my machine. enter image description here

Upvotes: 1

Related Questions