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?

Brilliant

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.

Brilliant

After a week or so of using this, I have uninstalled it due to: (a) annoying nagging adverts telling you to upgrade and (b) a weird bug that stopped me being able to save my .less files intermittently – Dirigible

Similar to @Hainesy I uninstalled it as I found it very clunky. – Merocrine

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

Tyus

Is there any way to get the CSS validation engine going on .less files? – Unsubstantial

@Chris Tools->Options->Text editor->CSS->Miscellaneous->untick 'Detect errors' might do the trick. – Branchiopod

Any way of getting a VS2008-compatible version? – Winthrop

You should be able to set the equivalent reg keys for VS2008; all the extension does is load the .pkgdef file, which is essentially just a .reg file that evaluates properties like $RootKey$. – Tyus

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"

Idaline

Answer 4

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

Frosted