Introduction to development - Part 1 - Installing a Code Editor

Learn how to install VSCodea

Introduction to development - Part 1 - Installing a Code Editor

What is a code editor?

If you're looking to work with code, you follow a few steps:

  • Create a folder to store your code
  • Create a file inside the folder you put your code in
  • And you edit that code

You could edit code with something like Notepad (Windows) or TextEditor (Mac), but it wouldn't be very efficient. This is where code editors come into play. They allow you to edit code in a more efficient way. It's no different than using Word to write a paper.

What are the benefits of code editors?

For example, there are all sorts of benefits and add-ons when using code editors:

  • Autocomplete
  • Auto-expanding snippets
  • Code highlighting
  • Multiple cursors to quickly edit multiple lines of code
  • Syntax warnings and errors
  • Auto-formatting to show you the proper way to indent your code
  • And a whole lot more

Can I just use textedit in mac or notepad on Windows?

You could, but then you wouldn't receive many of the benefits of having a text editor that's made for code. TextEdit and Notepad are simple text editors and won't make working with code any easier.

What code editor do I suggest?

Honestly, that's going to be a matter of personal preference. The primary point is to pick a code editor and become efficient with it. Once you do, you can easily switch to other ones that may have different feature sets down the road. However, I'm currently using VS code. Some other popular options are Sublime and Atom.

Okay, so how do I install my code editor (VSCode on Mac)

The first thing you need to do is go to your web browser, type in "vscode" and find the download link. Go ahead and click on that, then select the operating system that you're using. I'm using a Mac so I'm going to select that download. Now you have to wait for it to download.

Once downloaded, you need to unzip it and move it into the applications folder on your mac.

Applications will be located at /Applications

It's easiest to open your download folder and applications folder separately so you can drag it over.

Now that it's in your applications folder, you can go ahead and open VSCode. You may see a notification about it being an app downloaded from the internet, you can click open.

When you first launch VSCode, you'll see a file open showing release notes.

You can go ahead and click the close icon on the "Release Notes" tab. You should now have a blank workspace.

I have my code editor installed and open, now what do I do?

The first thing I would do is create a folder on your computer to store all of your code. Everybody has a bit of a preference but generally, I like to put it right under my username folder, somewhere around ~/myusername/code. You could create a code folder in your Documents folder or wherever you prefer. All you need to worry about is knowing what folder you will store your code in. Once you have the folder ready, you can open it with VScode.

How do I open my code folder with VSCode?

There are a couple of ways to do this

  1. Click and drag your folder into the empty VSCode workspace
  2. File > Open. Then navigate to your folder, select it, and then select "Open"

Now you're ready to start coding!