Советы и рекомендации VSCode для опытных пользователей
Опубликовано: 2022-03-11Почему я хочу стать опытным пользователем Visual Studio?
Стать опытным пользователем — еще один способ оставаться впереди. Разработчики часто говорят о том, как они остаются на вершине своей игры и как они постоянно учатся новому и продолжают оттачивать свои навыки. Это часто задаваемый вопрос на собеседовании, поскольку работодатели склонны отдавать предпочтение талантам, стремящимся расширить свой набор навыков. Освоение вашей IDE и вашего компьютера может быть одним из лучших вложений в ваше профессиональное развитие.
Разработчики всегда ищут новый блог, который поможет им лучше выполнять свою работу. Какую бы IDE вы ни использовали, у нее наверняка есть блог: Подпишитесь!
Другая причина в том, что это просто экономит время. Вложение времени в улучшение вашего рабочего процесса может окупиться за счет повышения производительности или большего количества времени для развлечений. Сегодня мы более подробно рассмотрим Visual Studio и VSCode и обсудим способы улучшения ваших навыков, чтобы стать опытным пользователем.
Как мне стать опытным пользователем VSCode?
Вот что отличает обычного пользователя от опытного :
- Глубокое знание вашей IDE: у VSCode есть отличная документация, прочтите ее!
- Настройка: опытные пользователи адаптируют свой рабочий процесс в соответствии со своими конкретными потребностями.
- Автоматизируйте все скучные и повторяющиеся задачи.
- Постоянно улучшайте свой рабочий процесс и следите за развитием вашей IDE.
В этой статье я намерен объяснить, как я сам решал каждый из этих вопросов, и снабдить вас знаниями, чтобы сделать это самостоятельно. То, что я делаю, не обязательно сработает для вас, по крайней мере, не совсем. Люди работают в разных средах и проектах (для меня это в основном работа с React.js и TypeScript в Windows), но общий подход подходит для всех.
Тестирование с Jest
Я пишу по одному тесту за раз, а это значит, что мне нужен способ запускать по одному тесту за раз. Однако собственное решение для регулярных выражений довольно неуклюже. Вот почему я использую Jest Runner. Это полезное расширение позволяет выполнять или отлаживать отдельные наборы или тесты.
На видео ниже показано, что все, что вам нужно сделать, это щелкнуть правой кнопкой мыши имя теста и использовать контекстное меню для его запуска.
Тестирование с Пактом
Пожалуй, самая трудоемкая часть написания контрактного теста — это сопоставление. Я решил эту проблему, создав полезные фрагменты для автоматизации повторяющихся действий. Вот некоторые из них, которые я сделал, не стесняйтесь их использовать (т.е. просто скопируйте и вставьте их в VSCode /snippets/typescript.json
).
Видео ниже показывает, как использовать эти фрагменты:
- Выберите все вхождения одного типа, т. е. выберите все строки, время и другие значения.
- Используйте предопределенную привязку клавиш или вызовите « Вставить фрагмент » и выберите соответствующий фрагмент или просто начните вводить префикс фрагмента, который вы хотите использовать.
Гит
Большинство разработчиков ежедневно используют Git и GitHub, и я тоже. Однако я стараюсь избегать использования терминала или github.com.
GitHub Pull Requests and Issues позволяет мне открывать, редактировать и просматривать PR, не выходя из VSCode. Я считаю, что моя IDE является лучшим местом для просмотра кода, чем веб-приложения или приложения GitHub для настольных компьютеров. Некоторые разработчики могут не согласиться, но я ценю согласованность и удобство выполнения этого в моей среде IDE.
Git может сделать так много, но я запомнил так мало его команд. Но зачем вообще что-то запоминать? Запоминание слишком большого количества мелких деталей вашей рутины не слишком продуктивно.
GitLens предоставляет множество удивительных функций прямо у вас под рукой. Благодаря этому мне редко приходится тянуться к терминалу, чтобы использовать Git.
Настройка терминала
Независимо от того, какую ОС вы используете, вы можете работать лучше, чем терминал по умолчанию. Я использую Windows Terminal + cmder. Если вы пользователь Unix, найдите iTerm (macOS) или Oh My Zsh (Linux и macOS). Я интегрировал их с VSCode и добавил множество псевдонимов (ярлыков), которые экономят время на написании команд.
Например:
-
ys = yarn start
— помогает мне запустить приложение всего двумя символами -
del=RMDIR /S/Q $* && echo "Deleted Successfully!!!"
- удаляет указанный каталог и показывает сообщение об успешном завершении -
gdab = git branch | grep -v "master" | xargs git branch -D
gdab = git branch | grep -v "master" | xargs git branch -D
— удаляет все локальные ветки, кромеmaster
Сохранение нескольких символов здесь и там может показаться глупым, но эти функции, экономящие время, в конечном итоге складываются. Я нахожу в использовании псевдонимов еще одно преимущество: меньше времени на их ввод помогает мне оставаться сосредоточенным и не терять ход мыслей, потому что я не пытаюсь вспомнить, как вызывать команду.
Генерация кода
Создание нового компонента, страницы и т. д. — это то, чем я занимаюсь часто, и это довольно просто, как известно большинству читателей. Но создание новой папки и инициализация файлов в ней может быть утомительным. Итак, я автоматизировал этот процесс.

Видео ниже показывает использование Supercharge React. Используя New Component
, я могу указать имя и расположение нового компонента. Затем расширение запускает сценарий, который создает папку и инициализирует этот новый компонент.
IntelliSense
VSCode имеет мощный IntelliSense, и в большинстве случаев вам не нужно думать об его использовании. Однако при просмотре предложений вы можете нажать Ctrl+Пробел , чтобы просмотреть документацию по каждому доступному варианту.
IntelliSense можно дополнительно настроить в соответствии с вашим рабочим процессом и личными предпочтениями.
Горячие клавиши
Я уверен, что вы используете сочетания клавиш, такие как Ctrl+S и Ctrl+F . Все они хорошо документированы, и если вы не слишком хорошо знакомы с широким набором сочетаний клавиш VSCode, я призываю вас изменить это и сделать все возможное, чтобы освоить их. Определенная привязка слишком неуклюжая? Команда, которую вы вызываете, часто занимает слишком много времени? Откройте редактор клавиатуры VSCode, чтобы создать ярлыки.
Если вам интересно, назначена ли команда определенной комбинации клавиш, нажмите кнопку клавиатуры в строке поиска, где вы можете записывать нажатия клавиш. Затем вы увидите, какие/если команды были связаны с ними.
Сочетания клавиш мыши
Разработчикам часто говорят, что для продуктивной работы им нужно научиться ненавидеть мышь и любить клавиатуру . Это может быть допустимо, если вы работаете с небольшими плотными файлами. Но в эпоху автоматического форматирования кода и файлов, содержащих сотни строк кода, я бы сказал, что это скорее исключение, чем правило.
Я не только активно использую свою мышь, но и настроил ее в соответствии со своим рабочим процессом с помощью Logitech Options. Я запрограммировал специальные клавиши на своей мыши для выполнения определенных команд в VSCode.
Вот как вы можете «научить» свою мышь делать больше, чем просто перемещать курсор и щелкать:
- Выберите VSCode в правом верхнем меню.
- Нажмите на кнопку, которую вы хотите настроить.
- Выберите Назначение нажатия клавиши из списка действий слева.
- Введите предопределенный ярлык в VSCode.
Настройки резервного копирования и синхронизации
Нет особого смысла настраивать что-либо, если вы не можете создать резервную копию и повторно использовать это, когда вам это снова понадобится.
Нативное решение пока доступно только инсайдерам. Тем не менее, Settings Sync помогает сохранить настройки кода в виде Gist и позволяет синхронизировать рабочий процесс между несколькими компьютерами. Вам нужен токен GitHub для его настройки, но после этого вам просто нужно запустить одну команду для загрузки и загрузки ваших настроек.
Рекомендуемые расширения VSCode
Я уже упомянул несколько расширений и объяснил, как я их использую. Вот некоторые примечательные упоминания:
- Surround: нужно обернуть выделенный код в стрелочную функцию или, может быть, в блок try-catch? Это расширение сделает это за вас!
- Поиск node_modules: даже если вы не исключили
node_modules
из проводника VSCode для повышения производительности, эта папка настолько велика, что в ней невозможно перемещаться. Это расширение позволяет вам искать то, что вы ищете, вместо того, чтобы бесконечно прокручивать страницу. - Glean и React Refactor предоставляют несколько полезных инструментов рефакторинга для ваших файлов JSX.
- Auto Close Tag автоматически добавляет закрывающий тег для файлов HTML/JSX/TSX.
- File Utils: удобный способ создания, дублирования, перемещения, переименования и удаления файлов и каталогов. Это также настраиваемый.
- JavaScript Booster автоматизирует некоторые распространенные действия по рефакторингу.
Резюме
Не будьте обычным пользователем. Вместо этого будьте опытным пользователем. Всегда идите на шаг дальше других и смотрите, куда это вас приведет. Всегда обращайте внимание на неэффективность и старайтесь смягчить ее.
Мое решение для этого должно быть знакомо большинству разработчиков: доска Канбан . Каждый раз, когда я замечаю что-то, что замедляет мою работу, я записываю это в список дел. Всякий раз, когда у меня есть свободное время, я пытаюсь найти решение для этого.
Если вы нашли этот пост ошеломляющим и не знаете, с чего начать, прочитайте документы, это даст вам лучший ROI ! Я знаю, что чтение официальной документации звучит скучно, но я обещаю, что в конечном итоге это окупится. Он не только научит вас быть более продуктивным, но и научится писать документацию.
Чтобы упростить задачу, я составил этот список обязательных к прочтению частей документации:
- Советы и хитрости: некоторые из них очевидны, и вы, вероятно, уже знаете, хотя я могу гарантировать, что вы найдете что-то, о чем вы не знали.
- Советы по редактированию. Эти приемы редактирования невероятно эффективны, и их изучение будет приносить вам пользу каждый день.
- Уменьшить/расширить код: попробуйте этот ярлык, когда вы работаете в паре с другим разработчиком, чтобы произвести на них впечатление!
- Сочетания клавиш: узнайте, как работают сочетания клавиш и как их настраивать, это один из краеугольных камней освоения вашей IDE.
- Поддерживаются сотни языков программирования: узнайте, какие особенности есть в VSCode для выбранного вами языка.