Is anyone aware of a way to have VIM style folding in Visual Studio? I use #region blocks in c# class files and they're great, but unfortunately there's no equivalent functionality for javascript and css. The site/app I'm currently working on has a rather lot of css selectors and javascript and navigating the monolithic files is becoming difficult.
One option that we've considered is breaking up the css and javascript into separate files similiar to jquery modules, but then that introduces performance problems in terms of increasing the overall number of http requests.
If anyone has any suggestions for managing the madness, I'd be greatly appreciative!
Update: Richard Kimber suggests using the bookmarking features of visual studio to make navigating by headings more manageable. This is a step in the right direction, but not as useful as code folding/blocking.
I found a Microsoft extension that improved the JavaScript text editor for Visual Studio 2010.
http://visualstudiogallery.msdn.microsoft.com/en-us/872d27ee-38c7-4a97-98dc-0d8a431cc2ed
I have used it, and it gives all of the following for JavaScript files:
Brace Matching
Outlining / Code-folding
Current Word Highlighting
IntelliSense Doc-Comments Support
I know I'm not really helping with this one,
but have you heard of ViEmu. It is a, lets say, vim emulation within VS. Although it does not support all of vim's features, it does bring a flavor of it to VS navigation.
I haven't used it myself, but others talk pretty good of it, so you might want to give it a shot.
I am currently using JScript Editor Extensions as Brian Grinstead suggested. If it supports region folding, I haven't figured out how. It does support function folding in JavaScript.
There are also JSEnhancements and JSOutlining. Haven't tried either of those though.
This issue is a partial duplicate of this and this.
Related
I've got Web Essentials 2.5.3 installed in Visual Studio 2013 and the code folding feature works fine for function declarations but fails to show expand/collapse icons for object literals and array literals. Its driving me nuts and I can't seem to find anything in the Web Essentials settings to control these settings.
Has anyone encountered this issue or know of a solution?
I have the same issue. But I have found a work around for this, follow these 2 steps
1.select code snippet you want fold.
2.right click on selection, go to outlining Hide Selection. Short cut: (Ctrl+M, Ctrl+H)
This will work for you.
I am working with the new Visual Studio 2013 that now also has better support for embedded javascript code inside ASPX-Pages.
Since I there are some ASPX pages that have pretty much javascript code on it, I am collapsing the functions I don't need. However the next time I open the ASPX page in the editor the functions are all expanded again...
I am now asking: Does anyone know if there is a setting or something that enables to keep them collapsed, once they got collapsed by me? Just like it works for methods / classes collapsed in .cs files.
I also could not find a direct solution for this, so I looked up information regarding macros in Visual Studio. I found that recording the collapse operation (Ctrl+M) on the specified functions and running this macro at each startup solved my problem temporarily, but not after extensive change in my code.
I would recommend looking into parametering macros for an easy to maintain, semi-automatic code-collapse on startup. This is not a read-and-go answer, but it can give you some hints on where to start a workaround.
http://msdn.microsoft.com/en-us/library/b4c73967(v=vs.90).aspx
I have javascript source code that was not obscured, but compressed by collapsing. How can i expand it? Any tools/IDEs?
Thank you!!!
This should work for you:
http://jsbeautifier.org/
I once used with success UniversalIndent for this purpose: http://universalindent.sourceforge.net/
It also works as a notepad++ plugin, which was very useful for me.
If you are interested in doing a lot of Javascript programming, I can also recommend the Aptana Studio 3. From all the code editors I have ever tried, when it comes to Javascript this is the best one, offering code outlining and a primitive (but the best I've seen for Javascript) autocomplete functionality. It also has a Source Auto Format functionality that will help you auto indent the code.
You can more about the Aptana studio on the official site: http://aptana.com/products/studio3 . Please note that Aptana Studio 3 is a Beta product, but even so for me it was the best editor I could find.
I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.
I'm looking for a customizable JavaScript script which dynamically highlights code in a block like
<code class="someclass">source code...</code>
It needs to be customizable because the source code is in a quite esoteric programming language (Mozart/Oz). Ideally, I'd just edit some regexes to make it work.
I need dynamic highlighting because it should work in the github wiki which escapes all HTML code within a pre tag.
My Google fu has forsaken me so far...
SyntaxHighlighter might be what you're looking for. It supports custom languages, as well.
jQuery Syntax Highlighter is a new one based on version 3 of Alex Gorbatchev's Syntax Highlighter - a really really really popular plain javascript syntax highlighter.
It supports such things as code and pre blocks, able to use classnames like language-javascript to indicate we want it to highlight, as well as wordwrap. You can copy and paste code by selecting it normally instead of having to open a raw view like many others. It can be further customised by using the HTML5 data attribute data-sh or via specifying options at initialisation. A great stable choice which is updated regularly.