Keep javascript functions collapsed in VS2013 - javascript

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

Related

The best extension to enable autocomplete feature when writing JavaScript in Atom

I'm learning Javascript and up until now when I wanted to change anything in the DOM, I was using Google Chrome devtools to do that. Now I'm moving to write my code inside the JavaScript file, that accompanies the webpage, in Atom but the problem is the extremely useful autocomplete features of Chrome devtools is not available in Atom. For example when I type this code:
document.addEventListener('click', function(){
const mainHeading = document.querySelector('h1');
mainHeading.style.backgroundColor = 'red';
})
Chrome devtools is intelligent enough to suggest backgroundColor with a capital C to prevent any typing errors but the same thing doesn't happen in Atom. In fact Atom does not have any suggestions at all. I have tried installing different JavaScript plugins such as atom-ternjs or autocomplete-javascript, to name a few but none is working when you want to write the code to manipulate the DOM. Any suggestions to solve this is greatly appreciated.
Here's a quick solution using Atom Ternjs.
Navigate to the menu bar and click Packages-> Atom Ternjs -> Configure Project.
Here, select the browser option under libs
Then, just scroll down and click on Save and Restart Server.
I hope this helps.
I'm using TabNine extension now and I'm satisfied with the performance. It uses deep learning to learn and predict the variables and lines of code you might want to write based on those variables and the more lines you write in a particular project the better it gets at giving the suggestions.

Visual Studio missing most Javascript editing functions in one solution

I have a bizarre issue where a websites JavaScript files are missing many of the editor functions such as:
handles around code blocks; buttons that allow collapse/expansion
correct line breaks; when pressing enter the cursor goes to the next line but first character position rather than nested per previous line
Keyboard shortcuts missing
Intellisense missing
The dotted line showing the start/end of a nest
and various others.
What I did to get to this:
I have a website in a solution, call it solution A and the JavaScript editing is normal.
This website is going to be moved into a new solution along with other projects.
I created a new empty solution (solution B) and added some solution folders.
I copied the website (via windows exploroer) from solution A to solution B.
Modified the namespace within the csproj file using notepad
Added this website as an existing project to solution B
Performed a find/replace through the code to adjust the namespace to the new one set in D above.
Now when I open my JavaScript files I get none of the functionality listed above.
I have verified that the Text Editor / Javascript/Typescript options are good.
The 2 images below are from copies of the same file in different solutions both running on Visual Studio 2017. The images demonstrate the lack of the collapse/expand button and the dotted lines. Interestingly, all color is correct.
Any ideas what might cause this?
Good JavaScript
Bad JavaScript
After some digging around a colleague found this link talking about a very similar issue - JavaScript intellisense still not working
One of the comments mentioned disabling the 'Language Service' function.
I did this, and sure enough all functionality has returned.
I am not going to mark this as an answer because i've had to disable one thing to cure another. This is just what i have had to do to get JS to edit correctly.
What I am doing right now us updating Visual Studio. It's currently 15.0.26430.4 and 15.4.27004.2002 has just been released. With any luck this resolves the issue.
UPDATE
After updating Visual Studio all is working correctly. Can only assume there was an issue with the Language Service.

How do I post a jsfiddle example of some trouble I'm seeing in Rails?

This may be a very basic question, but is it possible to post a jsfiddle that captures a Rails environment, the js, css, and HTML that is generating a nagging problem? I posted another SO question here: Unable to float a twitter bootstrap navbar item right with either class=pull-right or float:right
... and it was suggested I post something to jsfiddle. Honestly, I'm just completely in the dark as to how I might gather the css, js, and HTML in a way that can be copy-pasted into jsfiddle. Is there some slick way to pull the 4 necessary components together?
I am mostly interested in being being able to share and debug code that pertains to display and layout.
Many thanks in advance.
Sites like jsfiddle and jsbin are useful as testbeds for various issues involving HTML, CSS, and JavaScript. A good workflow for using them might be as follows:
Before going to one of those sites, use a browser debugger (Firebug, the Chrome debugger, or even the debugger in modern versions of IE if you must) to figure out the mechanics of the issue. Are you seeing unexpected JavaScript behavior? Weird layout? Whatever the problem, see if you can narrow the focus as much as possible.
Now, go to one of the workbench sites (make an account for yourself too; it helps to be able to find old experiments) and start trying to reproduce the problem. Start as simply as possible and work up. It can be hard and frustrating, but in my experience even the process of trying to figure out an isolating test case can itself lead to enlightenment :-)
If you do manage to isolate a behavior that you don't understand or can't explain or whatever, you can then save the test case (jsfiddle has "Save" and "Update" buttons; jsbin seems to magically save things automatically) and then post the URL here (or anyplace else). If you do post here, it's a good idea to copy the relevant code from your test case directly into your question.
I use both of those sites (and there may be more of them out there). The jsbin site gives you a little more control over your page, and provides a way to see your page outside of an <iframe>. That's kind-of important if you're testing for mobile applications. Otherwise they're both great resources.
Oh, and both sites let you import various popular libraries via simple configuration tools. That's really handy for tracking bugs that you think may have been introduced by a library version change (rare, but really freaky when it happens).

How to highlight (un)used JavaScript live in Dreamweaver

I am working in Dreamweaver CS4 and implemented JQuery code that I found online for a gallery function.
I am only using a very small part of the gallery functions available, and would like to delete the unused script in order to get more clarity and a cleaner script. But as a JavaScript beginner I can't identify what is important and what is not.
My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using? I am imagining a tool that you could turn on when running the live view that would visualize the portions of code that is being used.
Or, the other way round, is there a way to highlight the unused code.
The live code button doesn't seem to do this.
Thanks for your help!
My question: Is there a way in Dreamweaver to view/highlight the JS code that the site is using?
No. You would need to use Firebug or a similar javascript tracker/debugger to see how the code is used. The most DW will tell you is which external files are linked to a page.

Working with javascript in VIsual Studio

To work with JS files in Visual Studio 2008, I did:
Tools -> Options -> Text Editor -> File Extensions
and added js extension with Script editing experience.
That works pretty much as expected apart from the following things:
Syntax highlighting is set-up extremely slow (after 10 seconds or so) when I open the JS file. The compiling warnings are generated equally slow and they disappear slowly when fixed. Generally, not a big deal, but I wonder why. Until the file is syn highlighted, you can't put in breakpoints.
Intelisense works, but not always. For instance, if I use getElementById to get the element, intelisense with that element doesn't work. I guess it has to do with context, as the compiler can't determine what kind of object is in question. It also doesn't work inside an html page using the script tag, but in this case syn highlighting is immediate.
If there is any better approach?
I am currently opting to use an external editor and to launch it by adding a custom "open with" action on js file. However, I don't like doing this because I can't use the fantastic VS debugging capabilities...
The 3rd party addin Visual Assist X can help with js.

Categories