Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:11Length:1.6 hours
  • Overview
  • Transcript

2.3 Microsoft's Visual Studio

Visual Studio isn’t open source or cross-platform, but it is the best development environment on Windows for JavaScript development. And it’s free!

Related Links

1 lesson, 00:40

Free Lesson

2.Code Editors
3 lessons, 23:10

Free Lesson
GitHub's Atom

Adobe's Brackets

Microsoft's Visual Studio

3.Runtime Environments
1 lesson, 10:41

Browser Development Tools

4.JavaScript Components
3 lessons, 39:01




5.Node Packages
2 lessons, 23:47

NPM and Browserify


1 lesson, 00:42


2.3 Microsoft's Visual Studio

The final code editor that we're going to look at in this course is rather controversial, because it is not open sourced, and it is not cross-platformed. It is however free, and that is at least something. It is Visual Studio. Now, I'm hearing the collective groans, but bear with me because if you are on Windows, and if you spend your time in JavaScript environments like Node JS, then Visual Studio is something that you should be very serious about. It has wonderful JavaScript support, and with a few extensions, you can turn that wonderful JavaScript support, into phenomenal Java Script support. And very recently Microsoft released what is essentially Visual Studio Professional for free. It's called Visual Studio Community, which has all of the features of Visual Studio Professional and it is 100% free. So you can download it, and install it, and get started writing code. There's also a lot of extensions for Visual Studio. There's one called web essentials that adds a lot of wonderful stuff to not only the JavaScript support within Visual Studio, but support for other things. Like for example, it adds a live preview from markdown files. And it also adds support for JSHint. So if I go to the solution explorer, which is where all of my project files are, if I right-click on this event shim file, go to web essentials, and then JSHint, then we can see all of the things [LAUGH] that are wrong with my code. There's also a package manager called NuGet Package Manager, and this is essentially a PowerShell console running inside of Visual Studio. And if we wanted to, we could change this profile to also include Git commands so that we could issue Git commands through this package manager console. But there is built-in Git support as well. If If you look at Solution Explorer, we see these little icons next to the files, these padlocks. This means that these files are clean, that there's nothing changed here. But if we do add a change, let's just add var foo = an object. Then when we go back to Solution Explorer, we're going to see that we have a change here. We have a pending edit, and if we wanted to view the history of that file, we could right-click and choose view history. We could also look at the diff. I wish it was called just diff, but it's called compare with unmodified. And then it gives us a side by side comparison. So that we can see what has changed between the unmodified version, which is on the left hand side and then the modified, which is on the right hand side. But if we go to this team explore then we have a lot more options as far as Git and source control is concerned. We can see the changes, we could enter a message for committing this change. We can also change the branch, and we can also sync it with the remote repository. So basically everything that we need to do we can do here with this graphical user interface or whenever we modify the power shell profile for the package manager console. We can do that from the command line as well. But I will say, one thing that bugs me is that it is intent upon trying to get me to get a developer license for writing Windows Store and Windows Phone apps. I don't know how many times I have dismissed that message and it just keeps on popping up. Now, earlier I mentioned that there is Node.js support for Visual Studio. Currently, it's not built in to Visual Studio, but Microsoft does have an official extension that you can download and install. It is currently in beta, but I imagine whenever it is final it will eventually be baked into Visual Studio. If it's not, then it will be at least accessible from Visual Studio. Because not only do we have this NuGet Package Manager, but we also have an Extension Manager as well. If you go to Tools>Extensions and Updates, this is where we get all of the updates for Visual Studio as well as the extensions that we might want to install. Now not every extension is going to be in here. Like for example, I also use Resharper. Which is a wonderful extension for Visual Studio, and that is not something that you can download through this Extensions and Updates. But you can see that there is the Web Essentials. And you can also download and install the Azure SDKs. In fact, if we look at what is installed, there's quite a bit here. The last thing that I want to show you is a feature called a browser link, which is kind of like the live preview from brackets, but it's a lot more powerful than live preview. And so here I have just a basic website. In fact there's just one file, this index. Actually I lied there's two files. There's also a configuration for the web server. Now, Visual Studio does have a web server. It is IIS express. So if you are writing a website or a web application project you don't have to worry about moving files around in order to actually run and test your application. It's all there for you. Unless, if you're using no JS, in which case you're not going to be using IIS Express. But in this case, I'm using IIS Express, and I have this website running in two browsers. I have it in Internet Explorer, and then Chrome. And if I had other browsers installed, I could use those as well. But if you'll notice, at the bottom of the browsers, you'll see this little bar here. This is being injected by Visual Studio, because if you look at the HTML, there's just nothing there. And this has several different tools that we can use within the browser that also affects Vsual Studio. Like for example, if I click on inspect, and let me do this in Chrome because you expect it to work in Internet Explorer. But if I click inspect in Chrome we can see that, as I move the cursor around, things within the browser are being highlighted. But if you look at Visual Studio, you can see that the code for those elements are also being highlighted as well. So if I click on Hello World, you see the h1 element was selected. And then if go back to the browser, and if I click on Design, then I can target this element. I can click here. And then I can just start typing here. So instead of Hello World, let's say Hello Visual Studio. And you can see that Visual Studio is updating what the data that I am typing into the browser. So, it's going to automatically change that file and save it. And then, instead of going to Internet Explorer, into the other browsers I have open and hitting refresh, I can just go to Visual Studio and click on the refresh button here. We can see that the tool tip says browser link two browsers connected and I have Internet Explorer, and Chrome connected here. So whenever I click on this it's going to refresh those browsers, and show the changes. So that means I can go back to Visual Studio, and let me add in h3, and let's say Browserlink is really nice. Instead of having to refresh the pages in the browsers, I can just click on the refresh here. Now, it would be nice if it just automatically refreshed whenever I saved. That is one very nice thing about live preview in brackets. You don't have to do anything, it's just automatically updated for you. But, then again, this is a relatively new feature to Visual Studio, and I imagine that more and more features and intuitiveness are going to be added to Browserlink. So, there you have just a brief overview of a Visual Studio. Unfortunately, it is for Windows only, but it is a fantastic code editing environment.

Back to the top