От автора: любой Front-end разработчик проводит много времени за набором кода и работой с ним. Редактирование текста должно быть легким и быстрым. Поэтому стоит изучить, как «управлять» вашим редактором, чтобы получить лучшую производительность.
Ниже приведены некоторые из наиболее полезных или, возможно, недостаточно используемых методов. Я думаю, вам стоит узнать об этих методах, и, надеюсь, вы сможете оптимизировать свою работу с редактором или IDE.
Для примеров я использую Sublime Text и Code, но почти все эти методы подходят для VS Code, Atom, Brackets, Vim, Emacs и т. д.
Смена позиции
У вас есть два фрагмента кода, и вы хотите, чтобы они поменялись местами. Выберите два раздела, нажмите на шорт-кат и все готово! Они транспонированы.
Передача
Большинство из нас использует Git. У вас должен быть простой способ добавить, передать и ввести изменения. При выполнении повседневных задач это позволяет не переключаться на терминал. В Sublime я использую плагин Git для Sublime. Инструменты Great Git разрабатываются в VS Code.
Запуск / остановка задачи
Как и в случае Git выше, если вы используете средство запуска задач или инструмент сборки, такой как Gulp, было бы хорошо, если бы вам не нужно было выходить из своей текущей среды, чтобы взаимодействовать с ним. VS Code имеет отличный встроенный инструмент. В Sublime я использую sublime-gulp.
Открыть / закрыть список файлов
Это довольно просто, но есть шорт-кат для открытия и закрытия боковой панели! Я не хочу видеть, как вы тянетесь туда мышью!
Смещение строк
Я все еще удивляюсь тому факту, что разработчики (извини, Søren) все еще удивляются, когда видят это. У вас есть строка или X строк кода, и вам нужно сдвинуть их вверх или вниз. Выберите текст, воспользуйтесь шорт-катом и переместите их вверх или вниз. Бонус в VS Code — он автоматически расставляет отступы.
Разбить выделение на строки
Предположим, вы хотите превратить кучу строк в отдельные элементы. Возьмите текст, нажмите соответствующий шорт-кат, и у вас будет выделена каждая строка. Вы можете легко перейти к началу / концу каждой строки!
Выделение с неравномерными краями
Это альтернатива разбивке выделения на строки. Удерживайте соответствующую клавишу и используйте мышь для выделения текста с неровными краями, указывая курсором точку для каждого края.
Выбор всех вхождений
Вы находите выделения, а затем можете что-то сделать с каждым экземпляром. Полезно для переименования метода или любого другого изменения файла.
VS Code имеет еще более удобную функцию переименования методов, которая позволяет вам кликнуть через F2 на имени метода, и VS Code автоматически обновит его везде.
Выбор следующего вхождения и пропуск вхождения
Предположим, вы нашли слово и хотите найти следующий экземпляр. Вы должны знать шорт-кат, который найдет следующее вхождение, но вам также нужно знать, как вернуться, если вы зашли слишком далеко и как пропустить вхождение. Я не использую это очень часто и регулярно забываю шорт-кат, но вам просто стоит помнить, что он есть.
Найти символ в проекте
Почти ни один редактор, кроме Sublime, не может этого. Команда VS Code, похоже, не слишком беспокоилась о реализации этого приема для CSS, что постыдно, потому что это ключевая функция для любого разработчика, который тратит приличное количество времени на работу с CSS. Предположим, у вас есть класс, и вы хотите изменить свойства этого объявления класса в базе кода. Глобальный поиск — это слабая альтернатива. Что вам нужно, это «найти символ в проекте». Нажмите на шорт-кат, введите / вставьте имя своего класса (или другой символ языка) и перейдите прямо к файлу и поместите его там, где вам нужно.
Перейти к строке
Инструменты для разработчиков сообщают, что в строке 234 есть ошибка. Конечно, вы можете прокрутить документ до этой строки, или просто перейти к ней в несколько нажатий клавиш.
Выделение строки
Это довольно очевидно, но если вы все еще выделяете строки с помощью мыши, вам нужно разобраться с собой.
Расширить выделение
Вы выделили слова, но вам нужен весь абзац. Или вы хотите расширить выделение до следующего набора фигурных скобок. Вы должны знать, как это сделать с помощью шорт-ката.
Отступ для блока
Обычно это кажется слишком очевидным, но я видел, как люди задавали отступы для свойств / значений CSS или тела функции JS по одной строке за раз, и на это больно смотреть. Вы должны знать, что вы можете выбрать блок (предпочтительно с помощью расширения выделения из предыдущего пункта), а затем установить отступ.
НО!! С появлением Prettier я бы сказал, что уже можно обойтись и без выделения блока.
AceJump / QuickJump
Это редко поддерживают редакторы из коробки, и я знаю плагины с другими названиями, не AceJump (например, QuickJump), но принцип тот же. Вы вводите шорт-кат, и он расставляет метки по тексту. При нажатии соответствующей клавиши вы можете перейти прямо к этой метке.
История буфера обмена
Возвращаться и повторно копировать, потому что вы скопировали в буфер обмена что-то другое, невероятно неэффективно. В Sublime / Vim / Emacs встроена история буфера обмена. Другие инструменты, такие как Code, могут добавлять данный функционал через плагин. Еще лучше, используйте что-то вроде Alfred, который является агностиком для программы, и поэтому у вас есть история буфера обмена для вставки в любое приложение.
Быстрое переключение между проектами
Необходимо переключиться с одного проекта на другой? Для этого не обязательно переходить с помощью мыши в меню.
Emmet
Нужно создать 100 дивов с тем же или увеличивающимся индексом класса? Даже не рассматривайте возможность это делать по одному. Учитесь делать это с помощью Emmet.
Время, потраченное на изучение, Emmet стоит того, поскольку это пригодится вам в разных случаях. Доступны плагины для всех редакторов и внешние сервисы, такие как Codepen.
.myClass-${Hi}*100
Заключение
Вот и все, если у вас есть отличные функции, которые, как вы думаете, заслуживают упоминания, напишите о них в комментариях.
Это прекрасное время, когда доступны текстовые редакторы с таким большим количеством прекрасных опций. Важно знать, что эти инструменты могут сделать для вас, чтобы вы могли потратить немного времени на то, чтобы отточить свои навыки. Если большую часть своего дня вы тратите на работу с текстовым редактором, то, безусловно, стоит повысить свои навыки (или хотя бы пытаться).
Источник: https://benfrain.com/
Редакция: Команда webformyself.
