Как ускорить разработку в WebStorm. 8 Советов

23 Апреля 2020

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

Live Templates

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

И так, на примере. Мы разрабатываем в TDD (Test Driven Development) и пишем много тестов. Используя Mocha и Jasmine в качестве тестовых фреймворков, и теперь, нужно вставить описание и его блоки. Ввод каждого символа этих блоков является повторяющимся способом.

Самый быстрый способ - создать живой шаблон для блока описания (определение: de).

Также создадим его для блока it (определение: it).

Плейсхолдеры начинаются и заканчиваются знаками $. Заполнитель $ END $ имеет особое значение: это место курсора после вставки.

Поиск везде

Поиск текста в файлах проекта является обычной функцией в большинстве IDE, но поиск других вещей, таких как действия в строке меню или объявления, редко встречается в других редакторах. Лучше из этого, это то, что можно искать файлы, действия в меню и объявления с помощью одной команды: просто дважды нажмите кнопку Shift и начните поиск.

Prettier

Prettier - это форматированный код, поддерживающий многие языки, такие как Javascript, Typescript, CSS, HTML и т. Д. Используя его, вы можете сэкономить время и силы на форматирование кода.

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

Если вам не нравятся автоматические обновления кода, это можно сделать вручную с помощью сочетания клавиш.

Рефакторинг

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

Редактирование с несколькими курсорами

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

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

Навигация по коду

Если вы используете дополнительные библиотеки и хотите знать, как ведет себя тот или иной класс или функция, нужно найти и открыть этот файл библиотеки. WebStorm делает эту навигацию намного проще. Удерживая кнопку Ctrl, можно переводить курсор в режим отображения определения. Если навести курсор на импортированный класс / функцию, он покажет его содержание. При щелчке на наведённый элемент, происходит переход к определению класса. Можно, также, выполнять навигацию без использования курсора, нажав Ctrl + B. Теперь видно определение класса, но необходимо вернуться на прежнее место. WebStorm может вернуться к последнему месту редактирования Ctrl+Shift+стрелка, что делает навигацию по коду чрезвычайно быстрой.

Key Promoter

WebStorm по умолчанию имеет более 100 ярлыков для почти всех действий и модификаций кода. Вряд ли кто-то знает их все. Тем не менее, плагин Key Promoter информирует пользователя, если он их не используется. Когда вы делаете взаимодействие, которое вы можете сделать с помощью сочетания клавиш, плагин сообщает об этом в правом нижнем углу.

Встроенный терминал

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

Вывод

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