Webstorm что это за программа

WebStorm 2020.3: обновленный интерфейс, поддержка Tailwind CSS и другие улучшения

Всем привет! Мы рады представить вам последнее крупное обновление WebStorm в 2020-м году. В этот раз улучшений очень много. Ниже расскажем про основные из них.

Скачать 30-дневную пробную версию WebStorm 2020.3 вы можете на сайте или с помощью Toolbox App. Использовать полную версию могут обладатели действующей подписки на WebStorm или All Products Pack, а также бесплатно студенты и разработчики опенсорсных проектов.

А сейчас давайте подробнее рассмотрим основные улучшения.

Новый начальный экран

Мы продолжаем вносить изменения во внешний вид WebStorm. В этот раз мы обновили начальный экран, чтобы упростить управление ключевыми настройками и сократить время на первичную конфигурацию IDE.

Теперь с начального экрана можно не только открыть проект, но и установить расширения, а также поменять тему WebStorm или используемый шрифт. Еще мы добавили вкладку Learn WebStorm. Из нее вы можете быстро открыть документацию продукта, интерактивный курс по основам WebStorm, обучающие видео и другие полезные ресурсы.

Еще одно важное изменение: первичная настройка WebStorm теперь занимает меньше времени. Мы избавились от мастера настройки, оставив только самые необходимые диалоги — Privacy Policy и License. Все остальное можно настроить c начального экрана.

Синхронизация темы IDE с настройками операционной системы

Теперь вы можете синхронизировать тему оформления WebStorm с настройками macOS и Windows. Чтобы сделать это, перейдите в Preferences / Settings | Appearance & Behavior | Appearance | Theme и отметьте галочкой Sync with OS. Нажмите иконку шестеренки рядом с Sync with OS, чтобы выбрать предпочитаемую тему.

Мы также планируем добавить эту функциональность для пользователей Linux в следующих релизах.

Оптимизация работы со вкладками редактора

Работать со вкладками редактора стало еще удобнее. Теперь вы сможете делить область редактора на части, перетаскивая вкладки или пользуясь новым действием Open in Right Split.

Кроме того, закрепленные вкладки теперь помечаются специальной иконкой и отражаются в самом начале панели вкладок, что упрощает их поиск.

Поддержка Tailwind CSS

Мы добавили встроенную поддержку Tailwind CSS. Теперь WebStorm поможет вам при добавлении классов Tailwind, покажет ожидаемый CSS при наведении указателя мыши на код, а также позволит работать с кастомными настройками, добавленными в файлы tailwind.config.js.

Подробнее о поддержке Tailwind CSS вы можете почитать тут (на английском). В следующем году мы продолжим добавлять улучшения для этого фреймворка.

Быстрое создание React-компонентов

WebStorm постоянно проверяет ваш код на наличие проблем и может помочь быстро решить многие из них. В этот раз мы научили WebStorm находить неиспользуемые React-компоненты и добавлять соответствующие конструкции в код за вас. Схема работы такая же, как и раньше: поставьте курсор на проблемный компонент, нажмите Alt+Enter и выберите нужное действие.

Объединение окон TypeScript и Problems

Мы интегрировали TypeScript language service с окном Problems и убрали окно TypeScript. Это позволит вам просматривать все ошибки в одном месте. Действия, которые ранее были доступны в окне TypeScript, теперь можно найти в отдельном виджете на строке состояния.

Более удобный процесс отладки

Когда программа прерывает выполнение на точке останова, WebStorm отображает подсказки со значениями переменных прямо рядом с местом их использования. Чтобы сделать эти подсказки более полезными, мы добавили несколько улучшений.

Начнем с того, что подсказки стали интерактивными. Кликнув на подсказку, вы увидите все данные о переменной. Также вы можете задать новое значение переменной, нажав Set Value, и добавить watch expression c помощью Add as Inline Watch.

Добавляя watch expression таким образом, вы можете привязать его к определенному месту в вашем коде. Предыдущий способ добавления watches с помощью вкладки Variables в окне Debug по-прежнему доступен.

Мы также объединили действия Step Into и Smart Step Into. Подробнее о том, почему мы так сделали и как это работает сейчас, можно почитать тут (на английском).

Новый инструмент для совместной разработки

WebStorm 2020.3 поддерживает Code With Me (EAP) — наш новый инструмент для удаленной разработки и парного программирования. С помощью него вы и ваша команда можете совместно работать над проектами прямо из своих IDE. Если вы захотите попробовать Code With Me, установите плагин в Preferences / Settings | Plugins.

Подробнее о Code With Me можно почитать в этих блог-постах. Code With Me все еще в стадии активной разработки. Если вы столкнетесь с какими-либо проблемами при его использовании, пожалуйста, сообщите нам об этом тут.

Поддержка Git staging

В новой версии вы найдете долгожданную поддержку Git staging. Чтобы ее включить, перейдите в Preferences / Settings | Version Control | Git и отметьте галочкой опцию Enable staging area. Имейте в виду, что новая функциональность будет доступна, только если вы используете немодальное окно Commit, доступное начиная с версии 2020.1.

Теперь, вернувшись в окно Commit, вместо changelists вы увидите две новые секции — Staged и Unstaged. Можно добавлять файлы в staging прямо отсюда либо используя фичу Show Diff или нажимая на маркер изменений, расположенный слева от строки с измененным кодом.

Быстрый предпросмотр файлов

Мы добавили возможность предварительно просматривать файлы, кликая на них в окне Project. Чтобы попробовать ее в действии, нажмите на иконку шестеренки в окне Project и активируйте опции Enable Preview Tab и Open Files with Single Click.

Еще один удобный способ просмотреть содержимое файла — выбрать его в окне Project и нажать Space.

Спасибо, что дочитали до конца! Полный список новых фичей и изменений, вы можете найти в нашем релизном блог-посте (на английском). Пишите свои вопросы, пожелания и просто мысли в комментариях. Мы, как и всегда, будем рады ответить вам. Баг-репорты можно создать тут.

Команда JetBrains WebStorm
The Drive to Develop

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 есть собственный онлайн-магазин с большой базой плагинов. Большая часть из них бесплатна. Для добавления плагина из веб-магазина нужно:

1. Выбрать нужную позицию и нажать на нее, чтобы перейти непосредственно на страницу плагина.
2. Далее кликните по кнопке “Get”. После этого откроется история версий плагина. Удобно, что вы можете выбрать конкретную версию, а не ту, какую посчитает нужной разработчик.
3. После скачивания у вас появится инструкция по установке плагина на английском языке. Обычно там нужно выбрать IDE и затем в его настройках указать расположение файла плагина на диске. Иногда этот файл требуется вручную перенести в корневую папку WebStorm.

Онлайн-магазин плагинов WebStorm

Создание файлов

Создать файл можно с помощью открытия специального меню создания. Кликните правой кнопкой мыши по папке в левой части, где хотите добавить дополнительный файл. Откроется меню, в котором предлагается выбрать, что требуется создать: файл или папку. В первом случае также доступны варианты выбора типа файла. По умолчанию доступны только типы файлов, которые используются в веб-разработке. Этот список может быть расширен за счет добавления плагинов. Также можно создать простой файл без расширения и задать его вручную при сохранении.

Доступные варианты расширений создаваемых файлов в WebStorm

Работа с проектами

Вы можете как создать новый проект, сделав папку в интерфейсе WebStorm, так и открыть уже готовый проект. Открытие стандартное – либо через верхнее меню “Файл” и далее “Открыть”, либо через кнопку “Открыть” на экране приветствия. Далее открывается “Проводник”, в котором и выбирается папка проекта. Также эту папку можно просто перетащить в окно WebStorm.

Все открытые проекты по умолчанию отображены в левой панели. Если вы завершили работу с конкретным проектом, то можете удалить его из панели.

Условия использования

WebStorm – платный редактор кода. В базовой версии за годовую подписку просят 70 долларов. В расширенной 298 долларов. Цена написана с учетом НДС в 20%. Чем дольше вы будете пользоваться редактором, тем ниже будет цена. Например, с 3-го года использования стоимость базовой подписки составит всего 42 доллара с учетом НДС. Доступна также ежемесячная оплата.

Цены на годовую подписку WebStorm для частных лиц

Есть спецпредложения, по которым WebStorm можно приобрести бесплатно или с очень серьезной скидкой. Обычно они касаются образования, стартапов, OpenCode-проектов, некоммерческих организаций.

Для тестирования WebStorm доступен бесплатный месяц. После этого доступ потребуется либо купить на общих условиях, либо получить бесплатно, если вы подходите под особые условия.

Заключение

WebStorm – продвинутый платный редактор кода, идеально подходящий для веб-разработчиков, которые часто взаимодействуют с JavaScript. Главное удобство в том, что рабочая среда уже полностью настроена – все, что вам остается просто открыть нужный проект. Однако, каких-либо интересных функций, которых нет и невозможно реализовать в бесплатных аналогах WebStorm предложить не может.

PHPStorm против WebStorm

PHPStorm: это IDE, разработанная для PHP и веб-разработчиков, которая содержит несколько современных инструментов. В дополнение к этому, он предлагает такие функции, как функциональность, навигация по коду, интеллектуальный редактор кода для PHP, средства тестирования и отладки. Помимо этого, наличие технологий баз данных является интересным аспектом PHPStorm.

WebStorm: WebStorm, как известно, является самой умной и интеллектуальной IDE для JavaScript благодаря своим функциям, таким как помощь при кодировании, шаблоны проектов, редактор кода, облегченный встроенный отладчик для клиентского JavaScript и т. Д.

Как мы все знаем, интегрированная среда разработки — это программное приложение, которое предоставляет программистам множество возможностей для разработки программного обеспечения. Существует несколько интегрированных сред разработки (IDE) для разных языков программирования. Например, Eclipse является IDE для Java. Аналогично, PHPStorm и WebStorm являются двумя IDE для PHP и JavaScript соответственно. Ключевые отличия, плюсы и минусы, а также важные функции будут подробно обсуждаться в следующих разделах.

Личное сравнение между PHPStorm и WebStorm (Инфографика)

Ниже приведены 14 основных различий между PHPStorm и WebStorm.

Ключевые различия между PHPStorm и WebStorm

Давайте обсудим некоторые из основных ключевых различий между PHPStrom и WebStorm

Как уже говорилось, PHPStorm и WebStorm — это две разные IDE (интегрированные среды разработки) для языков программирования, таких как PHP и Javascript соответственно.

Давайте посмотрим на ключевое различие между ними с точки зрения нескольких аспектов, таких как клиенты, скорость, поддерживаемые языки, цены, серверы и приложения и т. Д.

1. Клиенты

Существует несколько причин, по которым разработчик выбирает конкретную среду разработки для разработки своего программного обеспечения. Одна из главных причин — расширенные возможности предложения IDE.

PHPStorm — это IDE, которая поддерживает практически все популярные фреймворки PHP. Он предлагает несколько функций, таких как:

• PHPStorm = PHP + WebStorm + DB / SQL
• Надежная архитектура плагинов
• Включает в себя передовые технологии
• Поддерживает фреймворки, такие как Drupal, Yii и WordPress.
• Расширенный анализ кода
• Хорошо работает с Mac и несколькими другими операционными системами.
• Наличие современных инструментов, которые выводят веб-разработку на новый уровень.
• Кроссплатформенная IDE

WebStorm — одна из самых известных IDE для JavaScript. Возможности WebStorm не ограничиваются:

• Умная среда
• Простая отладка
• Высоко Интеллектуальный
• Инструмент проверки орфографии встроен.
• Поддерживает несколько веб-технологий
• Кроссплатформенная IDE

2. Поддерживаемые языки

WebStorm поддерживает разные языки для разных целей.

Они заключаются в следующем:

• Для веб-разработки: VueJS, AngularJS и ReactJS
• Для мобильной разработки: Cordova, React Native и Ionic
• Для разработки на стороне сервера: NodeJS и Meteor
• Для разработки рабочего стола: Электрон

PhpStorm также поддерживает широкий набор языков программирования.

• Серверные и интерфейсные технологии, такие как: JavaScript, TypeScript, CSS, CoffeeScript, HTML и Stylus.
• Технологии баз данных, такие как БД и SQL

3. Скорость

Обнаружено, что WebStorm является самой быстродействующей IDE по сравнению с PhpStorm, который является самым медленным. Основной причиной медлительности PHPStorm является высокое использование памяти. Если свободной памяти нет, производительность может значительно снизиться.

4. Ценообразование

Что касается цены, это зависит от срока, на который пользователь подписывается на IDE. Для PhpStorm начальная сумма стоит 89 долларов за 1- й год, но уменьшается с годами.

В случае с WebStorm он стоит 59 долларов за 1- й год и снижается с 3- го года до 35 долларов. Цены также зависят от технологий, выбранных пользователем. Например, если пользователь работает над каждой технологией, есть вариант, когда все продукты упакованы, он стоит 249 долларов США в течение первого года и снижается с 3- го года и далее до 149 долларов США.

Пробная версия также предоставляется, чтобы опробовать различные функции перед покупкой. Кроме того, существует несколько платных пакетов для организаций и деловых целей.

5. Клиентская или серверная сторона

В случае PHPStorm разработчики программного обеспечения могут разрабатывать как на стороне сервера, так и на стороне клиента. Для WebStorm, хотя разработка на стороне сервера также допустима, она более применима для разработки на стороне клиента.

6. Применение

Благодаря широким возможностям, которые предоставляют эти IDE, WebStorm и PHPStorm используются несколькими компаниями.

Некоторые из известных компаний, которые используют PhpStorm, это 9GAG, GrooveShark, Lyft, Appit Ventures, Webedia и т. Д., В то время как WebStorm хорошо известен среди BMW, PedidosYa, SalesForce, Wix, Soundcloud и многих других.

Примечания:

В дополнение к этому, у WebStorm и PHPStorm есть и другие интересные факты. Они рассматриваются ниже:

• Поскольку PHPStorm содержит технологии баз данных, которые помогают в разработке, он известен как объединение или сочетание PHP, DB / SQL и WebStorm.
• И IDE PHPStorm, и WebStorm разработаны одной и той же компанией JetBrain.

Сравнительная таблица между PHPStorm и WebStorm

Давайте обсудим сравнение между PHPStorm и WebStorm, используя приведенную ниже таблицу.

Вывод

PHPStorm и WebStorm — это две среды разработки, разработанные для PHP и JavaScript соответственно. В зависимости от функций, которые каждая из них предоставляет, и производительность во время пробной версии может помочь пользователю определить IDE, которую он или она может выбрать. Ключевые особенности, различия и сходства подробно рассматриваются в вышеприведенных разделах.

Рекомендуемые статьи

Это руководство к PHPStorm против WebStorm. Здесь мы обсудили ключевые отличия PHPStorm от WebStorm с помощью инфографики и сравнительной таблицы. Вы также можете взглянуть на следующие статьи, чтобы узнать больше —

Сказ о том, почему я от любимого Sublime Text ушел, да на WebStorm перешел

Внимание!

Если вы не любите долгие рассуждения, то переходите к следующей части статьи. Тут я разглагольствую о том, как могут развиваться события в жизни.

Ты когда-нибудь замечал, как быстро летит время? Когда ты был ребёнком, и даже школьником, (11 класс не в счёт, так как там уже начинаешь свыкаться с мыслью, что всё идёт к тому, что скоро всё начнётся по новой) вряд ли думал о времени, о том, как это время можно провести с пользой и других подобных вещах. Следующей ступенью становления личности как профессионала, в какой-то мере и какой-то области, является студенческая пора. Во время обучения в высшем учебном заведении ты уже начинаешь понимать, что время — это ресурс, причем невоспроизводимый. Время нельзя вернуть, повернуть вспять и тратить его на какие-то мелочи, которых можно избежать.

Если попытаться спроецировать этот поток мыслей на нашу с вами область, то получается, что все в самом начале пути не думают о том, что какие-то вещи можно делать намного, намного быстрее! По мере того, как ты развиваешься в какой-то области и твои мысли, действия, умения набирают определённый уровень — волей-неволей задумываешься о потраченном времени.

Попытайся вспомнить то, как ты первый раз запустил блокнот и написал свои первые строки кода, дальше пошло развитие, взлёты и неудачи. Потом ты узнал про, допустим, Dreamweaver, использовал его как основной инструмент. Когда ты достиг понимания того, что ты делаешь — ты осознал, что заложенный в этот визуальный редактор функционал тебе почти и не нужен. Вот теперь ты узнаешь о Sublime Text, который манит тебя элегантной темой, огромным количеством плагинов, высокой скоростью работы, отзывчивости. Основная идея редактора в том, что он, по сути своей, является обычным редактором текста, а за счёт плагинов ты можешь воссоздать тот же самый Dreamweaver, но с тем функционалом, что нужен лишь тебе. И это твоя первая победа.

Однако, самый драгоценный ресурс для человека идёт, и рано или поздно ты начинаешь задумываться о том, что тебе не хватает. Допустим, ты начинаешь пользоваться Bower, Grunt или Gulp ввиду того, что эти инструменты экономят твой самый важный ресурс. И в этом случае наступает такой момент, что твой любимый редактор не может полностью покрыть твои новые требования к нему. Вернее может, но ценой своей простоты.

После установки ещё десятка различных плагинов твой любимый редактор уже обретает черты монстра. Он стал уже настолько мощным, что может потягаться с некоторыми IDE и, даже не напрягаясь, затмить функционалом другие схожие редакторы. Всё идёт классно, как по маслу.

Проходит некоторое время, и ты начинаешь интересоваться ещё большим количеством инструментов. Некоторыми из них ты начинаешь пользоваться, за другими начинаешь следить и даже участвовать в их развитии. А время всё идёт и идёт.

И вот наконец кульминация — ты понимаешь, что нужно оптимизировать свою работу в большей степени. Стартует новый этап твоей жизни — поиск лучшего инструмента для работы. Нет, конечно же, твой любимый навороченный редактор отлично справляется со своей работой, как и раньше, безукоризненно, но вот сам ты понимаешь, что в некоторых местах он не сильно-то и хорош.

Например, ты начинаешь замечать, что он не так хорошо работает с автодополнением свойств, подсказки его не так хороши, а ещё не хватает автоматической проверки кода на валидность или какие-то личные правила. Первым делом ты отправляешься на поиски плагинов, которые могут помочь тебе справиться с этими недостатками, то есть устранить их. Ты установил ещё десяток плагинов (образно), но лучше от этого не стало. Автодополнение до сих пор работает странно.

Начинается самый сок — поиск того, как можно улучшить своё текущее положение дел. Да, тебе тяжело, потому что твой любимый редактор, которому ты был верен всё это время, начинает своеобразно шутить над тобой. Тяжело, но придётся рискнуть — поставить на кон время и победить.

Ты пребываешь в поисках уже около недели, попутно работая над проектами в том же самом редакторе. В свободное время ты пытаешься использовать найденные инструменты, тем самым определяя их возможности и удобства для себя лично.

Тут ты вспоминаешь, что пару лет назад ты слышал об IDE, которая может всё то, что ты надстраивал над своим любимым редактором кода. Всё то, что нужно тебе и намного больше. Конечно же, ты скептически к этому отнесешься, ведь всё это время ты работал в любимом редакторе и ни о чем не жалел. Разумеется, ты вспомнишь о всех минусах IDE, о их громоздкости и огромном количестве лишнего функционала. Но ты не можешь не попробовать снова — возможно, это твоя последняя надежда.

Автодополнение кода работает, проверка кода ещё лучше, чем та, что я делал с помощью плагинов. Ох, даже проверка на существование переменных в Less организована. Ух, нифига себе, тут даже есть автоматических поиск примесей в файлах и выведение их параметров при использовании. И это лишь малая часть того, что тебя изумляет на этот момент. Начинаешь задаваться вопросами: Ох, где же эта IDE была раньше? Почему я её не использовал всё это время?

На этом твои поиски заканчиваются. Ты счастлив, ведь твой новый инструмент куда лучше прежнего.

Просьба не разводить споров между сторонниками различных IDE и редакторов типа Sublime Text (далее ST3), Brackets, Atom и т.д. Ведь я точно знаю, что защищать то, чем пользуешься, ты будешь до последнего. Или, пока не найдешь что-то интереснее.

WebStorm

Моим новым редактором кода стала IDE WebStorm от компании JetBrains, которая отлично знает как заманить на свою темную сторону новых пользователей.

Наверное, некоторые из вас задались вопросом — «почему именно она?». Я постараюсь как можно подробнее ответить на этот вопрос ниже.

Почему WebStorm?

Мне хотелось иметь такой инструмент, который был бы изначально полностью заточен на веб-разработке. Так уж сложилось, что помимо WebStorm существует некоторое количество других IDE, которые были отброшены из-за различных ситуаций, которые лично для меня — недостатки. Я намеренно не буду перечислять их, так как среди моих читателей могут найтись сторонники тех или иных редакторов или IDE, которые затаят на меня обиду (если ещё не сделали этого) или начнут рассказывать о том, как исправить эти недостатки. Поэтому не обессудьте и поверьте, что лично для меня WebStorm победил по всем фронтам.

Чем же так он тебе понравился?

Автодополнение

Наконец-то я получил нормальное автодополнение, причем не только HTML, CSS (Less), но и JavaScript. Они были и в ST3, но там были проблемы в том, что переменные он не предлагал. Для того, чтобы это исправить, нужно было ставить плагин, однако, он работал по сочетанию клавиш, а не автоматически.

Кстати, с автодополнением JS у ST3 какие-то конфликты. Ну никак не предлагались мне переменные для подстановки. Вернее сказать, они предлагались, но когда уже было написано где-то 80% названия переменной. Тут же всё замечательно работает с первой же буквы.

А ещё я получил автодополнение переменных в зависимости от контекста. То есть, если я работаю с примесью, то переменные мне будут предлагаться, в первую очередь, из её аргументов. Это сверхкруто и удобно.

Помимо этого, автодополнение отлично работает с классами и примесями. Это ещё один плюс в копилку, так как примесей в проекте может быть куда больше, чем 10, 20, 50 и даже 100 штук. А ещё на скриншоте видно, что прямо в этом же окошке отображаются ожидаемые аргументы для примеси.

Почему я так много времени уделяю плюсам, связанным с автодополнением? — Это дико экономит время, если проект уже перерос ту психологическую отметку, когда вы помните все названия переменных, примесей и классов для расширения ( &:extend(. ) ).

Разумеется, можно и не запоминать названия переменных, если применять какую-то логику их названий, то есть конструировать переменные, в зависимости от предполагаемого контекста их использования. Например, если это переменная, необходимая для всего проекта, то следует конструировать её название следующим образом:

Не буду распинаться по этому поводу дальше, так как я планирую написать на эту тему отдельную статью, в которой будет рассказано, как называть переменные в Less так, чтобы не нужно было их запоминать.

Проверка на ошибки и отладка кода

Теперь можно писать Less код даже без компиляции в CSS, ведь все ошибки будут видны сразу же, в удобной форме и на этом же месте. К сожалению, Prepros иногда творит чудеса и не явно указывает на ошибки при компиляции Less в CSS, и вместо того, чтобы указать строку, где существует проблема, он просто кидает мне название переменной. Приходилось пользоваться поиском или компилировать после каждого класса, чтобы экономить время на поиске места опечатки.

Разумеется, можно использовать Grunt или Gulp и им подобные. В этом случае, этот плюс вам не знаком, так как эти системы сборки (вернее их плагины) отлично справляются с указанием ошибки и её дислокации в проекте.

Ещё одним плюсом будет отличная система отладки и тестирования кода, о которой написано на официальном сайте производителя.

Структурирование

Отдельно хочу отметить фишку со структурами файлов. Это очень помогает, когда знаешь название искомого селектора или класса, но не помнишь, где же он у тебя в файле прячется. Причем, это работает со всеми файлами (как минимум HTML, CSS (Less и т.д.) и JavaScript), что я успел проверить.

Шаблоны

Если вы имеете какой-то внутренний стандарт по оформлению шапок у файлов, то в WebStorm есть шаблоны создания файлов. К сожалению, они слегка не логичны при вызове, хотя это сугубо моё личное мнение. Я минут пять искал, где же шаблон Less файла, который я отредактировал, а тут бац, и он лежит в stylesheet. Хотя, можно, наверное, было догадаться 🙂

А ещё отсутствует поиск по шаблонам при создании через окно проекта, хотя он присутствует, если создавать файл через меню file > New . Интересненькие дела, однако 🙂

Система задач

Интересной функцией будет листинг задач в проекте. Довольно-таки удобно для больших проектов, когда есть какие-то спорные моменты в коде или их нужно дописать (исправить) в будущем.

К слову, вы тоже заметили, что у jQuery из репозитория есть TODO? — теперь я понимаю почему он так много весит 🙂

Мне этого хватило, чтобы сделать свой выбор в сторону этого продукта.

Какие сложности возникли при переходе?

Есть маленькая проблема, которая свойственна всем IDE — они тормозят. Жутко тормозят. В случае с WebStorm такая проблема также имеется, но её можно немного подавить

Для того, чтобы хоть как-то избавиться от медлительности, стоит начать использовать 64-битную версию и слегка пошаманить с настройками виртуальной среды в WebStorm64.exe.vmoptions или WebStorm.exe.vmoptions . Параметры там сугубо личностного характера и зависят от конфигурации вашего компьютера. Если вы хоть раз настраивали сервер Minecraft, то для вас это будет совсем просто, иначе воспользуйтесь этой ссылкой.

Приведу пример с открытым файлом библиотеки jQuery. Конечно, пришлось подождать около пяти секунд, но это мелочи.

Если вы ещё не догадались, то WebStorm написан на Java. Однако, никаких сильно прожорливых ситуаций я ещё не встречал. При работе с сравнительно большими Less (они у меня жестко разбиты) и небольшими JS файлами, я получил максимум 80Мб. Вполне приемлемый результат — меня всё устраивает.

Выводы

Увы, перечислять и расписывать все плюсы для меня бессмысленно — нужно пробовать самому. Ведь для каждого минусы и плюсы будут различными, то есть личными. Кому-то нравится одно, другому ещё что-то и так до бесконечности.

Достоинства

• Нормальная система автокомплита
• Отличная подсветка кода
• Отличная система подсказок (аргументы примесей, поддерживаемые браузеры и т.д.)
• Хорошо работающая проверка кода (существование переменных, ошибки и т.д.)
• Поддержка всего и сразу
• Простая отладка и тестирование кода
• Структура файла (показываются все классы в краткой форме)
• Гибкость настроек
• Плагины (не могу без сортировки свойств)
• Гибкая система скидок
• Активная разработка и поддержка

Недостатки

• Слегка тормозит
• Немного запутанные настройки (после ST это ад какой-то)
• Неочевидное для меня использование шаблонов файлов и отсутствие поиска по ним при создании
• Получение скидки студентам (ниже подробнее)

Ах, да, для всех продуктов этой компании есть 30-ти дневный пробный период с полным функционалом.

Для студентов есть 100% скидка. Как только приедет моя карточка ISIC, или я получу почту в домене своего университета, сразу же попытаюсь получить лицензионный ключ. К сожалению, получить почту в домене тяжко, а вот если бы студенческий можно было сфотографировать, как у DreamSpark, то было бы здорово. Но ситуацию с фотками студаков они описали в своей статье на Хабре.

Обновление от 4.10.2015

Не знаю точной даты добавления возможности, но теперь лицензию можно получить по скану студенческого билета, используя для этого специальную форму.

Кстати, так обидно, что ISIC теперь 600 рублей вместо 400, как было раньше (до 1 февраля) — как только я созрел для покупки, так сразу же они решили поднять цены 🙂

Всем спасибо за внимание, хорошего кода и отменных инструментов вам!

Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.