Open a file in Visual Studio's CSS Source Editor

Question

I am using Phil Haack's T4CSS T4 template based on .less

One bad thing about Phil's solution is that visual studio opens the .less files as plain text files rather than as css files. (Thus no intellisense.)

How can I get VS to open a .less file in the CSS Source Editor?

I've tried:

1. Right Click > Open With, but the CSS Source Editor isn't listed.
2. Tools > Options > Text Editor > File Extensions, but once again, CSS Source Editor isn't listed.

Can this be done?

Answer 1

Midscape's Web Workbench Visual Studio Extension adds support for .less files, including syntax highlighting and Intellisense. It also adds support for SASS and CoffeeScript.

Answer 2

I just posted an extension that does this; you can download it from the Visual Studio Gallery.

The key to the extension is the .pkgdef file:

[$RootKey$\Languages\File Extensions\.less]
@="{A764E898-518D-11d2-9A89-00C04F79EFC3}"

[$RootKey$\Editors\{A764E89A-518D-11d2-9A89-00C04F79EFC3}\Extensions]
"less"=dword:00000028

Note that this extension doesn't do anything to help the CSS language service support Less; nested rules, for example, don't work very well at all (it confuses the CSS language service).

Answer 3

If you are using the dotless.Compiler.exe tool (as opposed to the http handler), there is nothing to say your files have to end with .less. I name my suffix my .less files with .css so that Visual Studio treats them like css files. E.g. my naming convention is:

/css/common.less.css ==> /css/common.css

I run the dotLess compiler as a post-build event, e.g.

$(SolutionDir)\packages\dotless.1.1.0\Tools\dotless.Compiler.exe "$(ProjectDir)\css\common.less.css" "$(ProjectDir)\css\common.css"

Answer 4

How to turn on Visual Studio 2010 .css Intellisense on .less file