Install WebStorm
WebStorm is a cross-platform IDE that provides consistent experience on the Windows, macOS, and Linux operating systems.
System requirements
| Requirement | Minimum | Recommended |
|---|---|---|
| RAM | 8 GB of total system RAM | |
| Disk space | 2.5 GB and another 1 GB for caches | SSD drive with at least 5 GB of free space |
| Monitor resolution | 1024×768 | 1920×1080 |
| Operating system | Latest 64-bit version of Windows, macOS, or Linux (for example, Debian, Ubuntu, or RHEL) |
You do not need to install Java to run WebStorm, because JetBrains Runtime is bundled with the IDE (based on JRE 11).
Install using the Toolbox App
The JetBrains Toolbox App is the recommended tool to install JetBrains products. Use it to install and maintain different products or several versions of the same product, including Early Access Program (EAP) releases, update and roll back when necessary, and easily remove any tool. The Toolbox App maintains a list of all your projects to quickly open any project in the right IDE and version.
Install the Toolbox App
Download the installer .exe from the Toolbox App web page.
Run the installer and follow the wizard steps.
After you run the Toolbox App, click its icon in the notification area and select which product and version you want to install.
Log in to your JetBrains Account from the Toolbox App and it will automatically activate the available licenses for any IDE that you install.
Install the Toolbox App
Download the disk image .dmg from the Toolbox App web page.
Mount the image and drag the JetBrains Toolbox app to the Applications folder.
After you run the Toolbox App, click its icon in the main menu and select which product and version you want to install.
Log in to your JetBrains Account from the Toolbox App and it will automatically activate the available licenses for any IDE that you install.
Install the Toolbox App
Download the tarball .tar.gz from the Toolbox App web page.
Extract the tarball to a directory that supports file execution.
For example, if the downloaded version is 1.17.7391, you can extract it to the recommended /opt directory using the following command:
Execute the jetbrains-toolbox binary from the extracted directory to run the Toolbox App and select which product and version you want to install. After you run the Toolbox App for the first time, it will automatically add the Toolbox App icon to the main menu.
Log in to your JetBrains Account from the Toolbox App and it will automatically activate the available licenses for any IDE that you install.
You can use this shell script that automatically downloads the tarball with the latest version of the Toolbox App, extracts it to the recommended /opt directory, and creates a symbolic link in the /usr/local/bin directory.
Standalone installation
Install WebStorm manually to manage the location of every instance and all the configuration files. For example, if you have a policy that requires specific install locations.
Run the installer and follow the wizard steps.
Mount the image and drag the WebStorm app to the Applications folder.
Extract the tarball to a directory that supports file execution.
For example, to extract it to the recommended /opt directory, run the following command:
Do not extract the tarball over an existing installation to avoid conflicts. Always extract it to a clean directory.
Execute the WebStorm.sh script from the extracted directory to run WebStorm.
To create a desktop entry, do one of the following:
On the Welcome screen, click Configure | Create Desktop Entry
From the main menu, click Tools | Create Desktop Entry
When you run WebStorm for the first time, some steps are required to complete the installation, customize your instance, and start working with the IDE.
Silent installation on Windows
Silent installation is performed without any user interface. It can be used by network administrators to install WebStorm on a number of machines and avoid interrupting other users.
To perform silent install, run the installer with the following switches:
/S : Enable silent install
/CONFIG : Specify the path to the silent configuration file
/D : Specify the path to the installation directory
This parameter must be the last in the command line and it should not contain any quotes even if the path contains blank spaces.
To check for issues during the installation process, add the /LOG switch with the log file path and name between the /S and /D parameters. The installer will generate the specified log file. For example:
Silent configuration file
You can download the default silent configuration file for WebStorm at https://download.jetbrains.com/webstorm/silent.config
The silent configuration file defines the options for installing WebStorm. With the default options, silent installation is performed only for the current user: mode=user . If you want to install WebStorm for all users, change the value of the installation mode option to mode=admin and run the installer as an administrator.
The default silent configuration file is unique for each JetBrains product. You can modify it to enable or disable various installation options as necessary.
Install as a snap package on Linux
You can install WebStorm as a self-contained snap package. Since snaps update automatically, your WebStorm installation will always be up to date.
To use snaps, install and run the snapd service as described in the installation guide.
On Ubuntu 16.04 LTS and later, this service is pre-installed.
WebStorm is distributed via two channels:
The stable channel includes only stable versions. To install the latest stable release of WebStorm, run the following command:
The —classic option is required because the WebStorm snap requires full access to the system, like a traditionally packaged application.
The edge channel includes EAP builds. To install the latest EAP build of WebStorm, run the following command:
When the snap is installed, you can launch it by running the webstorm command.
To list all installed snaps, you can run sudo snap list . For information about other snap commands, see the Snapcraft documentation.
webstorm Установка и настройка
пример
WebStorm — это легкая, но мощная интегрированная среда разработки ( IDE ), прекрасно оборудованная для комплексной клиентской разработки и разработки на стороне сервера, она кросс-платформенная и работает на Windows, Mac OS X и Linux.
WebStorm поддерживает расширенную поддержку JavaScript , HTML , CSS и их современных преемников, а также для таких инфраструктур, как AngularJS или React , отладка и интеграция с VCS и различными инструментами веб-разработки. Кроме того, он предоставляет настраиваемые и готовые к использованию локальные среды разработки, включая поддержку Node.js , Meteor , CoffeeScript , TypeScript , Dart , Sass и других.
Требования к оборудованию
Для бесперебойной работы WebStorm требуются следующие требования к оборудованию:
- 1 ГБ ОЗУ минимум, рекомендуется 2 ГБ оперативной памяти
- Минимальное разрешение экрана 1024×768
Системные Требования
Для предыдущих версий WebStorm до 2016 года для запуска WebStorm требуется Java для запуска WebStorm, начиная с WebStorm 2016 и выше , JRE 1.8 поставляется с дистрибутивами для всех платформ. Для запуска WebStorm вам не нужно устанавливать Java на вашем компьютере.
Для операционной системы ( ОС ) требуется следующее:
- Microsoft Windows 10/8/7 / Vista / 2003 / XP (включая 64-разрядный)
- OS X 10.5 или выше, включая 10.10 (поддерживается только 64-разрядная ОС X)
- OS Linux 64 бит (рабочий стол KDE, GNOME или Unity DE)
Установка Windows:
- Загрузите WebStorm со страницы загрузки .
- Запустите файл WebStorm-*.exe .exe, который запустит мастер установки. ( * означает, что текущая версия загружена )
- Выполните все действия, предлагаемые мастером. Обратите особое внимание на соответствующие параметры установки.
Установка ОС X:
- Загрузите файл образа WebStorm-*.dmg OS X Disk со страницы загрузки . ( * означает, что текущая версия загружена )
- Дважды щелкните загруженный файл WebStorm-*.dmg OS X Disk Image, чтобы его смонтировать.
- Скопируйте WebStorm в папку «Приложения».
Установка Linux:
Загрузите файл WebStorm-*.tar.gz со страницы загрузки . (* означает, что текущая версия загружена)
Распакуйте файл WebStorm — *. Tar.gz в пустой каталог, используя следующую команду:
tar xfz WebStorm-*.tar.gz
Поскольку запуск WebStorm везде, где вы загружали файл, может быть неудобным, рекомендуется переместить извлеченную или распакованную папку архива в нужное место с помощью команды mv в одном из следующих форматов:
Переключитесь в каталог bin в новом месте:
WebStorm 2017.3
Рабочая область
Оформление в редакторе выполнено в приятном стиле, цветовую гамму которого можно изменить. Присутствуют темная и светлая темы. Интерфейс рабочей области оснащен контекстным меню и левой панелью. В блоке слева отображаются файлы проекта, в них пользователь может найти нужный ему объект.
В большом блоке программы находится код открытого файла. Вкладки отображаются у верхней панели. В целом, оформление разработано очень логично, а поэтому никаких инструментов кроме самой области редактора и содержания его объектов не отображается.
Live Edit
Данная возможность подразумевает показ результата проекта в браузере. Таким образом вы сможете редактировать код, который одновременно содержит элементы HTML, CSS и JavaScript. Для осуществления отображения всех действий проекта в окне браузера необходимо установить специальный плагин — JetBrains IDE Support, в частности для Google Chrome. В таком случае все внесённые изменения будут отображаться без перезагрузки страницы.
Отладка Node.js
Отладка приложений Node.js позволяет сканировать написанный код на наличие ошибок, внедренный в JavaScript или TypeScript. Чтобы программа не проверяла ошибки во всём коде проекта, нужно вставлять специальные индикаторы – переменные. В нижней панели отображается стек вызовов, в котором находятся все уведомления по поводу проверки кода, и что нужно в нём изменить. 
При наведении курсора мыши на конкретную выявленную ошибку редактор выведет пояснения к ней. Кроме всего прочего, поддерживается навигация по коду, функция автодополнения и рефакторинг. Все сообщения для Node.js выводятся в отдельной вкладке рабочей области программы.
Настройка библиотек
В WebStorm можно подключать дополнительные и базовые библиотеки. В среде разработки после выбора проекта по умолчанию будут включены в наличие основные библиотеки, а вот уже дополнительные нужно подключать вручную.
Раздел помощи
В данной вкладке находится подробная информацию о IDE, руководство и много чего другого. Пользователи могут оставить отзыв о программе или отправить сообщение по поводу улучшения редактора. Для проверки наличия обновлений используется функция «Check for Updates…».
Софт можно приобрести за конкретную сумму или пользоваться бесплатно в течение 30 дней. Информация о продолжительности триал-режима также находится здесь. В разделе помощи можно ввести регистрационный код или перейти на сайт для покупки с помощью соответствующей клавиши.
Написание кода
При написании или редактировании кода вы можете воспользоваться функцией автодополнения. Это означает, что полностью прописывать тег или параметр вам не нужно, так как программа сама определит язык и функцию по первым буквам. Учитывая то, что редактор позволяет пользоваться множеством вкладок, имеется возможность расположить их так, как вам удобно.
С помощью горячих клавиш можно с лёгкостью находить нужные элементы кода. Всплывающие подсказки жёлтого цвета внутри кода могут помочь разработчику заранее выявить проблему и устранить её. В случае, если ошибка была допущена, редактор отобразит её красным цветом и предупредит о том пользователя.
К тому же на полосе прокрутки отображается местонахождение ошибки, чтобы не искать самостоятельно. При наведении на ошибку редактор сам предложить выбрать один из вариантов правописания для того или иного случая.
Взаимодействие с веб-сервером
Чтобы разработчик мог увидеть результат выполнения кода на HTML-странице программе, необходимо соединяться с сервером. Он встроен в IDE, а именно является локальным, хранящимся на ПК пользователя. С помощью расширенных настроек имеется возможность применять протоколы FTP, SFTP, FTPS для загрузок файлов проекта.
В наличии есть SSH-терминал, в котором можно вводить команды, отправляющие запрос на локальный сервер. Таким образом, вы сможете использовать такой сервер как реальный, применяя все его возможности.
Компиляция TypeScript в JavaScript
Код, написанный на языке TypeScript, не обрабатывается браузерами, потому что они работают с JavaScript. Для этого требуется компиляция TypeScript в JavaScript, которую можно провести в WebStorm. Настраивается компиляция на соответствующей вкладке так, чтобы программа совершила преобразование как всех файлов с расширением *.ts, так и отдельных объектов. При внесении любых изменений в файле, содержащем код с TypeScript, он будет автоматически скомпилирован в JavaScript. Такая функция доступна если вы подтвердили в настройках разрешение выполнения данной операции.
Языки и фреймворки
Среда разработки позволяет заниматься самыми разными проектами. Благодаря Twitter Bootstrap вы сможете создавать расширения для сайтов. Используя HTML5, становится доступным применять новейших технологий данного языка. Dart говорит само за себя и является заменой языка JavaScript, с его помощью разрабатываются веб-приложения.
Вы сможете осуществлять front-end разработку благодаря консольной утилите Yeoman. Создание одностраничных осуществляется при помощи фреймворка AngularJS, который использует единственный HTML-файл. Среда разработки позволяет работать и над другими проектами, специализирующимися на созданиях структуры оформления веб-ресурсов и дополнений к ним.
Терминал
Софт поставляется с терминалом, в котором вы непосредственно будете выполнять различные операции. Встроенная консоль дает доступ к командной строке ОС: PowerShell, Bash и другие. Так вы можете выполнять команды прямо из IDE.
Достоинства
- Множество поддерживаемых языков и фреймворков;
- Всплывающие подсказки в коде;
- Редактирование кода в режиме реального времени;
- Дизайн с логической структурой элементов.
Недостатки
Подводя итог всего вышеперечисленного, необходимо сказать, что IDE WebStorm – отличное ПО для разработки приложений и веб-сайтов, которое имеет много инструментов. Софт больше ориентирован на аудиторию профессиональных разработчиков. Поддержка разнообразных языков и фреймворков превращает программу в реальную веб-студию с широкими возможностями.