VS Code for the New Developer
Visual Studio Code for the New Developer
Introducing Visual Studio Code
Visual Studio Code (or VS Code, sometimes just Code, for short) is Microsoft's code editor for those who don't need or want the full-blown IDE (Integrated Development Environment) of Visual Studio. As such, it is great for beginners and professionals alike due to its extensibility and adoption of open source tools (and the editor itself is open source!)
- Introducing Visual Studio Code
- Extensions
- open in browser
- Live Server
- Live Share
- Emmet
- Themes
Introducing Visual Studio Code
Visual Studio Code (or VS Code, sometimes just Code, for short) is Microsoft's code editor for those who don't need or want the full-blown IDE (Integrated Development Environment) of Visual Studio. As such, it is great for beginners and professionals alike due to its extensibility and adoption of open source tools (and the editor itself is open source!)
If you are new to coding, especially web development, you may find VS Code featured in many tutorials, YouTube videos, and online development courses on such sites as Udemy and Pluralsight.
Out of the box, VS Code provides a nice experience, but the availability of extensions makes it even better. I want to draw your attention to a couple features that will help you get started using VS Code.
First of all, once you download and install VS Code on your machine -- and it looks and works almost exactly the same on Macs and PCs (excepting some keyboard shortcuts, of course) -- you'll want to immediately visit the Interactive Playground.
To get there, from the main menu click on Help > Interactive Playground. I'm going to show you screenshots from a PC, but the Mac isn't much different, the menu is just pinned to the top of the screen rather than the application window.
This will open a pane in VS Code that shows off some of the handier features available to you in VS Code such as Multi-cursor editing, refactoring, snippets and Emmet. Take some time to fully explore each of these, you may not find yourself using them right away, but as you start coding, come back to the playground to remind yourself of some of the built-in features and you'll start becoming much more efficient at writing and editing your code.
"A man is only as good as his tools." -- Emmert Wolf
Mastering your tools is just as important as mastering a programming language. When you first start coding, you may find a lot of similarities between a code editor and a word processor, but there are a lot of things that are different and designed specifically for writing HTML, CSS, JavaScript and other computer languages. Learn them, because the best tools are the ones that stay out of your way, and VS Code will do that if you learn how it lets you do that.
VS Code Extensions
Extensions are what enable VS Code's superpowers. They are features that can be added on to the main core of VS Code and let you work more easily with specific programming languages, or collaborate more easily with other programmers. Here are a few that I like to start people off with who are learning Web Development:
open in browser
As the name suggests, this allows you to preview an HTML page you are working on in your browser. When you're first learning to build Web pages, you'll want to see what your work looks like in a Web Browser. Normally, we would have to open the folder in explorer or finder and double-click the file name to open it in a browser. This extension makes that easy. All you have to do is press Alt + B to open the current page in your default browser.
As you make changes in your code, just go back to the browser, reload the page and you will see the updates.
Live Server
This extension takes open in browser one step further. It launches a mini web server for your page and shows it in the browser. To use it, you can use the keyboard sequence, ALT + L, ALT + O or Right-Click on the page and select the Open with Live Server option.
Additionally, as you make changes to your code, the page will be automatically reloaded in the browser.
VS Live Share
This one is really cool if you are working with a partner or pair programming. A lot of times in a coding class, you will be paired up with a fellow student, or if you are working one-on-one remotely with a tutor or instructor, they may ask you to start a Live Share session so you can both work on the same code at the same time.
This is a very cool extension created by Microsoft. When it's installed, you'll see a Live Share icon in the toolbar.
It's essentially macros for HTML. And the great thing about it is that it's built right in to VS Code. This means that as you type Emmet shortcuts into the code editor, it'll tell you that there is an emmet shortcut available.
And if you click on that little blue circle with the i in it, you'll actually get a preview of what Emmet will fill in for you.
There is a comprehensive Cheat Sheet avaialble to help you navigate all the wonderful things Emmet can do for you.
Themes
One last thing to get you started. You'll see many coders who prefer colored text on a dark background, while others prefer to use a light background. Either one is supported in VS Code with the use of themes.
Themes can be found along with the Extensions. Just type theme into the search box at the top of the extension sidebar and you'll find hundreds to choose from.
Wrap Up
Remember, knowing how to use your coding tools is just as important as knowing how to code. Be curious, take the time to explore VS Code, seek out getting started tutorials and just poke around the menus to see what there is to do. Browse the extensions, they're easy to install (and uninstall -- don't keep ones you don't like or use around).
Additional Links
VS Code Extensions
Extensions are what enable VS Code's superpowers. They are features that can be added on to the main core of VS Code and let you work more easily with specific programming languages, or collaborate more easily with other programmers. Here are a few that I like to start people off with who are learning Web Development:
open in browser
As the name suggests, this allows you to preview an HTML page you are working on in your browser. When you're first learning to build Web pages, you'll want to see what your work looks like in a Web Browser. Normally, we would have to open the folder in explorer or finder and double-click the file name to open it in a browser. This extension makes that easy. All you have to do is press Alt + B to open the current page in your default browser.
As you make changes in your code, just go back to the browser, reload the page and you will see the updates.
Live Server
This extension takes open in browser one step further. It launches a mini web server for your page and shows it in the browser. To use it, you can use the keyboard sequence, ALT + L, ALT + O or Right-Click on the page and select the Open with Live Server option.
Additionally, as you make changes to your code, the page will be automatically reloaded in the browser.
VS Live Share
This one is really cool if you are working with a partner or pair programming. A lot of times in a coding class, you will be paired up with a fellow student, or if you are working one-on-one remotely with a tutor or instructor, they may ask you to start a Live Share session so you can both work on the same code at the same time.
This is a very cool extension created by Microsoft. When it's installed, you'll see a Live Share icon in the toolbar.
I'll go into detail on how to get started using Live Share in another post, but for now, you can check out the Quick Start on the VS Live Share Visual Studio Marketplace.
Emmet
Emmet is an extension that helps improve your html workflow. It's a little confusing to get started, but once you master a few of the simpler commands, you'll find yourself able to do cool things like this:
And if you click on that little blue circle with the i in it, you'll actually get a preview of what Emmet will fill in for you.
There is a comprehensive Cheat Sheet avaialble to help you navigate all the wonderful things Emmet can do for you.
Themes
One last thing to get you started. You'll see many coders who prefer colored text on a dark background, while others prefer to use a light background. Either one is supported in VS Code with the use of themes.
Themes can be found along with the Extensions. Just type theme into the search box at the top of the extension sidebar and you'll find hundreds to choose from.
Wrap Up
Remember, knowing how to use your coding tools is just as important as knowing how to code. Be curious, take the time to explore VS Code, seek out getting started tutorials and just poke around the menus to see what there is to do. Browse the extensions, they're easy to install (and uninstall -- don't keep ones you don't like or use around).
Additional Links
Comments
Post a Comment