Visual Studio: Web Dev Bliss

Visual Studio: Web Dev Bliss

on Jan 24th 2013 with 108 comments

Developers are a picky bunch, almost to the point of superstition and voodoo magic, when it comes to their tools. If you take into account the countless number of things we use to build apps (Node, Grunt, Fiddler, LESS, EC2 etc.), it’s no wonder why, once we find a nice combo, we guard it like a squirrel with his last nut. And it makes sense, since your development environment is pretty darn important to your success.

What I think makes Visual Studio a great IDE for web development is an extension called Web Essentials.

The one tool that, in my opinion, has always been an insanely personal and opinionated preference is your IDE or editor. Everything about it matters, from keystrokes and language support to plugins and themes. It all has to flow nicely within your development style, and most importantly, it needs to help you solve the problems you’re facing without making you jump through hoops.

Visual Studio is one of the best IDEs available, easily incorporating a wealth of features that make developers very successful. But it hasn’t really been looked at as a “web developer’s” editor because it traditionally targeted the Microsoft platform with many features that made coding for that platform incredibly easy. And, well, many of those features didn’t really apply to developers that weren’t targeting a Microsoft platform.

With Microsoft wholeheartedly embracing HTML5, CSS3 and JavaScript for both web and Windows 8 app development, there’s been a ton of changes with Visual Studio 2012 that make it an awesome tool for building for the web. This is what I plan on covering next, and hopefully you’ll see it in a very different light.

Visual Studio for the Web – A Little History

One of the best features of the Solution Explorer is that I can search for a specific asset within the whole solution.

I remember looking at Visual Studio myself many years ago and not really taking it seriously. It wasn’t because it wasn’t a powerful IDE. It just felt squarely targeted at building .NET applications and sites–and in fact, it was. That’s not a bad thing because if you ask any .NET developer, Visual Studio is the bees knees for their needs providing a rich editing environment with integrated capabilities that other editors simply don’t have by default. And for those features that were missing, the extension ecosystem is as comprehensive as you’ll find. So I could totally get why .NET developers love Visual Studio.

When it came to the web though, technologies such as HTML, CSS and JavaScript were an afterthought, basically second-class citizens. And jQuery support, which was especially important to me, was another thing that Visual Studio didn’t support. Having integrated support for the basic, but critical, technologies and frameworks of the web was a key requirement and without them Visual Studio, for me, was DOA.

Thankfully, Microsoft made it clear that these technologies were incredibly important to their direction, and that kicked off a ton of updates that started to shape Visual Studio’s path towards better support for web developers, especially front-end developers. This included support for HTML5, CSS3 and JavaScript as well as shipping jQuery with Visual Studio, all important updates that made me reconsider the IDE for web development when I joined Microsoft.

What’s Baked In

One of the first things I did when I started using Visual Studio back in 2010 was to create a template based off of HTML5 Boilerplate. I did it because I felt Visual Studio’s default templates didn’t match what I wanted, and Boilerplate is pretty much to the goto template for most new files. This worked great for me because I tend to need to create a lot of one off proof-of-concept pages and having to create a full-blown project wouldn’t be ideal.

Visual Studio 2012 now addresses this by allowing you to create a very simple HTML skeleton that’s closer to what most web developers would want:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

</body>
</html>

This is done via a simple “File->New File” and choosing “HTML Page” from the template options. The same can be done for stylesheets or JavaScript files, although the templates are barebones.

This template is far less comprehensive than HTML5 Boilerplate, but the important thing to remember is that it’s a non-Microsoft starting point (which is important for my web development).

And as I described in my blog post, you can create your own templates with extended features.

I know what you’re saying: “Yeah that’s cute Rey, but show us something more than an HTML skeleton.” I’m getting there. Patience, grasshopper.

Managing a large amount of website code is where I think Visual Studio really shines. I downloaded Addy Osmani and Sindre Sorhus’ TodoMVC framework project because it’s a pretty big set of files to work with. To suck in the site, it’s as simple as doing “File->Open Web Site…” and choosing a directory:

alt text

This gives me what’s called a “Solution” which helps organize all of the assets for my website and displays them in a treeview style:

alt text

One of the best features of the Solution Explorer is that I can search for a specific asset within the whole solution. So if I wanted to find where jQuery is, I can just enter the term “jquery” and it’ll return a listing of all directories and files matching it:

alt text

The editor itself has the features I expect from an IDE, with things as basic as line numbers and code collapse to the ability to actually work in a design mode and easily put your files in split screen mode. One thing that is a must-have for me is good code insight so that as I’m creating the code, I can have the attributes presented to me. It’s hard enough to remember all of the programming languages’ syntax, so a little helper to tell you the attributes is a Godsend. VS offers this via Intellisense which now supports HTML5, CSS3 and JavaScript.

alt text

So not only do I see the attributes that are available for an element, but it also shows me the methods that I can use. Notice that in this example, I’m getting Intellisense for the HTML5 video element. I’m not an advocate of inline code but the fact that it’s there is still very useful.

CSS

For CSS,you still get the Intellisense which includes the full list of properties in addition to a description of what each does:

alt text

And once you’ve selected a property, it provides code hints to help you remember how to format your statements:

alt text

Of course, along with these features, VS has smart features to make tasks such as picking colors trivial:

alt text

JavaScript

JavaScript and the DOM also received love in Visual Studio, with it being a first-class language in the IDE; no more plugins to make it usable. Again, focusing on Intellisense, VS offers full support for JavaScript and DOM objects, methods and properties:

alt text

jQuery support has been included for some time now, and Intellisense support to for other popular frameworks can be found throughout the Internet. And Visual Studio 2012 now ships with jQuery Mobile to allow developers to build mobile sites.

Debugging

Here’s something you may not have known. Visual Studio allows you to not only test against every major browser you have installed on your system but it also provides a tool called Page Inspector which is similar to the web debugging tools found in most browsers. With Page Inspector, you can see your page in real-time and make live changes to CSS and the DOM. Once you’re satisfied with these changes, you can save them back to your source files. For example, notice how I’ve changed the text of the tweet in the following screenshot by updating it within the markup:

alt text

The obvious benefit of this is that you don’t need to drop out of your editor to test out your page and make changes. And since the changes are happening live, it’s a simple matter of taking the affected code and pasting back into your source code. This is possible because Visual Studio leverages Internet Explorer’s Trident rendering engine as well as a built-in version of Internet Information Server (IIS) to allow you to run your site dynamically. That’s right, Visual Studio ships with a web server (and it has for some time).

Making VS Better – Web Essentials

Those are no doubt useful features, but a web developer’s workflow is more complex than just editing a couple of pages or CSS styles. And honestly, many of the features are available to code editors, albeit via community plugins.

Visual Studio has made JavaScript a first-class language.

What I think makes Visual Studio a great IDE for web development is an extension called Web Essentials. It’s the missing piece of an otherwise solid coding environment because it adds a number of features that are essential. This extension extends Visual Studio by supporting features like:

  • Bundling of files for future processing
  • Minification of assets
    *JSHint support for linting of your JavaScript code
  • Top client-side templating engines including Handlebars, Mustache and JSRender
  • The LESS stylesheet language with on-the-fly previewing
  • CoffeeScript and TypeScript

And there’s so much more. Mads Kristensen, the creator of Web Essentials, has done a stellar job of distilling what web developers are using and bringing that into the extension.

For example, ensuring browser compatibility is a critical part of our jobs, but with so many properties out there to remember, it can be a bit daunting to remember what works where. Web Essentials helps by allowing you to see the level of browser support for CSS properties:

alt text

And to take it a step further, it will even tell you when you’re missing vendor prefixes, an important consideration to ensuring your site works across all major browsers:

alt text

As well as allow you to insert the vendor prefixes based on your own target browser preferences:

alt text

While this will only add the missing vendor prefixes for this specific property, Web Essentials includes the capability to do it page wide and can also add in the missing non-prefixed version of the property to help future-proof your code.

Since we’re talking about browser support, having to support older versions of IE is a bit of a drag, and remembering all of the hacks needed to make a page render well is impossible. Yep, Web Essentials offers the ability to put in specific hacks to make your pages work right:

alt text

The skull and cross bones are pretty appropriate.

CSS preprocessors are all the rage and rightfully so. The ability to make variable declarations and create mixins in CSS is a huge benefit, especially when managing large stylesheets. LESS is one of the most popular solutions. In fact, I did a survey in which LESS was one of the most popular frameworks in use. Web Essentials brings LESS to Visual Studio so that, as you write, you can view the CSS output in real-time, via a preview window:

alt text

The preview window, along with full editor support and the ability to set compiler options, is a boon to developers who want to use Visual Studio and need LESS support.

I’ve only scratched the surface of Web Essentials CSS features. There’s just so much richness in there for this one article.

Enhanced JavaScript Support

Visual Studio is one of the best IDEs available.

As I mentioned, Visual Studio has made JavaScript a first-class language. Some critical workflow needs are missing however, and Web Essentials fills those. For example, every developer should be linting their JavaScript code. It’s just good practice and helps prevent common language errors. JSHint is a very popular fork of JSLint created by Anton Kovalyov and is used extensively by developers for analyzing their code for potential problems. Web Essentials includes JSHint, allowing you to lint your code at any time. It can also be configured to lint all your code at build time.

Since I mentioned build time, Web Essentials also includes the ability to minify your files at any time. But it takes it a step further by updating minified files when the original source file is updated, and it also creates a source map to help in debugging later on.

Many developers like using domain specific languages like CoffeeScript and TypeScript. For some, the opinionated language of CoffeeScript makes it extremely attractive compared to coding in plain ole JavaScript. Well, those developers can be opinionated in VS thanks to Web Essentials. Mads has added support for both DSLs, adding similar preview support that I mentioned previously about LESS. As you type on your TypeScript or CoffeeScript code, you can see the resulting JavaScript in real-time. And once you’re all set, Web Essentials can minify the code for you:

alt text

HTML Goodness

Mads added neat HTML features as well. If you’re into Zen Coding (I’ve always found it a little odd), then Web Essentials’ got you covered. If I type this into VS and hit the Tab key:

div#contentRegion.address

I’ll get the following code:

<div id="contentRegion" class="address"></div>

That’s very cool. Not my cup of tea but cool nonetheless.

And while he was in there, he added support for client-side templating engines like Handlebars & JSRender, Markdown and a Lorem Ipsum generator.

I’m really beginning to wonder if Mads sleeps.

Wrapping Things Up

I hope I’ve shown that Visual Studio on its own has really great support for HTML, CSS and JavaScript. The team at Microsoft has worked hard to make it a world-class IDE for web developers. For me, the essential piece that makes it my choice for web development is the Web Essentials extension. It provides me with that extra bit of functionality I need to manage my workflow. Sure, every developer has different needs and I’m not professing to have addressed all of yours. I do hope, though, that I’ve outlined and demonstrated enough great features to show that VS is more than capable for web development.

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Rey Bango is developer evangelist at Microsoft focused on meeting the needs of the web development community. He's an advocate for cross-browser, standards-based development using JavaScript & HTML5 and a former member of the jQuery Project Team.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • JeremyMcPeak

    I love VS, and it gets better and better with each release. I look forward to the day the Express editions can download and install extensions… Web Essentials, at least.

    In before “How much did Microsoft pay you to write that?”

    • jeff_way

      hahaha! Give it time – those comments will come.

      What’s funny is that, when I pimp Sublime Text, nobody says a word. (Not that ST has ever paid us a penny to promote them.)

      • thedude321

        Microsoft is evil. Be wary young padawan. May the force of free tools guide you.

      • http://twitter.com/reybango Rey Bango

        I work for Microsoft and can tell you I’ve not met an evil person in my 3 years at the company. The people that work there are good people and want to do good for the community. Please don’t generalize.

      • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

        I think he wasn’t saying that it’s Ms’s people is evil, he meant the whole MS concept in general (that i don’t think is evil, but Windows 8 is!).

      • http://twitter.com/reybango Rey Bango

        You’re probably right Jesus. I can tell you that Microsoft is no different than any major corporation that’s profit-motivated. And in terms of the way they treat their employees, at least for me it’s a top-notch company.

      • thedude321

        To be sure. I never meant people in Microsoft are all Evil. How can they be? What I meant is that their policy towards open source and frankly their support for customers has not always been friendly. So, you better watch out before using something from Microsoft. Also, Microsoft makes really awesome tools, but what happens when those tools are increased to unbearable prices? I’m talking $400 here, and up. That is really really expensive. On the other hand, the people at Jetbrains make excellent IDEs and probably will never lose to Microsoft, they never charge a price that is extortionate.

      • http://twitter.com/reybango Rey Bango

        Thanks for clarifying. Jesus said as much above.

        I will say this that Microsoft has become much more supportive of open source and promotes a number of technologies like Node, jQuery, PHP and more, all of which are OSS efforts not managed by MS. The new Microsoft Open Technologies subsidiary is specifically designed to work with the OSS community and they’ve been doing great work. http://www.microsoft.com/en-us/openness/default.aspx#home

        IMO, it’s a very different MS from what a lot of people have traditional thought of. I also don’t think MS is a bad company for being profit-driven. Great companies like Apple & Google are also profit-driven.

      • expediteA

        I like how on that page they’ve used HTML5 video rather than Silverlight. Can you imagine if it was the other way round?!?!?

      • Paul Topping

        And don’t forget MS open sourced Typescript which is way better, IMHO, than all those other compile-to-JavaScript languages.

      • http://profiles.google.com/florin.jurcovici Florin Jurcovici

        Not really. Microsoft, like Oracle, supports open source to the extent to which it drives users of that open source towards using MS products, and becoming captive customers.

        An excellent example for this policy is Mono. It does indeed implement all APIs (or almost all) which are part of the ECMA .Net standard, but MS’s implementation of the .Net platform is an order of magnitude if not more richer. Users of .Net start with Mono, and when they get fed up for not having the latest and nicest APIs available, they switch to MS’s .Net implementation, and become captive users – there’s no non-Windows platform capable of running MS’s .Net implementation.

        I don’t dislike MS for it being profit-driven. A company not being profit-driven will soon become bankruptcy-driven. I dislike MS for their technology being closed and opaque, way too expensive and built in such a way that it makes inclusion or integration with other technologies and products way more difficult than it should be. It’s only market pressure that drove them to be less of the schoolyard bully they once were, and they still haven’t given up their habits completely.

      • Steve

        My perception as an outsider is similar – Microsoft integrates reasonably well with the open source ecosystem. Now, Apple on the other hand…

      • Robert-Mihai Piringiu

        $400 ? Check out Adobe :)

      • thedude321

        Nobody said they were nice either. I have completely avoided Adobe. I use foxit for PDF and as for creating web pages, I just use Webstorm. Gimp is also a great tool if you get the hang of it. I just wish I knew more code, so I that I could help these open source efforts.

      • Carlos

        Being open source advocate and such, my assumption is you are using Linux as an OS. Would this be an accurate assumption?

      • http://www.facebook.com/wanny.miarelli Wanny Miarelli

        I’m no expert in the development of web applications, even if I’m studying a lot … imho vs IDE is organized in an exceptional way and every day I discover new things.

        In my case I paid € 600.00 for the license, but I know that Microsoft provides free licenses to new companies that have a viable project (for 5 years I think).

        I have also developed several applications with the Express version, which I was able to sell, so the license was almost a “gift” from Microsoft.

        It ‘s true, they have a strange policy, like everyone else, is not it? The policy of apple is perhaps less strange? their prices are perhaps not out of the norm?

        I spent 600 euro for my IDE, but the pc I use cost me just over 800 euro and does its job very well.

        I apologize for any grammatical errors.

      • Carllos

        Being a Mac user and a MS user, Mac has become pretty unbearable. Everything in one ecosystem sound OK but man they have made it nearly impossible to do almost anything. I am surprised they still have Chrome available for download on their computers or iPhone with the way they dropped Adobe Flash.
        At least MS has been writing free tools like VS Express as well as the whole Webspark Suite of programs. Personally think MS has become more open then other organizations.

      • Robert Johnson

        MS offers a free version of Visual Studio for web development.

      • http://profiles.google.com/florin.jurcovici Florin Jurcovici

        It’s the people at MS that spend their time not creating useful stuff (like code or hardware prototypes). They have time to busy themselves with marketing schemes which are notoriously evil at MS, for example. Like threatening hardware resellers they won’t get OEM licenses for Windows or Office if they also sell PCs with Linux.

        It’s not something that just MS does – Intel threatened companies selling AMD processors not to give them Intel processors anymore. Monsanto goes after farmers keeping part of the crops as seeds for next year. There are many more examples from various domains of activity. The fact that almost every single big company does such things doesn’t make them not evil. The fact that most employees in a corporation have nothing to do with such things doesn’t make the corporation itself non-evil.

      • Federico

        Florin, I have worked at Monsanto a couple of years. You obviously have no idea what you´re talking about. In analogy to the software issue that´s being discussed here, Monsanto has given farmers an INCREDIBLE source of profit with revolutionary products. This products have been so cheap to the farmers, but they just want to pay for it once, even though it represents a tiny tiny TINY percentage of the profits that they get from using it vs. not using it. They all want to use the products, but none of them want to pay for them. Instead, Monsanto invests $360.000.000 a year in investigation and product development. So the farmers are the victims and the company is evil??? Come on….the same happens with software. Why a big company like MS, that has contributed so much to the computer world could be evil? You just don´t use their products if you don´t want to. Or just create your own CPU production company?? It´s really easy to talk, to just talk.

      • Robert Johnson

        Well said! I know people that work there and people who have worked there in the past and they certainly are NOT evil.

      • JeremyMcPeak

        Microsoft offers free tools. In fact, they have for a very long time.

      • http://twitter.com/jeff_pz_cr Jeffrey Briceno

        Or wait for a hacker to achieve full leave with a simple snipped

    • http://laranz.in/ lawrence77

      Its not *express* friendly :(

      I thought this same article when @jeff_way:disqus says that we have a VS article coming soon, Its not VS Express friendly, anyway in my office (they gave me VS2010 :D) I will try this, but not in my home (I installed only VS Express) :(

    • http://www.martin-brennan.com/ Martin Brennan

      I love the additions to JavaScript in the new version, it makes it a lot easier than before to code huge amounts of JS.

  • http://bytefair.com/ Paul Graham

    These do seem like good improvements, but don’t they require the dread abomination known as Windows 8?

    • JeremyMcPeak

      Visual Studio 2012 runs on 7 and 8.

    • timw4mail

      It’s not as bad as one might think. The release downplays a lot of the “Metro” focus of the previews.

      • http://bytefair.com/ Paul Graham

        I own a Windows 8 license and I think it’s the worst operating system I’ve used in probably 2 decades out of the box.

      • djcata

        you are wrong … it is the best microsoft operating sistem ever … it is not perfect

      • http://bytefair.com/ Paul Graham

        I am not wrong, because it’s an opinion. Metro is an unusable, unproductive POS toy MS dreamed up for moms to use in a fit of IOS jealously. They made an operating system where there are two separate, incompatible desktop paradigms. It’s useless without a touch screen or on a large display. And it’s COMPLETELY unusable without the aid of Start 8 by Stardock.

  • Ayush Sobti

    I love Visual Studio and honestly believe it is the best product MS has ever shipped, but for web-dev, I prefer using a text editor like Sublime.

    • http://twitter.com/reybango Rey Bango

      I think a lot of devs feel that way and part of that has to do with some missing features that made alternatives like Sublime more attractive. Web Essentials, IMO, was the missing link.

  • http://twitter.com/jholyhead James

    Visual Studio has been the best IDE consistently since 2005. Nothing else even comes close.

  • http://benholland.me/ Ben Holland

    Great writeup – I couldn’t agree more. I entered a .NET team where all the front-end developers were using VS. There are some great features in there and hopefully more to come.

    I am still using Sublime though. This is mainly due to the huge number of great open source plugins available. I may try just using VS for a week and see if I can live without some of them!

    • http://twitter.com/reybango Rey Bango

      Sublime is great. I actually use both. Having to test on both Windows & Mac, I like to learn as many popular dev tools as possible to help me work with the community. Package Control is fantastic.

  • http://twitter.com/haliphax Todd

    Everyone: Your text editor is not as good as Visual Studio. I don’t care WHAT you’re running; it’s not as good. Unless you’re using a full-blown IDE, it won’t even compare. I love me some gVim and Notepad++, but they are not IDEs. Also, for what it’s worth, VS can be configured with lots of nifty things, like your own color schemes (I use Solarized by Ethan Schoonover).

    • Preston

      And what if a developer uses Linux? What, use WINE? Virtual Box? If MS really wants to embrace open tech, port VS to Linux. This is probably the most important consideration I have when choosing development tools. If the tool is available on multiple platforms, it will win over those which are locked to Windows/Mac/etc. Sublime wins most battles for me since it is not only multi-platform, but it wasn’t built with Java. The only thing it’s missing for me is tear-off tabs, which makes working with multiple monitors much easier.

      • http://twitter.com/reybango Rey Bango

        Preston, I would recommend using the tool that fits your needs. I use Sublime on my Mac and Linux laptops and love it.

      • Preston

        I totally agree, Todd’s comment was a bit over the top, though; not to mention a bit narrow minded.

      • http://twitter.com/haliphax Todd

        Well, what else is out there as far as full-blown IDEs are concerned? Komodo? Eclipse? Netbeans? They all pale in comparison. I just see a lot of devs out there that are using a text editor only, and trash talk Visual Studio as if it was just a text editor.

      • http://twitter.com/reybango Rey Bango

        Also, the article isn’t meant to make you switch. It’s to point out who VS has been updated and is a good IDE for web development.

      • JeremyMcPeak

        I’ve always thought Microsoft would make huge money if they’d make port VS to other platforms.

      • http://www.martin-brennan.com/ Martin Brennan

        I would kill for a Mac port, it’s annoying to have to use Parallels just for VS

      • Geezer

        VS is Microsoft’s biggest product outside Windows. Porting it to Linux would be a major job. Good idea, but I can’t see it happening any time soon.

      • WebDev

        They don’t and they won’t. Microsoft developed VS for .NET development, not php or any other language, on a windows machine. If the developer wants to use linux, by all means go off and use some other half-witted ide. But if you want to program using the .Net framework, VS destroys the competition.

    • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

      Your statement go from blah to ridiculous when you say :”Also, for what it’s worth, VS can be configured with lots of nifty things, like your own color schemes”.

      What!!!?.
      Seriusly a IDE where i can put my own color scheme?
      TAKE MY MONEY!!!!.

    • http://profiles.google.com/florin.jurcovici Florin Jurcovici

      http://blog.sanctum.geek.nz/unix-as-ide-introduction/

      For one, any IDE I’ve seen so far, including VS, has an embedded editor which, when compared to a general purpose text editor, is shitty at best.

      Second, VS is good as long as you don’t step outside the boundaries MS has designated for you. Try adding a Lisp engine to your project, or embedding Python. Or using some libraries compiled from D source code. Or adding some D source code. Or integrating a cross compiler. Or doing remote debugging on ARM platforms. Or integrating your IDE with a CI system you cobbled up yourself using shell scripts, which runs on a different OS.

      VS is a steel cage with gold-plated bars. It’s extremely nice and shiny inside, but the effort to break out, should you need it, can break your project.

      • http://twitter.com/haliphax Todd

        I rather like VS’s embedded editor. The intellisense, auto completion, syntax highlighting, and inline error indicators (and suggested fixes) are all very nice. It’s not capable of some of the more complex situations an editor like vim could handle, and I agree that it would be nice to be able to substitute a general-purpose text editor in its place for particular scenarios.

        I suppose I should have prefaced my outrageous claim with talk of front-end development. Sure, if you’re trying to mess with command-line scripts running on an OSX box over a Token Ring network with a router made from Lego bricks and cream cheese, it’s probably not going to be your Huckleberry.

  • Abhijit

    I had started as VB developer back in 2003 and used to work with VS 6. Since then I have used many IDEs, but VS is still the best IDE experience for me, though I no more work with MS technologies.

  • Payam

    I work with VS 2012 , and hands down it is the best IDE for a software developer in any capacity. Unfortunately, VS is not open source and available for free, which can hurt. Beside that, I work with C# and I believe it is one of the most beautiful and the most elegant programming languages out there. Again, it is a shame that MS does not provide these tools for free.

  • khalifenizar

    I’m completely ignorant in matters of Visual Studio. Is there a free version?

  • Mirko

    I’ve used Visual Web Developer in the past, but for the last two years my IDE of choice is WebStorm.
    Absolutely perfect, better than Aptana or ST2.

    • http://twitter.com/reybango Rey Bango

      WebStorm is a great IDE.

      • Nadav Syon

        Not only WebStorm but all JetBrains’ IDEs. Love them. Microsoft – would YOU ever combine simplicity & intelligence?

      • http://profiles.google.com/florin.jurcovici Florin Jurcovici

        It’s not in their culture. FrontPage, ages ago, before MS acquired it, was a small, nimble, simple and powerful product, with an install kit of a few meager MB. The first setup kit released after MS bought them barely fit on a CD, and already introduced proprietary extensions to HTML.

      • kris

        @TheKoder:disqus I hate PHPstorm, it’s hang and run very slowly on boilerplate (templates). I have tried VWD in my past too but msft tool never hang very easily.

    • http://www.facebook.com/soos.gabor86 Soós Gábor

      also has a low price

    • TM

      Yes, great, except for one deal breaker: JetBrains has this weird, philosophical insistence on auto-saving everything with no way for the developer to control it. Re-arranging a few things and then changing your mind and want to just close without saving and revert to the saved version? Whoops, the saved version already has your changes, too late. Start making changes and walk away for some reason, come back from a meeting and forget you were halfway through something? You’ve now broken that file without even knowing it. Ever start typing and the wrong window has focus, and you aren’t sure where your text went? With WebStorm (or their other editors), that first line of your email or whatever you were typing is now in your source code. There is a reason nearly every text editor in existence behaves the same way- prompt for whether to save before closing an altered document: because the answer isn’t always the same and therefore can’t be assumed. If I sound really annoyed it’s because 1) WebStorm is really good in nearly all respects, good enough that this obstacle becomes very frustrating; and 2) I’ve seen too many workflows that very easily accidentally can result in code winding up in production that shouldn’t, and we should not be adding to that list.

      • djcata

        i think with source control you could solve the problem

  • pixelBender67

    I took advantage of my student status and got a bunch of stuff for free, VS is amazing, and I am loving .NET C# is also a joy to work with, I like the new MS, they are changing their image and remember they did give us AJAX and IE6 ( job security imo ) lol what ever, let the haters hate, I just want to learn and do the best I can with what ever tools I want to use

    • Yanek

      Google and Apple are the new M$ . They’re doin’ right now what M$ did 10 years ago.

  • Just asking

    The link VisualStudio is broken..
    How much is a single developer licence?

  • http://twitter.com/rerrify Terry Rosen

    Been using VS for about 9 years and I can say it’s now much more “in tune” with what modern web developers are using rather than what MS wishes us to use.

    My only grief with 2012 is it seems cluttered and sloppy compared to other editors and even previous versions of VS. I do customize the interface to be as minimal as possible but I think it pales in comparison to something like Adobe Brackets or ST2 which really nailed the look & feel of a comfortable editor without sacrificing functionality. I wish MS would allow for simpler customization of the actual interface rather than just what’s in the text editor area.

  • http://www.andredublin.com/ Andre Dublin

    As a new .NET developer, coming from the php and ruby world, I have to say that I am beginning to enjoy VS and MVC. Microsoft has definitely taken a page out of the open source community and applied it to their products. I still use sublime for writing front-end stuff like css, html, and js.

  • http://twitter.com/Crazy_Developer Marko

    You can not get any better IDE than VS… I worked with netBeans, Eclipse, PHPDesigner, Komodo, SublimeText2 … Not even close.

    • Guest

      really ? php support with doctrine/symfony2/composer/phpunit ? python support with django/pyunit ? ruby rails support ? java support with junit/whatever javaframework … ? not even close to what ? running on linux and macosx ?

    • http://rommelxcastro.com/ Rommel Castro A.

      try phpstorm!

      • Amitav Roy

        Yes I agree I have been using this ide for last 6 months now and I must say that it not only does all these things but also it supports php :-)

  • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

    VIM :).

    • http://twitter.com/reybango Rey Bango

      Oh God no!! ;)

      • MPinteractiv

        people will still be using vim and emacs in 15 years. VS , depends on MS going bankrupt in the meantime or not. that the price of proprietary locked up closed source stuffs.

      • http://www.facebook.com/jesus.bejarano.948 Jesus Bejarano

        Yes,yes,yes,yes,yes, Vim forever.

  • mgaughan

    I have to develop in ASP using VM Ware Fusion – VS has its advantages when it comes to debugging – but my work flow in Sublime makes me wish I could use it all day.

  • Andrew Del Prete

    TextMate 2 pays my bills.

    • http://twitter.com/reybango Rey Bango

      Good choice although it took them FOREVER to get TM2 out. I remember using TM a couple of years ago and waiting for it then.

  • D

    No, just no.

  • Brayden Willenborg

    I’ve used Visual Studio 2008 in the past, and liked it for developing for Microsoft platforms, but I’m unsure about using it for web development. I like to keep my web development environment very minimal. Congratulations on your first article with Net.Tutsplus!

    • http://twitter.com/reybango Rey Bango

      Thanks Brayden!

  • Anthony McLin

    So, VS is good because it can do many of the basic features that every other respectable IDE already has?

    The problem with VS is you can only use it on Windows. Which in turn means you can’t use POSIX command-line apps without a lot of hassle (aka Lint, Ant, PNGCrush, etc. etc. etc.). Furthermore, if you need to any server-side development at all, it’s ideal that your dev environment match the target server environment, so you can actually run your code locally and get the results you expect. Trying to run PHP on a local Windows dev box can lead to all kinds of nasty complexities that suck away and developers’ efficiency.

    If you’re going to be deploying to a Windows server, by all means, use VS on a Windows workstation. But if you’re going to deliver to a LAMP stack, OSX or Linux is going to be a far more rewarding environment to work in, and there’s several good IDEs for those.

    If you’re doing strictly front-end dev, then your IDE and workstation OS choice is purely personal preference.

  • http://www.jabberwikaba.com Daniel Laughland

    These are all excellent features. I use VS+Web Essentials all the time and still learned about a few extra features! (Had no idea Zen Coding was in there; sweet!) I’m surprised you didn’t mention NuGet at all. Sure, it doesn’t have anything you can’t get from {flavor_of_the_day_package_manager} but it’s very nicely integrated into VS nonetheless.

    • http://twitter.com/rerrify Terry Rosen

      Agree NuGet needs a mention. NuGet packages aren’t quite as powerful as NPM packages or Ruby Gems and the gallery isn’t as populous (OSS hasn’t quite hit mainstream yet in the .NET world) but for most common things (eg. Account Management, Mocking, DI, etc) there is usually a decent selection.

  • http://www.facebook.com/patya Pavel Filippov

    “Visual Studio allows you to not only test against every major browser you have installed on your system but it also provides a tool called Page Inspector which is similar to the web debugging tools found in most browsers”

    “Similar”? With all due respect, are you serious? As far as I know, VS has the same debugger as IE10, which doesn’t even come close to the Firebug or Chrome Dev Console feature set and developer experience. I can’t think of Javascript developer who will agree to use IE debugger over Chrome or Firefox’s when given a choice.

    Chrome dev console is lights years ahead of IE dev tools. No, I’m not getting any money from Google, I just admire their work and shrug when I see MS inconclusive efforts to keep on.

    • mattsah

      @facebook-527354778:disqus While I’m not sure it’s what the author is referring to in that specific quote, having used Visual Studio specifically to debug JS on IE, I can tell you that using VS to debug IE is far different than using what is built into IE alone.

  • Significan Me

    Sublime text 2 rocked my world. I usualy don’t use IDE’s for web dev, so sublime fits perfectly. But on the other hand VS is one if not the best IDE out there. I’m not talking about the language specific but the functionality and ease of use.

  • http://www.facebook.com/profile.php?id=1814311633 Thomas Henson

    Finally some ASP.Nets articles

  • Henk

    Dammm, the price of VS is hugeee…..why pay this much, as there are better editors fro free on the web!

  • http://twitter.com/RadValentin Valentin Radulescu

    I wish more devs would trust Microsoft and endorse Visual Studio. It’s by far my favorite IDE.

  • http://twitter.com/iPaintCode Mark Learst

    Seen Reys link to the VSE12, fired up Parallels to see what all this buzz was about. Installed VSE12, downloaded the awesome Web Essentials he talked about in this article. Wouldn’t install, thought something was wrong, did a little google search to find: 3rd-party extensions are not supported in VSE12. Guess I should have read the comments a little more in detail or maybe Rey stated that in his article but I missed that part. Oh well thanks for the tease Rey ;)

  • Michael

    How about making the images readable? Thanks!

  • MrEast

    How do you not mention NuGet? It’s one of the best features of VS.

  • kris

    @twitter-1589691:disqus I have used VWD in my past when I do asp.net mvc kind of work. After move to PHP I never tried anything that msft made.

    I do UI kind of work in sublime text 2. it’s work fine.
    I have tried Webmatrix 2 and post more then thousand of feedback on uservoice. many of improvment made but I never got satisfied with it. I tried Komodo and Sublime text and both work fine without any penny (webmatrix is free but a totally buggy apps).

    Visual studio is never designed for writing html. I am not sure about VS12 so. If you used any css framework and put class=”" you can’t gave multiple class by tab+enter (as you can do in phpstorm and sublime text).

    so if i can’t write html better in VS that it’s also means it’s not about WEb-development. so if VS is for web-development what thing I will got (excluded PHP).

    • http://www.facebook.com/mads.kvist.kristensen Mads Kvist Kristensen

      The issue with multiple classes was fixed by VS Update 2012.2

  • Keda

    What about Sass? Im currently using the scout sass app to compile my Sass/Compass code externally. Is there a easy way to get it working in VS?

    • Keda

      @twitter-1589691:disqus : Any input on this?

  • http://twitter.com/oscarantolinez Oscar Antolinez

    Hi Rey, great article, i liked return to VS development, with jQuery off course.

  • Robert Johnson

    I use VS for web development all the time. I try other editors but I usually end up back at VS.

  • http://www.biztechconsultancy.co.uk/php-web-development.htm PHP Web Development

    Visual Studio is best which have very best IDE consistently from last many years without any competitors. VS always on top.

  • http://www.sasasoftwaretechnologies.com/ Web Development Company

    A great initiative from you guys! We love the sharing of knowledge!

  • Rob Levin

    Could it be (a “mac kid” is jealous for Windows)? VS is definitely a killer IDE; hoping that the new ST3 gets me closer to some of those killer IDE features like “goto definition”, etc. Otherwise, I’m enjoying yeoman.js, grunt.js, etc., to get some of these features. Still, these VS features are impressive .. thanks for the article!

  • Sebastian

    Nothing beats SublimeText :D

  • Sniffly Wizzlestein

    Visual Studio is the real deal. I loathe when I come home at night after a long day of working in VS and work inside Dreamweaver for my site. I think it’s time to kick Adobe to the curb (for a web IDE at least).

  • http://www.facebook.com/cr84.cesar César Gómez

    At this point we all should have learned to not use any Microsoft software, we do not need any unpleasant surprises like incompatibility with standards that everyone else accepts, or a pieces of code that works only with Microsoft apps. Seriously, use it under your own risk.