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:
Right Click > Open With, but the CSS Source Editor isn't listed.
Tools > Options > Text Editor > File Extensions, but once again, CSS Source Editor isn't listed.
Can this be done?
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).
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.
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"
How to turn on Visual Studio 2010 .css Intellisense on .less file
Related
I've been using Notepad++ for editing CSS, and for just plain text. In Notepad++ I can paste a block of text and specify if I want the file to be highlighted as HTML, CSS, etc.
How do I set the language that Visual Studio will use to interpret a block of text I pasted from my clipboard? What about when I open a plain TXT file?
Am I using the wrong tool for the job? I've been hearing about "Visual Studio Code". Is that what I should use instead?
In general, Visual Studio works with "Project". It is designed to work with the relevant files for the project, and it will recognize them according to the extension.
In Visual Studio, you can override the default config for the file extension with this docs.microsoft. This configuration will work against all files with this extension, but not against a specific file.
I guess there are plugins that can help on the subject, but as you said, Visual Studio Code is more like a file editor like Notepad++, with very powerful plugins and capabilities. So yes, in case you want an enhanced Notepad++, you need to use the Visual Studio Code and not the Visual Studio.
After using both Visual Studio and Visual Studio Code I can confidently tell you VS Code is so much swifter to open and use while also being very easy to navigate.
VS Code automatically detects the language of your code but you can also switch languages by clicking on the existing language at the bottom.
I highly recommend you use it: https://code.visualstudio.com/
I'm doing Bob Tabors HTML5 & CSS3 course and in the course he only uses Editor and Internet Explorer. I thought that it would be a bit more convinient if I use Visual Studio to code. The problem, I can't open a .css file directly. I can open it in Visual Studio and it behaves like a normal .css file, but when i try to set the "Always open with" to the devenv.exe it says that the file can't be opened with that programm. .html, .cs and .js all work when I try to open them with the devenv.exe.
Thanks to the advice from #Ivaylo Slavov , I just decided to download Visual Studio Code. Seems to be a faster solution for editing .html and .css files.
I have recently upgraded to VS2012 and have a small issue. All our sass files are checked into source control and the corresponding css file gets generated when the project is built (the css file is never part of source control). with VS2012, as soon as i edit the sass file, a css file is created under the sass file (nested under it) and the project file is checked out. I do not want this as we don't need to check in the css file.
Is there an option i can set to avoid this ? Had a quick look under tools ->options but didnt see anything
The only plugin we have installed is Mindscape Web Workbench free version.
Thank you for any advice.
So the Web Workbench plugin was automatically modifying the project file and including the following under my scss files. This was still present even when i disabled and removed the plugin. There's no option to disable this function in Web Workbench, so i wont be using it anymore.
<Compile>True</Compile>
<Minify>True</Minify>
<CompileStyle>Nested</CompileStyle>
<DebugInfo>False</DebugInfo>
Using SassyStudio now which is nice and simple.Has the option to disable auto css creation and project adding etc.
Hope this explanation can help someone else.
I've set up Web Essentials 2013 (in Visual Studio 2012) and loaded in the default Twitter Bootstrap LESS source files. Auto-build and minification is working perfectly, except Web Essentials quite overdoes the job. When I select "bootstrap.less", make a change and save it, Web Essentials creates a new "bootstrap.css" as well as a "bootstrap.min.css" with everything inside I need. But when I edit e.g. buttons.less, it creates a buttons.css (and buttons.min.css) too (with all the includes and mixins). Which means, in fact, I'll have nearly the same css files over and over again under different names.
Can I declare certain files to be ignored on save?
There is a convention in Web Essentials that if the name of your less file starts with an underscore (like _utils.less) it will not be compiled to css on save.
https://webessentials.uservoice.com/forums/140520-general/suggestions/3319359-don-t-compile-nested-less-files
Okay, I figured it out.
What I initially wanted was LESS compilation on build, Web Essentials was so kind to do this on save. To deactivate this, in Visual Studio 2012 head over to Tools -> Options -> Web Essentials -> LESS and deactivate "Generate CSS file on save".
According to the Visual Studio Extension page for Web Essentials, minification on build works not by now, but will on future releases. I have to delete the .min.css files by myself and create it again on every build as it seems. :(
Pro-tip for every dev:
If you use any framework, tools, extensions etc. and your new super-powers don't work as expected, don't blame the extension, shut up and do it yourself.
Although what #corvuscorax says is absolutely true what I do (if you don't like the idea of starting your file names with an underscore) is to create a folder starting with a #
This seems to stop webessentials from compiling your less.
Note that Visual Studio won't let you create a folder with a starting hash so you will have to create it using your Windows Explorer and then add it to your project via visual studio.
For ignoring only files, you can use underscore at the file name.
Web Essentials has an internal convention whereby files beginning with an underscore will not be saved to CSS.
This is actually quite useful. You don’t want your variables.less or mixins.less files being saved as variables.css or mixins.css. So in this case, name them _variables.less and _mixins.less. They will be compiled (and thus checked for correct syntax) but won’t take up space on disk or in source control as redundant CSS files.
https://medium.com/#brendaningram/web-essentials-not-saving-css-files-a450b8c2d23a
There is a way to keep your filenames and prevent WebEssentials from compiling your LESS at the same time. Create .weignore file with filenames or masks for ignored files as described in the docs.
Is there a way to include a different Javascript file in an ASP.NET page depending whether it's a debug or release build?
For release builds, I want to include the minified (using yuicompressor) Javascript, but I would like to use the more readable file for debug and development.
You can do one of two things ... either rename the appropriate file to the filename referenced in the html in a postbuild step, or dynamically include the html based on the preprocessor symbol.
For development, if you're using Visual Studio 2008 SP1 you can also take advantage of the improved support for JavaScript IntelliSense. Scott Gu has a blog post here:
jQuery Intellisense in VS2008
The basic set up is:
Install Hotfix KB958502
Reference release versions of your .js files as you would normally
Ensure that you have the "development" version of the .js file sitting next to it, called *-vs-doc.js or *.debug.js
This will get you all the intellisense for the files.