[css] add semicolon on value completion

[DamianPereira]

• VSCode Version: Code 1.14.2 (cb82feb, 2017-07-19T23:26:08.116Z)
• OS Version: Linux x64 4.4.0-89-generic

Steps to Reproduce:

1. Trigger a sugestion for a value of a css property (for example, writing c after align-items: )
2. Select a suggestion from the list (for example: center)
3. Now you have to write ;

It would be nice if selecting suggestions added the semi colon at the end automatically, like atom does on css/scss files. AFAIK there's no way to configure this in current VSCode, maybe a setting could be provided if it's too strong for a default.

[dnecklesportfolio]

This is would be absolutely awesome, thanks for posting this.

[bymomo]

support

[1-800-jono]

Why is this closed? Already done?

[aeschli]

It's not closed...

[octref]

There is no way to do this consistently -- for properties that have enum property values we can auto-complete the semicolon, but for others we can't. Also there is the case of !important, so if we add the semicolon this might cause trouble to certain people instead of helping them.
I'm in favor of having consistency and not doing this. @aeschli What do you think?

[yyynnn]

Screw semi colon, add colon - this is crucial! Not having colon after prop complete breaking flow so much. This is implemented in atom, so why no love for vscode?

[dmikester1]

I don't see any reason why this couldn't be added as an option in the settings. Leave it disabled by default and people who want it could enable it.

[TomsPoint]

a way it could work constantly is to add it wenn you put in the "align-items" it autocompletes to "align-items: ;" and the cursor is placed right in front of the semicolon so you can add in one or multiple values...

[budislav]

Oh yes, add semicolon on value completion is really needed.

[johnasp]

I just searched for a solution to this and stumbled across this thread. This bug is so incredibly ANNOYING! Incredible they have shipped VS without fixing this first.

[nemanjacosovic]

Not having colon after the property, this is the dumbest "feature" of VSCode by far. I've been using VSCode it for a year now and I found myself absolutely hampered while writing code.

Back in the days #Macromedia's Dreamweaver was the tool. Wish it would come back in some form. Dreamweaver 8 was such great tool before Adobe ruined it. I guess phpStorm/webStorm is the only way to go today in order to have a normal editor. I like Sublime and Coda, but jetBrains is blowing everyone out of the water. But, I'm going off topic...

Again, it is completely unbelievable that this was shipped like this, and that it even had so many updates not having this implemented.

Do you even CSS?

[aeschli]

@nemanjacosovic We already add a colon after the property name. I assume you mean semicolon after the value?

[octref]

I guess this comes as part of property value completion. I think the best solution is to use https://github.com/csstree/csstree to understand the syntax for each CSS property and offer valid completions.

The current problem:

• If you are writing position: and chose relative, then we can safely close the line with a ;

• But imagine if you are writing flex-flow: and chose row. You might want to continue writing row nowrap so we shouldn't close it with a semicolon.

• Completing with semicolon and putting cursor in the middle might be problematic too. For example emmet:
  

• Now after writing the values, I need to press right to get pass the ; at the end to open a new line. This is annoying.

[yyynnn]

@aeschli no, he means this:

And this should trigger all available values that prop supports. Like in Atom.
This is truly revolting.

[aeschli]

@yyynnn Please file a separate issue: This issue is about the semicolon. We already add colons for properties (but don't show this in the proposal label)

[am-awais]

Can anyone help how to active auto colons after completing css properties like

display:

how to add ( : ) automatically in Visual studio 2017 not visual code

[octref]

I'm wondering what exactly are you all asking. Please upvote below three posts accordingly.

[octref]

VS Code. Proposed change:

• Insert semicolon at end
• Automatically trigger property value completion

[octref]

Atom. Complete property value with semicolon. I feel when using css properties like font-family, animation etc, this can backfire and be unpleasant. Atom doesn't seem to do any completion for animation

[octref]

Atom, by pressing tab instead of enter to complete. Let's ignore the prefixes. The idea seems to be close to what I proposed for VS Code, it's just you need to manually trigger property value completion in Atom whereas VS Code can do it automatically.

[octref]

After you are done writing a value, you can open a new line below by Cmd+Enter or Ctrl+Enter to avoid making the semicolon after you go to new line.

You can control this behavior with css.completion.completePropertyWithSemicolon.