Visual Studio Code 和 emmet !important CSS 修饰符

Question

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.

Do you have an idea?

Answer 1

Enabling Trigger Expansion on Tab seems to have solved the problem on my machine.

Answer 2

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

Answer 3

What about creating your own snippet?

Open Visual Studio Code --> Press ctrl+shift+P --> Search for "Preferences: Configure User Snippets" --> Select "css.json" --> Add the code

Answer 4

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.

• 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.