Как помочь вашему текстовому редактору лучше служить вам

1
1608
views

«Как сделать так, чтобы написание кода было более эффективным и приносило удовольствие: советы и маленькие хитрости». Представляем перевод статьи, опубликованной на medium.freecodecamp.org, автор – Evy.

Улучшаем текстовый редактор

В ходе шести стажировок у меня было много прекрасных наставников, которые наблюдали за тем, как я пишу код, и давали возможность смотреть, как это делают они (обожаю парное программирование!). Благодаря им я узнала много вещей, которые сделали мою работу более эффективной и приносящей больше удовольствия.

Часть из этого — тонкости и хитрости текстовых редакторов, которыми я и хочу поделиться с вами!


Этот пост не о том, какой редактор вам стоит использовать. Я поделюсь примерами в редакторе, которым сама пользуюсь в последнее время (Sublime Text на Mac), но и многие другие текстовые редакторы тоже настраиваемы. Это означает, что многие советы, вероятно, можно применить в вашем редакторе. Поэтому давайте отбросим дискуссию о том, какой инструмент лучше, и просто научимся помогать нашим инструментам лучше служить нам.


Автоматический lint вашего кода

С помощью линтеров можно сделать код чище и легче для чтения, а также выловить ошибки. Иногда я запускаю линтер после завершения блока изменений или же позволяю запуск онлайн после открытия pull-запроса на GitHub. Но я пишу код намного быстрее, если запускаю линтер прямо во время его написания! Я не только не трачу несколько минут на скучное вылизывание кода перед его отправкой. Теперь я также стараюсь исправлять проблемы прежде чем они появятся.

Здесь линтер говорит мне, что переменная не определена и я пропустила точку с запятой
Здесь линтер говорит мне, что переменная не определена и я пропустила точку с запятой

Правило 80 символов

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

Ограничение ввода символов
В Sublime Text эту функцию можно включить через Просмотр>Линейка

Автоматическое выполнение некоторых соглашений по пробелам

Во многих руководствах по стилю есть советы удалять пробелы в конце строк и вставлять пустую строку в конец файла. Нелегко постоянно помнить об этом, поэтому очень хорошо, когда мой редактор может это делать вместо меня! У Sublime в пользовательских настройках есть для этого строки: “ensure_newline_at_eof_on_save” и “trim_trailing_white_space_on_save”.

Поиск (и замена) по всей базе кода

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

Быстрый поиск значений функции

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

Поиск определения функции
Правый клик, «Идти к определению», и вот результат!

Быстрый поиск файлов

Я часто хочу найти и открыть файл, но не помню, где именно он находится в базе кода. Я в восторге от возможности ввести название файла в поле для поиска и увидеть все возможные файлы, благодаря чему можно открыть искомый файл гораздо быстрее. Я в восторге от дополнительного бонуса в качестве гибкости поля ввода для поиска. Я могу сделать кучу опечаток или отбросить часть имени файла, а Sublime все равно понимает, что мне нужно! (Техническая часть, стоящая за этим алгоритмом поиска, часто называется «fuzzy search», и она очень интересна).

Поиск файлов
В Sublime Text вы можете вызвать панель поискас помощью ⌘P

Перемещение строк(и) вверх и вниз

Чтобы переместить строку кода (или целую функцию) ниже другой, мне приходилось многократно использовать схему выделить-скопировать-вставить. Но я нашла, как перемещать строки вверх/вниз с помощью сочетаний клавиш ( на MacOS) в Sublime Text это control+ ⌘ + вверх/вниз). Это мелочь, но так приятно (примерно как «перетягивание тремя пальцами»).

Перемещение строк
control+ ⌘ + up/down (в MacOS) в Sublime Text

Подсветка синтаксиса

Подсветка синтаксиса очень облегчает чтение и просмотр кода. А также помогает находить ошибки сразу при введении – если что-то не расцвечивается правильно, значит, это может быть ошибкой.

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

Без подсветки React .jsx файлов
Без подсветки React .jsx файлов
С подсветкой синтаксиса
С подсветкой

Что касается Git

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

Маркеры левых отступов обеспечиваются пакетом GitGutter
Маркеры левых отступов обеспечиваются пакетом GitGutter

И еще!

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

Надеюсь, изложенные здесь советы вам пригодятся!



1 КОММЕНТАРИЙ

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here