Skip to content

[css] add semicolon on value completion #32200

Closed
microsoft/azuredatastudio
#7206
Closed
[css] add semicolon on value completion#32200
microsoft/azuredatastudio
#7206
Assignees
octrefaeschli
Labels
css-less-scssIssues and items concerning CSS,Less,SCSS stylingfeature-requestRequest for new features or functionalityon-testplan
Milestone
September 2019

Description

@DamianPereira
Damian Pereira (DamianPereira)
opened on Aug 9, 2017
  • 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.

Activity

  1. Imagevscodebot
    added
    css-less-scssIssues and items concerning CSS,Less,SCSS styling
    on Aug 9, 2017

  2. dnecklesportfolio commented on Aug 10, 2017

    @dnecklesportfolio
    Dwayne Neckles (dnecklesportfolio)
    on Aug 10, 2017

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

  3. ImageAndre Weinand (weinand)
    assigned
    Martin Aeschlimann (aeschli)
    on Aug 10, 2017
  4. ImageMartin Aeschlimann (aeschli)
    added
    feature-requestRequest for new features or functionality
    on Aug 10, 2017
  5. ImageMartin Aeschlimann (aeschli)
    added this to the Backlog milestone on Aug 10, 2017

  6. bymomo commented on Sep 11, 2017

    @bymomo
    默默 (bymomo)
    on Sep 11, 2017

    support

  7. ImageMartin Aeschlimann (aeschli)
    changed the title [-]Automatically add semi-colon after value suggestion on css and similar files.[/-] [+][css] Automatically add semi-colon after value suggestion on css and similar files.[/+] on Sep 12, 2017
  8. ImageMartin Aeschlimann (aeschli)
    changed the title [-][css] Automatically add semi-colon after value suggestion on css and similar files.[/-] [+][css] add semicolon on value completion[/+] on Dec 4, 2017

  9. 1-800-jono commented on Feb 7, 2018

    @1-800-jono
    Jonathan (1-800-jono)
    on Feb 7, 2018

    Why is this closed? Already done?

  10. aeschli commented on Feb 7, 2018

    @aeschli
    Martin Aeschlimann (aeschli)
    on Feb 7, 2018
    Contributor

    It's not closed...

  11. octref commented on May 10, 2018

    @octref
    Pine (octref)
    on May 10, 2018
    Contributor

    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. Martin Aeschlimann (@aeschli) What do you think?

  12. yyynnn commented on Jul 19, 2018

    @yyynnn
    Sergio (yyynnn)
    on Jul 19, 2018

    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?

  13. dmikester1 commented on Aug 9, 2018

    @dmikester1
    Mike Dodge (dmikester1)
    on Aug 9, 2018

    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.

  14. ImageMartin Aeschlimann (aeschli)
    assigned
    Pine (octref)
    on Aug 10, 2018

  15. TomsPoint commented on Aug 19, 2018

    @TomsPoint
    TomsPoint
    on Aug 19, 2018

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

  16. 4 remaining items

  17. octref commented on Jan 4, 2019

    @octref
    Pine (octref)
    on Jan 4, 2019
    Contributor

    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:
      image

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

  18. yyynnn commented on May 22, 2019

    @yyynnn
    Sergio (yyynnn)
    on May 22, 2019

    Martin Aeschlimann (@aeschli) no, he means this:

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

  19. aeschli commented on May 23, 2019

    @aeschli
    Martin Aeschlimann (aeschli)
    on May 23, 2019
    Contributor

    Sergio (@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)

  20. am-awais commented on Jul 30, 2019

    @am-awais
    am-awais
    on Jul 30, 2019

    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

  21. octref commented on Aug 9, 2019

    @octref
    Pine (octref)
    on Aug 9, 2019
    Contributor

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

  22. octref commented on Aug 9, 2019

    @octref
    Pine (octref)
    on Aug 9, 2019
    Contributor

    VS Code. Proposed change:

    • Insert semicolon at end
    • Automatically trigger property value completion

    vsc

  23. octref commented on Aug 9, 2019

    @octref
    Pine (octref)
    on Aug 9, 2019
    Contributor

    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

    atom1

  24. octref commented on Aug 9, 2019

    @octref
    Pine (octref)
    on Aug 9, 2019
    Contributor

    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.

    atom2

  25. ImagePine (octref)
    added a commit that references this issue on Sep 11, 2019

    completePropertyWithSemicolon support for microsoft/vscode#32200

    4e30ab7
  26. ImagePine (octref)
    added
    on-testplan
    on Sep 11, 2019
  27. ImagePine (octref)
    closed this as completedin 4dec1f7on Sep 11, 2019

  28. octref commented on Sep 11, 2019

    @octref
    Pine (octref)
    on Sep 11, 2019
    Contributor

    css

    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.

  29. ImagePine (octref)
    modified the milestones: Backlog, September 2019 on Sep 11, 2019
  30. Imagevscodebot
    locked and limited conversation to collaborators on Oct 26, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

css-less-scssIssues and items concerning CSS,Less,SCSS stylingfeature-requestRequest for new features or functionalityon-testplan

Type

No type

Projects

No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions