Development Environment Setup with Atom or Visual Studio Code

Integrated Development Environment (IDE)

While Javascript can be written in any text editor, we highly recommend a full Integrated Development Environment (IDE). IDEs provide us with extra features and functionality such as code highlighting, linting, debugging, project management and more.

The two most common IDEs for web development are Atom and Visual Studio Code. Both these editors are free, cross-platform, easy to use and allow further addons and extensions to be installed.

There are plenty of other editors out there that you can use, like Brackets or MS Visual Studio. But, in this tutorial we’re only going to cover setting up the two most popular ones, Atom and Visual Studio Code.

Atom

If you’ve chosen Atom as the editor you want to work with, please follow the steps below to setup the development environment for this tutorial course.

1. Point your favorite browser to atom.io and click on the big download button. The website automatically recognizes your operating system and gives you the correct version.
2. Launch the downloaded installer. Atom will start installing automatically, there is no installation wizard to complete.

In the event that you encounter a problem installing Atom, you can view the installation instructions on the Atom Flight Manual Documentation .

Once Atom has been installed, we can configure a project. A project is simply a folder, or directory, on your system that Atom recognizes as a group.

1. Create a new directory anywhere on your system and call it “Learning JS”.
2. Open Atom and select File > Add Project Folder.
3. Navigate to the “Learning JS” directory and select Select Folder.

That’s all it takes to set up a project in Atom. We will now be able to create our files directly from inside the Atom editor.

You can skip directly to the next lesson where we’ll write our first Javascript application.

Visual Studio Code

If you’ve chosen Visual Studio Code as the editor you want to work with, please follow the steps below to setup the development environment for this tutorial course.

1. Point your favorite browser to code.visualstudio.com/ and click on big download button. If the website doesn’t automatically detect your operating system you can click on the dropdown menu beside the buttom and select it from there.
2. Launch the downloaded installer. Visual Studio Code will start installing automatically, there is no installation wizard to complete.

If you encounter a problem when installing Visual Studio Code, you can view the installation instructions on the official documentation for Windows , Mac and Linux Linux .

Once Visual Studio Code has been installed, we can configure a workspace. A workspace is simply a folder on your system that VS Code recognizes as a group, or project.

1. Create a new directory anywhere on your system and call it “Learning JS”.
2. Open VS Code and select File > Add folder to Workspace.
3. Navigate to the “Learning JS” directory and select Add.

That’s all it takes to set up a workspace in VS Code. We will now be able to create our files directly from inside the VS Code editor.

You can go directly to the next lesson where we’ll write our first Javascript application.