Recently a very valuable, undocumented feature in the Visual Studio LESS editor came to my attention. This applies equally to Visual Studio 2012 Update 2 and later, and to Visual Studio 2013. The installation of Web Essentials is not required to benefit from this feature.

The Visual Studio LESS Editor respects @import statements, and can resolve namespace, mixin and variable definitions from imported files. However, a common pattern with larger LESS projects is to have one include file establishing the include order, and a large number of source files with no @imports at all. The BootStrap project, for example, contains bootstrap.less, which looks like:

// Core variables and mixins
@import “variables.less”;
@import “mixins.less”;

// Reset
@import “normalize.less”;
@import “print.less”;
…

When any of the project files, such as mixins.less, is opened it will display a long list of validation errors. IntelliSense will not work for the items which come from imports unless one adds an @import statement. Unfortunately, this ruins your ability to build or easily update your project.

A solution to this problem is to use a special “reference” comment, which is exactly like those used for injecting JavaScript references in *.js files. At the top of each BootStrap LESS file, add:

/// <reference path=”bootstrap.less” />

Once this is done, the editor references the specified LESS file(s) when preparing validation and IntelliSense without changing the semantics of the source code.

Note: the LESS compiler used by Web Essentials does not respect this statement; you will not be able to build such projects inside the IDE with Web Essentials. You will still need to use a command line build. However, you will find that your editing experience will be greatly enhanced.