Integrated Development Environments (IDE)
JavaScript is a language that is interpreted at runtime as there is no need for us to compile it beforehand. There are other ways of writing JavaScript in a non-direct way, such as through transpilation or compilation, but we'll review those later. Before we get too far into working with JavaScript and writing code, we should examine the benefits of using a dedicated development environment to write and manage our JavaScript code.
Using an IDE aligned with the platform and languages you work with provides a number of benefits over a simple text editor. For example, IDEs usually include the following features:
- Linting, formatting, and other cleanup utilities
- Integrated Terminal and command-line access
- Programming language debugging tools
- Robust code completion and hinting as you type
- Snippets and preformed code content
- Built-in compilers (depending on the language and platform)
- Potential emulation features—especially when dealing with mobile development
GitHub's Atom
A free and open-source editor, Atom is maintained by GitHub and is available for Microsoft Windows, Apple macOS, and various Linux distributions. Since this editor was created by GitHub, one of its main features is tight integration along with the other services they provide within the editor:
Figure 2.1: GitHub for Atom
The editor features a plugin system that allows users to add support for various languages and themes. Atom can be downloaded and installed for free from https://atom.io/.
Sublime Text
Though a very popular editor some years back, it's still worth noting here as many developers use this IDE for JavaScript and more. Sublime Text supports Microsoft Windows, Apple macOS, and various Linux distributions. The latest version was released in 2019:
Figure 2.2: Sublime Text
Sublime Text can be downloaded and installed from https://www.sublimetext.com/ as a free evaluation tool; however, it requires you to purchase it for long-time use.
Adobe Dreamweaver
Previously the property of Macromedia, Adobe acquired that company and ceased the development of their existing web editing product, Adobe GoLive, and instead strengthened the support for Dreamweaver. In the years since then, the application has gone through several rewrites and adjustments, but the focus has always been split between a visual editing view and one targeted at developers in the form of bare code. The code editor within Dreamweaver is based on Adobe's open-source Brackets (https://packt.live/2WWMUH6) project:
Figure 2.3: Adobe Dreamweaver
Dreamweaver can be downloaded and installed from https://www.adobe.com/products/dreamweaver.html as a trial but must be purchased for continued use.
JetBrains WebStorm
A variety of editors and other tools are available from JetBrains. Many of these build upon one another in terms of complexity and functionality. When looking primarily for a web editor for authoring JavaScript, HTML, and CSS, JetBrains WebStorm is a good choice, but it does have a bit of a learning curve in the way that it handles the management of projects and associated files:
Figure 2.4: JetBrains WebStorm
WebStorm can be downloaded and installed from https://www.jetbrains.com/webstorm/ as a free trial, with various purchase options available afterward. Those affiliated with educational institutions can apply for a free license with yearly renewal.
Microsoft Visual Studio Code
For this module, we'll be using the Visual Studio Code as our IDE. This software application is a free, cross-platform IDE from Microsoft that is updated every month. It allows you to work with native web technologies in a very capable way—but also has the ability to support other languages and features through extensions. Visual Studio Code is very popular with developers of all sorts:
Figure 2.5: Microsoft Visual Studio Code
Visual Studio Code can be downloaded and installed for free from https://code.visualstudio.com/.
Note
The process of downloading and installing an IDE can be found in the Preface of this book.