Как в webstorm выровнять код

WebStorm/PhpStorm комбинации клавиш, которые жить помогают

* для MacOS – вместо [CTRL] жмем [CMD].

Подробное описание со скринами можно найти тут.

This entry was posted in Хочу сделать мир лучше and tagged phpStorm, shortcuts, webStorm by Stepan. Bookmark the permalink.

#5 — Пишем код быстрее. Горячие клавиши PHPStorm. Сниппеты.

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

Самые востребованные горячие клавиши PHPStorm

Чтобы просмотреть все функции и соответствующие им сочетания горячих клавиш PHPStorm, зайдите в Preferences -> Keymap. Щелкнув два раза кнопкой мыши по функции, вы можете поменять сочетание клавиш. На видеоуроке рассмотрены основные сочетания горячих клавиш PHPStorm и соответствующие им функции:

ВАЖНО! В MasOS клавишу Ctrl заменяем на Command.

Сниппеты PHPStorm

Сниппеты — это определенные куски кода, которые можно вызывать по определенному триггеру (сокращению). Например, !+Tab разворачивает заготовку для HTML-файла. В этом примере «!» является триггером. Меню настройки и создание сниппетов: Preferences -> Editor -> Live Templates.

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

Нажимаем JavaScript -> +. Выводится окно, у которого в поле Abbreviation необходимо вписать триггер (confunc), Description (необязательно заполнять) – описание сниппета и Template text – код сниппета:

ВАЖНО! В $. $ записывается строка, в которую нужно будет вписать какое-то выражение или переменную после подключения сниппета.

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

Приятного всем просмотра! Учитесь с удовольствием! Всегда ваш LoftBlog!

Горячие клавиши WEBStorm

Всем привет! Сегодня я хочу вам рассказать о самых полезных горячих клавишах WEBStorm. В этой статье не будет воды, только по сути. Знание этого небольшого списка сделает вашу работу с файлами и с редактированием текста намного быстрее!

Для удобства сочетание клавиш будет написано так же под macOS. Первыми рассмотрим горячие клавиши для работы с файлами.

• CTRL + F / ⌘ + F этим сочетанием клавиш можно осуществить поиск по открытому файлу, а использовав за этим сочетание клавиш CTRL + R / ⌘ + R можно заменить все найденные вхождения на введённое
• CTRL + SHIFT + F / ⌘ ⇧ + F осуществляет поиск по всему проекту, в котором так же как и в предыдущем пункте можно использовать сочетание ⌘ ⇧ + R / CTRL + SHIFT + R для замены
• ALT + / ⇧ ⌘ ] / ⇧ ⌘ [ передвижение между открытыми вкладками
• SHIFT + F6 / ⇧ F6 быстрое переименование файла
• CTRL + ALT + SHIFT + T / ⌃ T быстрое открытие рефакторинга (переименования и тд)
• DOUBLE SHIFT поиск по всем названиям файлов и функций
• CTRL + F4 / ⌘ W закрыть активную вкладку
• CTRL + E + ⌘ E открыть список недавно открываемых вкладок

Следующей категорией горячих клавиш рассмотрим сочетания для удобного редактирования текста.

• Зажав CTRL + SHIFT / ⌘ ⇧ и стрелки вниз вверх можно перемещать в пределах текущей вложенности выделенный кусок кода / строку на которой стоял курсор.
• CTRL + ALT + L / ⌘ ⌥ L стандартное форматирование кода в WEBStorm
• CTRL + backspace / ⌥ ⌫ удалить целое слово
• чтобы поставить мультикурсор, нужно навести на место постановки, зажать ALT / ⌥ и кликнуть
• ALT + ENTER / ⌥ выделение лампочки, на которую мы обычно наводим чтобы получить быстрые решения проблемы в коде
• CTRL + D / ⌘ D дублирование строки или выделенного блока кода
• Если зажать колесо мышки, можно выделить повторения кода, идущее друг под другом и сразу же заменить
• CTRL + / / ⌘ / быстрое комментирование/раскоментирование кода

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

• CTRL + K / ⌘ K коммит проекта в систему контроля версий
• CTRL + SHIFT + K пуш проекта в систему контроля версий

Ну вот и всё, что стоит знать о горячих клавишах в IDE WEBStorm. Научитесь использовать эти клавиши и все ваши коллеги или друзья программисты будут удивлены вашей скорости при показе вами экрана! 🙂

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 предложить не может.