WebStorm
Пояснение причин и соответствующее обсуждение вы можете найти на странице Википедия:К удалению/29 ноября 2012.
Пока процесс обсуждения не завершён, статью можно попытаться улучшить, однако следует воздерживаться от переименований или немотивированного удаления содержания, подробнее см. руководство к дальнейшему действию.
Не снимайте пометку о выставлении на удаление до окончания обсуждения. Администраторам: ссылки сюда, история (последнее изменение), журналы, удалить .
JetBrains WebStorm — коммерческая интегрированная среда разработки на JavaScript, CSS & HTML от компании JetBrains разработанная на основе платформы IntelliJ IDEA.
WebStorm обеспечивает автодополнение, анализ кода на лету, рефакторинг и интеграцию с системами управления версиями.
Основные возможности
- Поддержка HTML5
- Поддержка Nodejs
- Возможности Zen Coding
- JavaScript дебаггер
- Удалённое развёртывание по протоколам FTP, SFTP, примонтированным сетевым дискам и т. д. с возможностью автоматической синхронизации
- Интеграция с системами управления версиями: Subversion, Git, GitHub, Perforce, Mercurial, CVS поддерживаются из коробки с возможностью построения списка изменений и отложенных изменений
- Интеграция с системами отслеживания ошибок
Поддержка JavaScript, HTML, CSS в IntelliJ IDEA
JetBrains также разрабатывает и поддерживает другую среду разработки — IntelliJ IDEA с аналогичными возможностями по поддержке JavaScript, HTML и CSS.
См. также
Ссылки
- WebStorm // Википедия на английском языке (лицензия GFDL). Перевод на русский язык с версии 522647508.
- JetBrains Официальный сайт WebStorm
- Блог JetBrains WebStorm IDE
- Программное обеспечение по алфавиту
- Интегрированные среды разработки
- Инструменты программирования для JavaScript
Wikimedia Foundation . 2010 .
WebStorm: обзор редактора кода и полезных фишек для веб-разработчиков и не только
WebStorm – один из множества редакторов кода для профессиональной разработки. Используется преимущественно фронтенд-разработчиками, которым нужно больше работать с JavaScript или Python, чем со стандартными CSS и HTML. Хотя с ними редактор кода тоже неплохо справляется. Отличительной особенностью является формат “все в коробке”. Это значит, что разработчику не нужно устанавливать никаких дополнений – редактор кода будет отлично работать со всеми технологиями прямо после установки.
Далее рассмотрим основные особенности WebStorm, а также несколько неочевидных вещей.
Дополнения не нужны
Первое и самое мощное конкурентное преимущество этого редактора кода – это отсутствие в необходимости установки каких-то дополнений, чтобы полноценно работать с проектами. По умолчанию сюда встроены все основные плагины, фреймворки, продвинутый анализатор, удобная среда для тестирования кода, отладчик. Более подробно с функционалом можно ознакомиться на официальном сайте разработчиков.
А еще WebStorm кроссплатформенное решение, а значит пойдет практически на любом компьютере. Это очень удобно, когда нет доступа к основной рабочей машине, но нужно срочно внести в проект какие-нибудь правки. Редактор кода быстро устанавливается даже на слабые компьютеры, а как-либо настраивать его не требуется. Все что вам потребуется в таком случае, помимо скачивания и установки редактора кода, это загрузить файлы проекта и открыть его в интерфейсе WebStorm.
Большинство других редакторов не могут похвастаться подобным функционалом. Да, там будет минимальный набор необходимых инструментов, но их будет недостаточно для корректной работы с серьезными проектами. С WebStorm такой проблемы нет – максимум, что вам придется настраивать, так это интерфейс.
Однако это не значит, что у WebStorm нет никаких дополнений и плагинов – вы можете добавить их при необходимости. Просто все те инструменты, которые используются большинством разработчиков, работающих с JavaScript, здесь уже реализованы. Если вам чего-то все-таки недостает или вы работаете с очень сложными проектами, то плагины можно скачать.
Кастомизируемый интерфейс
Первое, с чем сталкивается пользователь любой программы – это интерфейс. В целом, внешний вид рабочей среды WebStorm не имеет существенных отличий от многих других редакторов кода: слева находится панель с файлами и папками проекта, в верхней части вкладки для быстрого переключения между открытыми файлами и меню программы, снизу панель состояний.
Если вас не устраивает стандартное расположение элементов интерфейса, то их можно поменять, в том числе и расположить важные компоненты в произвольном порядке, а не так, как это изначально задумывалось разработчиками. Интерфейс может настраиваться как глобально, так и под один конкретный проект. Например, в одном проекте вы делаете упор на разработку интерфейса с использованием SASS и других препроцессоров. В настройках WebStorm можно вынести необходимые инструменты на отдельную панель для конкретного проекта, а для других применить стандартные или другие индивидуальные настройки.
Стандартный интерфейс WebStorm
Рабочее пространство можно также делить на несколько функциональных зон. Актуально для больших проектов, когда одновременно нужно вносить изменения в несколько файлов, а постоянно переключаться между ними в верхней панели или с помощью сочетаний клавиш неудобно. В раздел “View” есть пункт переключения на несколько функциональных окон. Очень удобно, когда есть несколько мониторов – на одном-двух пишите код, а на другом проводите отладку.
Другая противоположность расширенным настройкам интерфейса – Zen-режим. Вы полностью убираете все пункты меню, вкладки, кнопки и прочее. Остается только окошко, в котором пишется код. Очень удобно для тех, кто хочет минимизировать количество отвлекающих факторов, а при работе с кодом привык пользоваться горячими клавишами. Без их использования будет очень неудобно работать в Zen-режиме.
WebStorm в Zen-режиме. Нет ничего, кроме кода и кнопок для быстрой проверки в браузере
Горячие клавиши
Часто при работе с кодом удобнее использовать горячие клавиши, чем подводить курсор к нужному компоненту интерфейса. В программу уже внесено несколько комбинаций горячих клавиш, но вы можете расширить их, добавляя свои собственные сочетания.
Вот основные сочетания клавиш для работы с файлами:
- Ctrl+F. Стандартная комбинация для большинства программ. Отвечает за открытие поисковой строки по текущему файлу.
- Ctrl+Shift+F. Отвечает за вызов поискового интерфейса по всему проекту. Можно найти как конкретный файл/папку, так и какое-то ключевое слово.
- Ctrl+Shift+N. Поиска файла по древу проекта.
- Alt+. Отвечает за переключение по открытым вкладкам. < – переключение влево, >– переключение вправо.
- Shift+F6 – быстрое переименование открытого файла.
- Ctrl+Alt+Shift+T. Отвечает за быстрое открытие инструментов рефакторинга.
- Double Shift. Поиск по названием файлов и функций.
- Ctrl+Tab. Тоже переключение между файлами в проекте.
А вот основной набор клавиш для удобного редактирования текста:
- Ctrl+Shift+↓/↑. Быстрое перемещение по блокам кода вверх или вниз в зависимости от направления стрелки. Перемещение происходит в пределах выбранной вложенности или выделенного куска кода.
- Ctrl+Alt+L. Включает/отключает стандартное форматирование кода WebStorm. Очень удобно, если форматирование сбилось или вы допустили где-то ошибку.
- Alt+клик. Проставляет мульти курсор, то есть вы одновременно можете работать с несколькими строками. Пример на картинке ниже.
- Alt+Enter. Выведение окошка с рекомендациями по улучшению выбранного куска куда, которое предлагается программой. Обычно, чтобы получить его достаточно навести на пиктограмму лампочки около нужного отрезка.
- Ctrl+D. Создает дубликат строки, на которой в данный момент расположен курсор мыши.
- Зажатое колесо мыши выделяет повторения кода, идущие друг за другом.
- Ctrl+/. Быстрое внесение комментария к коду или удаление текущего комментария.
Ну и пара встроенных сочетаний для работы с Git:
- Ctrl+K. Делает коммит проекта в систему контроля версий.
- Ctrl+Shift+K. Делает пуш проекта в систему контроля версий.
Это не все сочетания клавиш, встроенные в WebStorm по умолчанию, но ими чаще всего пользуется большинство разработчиков. Также вы можете составлять свои сочетания клавиш, чтобы сделать процесс работы с кодом более удобным и кастомизированным под свои потребности.
Разделение интерфейса
По умолчанию рабочий интерфейс WebStorm мало отличается от аналогов, но его можно настроить. В том числе доступно необычное, но достаточно удобное решение по разделению рабочего пространства – табличное деление. Вместо вкладок сверху у вас будет таблица сбоку, где в одной вкладке будут расположены все файлы и проекты, а в соседней файлы выбранного проекта.
Такой подход подходит тем, у кого появляется множество открытых вкладок, отвлекающих внимание.
Еще в WebStorm есть история взаимодействия с файлами. Она вызывается сочетанием клавиш Ctrl+E.
Альтернативный вариант взаимодействия с файлами в WebStorm
Сообщество
У WebStorm есть собственный форум, где можно найти решение большинства проблем. Причем разработчики обсуждают не только работу с редактором, но и вообще проблемы, которые могут возникнуть при написании кода проекта.
Создатели WebStorm тоже активно взаимодействуют с аудиторией проекта. Если вы не нашли ответ на свой вопрос на форуме, то добавьте свой вопрос в баг-трекер. В нем собираются все жалобы пользователей. Вопрос, конечно же, должен касаться исключительно работы самого WebStorm, а не проблем с проектом или каким-то сторонним плагином.
Уникальные проблемы попадают в общий список и выставляются на голосование пользователей – когда баг набирает много голосов, команда WebStorm начинает работать над его устранением. В следующем обновлении, скорее всего, этого бага больше не будет. Если же проблема не настолько серьезная, чтобы из-за нее вносить изменения в работу WebStorm, то разработчики предложат вам ветку форума с решением похожей проблемы или статью на других ресурсах, если на форуме подобная проблема не обсуждалась ранее. В любом случае вам попытаются оказать хоть какую-то помощь.
Баг-трекер, кстати, можно использовать не только для отправки ошибок и жалоб, но и предложений для улучшения работы редактора или добавления в него новых возможностей. Вот пример: до 2020 года в WebStorm не было режима совместной работы над кодом нескольких разработчиков. В баг-трекер ранее добавлялось предложение о внедрении этой возможности, но некоторое время оно оставалось вне внимания сообщества – голоса уходили на другие позиции. Когда возникла острая необходимость в удаленной работе за внедрение режима командной разработчики проголосовало большинство членов комьюнити. В итоге, этот режим был введен максимально оперативно – в следующем обновлении программы.
У WebStorm активное сообщество, готовое всегда прийти на помощь, а также активно участвовать в развитии редактора кода – предлагать новые функции, помогать искать баги и так далее. Еще здесь отзывчивые разработчики, которые стараются оперативно решать проблемы и реагировать на запросы сообщества.
Добавление плагинов
В WebStorm уже по умолчанию есть все необходимое для комфортной разработки с использованием JavaScript или Python. Тем не менее, здесь предусмотрен собственный магазин плагинов. При первом запуске WebStorm как раз открывается раздел с выбором плагинов. Там представлены самые популярные варианты. Большинство из них бесплатны. Добавление плагина происходит нажатием по соответствующей кнопке.
Также у разработчиков WebStorm есть собственный онлайн-магазин с большой базой плагинов. Большая часть из них бесплатна. Для добавления плагина из веб-магазина нужно:
- Выбрать нужную позицию и нажать на нее, чтобы перейти непосредственно на страницу плагина.
- Далее кликните по кнопке “Get”. После этого откроется история версий плагина. Удобно, что вы можете выбрать конкретную версию, а не ту, какую посчитает нужной разработчик.
- После скачивания у вас появится инструкция по установке плагина на английском языке. Обычно там нужно выбрать IDE и затем в его настройках указать расположение файла плагина на диске. Иногда этот файл требуется вручную перенести в корневую папку WebStorm.
Онлайн-магазин плагинов WebStorm
Создание файлов
Создать файл можно с помощью открытия специального меню создания. Кликните правой кнопкой мыши по папке в левой части, где хотите добавить дополнительный файл. Откроется меню, в котором предлагается выбрать, что требуется создать: файл или папку. В первом случае также доступны варианты выбора типа файла. По умолчанию доступны только типы файлов, которые используются в веб-разработке. Этот список может быть расширен за счет добавления плагинов. Также можно создать простой файл без расширения и задать его вручную при сохранении.
Доступные варианты расширений создаваемых файлов в WebStorm
Работа с проектами
Вы можете как создать новый проект, сделав папку в интерфейсе WebStorm, так и открыть уже готовый проект. Открытие стандартное – либо через верхнее меню “Файл” и далее “Открыть”, либо через кнопку “Открыть” на экране приветствия. Далее открывается “Проводник”, в котором и выбирается папка проекта. Также эту папку можно просто перетащить в окно WebStorm.
Все открытые проекты по умолчанию отображены в левой панели. Если вы завершили работу с конкретным проектом, то можете удалить его из панели.
Условия использования
WebStorm – платный редактор кода. В базовой версии за годовую подписку просят 70 долларов. В расширенной 298 долларов. Цена написана с учетом НДС в 20%. Чем дольше вы будете пользоваться редактором, тем ниже будет цена. Например, с 3-го года использования стоимость базовой подписки составит всего 42 доллара с учетом НДС. Доступна также ежемесячная оплата.
Цены на годовую подписку WebStorm для частных лиц
Есть спецпредложения, по которым WebStorm можно приобрести бесплатно или с очень серьезной скидкой. Обычно они касаются образования, стартапов, OpenCode-проектов, некоммерческих организаций.
Для тестирования WebStorm доступен бесплатный месяц. После этого доступ потребуется либо купить на общих условиях, либо получить бесплатно, если вы подходите под особые условия.
Заключение
WebStorm – продвинутый платный редактор кода, идеально подходящий для веб-разработчиков, которые часто взаимодействуют с JavaScript. Главное удобство в том, что рабочая среда уже полностью настроена – все, что вам остается просто открыть нужный проект. Однако, каких-либо интересных функций, которых нет и невозможно реализовать в бесплатных аналогах WebStorm предложить не может.
WebStorm: это что и зачем?
WebStorm — это редактор кода для разработчиков, которые пишут на Java Script. Этим инструментом пользуется Давид Роганов — наш знакомый из Яндекс.Практикума. Если еще не читали интервью с ним — прочитайте, там история успеха через конкурс Яндекса, вдохновляет!
Всё в коробке
Вы скачиваете WebStorm и через секунду можете работать — все нужные инструменты для фронтенд-разработки на JavaScript добавлены по умолчанию. Вам доступны популярные плагины и фреймворки, мощный анализатор, удобный движок для тестирования кода, современный отладчик приложений и другие функции, которые можно посмотреть на официальном сайте в разделе «Функциональность». При этом WebStorm кроссплатформенный, поэтому вы сможете писать код в любой операционной системе и проверять результат с помощью любого браузера.
Представьте: вы выполнили проект, получили гонорар и махнули в отпуск. Только вы приходите на пляж — и внезапно звонит заказчик с просьбой срочно что-то там изменить. Вы находите любой ноутбук, заходите в ближайшую кафешку, скачиваете WebStorm, загружаете рабочий файл и за часик допиливаете код. Заказчик счастлив и выписывает вам премию. Все довольны.
А вот если бы вместо WebStorm вы скачали любой бесплатный редактор, то получили бы среду разработки без плагинов и нужных инструментов — это терпимо для одного небольшого проекта, но не для серьёзных задач. Поэтому если под рукой не будет вашего основного ПК, то это грозит прерванным отпуском ради правок в проекте.
Настраиваемый интерфейс
Если стандартные настройки вас не устраивают — сделайте так, как удобно. В WebStorm можно перенастроить интерфейс рабочего пространства, добавить или отключить плагины и расположить любые инструменты в произвольном порядке. При этом настройки можно задать под один проект или сразу под все новые файлы.
Для тех, кто не любит графические интерфейсы, в WebStorm есть zen-режим — это когда вы полностью убираете все элементы меню, погружаетесь в разработку и вызываете нужные функции через горячие клавиши. Есть только вы и код.
Или другая ситуация: у вас много параллельных задач, которые желательно держать перед глазами. В этом случае вы можете разметить рабочее пространство на большое количество отдельных зон и в каждой делать отдельные записи. Не хватит одного экрана — подключите второй монитор и ни в чём себе не отказывайте.
Сообщество
Решения большинства проблем можно подсмотреть на форуме проекта.
Если подходящего ответа нет, то вы можете его добавить в баг-трекер — чек-лист, в который команда WebStorm заносит пользовательские жалобы. Все уникальные проблемы попадают в общий список и выставляются на голосование разработчиков — когда какой-то баг набирает много голосов, команда WebStorm старается его устранить. Если же проблема не уникальна, то вам подскажут тему на ветке форума или дадут ссылку на статью в блоге. В любом случае без помощи вы не останетесь.
Вот вам пример силы активного сообщества. В баг-трекере несколько лет висел запрос на функцию совместного редактирования кода — команда WebStorm его игнорировала, поскольку большая часть сообщества голосовала за другие фичи. В 2020 году мир столкнулся с пандемией, и многие разработчики переключились на удалённую работу — в таких условиях возможность совместного редактирования кода быстро набрала популярность и сразу же попала в разработку. В середине года должен выйти специальный плагин, который полностью закроет проблему. С вялым сообществом добиться такого мощного отклика не получится.
Здоровый перфекционизм
Установите в любой текстовый редактор бесплатный шрифт JetBrains Mono, который создавался для разработчиков. Он помогает глазам не уставать, когда вы целый день пишете код. Этот шрифт разрабатывался на протяжении года, вышел в первой версии обновлений 2020 года и выпущен только потому, что во всех ранее существовавших подобных шрифтах не учитывалась разница между буквами текста и символами кода. У нового шрифта овальные буквы переделаны под форму прямоугольника, и это помогает взгляду лучше скользить по вертикали и считывать код. Вот в таких мелочах проявляется забота.
Подключать или нет
WebStorm — это платный инструмент для профессиональной фронтенд-разработки, который удобно использовать в объёмных коммерческих проектах. Для новичков и мелких задач он не нужен, поскольку вы заплатите за функциональность, которой не будете пользоваться.
Если хотите попробовать, у системы 30-дневный пробный период. Интересно ваше мнение: стоит ли WebStorm своих денег? Ведь всегда есть Sublime Text.
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
WebStorm, популярная IDE для JS-разработки, обновилась до версии 2017.1
IDE для JavaScript-разработки от JetBrains, WebStorm, получила первое крупное обновление в этом году под номером 2017.1. Оно принесло поддержку Vue.js и Jest, улучшения в работе с React и Angular и многое другое.
Основные нововведения:
- Поддержка фреймворка Vue.js: теперь доступны автодополнение и автоматический импорт компонентов;
- Интеграция с Jest: тесты Jest можно запускать прямо в IDE;
- Множество новых настроек стиля написания кода;
- Импорт компонентов React теперь происходит автоматически;
- Поддержка смайликов в редакторе ?.
С полным списком изменений можно изучить на официальной странице IDE.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.