WebStorm

A good IDE can speed up and greatly simplify the process of writing programs, for both beginner and experienced developers. We suggest you take a closer look at the WebStorm IDE from JetBrains – it’s a great tool for JavaScript and TypeScript development.

WebStorm is optimized to help you work with HTML, CSS, JavaScript, TypeScript, Node.js, and other popular JavaScript-related technologies. It has everything we need to enjoy coding right out of the box. Its powerful features include code completion, error detection, fast code navigation, and integration with version control systems like Git and GitHub.

Your First WebStorm Project

Let's begin by writing a script that displays the Hello, world! string on the console. If you haven't installed WebStorm on your computer yet, consult this guide on how to install WebStorm.
With WebStorm installed, click on the WebStorm icon to start it. After doing so, you'll see the Welcome screen, which provides three options: New Project, Open, and Get from VCS. We are interested in the first option, which lets us create a new project. Please select New Project.

Next, decide on the type of project to create (let's select Empty Project) and the directory to store all relevant files. Give your project a name. We'll keep it simple and name it FirstProject:

The next step is straightforward: click the Create button and wait for WebStorm to create your project. When completed, a Project tool window will appear.

Here is what it includes:

• FirstProject: Directory where your project files are stored.

• External Libraries: A collection of all "external" resources used in the project.

• Scratches and Consoles: Create temporary notes or draft code outside of the project here, without affecting your project.

Writing Code

Now that we have a project directory, we need a place to write our code. Create a new JavaScript file in our project by right-clicking the FirstProject folder, selecting New, and then JavaScript File. Give it a name, for example, index, and press Enter.
The JavaScript file will appear in the project folder:

Finally, you can input these important words: console.log("Hello, world!");.

Starting a Program

To run programs on WebStorm, ensure Node.js is installed on your computer. Download Node.js from the official website. To run a program on WebStorm, go to Main Menu | Run and click Run.

Reload the program by clicking the green Play button at the menu top:

Upon execution, the results will appear in the Run tool window:

The first line exhibits the project interpreter path and the program's path executed by this interpreter. That is followed by the execution results. For further information on running programs in WebStorm, refer to the Running Applications section in the documentation.

WebStorm Settings

WebStorm boasts numerous configurable settings, many of which can be found under File | Settings. For instance, Appearance & Behavior can be located in the settings. From there, select Appearance, which provides different theme options. In this topic, we've employed the Dark theme:

To find a specific element in the settings, use the quick search. This feature will display all instances and highlight the search term words on the page:

Conclusion

In this topic, we've covered getting started with WebStorm and customizing it based on your preferences. To learn more about this tool, visit the Learn WebStorm page.