A High-Value, Undocumented LESS Editor Feature in Visual Studio
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
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.
/// <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.