{"id":1034,"date":"2013-11-06T08:00:00","date_gmt":"2013-11-06T08:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/webdev\/2013\/11\/06\/a-high-value-undocumented-less-editor-feature-in-visual-studio\/"},"modified":"2013-11-06T08:00:00","modified_gmt":"2013-11-06T08:00:00","slug":"a-high-value-undocumented-less-editor-feature-in-visual-studio","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/dotnet\/a-high-value-undocumented-less-editor-feature-in-visual-studio\/","title":{"rendered":"A High-Value, Undocumented LESS Editor Feature in Visual Studio"},"content":{"rendered":"

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.<\/p>\n

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:<\/p>\n

\/\/ Core variables and mixins<\/font>
@import “variables.less”<\/font>;
@import “mixins.less”<\/font>;<\/p>\n

\/\/ Reset<\/font>
@import “normalize.less”<\/font>;
@import “print.less”<\/font>;
…<\/p>\n

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.<\/p>\n

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:<\/p>\n

\/\/\/ <reference path=”bootstrap.less” \/><\/font><\/p>\n

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.<\/p>\n

Note<\/strong>: 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.<\/p><\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":433,"featured_media":58792,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[197],"tags":[7261,7456,7272,7412,7436,7319,7389],"class_list":["post-1034","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-aspnet","tag-css-and-html","tag-less","tag-tips-and-tricks","tag-visual-studio-2012","tag-visual-studio-2013","tag-visual-web-developer","tag-web-development"],"acf":[],"blog_post_summary":"

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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/users\/433"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/comments?post=1034"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/posts\/1034\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media\/58792"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/media?parent=1034"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/categories?post=1034"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/dotnet\/wp-json\/wp\/v2\/tags?post=1034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}