Will CSS Intellisense Be Fixed?

Are there any plans to make intellisense work with .LESS files? Currently, it displays absolute nonsense (see attached screen shot for one example), making the tool a real impediment to developers who are new to CSS, much less LESS. I've seen this mentioned before on the forum with some official looking replies about it being worked on, but I can't understand how this is not an absolute top priority. Please let us know what's going on.

Thanks.

Steve Harshbarger

Hi Steve,

We made some significant improvements in intellisense during the 1.x and 2.x releases, but we thought it was mostly behaving itself now (we know there are still intermittent cases where it comes up incorrectly, but we thought those were relatively few and far between). Are you on the latest version? If so, could you clarify where in your screenshot the cursor was, and what key you were pressing when the incorrect prompt came up? Then we can try to reproduce the issue and get it fixed for you. Thanks!

Thanks so much for the quick reply. I'm on the latest version 3.0.38.19767

I'm not sure what's different in my environment vs. what you see, but the intellisense is always wrong for me. A couple examples:

type "display:", then type "b", and I get a list with backface-visiblity, background, background-attachment, etc. I'd expect block, inline, inline-block, none, etc.

type "float:", then type "r", and I get a list with rendering-intent, resize, rest, etc. I expected to see left, right, none

Basically, the list that appears after you type a colon is always nonsense

Thanks for the extra info. We will definitely take another look at this. One limitation we do have is that we don't do intellisense for values (like block, inline, etc.) -- the only intellisense we offer after a colon is (meant to be) variables. This is something we're planning to implement, but getting rid of the spurious property names will have to come first. Thanks again for alerting us!

I only get this weird intellisense before the colon:, after the colon:, i get nothing at all.

There must be a way that WW can tap into VS intellisense for css ? ..i mean who cares if less/sass has crazy imbricked css that breaks VS syntax highlighting (WW already gets around this), the only thing that really matters for intellisense, should be what happens before and after a colon:

..something like keep VS intellisense, and just override VS syntax highlighting.

I have a license of resharper, which gets all squiggly lines if i open a .less file, however auto-completion continues to work, even with things like

body {
   color: red;
      a {
         display: inline-block;
         span {
            background-color: white; /*..still getting auto-completion here with resharper*/
         }
      }
}

Thanks for the info Ivan. For your and team's consideration, let me just explain why I think this is so important. We use LESS because it improves our productivity as developers. And we like intellisense for the same reason. But the way the tool works now, we are less productive in LESS than we would be writing native CSS. I can only put developers that know CSS syntax by heart onto my project because of this. It sounds like your goal is to just remove the intellinonsense, but I'm not hearing any sense of urgency to make the tool behave as one would expect. All I'm asking for is how VS does intellisense in a native CSS file. We've bought 4 pro licenses at my company before we fully understood this problem, so it's not like this is some open source shareware product. It should behave in conformity with expected norms.

I completely agree. I just bought a license specifically because I read that Intellisense was enabled for LESS, but now that I'm trying to use it it's confusing me and slowing me down. Please fix Intellisense for LESS. I'm very disappointed that I didn't know about this problem before making my purchase.

Yes, please make this a top priority. It's also the main reason i bought a license.

After all, this is listed in the Top 5 reasons to use the Web Workbench on the product page :-)

Right now what i get is:

• before colon

  • youpi intellisense

• after colon

  • no intellisense at all
    • not for css
    • not for variables
    • not for mixins
  • basic function suggestions, but only if i type out the whole word @darken manualy

Hi Steve,

We've made some beta improvements to intellisense in the latest nightly build (available in the store now). We're still not able to fully replicate your experience with property lists appearing where they shouldn't, but we're continuing to investigate. We now have lists of values displayed where appropriate (e.g. colours), and helper tooltips for syntax: this should give your developers a closer experience to the Microsoft CSS editor. Please let us know if this improves matters for you, and please be aware that this is a beta -- do let us know if you run into any regressions!

Little better after this nightly

i go from

• no intellisense after colon:
  • for css
  • for variables
  • for mixins
  • for built in functions

to

• no intellisense after colon:
  • for css
  • for mixins
  • for built in functions

Hi itechnology,

Not sure what you mean by 'no intellisense for CSS.' We don't handle CSS files. Could you clarify the problem you're seeing? Thanks!

Sample .less

@var: 1;
.myStyle {
    text-align: left;
}
.mixin(@color: red) {
    color: @color;
}

Now i type:

.class {
    property: value
}

property: i get nice intellisense dropdown

value: i get nothing, never (steve at least gets some crazy suggestions)

Then i type:

.class {
    property: @
}

property: i get nice intellisense dropdown

value: i get @var proposed

i don't get any built in functions proposed (ie @darken)

if i want function suggestion i have to type

.class {
    property: @darken(
}

i had to type out the whole "@darken(" before getting any suggestion at all, not very handy for learning anything. If i know that i can type @darken, i probably also know what parameters it takes.

Now i type

.class {
    property: .
}

property: i get nice intellisense dropdown

value: i get nothing proposed, not any class i may have in my file (.myStyle), nor the mixin (.mixin) i declared at the top of the file.

Resumé:

.class {
    property: value;
}

property: i get nice intellisense dropdown

value: pretty much everything on this side is broken

I know i keep bashing a bit at this, but you said you do not support css, and that you do not provide css intellisense inside less files (whether this is a bug or not, i do not know).

I'm just really hoping css auto-completion will get fixed inside .less files as this + syntax highlighting are really the only feature i personally care about in your product.

It says on the product page here: http://www.mindscapehq.com/products/web-workbench

• Intellisense
  • Visual Studio offers fantastic intellisense for developers and we've worked hard to bring intellisense to the Sass and Less files when you're editing.

Sorry, but i don't see this.

If you look at the definition of .less on the main site: http://lesscss.org/#docs

• The definition they give is:
  • As an extension to CSS, LESS is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax.

No intellisense for css inside less files ?, ..well it's not less, since LESS is CSS

Another thing to consider is that currently there are many products out there that do minification & bundling just fine. Also last night MVC4 beta was released with a go-live license, and one of the bigger features is, ..well, minification & bundling (which is handled quite elegantly actually)

You can check out Scott Guthrie's presentation here: http://channel9.msdn.com/Events/TechDays/Techdays-2012-the-Netherlands/2364

One thing you will notice in the video right away, is that they are dynamically bundling & minifying coffeescript and .less, and this support is also not limited to mvc, but is a integral part of .net

What this does leave us, is a visual studio that does great things for the web, but it is still missing the top 2 features any developer would want in VS: syntax highlighting & full auto-completion.

And i really think that these are the shoes that WW should try to fill (not minification), since this is something nobody else does currently.

If all else fails, how about a UserVoice, to let ppl vote on their top priorities ?

Thank's Robert

Robert,

This is one of our top priorities to improve. WW 3 was a large internal re-architecture and was released less than a week ago. Give us some time to add these improvements - we are putting out improvements most days in the nightly builds! I think it's one of the fastest iteration cycles you'll experience from a vendor :-)

We appreciate your detailed postings and the passion you have for the product -- we're not slowing down on adding enhancements. We'll have a voting feature in the near future but frankly, this is already the #1 area of improvement we're working on so don't fret that it's getting ignored :-)

I hope that helps clarify the situation.

John-Daniel Trask
Co-founder
Mindscape

Glad to hear. If i didn't like your product, i wouldn't be so vocal about it, but i guess you figured that out :)

I think WW is one of the best things to happen to VS lately as far as extensions go, and i think it would be a shame to see it get passed up by features that are getting added natively to .net, especially since the price/feature ratio is pretty correct.

Thank's again, robert

We are experiencing some of the same issues as mentioned above and although we really like the features this plugin gives to VS it also slows us down a bit, almost to the point were native css would be quicker to use.

In addition to the above mentioned auto-complete issues one of the things we find most annoying is that while you type a variable name the auto-complete makes suggestions (before the colon), which is fine, but once the colon is added it does not stop suggesting the variable, so when you type the variable value (including semi-colon at the end) and then hit enter it changes the whole line to whatever the auto-complete suggested for a variable and you lose what you just wrote. (You have to hit the space bar or esc to exit the auto-complete before a new line can be started.)

If auto-complete could be turned off while this was being worked on, then that would probably help us out as auto-complete is not a necessity.

Besides that we are really enjoying your product and the latest build seems to solve the re-building of imported files when edited.

Keep up the good work!

Some wierd stuff, maybe have to do with your regex patterns to match auto-completion

.testClass {
    text-align: r <- nothing happens
}

.testClass {
    .radius(4px);
    text-align: r  <- nothing happens
}

.testClass {    
    text-align: r  <- i get a dropdown !    
    .radius(4px);
}

and i only get auto-completion for variables, if they are declared in the same less file i am currently in. Anything added via @import is ignored.

Latest nightly fixed the css intellisense !:)

so i go from:

- no intellisense after colon:
    - for css
    - for mixins inside same file/and via @imported
    - for built in functions
    - for variables via @imported

to:

- no intellisense after colon:
    - for mixins inside same file/and via @imported
    - for built in functions
    - for variables via @imported

Thanks !

Suggestion:

Add browser prefixes to css dropdown -webkit-box-shadow, -moz-box-sizing, etc

Another nightly, another fix

now i go from:

- no intellisense after colon:
    - for mixins inside same file/and via @imported
    - for built in functions
    - for variables via @imported

to:

- no intellisense after colon:
    - for mixins inside same file/and via @imported
    - for built in functions

2 to go and it will be perfect !

Would it be possible to reopen the Intellisense dropdown when we press Ctrl+Space?
This is the VisualStudio default shortcut for the Edit.CompleteWord action.