21
votes

I am experimenting with Less Css, and I am using Visual Studio 2010.

It would be nice if the editor provided support for syntax highlighting and Intellisense for Less, for instance coloring and suggesting variables. What are my options to get that to work ? Do I need to write a plugin for it, or how would one go about adding this to VS ? Does anything exist for this already ?

4
That question is similar, but the answer only allows Visual Studio to handle .less files as .css files. I would like a solution to handle .less files correctly including the extensions such as variables. If such a solution does not exist yet, I would like to get some pointers as to how I could implement it myself, if possible.driis

4 Answers

15
votes

If you are using Visual Studio 2012 you can use Web Essentials 2012. It uses syntax highlighting similar to Visual Studio's CSS syntax highlighter. It compiles to CSS on save.

enter image description here

Update

  • 2.4-2.5 Less syntax highlighting was disabled
  • As of 2.6 Less syntax highlighting was turned back on
  • As of 3.8 Less syntax highlighting is disabled for VS2012.

8
votes

http://www.mindscapehq.com/products/web-workbench

Update (07 Mar 2012)

After a week or so of using this, I have uninstalled it due to:

  1. Annoying nagging adverts telling you to upgrade
  2. A weird bug that stopped me being able to save my .less files intermittently
7
votes

This extension seems better : LessExtension

Here is the author description :

  • Autocompile on save (using dotless)
  • Highlight matching braces
  • Syntax highlight (No multiline comment support)
  • Word highlight when a word occurs multiple times
  • Word completion using Visual Studios css 2.1 definition
  • Outlining so { ... } sections can be collapsed

And it work nice for me.

5
votes

I can't find one on the Visual Studio Gallery (as of 5/2/10) besides CSS Is Less, which only hooks up the built-in CSS language service.

If you want to learn how to write one yourself, you can start by looking at the Ook Language Integration sample. Implementing the extension points in that sample (classification, quick info source, completion source) will give you the features you asked for (syntax highlighting, hover tips, intellisense completion).