Visual Studio Code comes fairly complete out of the box for small and big code projects, but there are many plug-ins available to extend its functionality. There's a new release of Visual Studio Code every month to improve the software and new features. A handy intergraded terminal readily available. For our projects is very fast and powerful.
- Visual Studio Vs Xcode
- Xcode Vs Vs Code
- Visual Studio And Visual Studio Code
- Xcode Visual Studio
- Visual Studio For Mac Vs Visual Studio Code
- Visual Studio Vs Code
You’ll already be familiar with a text editor if you’ve taken any Codecademy courses. Below is the Codecademy text editor in full screen at the end of the first module of the HTML course.
While Codecademy’s learning environment provides an intuitive and user-friending coding experience, sometimes you’ll need to use your own text editor. For example, if you decide to attend a Meetup or in-person coding course, they will use a downloadable text editor, and you’ll need to install this to work on projects both in class and at home.
I’ve dabbled with a few text editors to get a better feel for what suits my needs best. This is crucial as there is no “best” text editor out there, only the one that you allows you to create your best work.
In this article, I'll provide an in-depth comparison of two of the most popular text editors: Visual Studio and Sublime Text.
Visual Studio
Visual Studio (the text editor is known as Visual Studio Code so we’ll refer to that from now on) is Microsoft’s free text editor that runs on Windows, Linux, and macOS. It’s a recent entrant to the market; Microsoft released the product as a public preview at the end of 2015, posting the open source code to Github, before making it available as a general release in April 2016.
- Visual Studio for Mac is a macOS-native.NET IDE that focuses on.NET Core, Xamarin, and Unity. It provides many of the same features as Visual Studio for Windows, such as a shared C#, XAML, and web editor. For more information on Visual Studio for Mac, see our documentation. Before writing any code, you’ll first need to.
- Microsoft Visual Studio operates on only the Mac and Windows Operating Systems. It is slow compared to the Visual Studio Code, which works on is more Operating System platforms and is much faster. The Visual Studio product in the Mac OS is different from that which is currently in use in Visual Studio for Windows Operating System.
- Editor behaviors can be set to allow code to be formatted as it is written. These actions are set under Visual Studio Preferences Text Editor Behavior, and some of the more commonly used functions are described below: Matching closing braces can be added automatically to code when creating new classes, methods, or properties.
- Visual Studio (the text editor is known as Visual Studio Code so we’ll refer to that from now on) is Microsoft’s free text editor that runs on Windows, Linux, and macOS. It’s a recent entrant to the market; Microsoft released the product as a public preview at the end of 2015, posting the open source code to Github, before making it.
Despite its newbie status, Visual Studio Code has rapidly gained popularity among developers, ranking as the most popular development environment overall in Stack Overflow’s 2018 Developer Survey.
The basics
This is what Visual Studio Code’s home screen looks like when you write your first line of code or open a file that you have already created:
In the top left panel, you can see the different variations of code you are editing. In this case, I’m editing a file called “style.css.'
The middle panel is where you edit the code you have written or need to fix; you can open and edit several different files side-by-side.
The Visual Studio layout bears a similarity to Codecademy’s own text editor layout in its simplicity and ease of use. Take a look at Codecademy’s text editor below for a comparison.
You can, of course, edit the layout as well. Zen Mode is one of my favorites, especially because it sounds so relaxing. In reality, this is a full screen mode that allows you to edit code with no distractions.
More Features
Visual Studio Code allows you to edit code in a wide variety of programming languages. The example I used above is CSS (yes, I am classifying CSS as a coding language!). CSS is one of the built in programming languages, but you can install and configure other languages, such as Python and C#, via the Extension Marketplace.
Debugging
Visual Studio Vs Xcode
One of the classic exercises you’ll do when learning to program is to “break” some code and then try to fix it again. In my early days of programming, I spent ages staring at lines of code until my eyes went blurry, trying to work out why what I’d written wasn’t reflected in the final product.
Xcode Vs Vs Code
Thankfully, Visual Studio Code includes debugging functionality to help detect those errors before you reach the blurry-eye stage. To start debugging your code, all you need to do is either press F5 to run it in your current window, or go to the “Debug” menu.
You can also create “breakpoints”, which are points where the debugging process will automatically stop.
On a more basic debugging level, Visual Studio Code automatically detects minor problems in your code, and takes you directly there so you can solve the problem easily.
Intellisense
When I was learning to code, one of the tips the teacher gave us when we don’t know how to do something was to Google it. Microsoft has built a feature in Visual Studio Code called Intellisense, which is an alternative to Googling the problem (or “Bing-ing” it, in Microsoft’s case).
IntelliSense analyzes the semantics (letters) of what you are inputting, as well as the rest of the code you have created, and then provides suggestions on how to finish what you are writing. You can access a whole host of different completions through Intellisense, including language server suggestions, snippets, and word-based textual completions.
IntelliSense is available for the most common programming languages, including HTML, CSS, and Javascript, but for other languages, you’ll need to install an extension.
And the rest
Visual Studio Code has a number of other useful features that will help you through your coding journey by helping you better visualize your code and speed up your programming. This includes:
- Support for snippets: This allows you to create a catalog of small parts of reusable code, which you can insert into larger bodies of code
- “Go to” functionality: This allows you to quickly find and go to symbols, files, lines, and definitions
- Syntax highlighting: This displays code in different colors and fonts in accordance with the kind of coding language being used.
Overall impression
Confession time: I’m a long-time Windows/Microsoft Office user. Part of the reason for this (uncool) decision is that I find Microsoft products familiar and easy to navigate. The same goes for Visual Studio Code.
Even if you’re new to text editors, VS Code is easy to pick up and get using straightaway. It has a Microsoft look and feel to it, and it has two layers to it that make it ideal for any type of user.
If you’re a novice coder, it’s easy to work out the basic commands (plus Microsoft has written loads of documentation for it), but if you’re an expert user looking to do some serious programming, there are plenty of advanced features options there too.
Sublime Text (Version 3)
Sublime Text, which was developed by a former Google engineer, has been around since 2007. The first major difference between it and Visual Studio Code (VSC) is that it has a license fee of $80, although it does have a free trial version. Just like VSC, it runs on Windows, Linux, and macOS, and is the fourth most popular development environment in 2018 according to StackOverflow.
The latest version of Sublime Text—Version 3—was in beta for more than four years, from January 2013 until it was released to the public in September 2017.
The basics
When you open Sublime Text for the first time, you get a stripped back text editor. There is no sidebar, no options to search, no option to take you directly to the extension sidebar. It provides a more focused layout to help you concentrate on coding. There is a small minimap in the top right corner to give you an at-a-glance view of your code.
It opened pretty quickly compared to Visual Studio Code and, if you’re ready to get down to editing code, it provides the perfect start point. However, if you’re new to text editors, the other features and functionality are harder to find. Most of what you need is in the menus at the top, but you’ll also want to call up the Command Palette (more on that below) from the Tools menu to more quickly get to what you need.
Sublime Text Features
If you want to get the most out of Sublime Text, you’ll want to install extra plugins to give you the extra functionality. To do that, you need to install Package Control, which we’ll walk you through below.
Package Control
Package Control is similar to Visual Studio’s extension marketplace, but it isn’t available out-of-the-box. There are a lot of packages (or plugins) available for people who are new to programming, such as a starter package for C++, a package that will help with Python completions (a bit like Intellisense in Visual Studio), and Emmet, which helps you write HTML and CSS faster by allowing you to use abbreviations, which it automatically expands.
Command Palette
Visual Studio And Visual Studio Code
When you use the Command Palette feature, you’ll be able to find and navigate your way to any command much quicker than if you have to go searching through menus for it. You can access pretty much anything, and the Command Palette will also autofill for you, so if you’re not sure what you’re looking for exactly, it’ll suggest some options.
For example, if you are working on a project and you need to quickly add a new folder, or save the project you are working on, you can quickly pull up that option. Or if you want to create snippets without having to navigate through the menus, you can do that too.
To access Command Palette, all you need to do is hit ctrl + shift + p.
Goto functionality
There is a menu in Sublime Text dedicated to all of the “Goto” functionality within this text editor. This is a much more fully-featured version of Visual Studio’s own “Go to” menu.
Some of the highlights include Goto Symbol (added in Sublime Text 3), which lets you easily find all examples of symbols within a file. The example below is for H1 tags (there was only one instance within this file).
Projects
The Projects feature refers to a way of organizing folders and files within Sublime Text. It means that all folders and files are stored in one place and quickly accessible from the sidebar as soon as you open the project, rather than you having to keep manually opening more files. It also means you can search (quickly) across all files within a project at one time.
You can only have one project open in a workspace at a time, so if you want to change projects, you need to select the “Switch Projects” option.
Visual Studio has a similar feature called “Workspaces”, which allows you to open and work on multiple files at once.
And the rest
Sublime Text has a host of other, “smaller” features, which are worth a mention here. This includes:
- Snippets: These work in the same way as with Visual Studio, but you can also build your own, or install more from extensions
- Multi-edit: When you press ctrl + d, all instances of the word or command you are currently on will be highlighted within the file, you can also press ctrl + f to find and replace words.
Overall impression
Sublime Text is a fast and stripped back text editor that is hot on organizing and searching through the code you have written, and being able to easily jump to any function or symbol quickly. Its “Goto” functionality and many keyboard shortcuts make it easy for experienced developers to navigate their way around, and to write and find code easily without having to take their hands off the keyboard. For more novice coders (like myself), it takes longer to get used to.
Sublime Text doesn’t include a debugging option, which could be a problem for developers who require this functionality.
Which text editor should I choose?
Visual Studio could be classed as an integrated development environment (IDE), because it allows programmers to both write and test code. Sublime Text, on the other hand, is “just” a text editor (albeit an excellent one) because it focuses on providing the quickest way to organize and write your code, but no ability to test (debug) the code.
Another major difference between Visual Studio Code and Sublime Text is the support that Microsoft provides compared to Sublime Text. Microsoft has created reams of documentation explaining almost every feature and how to use them, as well as blog posts and video tutorials to help users get up to speed with the text editor.
Sublime Text provides some harder to find documentation, a blog post explaining the features in the latest version, and a forum.
Sublime Text is quick and easy to write code and navigate your way around when you know what you’re doing. Visual Studio provides more hand-holding and is a great option for its debugging functionality, but might slow some speedy experienced programmers down when it comes to writing code.
There is a lot of debate among programmers about the “best” text editor out there but, while they all have their personal preferences (which can change depending on their latest project), there is no one-size-fits-all development environment. The best option is to download and try each one and see which has the features you need, and which you get on with best.
About two years ago, I begrudgingly opened Visual Studio Code (VS Code) for the first time. The only reason I even did so is that I was working on a TypeScript project (also quite begrudgingly) and I was tired of fighting with the editor and the compiler and all of the settings that I needed to make a TypeScript project work. Someone mentioned to me that TypeScript “just works” in VS Code and I was pleasantly surprised to find that they were right.
I expected that though. VS Code is from Microsoft, so it’s entirely expected that TypeScript would just work. What I did not expect was that virtually anything that I needed to do in VS Code “just worked” too. And I do mean anything. While this article focuses primarily on features for the web as well as JavaScript developers, VS Code has integrations with Go, Python, Java, and Ruby — just to name a few.
Over the next few months, I began to discover things in VS Code that I found remarkable. I made the official switch to VS Code, and I haven’t looked back since. Over the months I’ve been compiling a list of my favorite tips, tricks, and extensions for VS Code that might leave you with the same reaction that I had and continue to have: “VS Code can do that?!” 😲
From Web Apps To Desktop Apps
Did you know that you can add “desktop app developer” to your resumé with just a little more effort? All you need to do is look over some API documentation and create your first modern desktop app. Read a related article →
Interactive Playground
One of the best ways to learn the ins and outs of VS Code is by going through the Interactive Playground.
This is a special page that goes through common keyboard shortcuts and concepts like multiple cursors, split panes, and keyboard shortcuts. Each of the examples are interactive so that you can practice the tutorials right inside the tutorials themselves.
The Interactive Tutorial is right on the “Welcome” page when the editor is first opened:
Many people (including myself) miss it entirely because it’s below the “fold” and towards the bottom of the page. Besides, who reads welcome screens?
Note: You can get back to the Interactive Tutorial at any time by opening the VS Code command palette Ctrl/Cmd + Shift + P and selecting “Interactive Playground.”
Now that you’ve mastered the basics, you’re going to need a font that is as beautiful as the code you are about to write. For that, look no further than FiraCode and Font Ligatures.
Font Ligatures
Font Ligatures are fonts that contain special characters which are used to represent symbols that consist of more than one character. We have a lot of these in programming. These would be characters like <=, >=, and .
FiraCode is a lovely font ligature for VS Code. First, download the FiraCode font from GitHub and add it to your machine fonts. Then add the following lines to your User Preferences file Ctrl/Cmd + ,.
Try out a few of the special characters I listed above to see the difference. Font Ligatures show up in places you wouldn’t normally expect. Places like www and &&. Go ahead, give it a try and see what you discover!
Now that you have a nice font ligature and some delightful new symbols, it’s time to leverage that muscle memory that you’ve built up over the years in previous editors by installing a Keyboard Mapping.
Keyboard Mappings
Part of my hesitation in switching to VS Code was that I had invested some amount of frustration and effort to learn Sublime Text’s keyboard shortcuts. I was also a little bit proud of my keyboard prowess and not at all ready to give that up.
Fortunately, I didn’t have to.
VS Code has something called Keymaps. These are extensions that map all of its shortcuts (well, almost all) to other editors. There are keymaps for all of the popular editors including Sublime, Atom, Emacs and even Eclipse!
To install a Keymap, open the extensions search bar by pressing Ctrl/Cmd + K → Ctrl/ Cmd + X. Then search for “keymap”.
I should note that I have since removed the Sublime Keymap. After enough use, I was able to re-wire my brain to go with VS Code shortcuts as they come out of the box. Think of the keymaps as training wheels: they are a good idea when you are just getting started, but at some point, you probably want to take them off.
Now if you’re like me, you have multiple computers, and you may edit in different places depending on the project and day. We’ve already made a bunch of changes to our VS Code setup, and we’re going to be making a bunch more. We don’t want to repeat this configuration everywhere we use VS Code. That’s where the Settings Sync extension comes in.
Settings Sync
With the Settings Sync extension, you can export all of your VS Code settings to a Gist, and then pull them all down from another VS Code installation and have them immediately applied.
This is also a good way to share your configuration with colleagues. Just send them the ID to your Gist, and they can synchronize all of your settings to their install. Some shops keep a central gist, and all new developers to the team can get the exact configuration with one simple command. That’s productivity!
And speaking of productivity, let’s get right into one of my favorite productivity tools for web developers: Emmet.
Emmet
Emmet is a popular expansion tool for markup and CSS that has been around for quite some time. However, I meet people almost every day who have either not heard of it, or they are new to development and are just learning about it. That’s ok! We’re all learning different things at different times.
Emmet is baked into VS Code, so there is no extra effort required to get it running. Simply start typing your Emmet syntax in an HTML or CSS file and let the editor do the rest. By default VS Code will even show you a preview of the upcoming Emmet expansion.
A neat trick to use with Emmet is to map a keyboard shortcut ( Ctrl/Cmd + K → Ctr/Cmd + S opens keyboard mappings) to the “Wrap Individual Lines With Abbreviation” command. This is akin to the old “Wrap Selection As Link” from Textmate, but with the added benefit of being able to wrap multiple lines at once with a more complex expansion.
Emmet can also be used in markdown, JSX and .vue files. To enable those, add the correct language mapping to your User Preferences file Ctrl/Cmd + ,.
In the case of JSX, Emmet is smart enough to use className instead of class inside the expansion.
Another neat feature of Emmet that was new to me is the ability for Emmet to automatically provide image width and height just by looking at the image file linked in the src. This works in HTML and CSS. It also works with both images hosted locally in the project and images on other URLs. To use this feature, put your cursor in your image tag, open the command palette Ctrl/Cmd + Shift + P and select “Update Image Size.” Magic! 🎩
For a deeper dive into what Emmet is and all of the different ways to use it in VS Code, check out this CSS Tricks article.
While Emmet takes care of productivity in markup and CSS, VS Code itself provides code completion in the form of intellisense; and it works in places that you might not expect.
Xcode Visual Studio
Intellisense In JSON Files
Intellisense is a rather well-known editor feature but is primarily thought of only inside of code files. VS Code extends the classical definition of intellisense and adds it to JSON files as well. You will see this if you add any settings to your User Preferences file. VS Code provides intellisense for package.json files as well. What’s even more impressive is that it provides intellisense to npm packages inside of the package.json. Need a specific package and don’t remember the version? No problem! VS Code will look at npm and return the most recent version in the intellisense.
Some people have remarked that they don’t hand edit their package.json file. However, I find myself doing it from time to time for some odd reason or another, and having to look up the package version was always a giant pain for me. Now it’s just provided to me by VS Code. One less thing I have to guess at.
Even with Intellisense, this is JavaScript, so unless we’re super brave (or addicted to suffering), we’re going to need a linter. VS Code has great ESLint integration via the ESLint extension, but there are another options, and it involves type checking your untyped JavaScript.
Type Check Your JavaScript
Remember that great TypeScript integration I told you about earlier? One of the little-known tricks is that you can use the TypeScript compiler to check plain JavaScript files as well. You do this by adding a //@ts-check to the top of any JavaScript file, and you will immediately get TypeScript error checking on the file.
You wouldn’t want to add that line to each and every file, so you can use TypeScript to check every single JavaScript file in your project by adding the following line to your User Preferences file Ctrl/Cmd + ,.
If you want to control specific checking features of TypeScript, just drop a .tsconfig file in your project. When I say TypeScript “just works” in VS Code, I mean it works so well that it’s almost seamless to the developer.
Now that you have code linting and even type checking when you need it, it’s time to let VS Code handle those pesky formatting issues using Prettier.
Prettier
Prettier is a wonderful open-source code formatting tool. It is widely used by teams (and individuals) to make sure that coding styles are universal across projects and developers. It automatically reformats your code to match some defined standards, such as which column to wrap code on, how to format promises and whether to use single or double quotes.
Prettier is enabled in VS Code with the Prettier Extension. To install it, open the Extensions panel Ctrl/Cmd + K → Ctrl/Cmd + X and search for “prettier”.
Once installed, you will see Prettier in the taskbar for any file that Prettier knows how to format. You can invoke Prettier on the file by using the “Format Document” command: Alt/Option + Shift + F.
A neat trick here (and shown in the above video) is to set VS Code to auto-format on save. This will invoke Prettier whenever the file is saved. To get this functionality, add the following settings to your User Preferences file (Ctrl/Cmd).
Prettier settings can also be tweaked from the User Preferences file. If you would like Prettier to use your ESLint config for settings, just specify the “eslintIntegration” setting.
Look at how pretty your code is now! Beautiful. You’ll never want to leave your editor again. Thanks to the terminal options in VS Code, you might not ever have to!
Terminal Access
You may have noticed from the video above that VS Code has an integrated terminal. You can launch it by pressing Ctrl + , . Multiple terminal sessions can be opened and will appear in the dropdown list at the top right of the terminal window.
I have had a hard time breaking my habit on the built-in terminal on Mac. You can open the external terminal at any time from VS Code in the exact location of the file you are currently viewing by using the keyboard shortcut Ctrl/Cmd + Shift + C.
Silly terminal tricks aside, one of the most important things that a developer can do to increase their productivity is to simply collaborate with other developers. We do this all the time. Some of us are lucky enough to sit next to each other. Some of us do it via Skype. No matter how you pair program, VS Code has just added a feature that is likely going to change the way you think about how you collaborate.
Live Share
Visual Studio For Mac Vs Visual Studio Code
VS Code Live Share was just announced this past week at Microsoft Connect. It allows multiple developers to pair on a project instantly. It’s not necessary to check code into a repo or fire up a screen sharing tool. Other developers can load up your project in their editor immediately and see your cursor in real time without having to configure anything on their end.
This also works for debugging. If you start a debug session, the other person gets the same full debug experience right inside of their editor. They can even control the debug process by stepping in, out and over the code. If the other person changes your code, it changes in your editor as well.This is really hard to wrap your head around until you see it in action. I highly recommend watching this short demo. I’m still not sure how we’ve made it this long as developers without a feature like this.
At the time of this writing, VS Code Live share is in preview, but will likely be generally available by the time you read this. In fact, you might already be using it!
Now that your co-workers have successfully fixed all your bugs (hooray for collaboration!), it’s time to check all of it into GitHub. One of my favorite features of VS Code is that the Git integration is so good, that even I can use Github.
Git Integration
I also have a hard time with Git on the terminal because it is a black box. You’re flying blind outside of your editor with only your terminal skills and knowledge of the Git CLI to get you through. That may be enough of some folks, but I have come to rely heavily on the visual Git integration that is provided with VS Code.
VS Code automatically picks up any Git configuration in your project. There is an entire tab dedicated just to Git options. Out of the box, VS Code supports adding, committing and pushing, branching, stashing and popping, amongst a host of other options. When viewing files in the Git tab, you get a side-by-side comparison between the original and the diff. You can also now view diff’s directly inline in a code file and can even revert from there as well.
So far we’ve focused heavily on text editing itself, but VS Code is remarkably suited to some much heavier lifting; the kind of things that we normally expect from an Integrated Development Environment (IDE), not a text editor. Here are some of my favorites.
Zero Configuration Node.js Run And Debug
Visual Studio Vs Code
VS Code will run and attach a debugger to any JavaScript code without any extensions or configuration whatsoever. Simply press the F5 key and select “Node” from the dropdown list. You can also switch to the debug tab Ctrl/Cmd + Shift + D and click the green arrow button up top. This will launch your application and attach the debugger providing a full-featured debug experience.
Column Breakpoints
VS Code also supports inline or column breakpoints. This is when you set a breakpoint in the middle of a line of code. This is particularly useful for debugging promise chains, and any other places where you multiple functions on one line.
Just right-click during a debug session and choose “Add Column Breakpoint.”
Build, Run, Debug and Deploy Docker
Microsoft provides a Docker extension for VS Code that will allow you to perform virtually all of your Docker actions in VS Code. In fact, VS Code will automatically create the requisite Docker files for your project (as best it can) based on which runtime you pick and your project structure. For straightforward Node.js apps, this means a zero-configuration Docker setup.
In this example, I take an Express application and use VS Code to create all of the Docker and Docker compose files. VS Code also creates the proper debug configuration so after I run the image I can attach the VS Code debugger and everything simply works. The extension also enables publishing of your image to either Docker Hub or Azure Container Registry.
Compound Launch Configurations
While build tools such as Webpack have entirely changed the way we build applications, they have also introduced new development challenges that didn’t exist before. Webpack uses its own in-memory development server to provide “hot reloads,” but when you move to production, Webpack is out of the equation, and your server takes over.
Basically, it’s now necessary to run as two separate projects in development and one project in production. This means that we typically debug front-end applications in the browser with the Chrome DevTools and the server portion in our text editor.
VS Code has the ability to launch multiple processes and attach debuggers to both of them from a single launch command. This means that it’s possible to debug front-end JavaScript code and server-side Node.js code right from within VS Code.
This is called a “Compound Launch Configuration.” In the video above, I use the following code to debug an application that uses Express/Cosmos DB for the backend and React for the front end.
Note that this requires the Chrome Debugger Extension to be installed. MongoDB Administration
MongoDB Administration
VS Code can help you visually administer and query any MongoDB or Cosmos DB database (local or remote) using the Cosmos DB Extension.
The Cosmos DB extension will connect to any existing Cosmos DB instances in Azure, but it will also connect to any MongoDB instance that is accessible with a mongodb:// URL.
You can create and drop databases and collections in the sidebar, as well as create and work with MongoDB Scrapbooks to test your queries. VS Code provides full intellisense to collections and the MongoDB API in Mongo Scrapbooks. You can even change the result of your query in the results pane and the changes will be persisted back to the database.
Deploying Apps
Another neat extension for VS Code is the Azure AppService extension. If you want to deploy your apps to the cloud, you can do that without ever leaving the editor.
Microsoft provides an extension called AppService Tools for VS Code that will let you create new sites, manage existing ones and deploy your code either with a right-click or a pre-built shell script which automates the process of checking your code into the right Git endpoint to setup continuous delivery.
Yes, VS Code Can Do That
By now you have probably caught on to the theme that there is really nothing that VS Code cannot do. If you want a certain piece of functionality, it’s highly likely that either the editor already supports it (we didn’t even touch on the Git integration) or someone has created an extension for whatever your specific use case might be. Even if that’s turning Markdown into Reveal.js presentations!
Additional Resources
- “VS Code Insiders Build,” Visual Studio Code, Microsoft
- “VS Code Awesome List,” Valerii Iatsko, GitHub
- “VS Code Tips And Tricks,” Valerii Iatsko, GitHub