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.  Subscribe below if this content helps you!

Disqus Recommendations

We were unable to load Disqus Recommendations. If you are a moderator please see our troubleshooting guide.

❮

  • 3 years ago

AI is hot these days, and OpenAI has an excellent and powerful API for all to …

  • 3 years ago

A hackers introductory guide to using chrome developer tools to inspect, …

  • 3 years ago

A tutorial for getting started with OpenAI's API, based on their quickstart guide, but …

  • 4 years ago

An example for how to create custom theme color pallets in Bootstrap 5 …

  • 2 years ago

A fast and simple guide for getting WordPress running locally on a Chromebook …

  • 3 years ago

A simple example setup of Vue3 using Vite, with ExpressJS and NodeJS on …

  • 3 years ago

A hackers introductory guide to using chrome developer tools to inspect, …

  • 2 years ago

A hackers introductory guide to using chrome developer tools to inspect, …

❯

Disqus Comments

We were unable to load Disqus. If you are a moderator please see our troubleshooting guide.

G

Start the discussion…

Comment

Log in with
or sign up with Disqus or pick a name

Disqus is a discussion network

  • Don't be a jerk or do anything illegal. Everything is easier that way.

Read full terms and conditions

This comment platform is hosted by Disqus, Inc. I authorize Disqus and its affiliates to:

  • Use, sell, and share my information to enable me to use its comment services and for marketing purposes, including cross-context behavioral advertising, as described in our Terms of Service and Privacy Policy, including supplementing that information with other data about me, such as my browsing and location data.
  • Contact me or enable others to contact me by email with offers for goods or services
  • Process any sensitive personal information that I submit in a comment. See our Privacy Policy for more information

Acknowledge I am 18 or older

Favoriting means this is a discussion worth sharing. It gets shared to your followers' Disqus feeds, and gives the creator kudos!

Find More Discussions

Share

  • Tweet this discussion

    • Share this discussion on Facebook
    • Share this discussion via email
    • Copy link to discussion

  • Best

Be the first to comment.

Load more comments

live.rezync.com

live.rezync.com is blocked

This page has been blocked by an extension

  • Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

pippio.com

pippio.com is blocked

This page has been blocked by an extension

  • Try disabling your extensions.

ERR_BLOCKED_BY_CLIENT

Reload

This page has been blocked by an extension

Initial Apps](/content/site-root.html)

—

Teach Yourself To Code Part 4 - Intro To VS Code

Share this