I think that Visual Studio's biggest let down is the Javascript editor. I have been told to use Aptana as an editor for my javascript files, but I would prefer to stick with visual studio if possible.
I have read other similar plugin posts, but none focus specifically on Javascript.
VS2010 may offer some improvements, but will they be up to Apatana standards? I have briefly tested the beta, but I'm not overly impressed.
Is there anything out there that will bring Javascript closer to c# development? Considering the wide spread use of Javascript I think there must be something....... I hope! :)
Many thanks in advance... this is something that has always bugged me!
There's a couple recent plugins that may be helpful :
From Microsoft :
JScript Editor Extensions
Brace Matching
Outlining / Cold-folding
Current Word Highlighting
IntelliSense Doc-Comments Support
JSEnhancements
Outlining and matching braces highlighting
(I wouldn't think installing both of these is a good idea - and the Microsoft plugin has more features so try that one first)
VS is a pretty good IDE (especially when coupled with Resharper) but not so hot with Javascript. The debugger is good and there's the JSLint plugin but other than that I'm not sure. Aptana (based on Eclipse) is an excellent javascript IDE but it doesn't like it much when the javascript is embedded in aspx files (unless they updated the support recently). So far I'm not sure there's an ideal .net platform IDE for both client and server side stuff just yet.
Update: Resharper 6 added pretty good JavaScript support - so now I'd recommend that combination if you're doing a lot of debugging across client and server at the same time. If you're focussing on pure client code then I find WebStorm to be an excellent JavaScript/HTML IDE - even better than Aptana.
I'd really like to recommend Webstorm. It does not! treat your JS as text files.
Its a full blown JS editor and has become my favourite JS editor working in parallel with VS to handle my server side stuff.
WS has actual object intellisense across JS files. That means when I press . (dot) it shows me the functions on that objects, even if its located physically in another file.
It will recognize my objects (or their type if you will) created in other JS files referred to in the file I'm working on.
I have 'Find usages' on JS functions
I have 'find all references' on JS object / function / class / variable or whatever you want to search on. In the end its all objects but Webstorm knows this.
If I change the short/cut to F12, I can press F12 on my function call and it will jump to the implementation of that JS functon. Even if its located in another file.
Ofc. you have code folding and colouring, extract method and other neat code re factoring, overview creating tools.
Oh. And by the way.
I'd like to kill off a rumour going around in the cloud on forums I come across from time to time, looking for better ways to handle JS.
reSharper DO NOT SUPPORT JAVASCRIPT! A little piece of me dies every time I read some guy repeating what he saw on the reSharper site. It may have a some poor intellisense and some low level syntax check, but that has nothing to do with support.
Notepad++ supports JS better than VS in my opinion.
Münster
Don't forget to grab Chirpy to handle minifying your scripts in VS.
If you use Visual Studio, add the
/// <reference path="myOtherJsFile.js" />
directive at top of your js files and install Web Essentials you get pretty decent (but not perfect) intellisense, go to definition by using F12 and find all references (sort of..) by using SHIFT+F12
Related
Recently I've needed to write a small utility for Acrobat in its JavaScript.
Because the editor in Acrobat is pretty limited, I've installed the latest release of Eclipse IDE for JavaScript and Web Developers (Neon). It should already include the latest JSDT 2.0.
However, I've been surprised, that Eclipse's JavaScript editor does not correctly parse even simple common JavaScript patterns, like namespaces, modules, single global variable, etc. Also code folding is missing, except the very first function.
I do not expect to debug Acrobat's JavaScript code in Eclipse, but I wanted to have a smart JavaScript editor and also projects, where I could gather a few non-JavaScript resources. Some automation possibilities would be also nice, of course.
I've played with Eclipse preferences a lot and I've also searched on Internet, but I was not able to find anything really helpful.
Have I missed something in Eclipse configuration or is it really wasting of time and I should use something else?
For small projects a free IDE would be preferable, but also reasonably priced commercial products would be acceptable.
A configuration solution in Eclipse would be the most welcome, of course.
Thanks a lot for your help.
The support for newer Javascript Syntax is very bad in Eclipse (Bug).
You can use Tern.js it has a good ES5 and ES6 support.
But for Javascript development there are a lot of much better editors like Webstorm, VisualStudio, Sublime out there. You'll like more!
From my experience with Acrobat JavaScript, and the Acroforms technology (which you use when you work in PDF), there are not that many advantages you get from an IDE.
In fact, for my work (which IS extensive), a good text editor, with quote and parentheses balancing, maybe even auto-indent, and basic JavaScript code coloring is pretty much sufficient. I personally do write the scripts in BBEdit, and then copy/paste them into the Acrobat JavaScript editor window.
Keep in mind that JavaScripts in Acrobat/PDF are generally quite short, because they do not have to deal with DOM overhead, and because the field event sequence is quite structured (and it is really important to understand this sequence… more important than fancy JavaScript constructs). You also have to be aware that the JavaScript core implementation in Acrobat is relatively old (recently, they did upgrade it, but if your forms/applications are for the general public, you can't rely on them having the very newest version of Acrobat/Reader).
It is a good thing if this is opensource, much better if it is multi-OS.
I used to use XCode for mac, and I find it quite interesting as an editor. But I don't like how it handles the "projects" (I hate when suddently you find new folders and files in your code folder).
Needing to work with windows, I've tried aptana. It seems that when building a project, it just reads the content without writting anything. It is much cleaner for me. But I find it heavily loaded with characteristics that I do not need, and I really miss the find/replace features of XCode, where all the matches are automatically marked on the document, and the "folding" versatility of XCode also vs the aptana possibilities.
Then I've though that maybe I was missing some key program out there. Any suggestions?
(thanks)
For Windows, I'd recommend Notepad++. Also works on Linux with Wine. Very minimal, yet powerful. Free, and open source. See my own review at http://blogger.ziesemer.com/2007/10/notepad.html. Excerpt:
I've been doing quite a bit of JavaScript coding lately, and the
desire for a good code editor quickly becomes apparent.
The two main features I was looking for were capable syntax
highlighting and code folding. (While other languages such as Java and
C++ are commonly supported, many other editors seem to lack good
support for JavaScript.)
Notepad++ does both of these nicely, does them by default, and does
them well. Additionally, it is free and open source, with a GNU GPL
license.
Other useful features included are:
Search and replace using Regular Expressions.
"Find in Files". Handy for searching for a string or pattern across multiple files and directories.
Block-select mode / rectangular block selection. Select and manipulate columns of characters, without selecting the entire row(s).
Bracket matching, auto indentation, and compiler integration.
Yours is a better question than the one I'm about to link to, but the answers should be about the same:
HTML +CSS +Javascript Editor
I know I'm not the first one that would like to have #region and brace matching support for Javascript. That's why I don't want to install one by one and see which one behaves better and which functionality it supports.
I would like to ask other fellow developers to provide feature comparison for these Visual Studio 2010 Javascript extensions:
JSEnhancements
Visual Studio 2010 JavaScript Outlining
JScript Editor Extensions
And any issues you might've had with them. JSEnhancements seems to have the most downloads, but that still doesn't give me any ideas of its features compared to others.
It's great that Microsoft provides some sort of integrated extension propagation and management, but there's an overwhelming amount of them and it's really hard to choose the right ones.
Other Javascript VS tools
There are other tools as well that some of you may be using. If you find any of those particularly useful, please provide some information and I'll add it here to this list. It may help us lots.
Javascript Parser - parses Javascript file and displays a tree structure of the code (closures/functions/...)
Since nobody answered my question let me give you some information about JSEnhancements that I installed in the end and am very very pleased with:
it supports #region in javascripts (// #region Name) as well as in CSS files (/* #region Name */) which is really great and they don't interfere with anything since they're part of comments
it highlights matching braces even though this is not always working, you have to position yourself correctly. Maybe it interferes with Power Tools that I also use...
Sometimes you have to close+reopen the file for regions to start working. Sometimes writing them down doesn't recognise them. Newer versions work as expected It obviously works fine when you open the file and it parses it.
Anyway. It's stable, works and I'm very pleased with this extension. You won't miss with its installation.
Well there is one more tool for javascript "Javascript parser" which will parse your files and make a map on it. It is good but for me working with jquery it didn't help much.
Among the rest of the tools you mentioned, I was working too with JSenhancements for some time but I have switched to JScript Editor Extensions which I can tell seems more promising (highlight of current word, para comments etc).
It hasn't crashed since.
Try JScript Editor Extensions by Microsoft for VS2010
JScript Editor Extensions is much better than JSEnhancements.
It will highlight matching braces, cold-folding the blocks, current word highlighting.
Although it does not support #region name,
but you can use javascript curly brackets to enclose your code and place a comment above to know what you are making collapsible.
//My region
{
//lines of code
//lines of code
//lines of code
}
these will collapse and don't appear to affect anything else. javascript just treats them as simple compound statement.
Further, I would also recommend Web Standards Update as it also helped me with intellisense and validation.
Javascript Explorer -
Though this will not region'ize your code, it sounds to be handy!
I am seeking your stories on how you have streamlined your client side development with Visual Studio. In particular, it seems that I need to build my site too often in order for changes to pushed down to IE effectively. What shortcuts or tools like FireBug, etc. do you use for your client side development? Do you avoid Visual Studio for debugging your client side apps all together?
We are developing the application which is building almost everything on javascript side, all the controls, webservice call (thru Ajax enabled javascript), grids and all kind of stuff.
We have created framework which includes ExtJs, and JQuery. It makes life easy to initialize and define all the controls in jQuery and make get data using webservice. We can use only ExtJs, however Jquery reduce the number of lines we need to define and set the controls. And of course its very light weight as javascript files are like <25-20 kb which needs to use this frameworks.
I've used the steps outlined by ScottGu here to get a better JS intellisense for VS 2008.
(As it is pointed out here, this patch is intended for all JavaScript files, not just jQuery.)
I use the vsdoc files to get intellisense working for jQuery.
lately, I had to work in a VS2005 + IE6 only environment. I've quickly got used to having Firefox for debugging with the tools I subjectively deemed essential: Firebug, PageSpeed, FireQuery.
I tried Aptana. (As of yet however, I didn't invest much time in getting to know it - you may find it familiar if you are equipped with some Eclipse knowledge, though...)
After all is well and done, I check pages in IE and use the built-in profiler in IE8 if there is some IE specific perf issue.
I use the "empty vsdoc" workaround when VS intellisense gives up.
At home, I use VS 2010 RC - and at all places I keep the API references of JS frameworks bookmarked and within reach, just in case.
Place Javascript code in separate JS files.
You might want to consider turning your related sets of functionality into a ScriptControl.
When you work on some JS file and want to avoid the time of rebuilding the whole project, do not make it an embedded scriptresource from the start. Package it in the assembly when it is stable enough.
If you are in doubt whether you get the latest version of your JS file, disable the browser cache. (It can be done from FireBug, or in the IE dev tools.)
Disclaimer: this list is really subjective and probably not complete at all.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
What do you suggest for JS development IDE. Is there something similar to VisualStudio IDE, so I can run/debug my application in it?
At JetBrains we've just developed lightweight HTML/Javascript/CSS IDE WebStorm that includes very smart JavaScript Editor with DOM-based autocompletion and HTML5 API support.
It allows you to debug(breakpoints supported) and run your scripts directly from IDE.
A few options:
Visual Studio 2008 (including VWD Express, http://blog.berniesumption.com/software/how-to-debug-javascript-in-internet-explorer/)
Adobe Dreamweaver CS4
Notepad++ (or any other text editor), Firefox and Firebug
I think IntellJ's JavaScript support is excellent, just like everything else that they do.
Netbeans 6.x and Firefox+Firebug
In the past I used Aptana Standalone or as a Eclipse plugin. The Pro version has some nice addons like the embedded IE (to the always embedded Firefox) and debugging support for both browsers.
I found after hours of testing, that Suns Netbeans is the best PHP and Python IDE for Windows and Linux. I was surprised that also Javascript support can hold the candle to Aptana.
So Netbeans is my recommendation (not only for Javascript).
Give it a try, its free!
I've found Aptana Studio to be good.
I tend to recommend more and more Netbeans that has not been proposed yet (I am blind sometimes). Netbeans is developed by Sun and support not only Java but also a few other languages (PHP,Ruby,Python, Javascript).
I use it for a while now and I am very satisfied. It is fast, provides code completion and integrates easily major JS libraries (Prototype, YUI). It has also a debugger that you can tied to FF or IE.
Try it you won't be disappointed!
Here's a good list of IDEs you can use for writing JavaScript:
http://www.programmerfish.com/top-8-ide-integrated-development-environment-for-java-script-html5-ajax/
Nowadays I am using JetBrains' PHPStorm and I can easily say, this is the best editor I've ever tried. Comes with lots of features that I have not seen at other editors like,
find a word in a directory (grep equivalent)
extended and useful intellisense feature with multiple files and parent classes
internal GIT support
a tree view for application structure
an awesome version history support that works with GIT and your local history. This is very useful when you want to take a look at a GIT untracked file, you can see all history details of the file for weeks.
with a great addon named CSSXFire that works with Firebug and tracks the CSS changes and import them to editor and allows you easily reproduce the same changes that you've done in Firebug CSS Console. This is really awesome
another useful feature is, when you want to delete or rename a file, editor searches the file has been used in this directory and notifies you. This is called safe-refactor
intellisense for files, while you typing a css background-image, a src or an href attribute
Sometimes I deal with PHP so I prefer PHPStorm, so Front End Developers should prefer WebStrorm that is specialized for us.
I think, every FE Developer should try PHPStorm or WebStorm with Firefox and Firebug.
Komodo IDE (or the free Komodo Edit if you can live without an integrated debugger) are pretty nice.
I tried few IDE last week and NetBeans is my winner. It got silent upload option for file upload in background. And very good code completion, folding, etc.
Here is my experience with the applications based on Extjs in UI with Java as server side language. I am a big supporter of open source technologies/products.
I so far I have used Eclipse, Netbeans, Webstorm and notepad++ with some added plugins.
And I feel Netbeans is best in terms of Syntax highlighting and formating. It recognizes missing commas, global variables, duplicate keys for object literals in a very impressive way.
Almost similar things can be achieved by adding some pligins like Spket in eclipse too, but it asks for licence when you go for advance level of settings.
If you are not so much concern about an integrated environment with web server then Web storm is best in all the aspects, but the biggest drawback of it is, "Its paid". ( Even if it asks for 1000 Rs ).
Firebug and a good syntax highlighting text editor is about the best combo. It's not necessary to add in much else. With just this combo you get:
Ability to set breakpoints
Inspect objects
Traverse the DOM
Alter CSS rules on the fly
See network traffic/responses
Evaluate and substitute code on the fly in production
And there are tools which add on to Firebug:
YSlow - Determine "why" your page is slow
Fireunit - Run unit tests
One of the advantage of Javascript development is that it's flexible and you can get instantaneous feedback while developing. I see no reason to get in the way of that by adding an IDE which includes a "deployment" step.
Notepad++ comes with built-in javascript syntax highlighting and JSlint plugin is very handy. IMHO for debugging there is nothing better than Chrome developer tools or Firebug.
This page reviews the most advanced Javascript IDEs (in terms of refactoring and intellisense anyway) :
http://blue-walrus.com/2013/08/review-javascript-ides/
Eclipse and JSEclipse plugin and of course Firefox + Firebug the ultimate duo. You'll find this development setup satisfactory.
Aptana is a great IDE as it will provide intelli-sense for CSS, javascript, html, java, etc. The debugger gives you the choice to run in FF or IE and is a full featured debugger. The community edition allows you to run a server side javascript as well. A very solid and feature rich platform for free.