If you've followed us up until now, you've probably found nano a bit frustrating to work with.  That's where Visual Studios Code comes in to make your life a bit easier.  

VS Code is a powerful coding text editor that helps you write software, work the command line, and more.  This post will give a very brief intro to some of the features in VS Code.

Prerequisites

Installing VS Code

Head over to the Visual Studio Code website and follow the installation instructions for your system.

Setting Up A Workspace

VS code is super powerful, but here are the basic essentials that every developer uses. We'll demo this on the webpage that we made in Part 2 of this series.

Start by opening VSCode clicking Add workspace folder...

Find the webpage directory that you made from Part 2. Highlight it and click the Add button.

You can now see your files in the left sidebar.

You can save this workspace from the file dropdown in the top left corner.  Click Save workspace as... and create a file name.  Then click the Save button.

Editing A File

This is pretty self explanatory, but you can edit any file by clicking on it from the left sidebar.

To save your edits, hit ⌘ (or ctrl) + s or from the file dropdown menu in the top left, click save.

Using The Command Line

VS Code has a built in command line!  You can access it by clicking ⌘ (or ctrl) + ` or from the view dropdown menu at the top of the screen, click Terminal.

Now when ready to commit your changes to git and push to GitHub, simply enter into the terminal:

git add --all
git commit -m "my vscode updates"
git push origin master

Final Thoughts

Visual Studios Code is a super powerful web development tool.  In this article, we've only scratched the surface for all that it can do, but have laid the foundation for tutorials to come.  

One other final thought - don't discount the power of nano as a powerful minimalist text editor.  There will be times during development when you will need a command line text editor, for troubleshooting or other reasons.  I worked with only nano for 3 years, and became faster using nano than other editors! 🤓

If you've selected nano as your default terminal editor, it will pop up from time to time.  So be familiar with how to use it, and when lost just google how to use it.

This article is part of an ongoing series to help you build your first app.  Subscribe below if this content helps you!