What is an IDE?

You can use any text editor to write programs. In fact, you can write great programs using the default Notepad application on your computer. Over the years, many tools have been created to make our lives easier when writing code: syntax highlighting, auto-completion, debuggers, code analysis to catch mistakes, AI and many more. These days, we write most of our code in an IDE.

An IDE (Integrated Development Environment) is an application that bundles many useful tools for software development into a single graphical user interface specialised for code editing. The goal of an IDE is to help us write code faster, more efficiently, and with fewer mistakes. IDEs come in many forms and shapes with different tools and target users.

IntelliJ IDEA - an IDE for Java development by JetBrains

IntelliJ IDEA - an IDE for Java development by JetBrains

Xcode - an IDE for iOS and macOS development by Apple

Xcode - an IDE for iOS and macOS development by Apple

Installing Visual studio code

In the core program, we will use the popular IDE Visual Studio Code or VSCode for short. VSCode is a lightweight IDE created by Microsoft for general purpose development and it's completely free. VSCode supports many different plugins that provide far more functionality than what is installed by default.

Download and install VSCode

Welcome to VSCode

After installing successfully, launch VSCode. You'll be greeted with a welcome screen.

Watch this introductory video from the VSCode team that explains the basics:

https://www.youtube.com/watch?v=B-s71n0dHUk

<aside> 💡

The command palette is an extremely useful tool for searching commands or settings in VSCode. Press ctrl+shift+p (cmd+shift+p on macOS) to open it.

</aside>

Now let’s make VSCode more personal

<aside> ⌨️

Hands on: Use the command palette to change the theme of the editor. Select one that you like the most.

</aside>

Write and run your first JavaScript application

Now you're ready to write and run your first application. Follow these instructions:

Create a new folder for your workspace on your computer
Open VSCode → Open Folder → select your newly created folder
Create a new file by pressing ctrl+n / cmd+n, or use the file explorer by clicking the add file icon:
Name the file "hello.js"
The code editor will open. Write this simple line in the editor

console.log('Hello, world!');

Save the file
Open your terminal and navigate to your workspace directory
Confirm that "hello.js" is there by running ls
Run the program with node hello.js

If you followed all the steps correctly, you should see "Hello, world!" in the terminal output.

<aside> 🎉

Congratulations! You're now ready to start building amazing applications in JavaScript with VSCode!

</aside>

Using the integrated terminal

VSCode has a built-in terminal, so you don't need to switch to your terminal application each time you want to run your code. To open the terminal in VSCode, you can either:

Open the command palette and type "toggle terminal"
From the menu: View → Terminal

<aside> 💡

Don’t miss the layout buttons on the top right of VSCode. Those can be useful to show and hide sections.

</aside>

Once the terminal is open and visible, it should point to your workspace folder. Confirm this by typing pwd in the terminal and locate your application using ls. You can use the same command, node hello.js, to run your application again.

It is very convenient to have the terminal ready to be used while coding. We will be using this feature a lot during the next couple of weeks.