Никаких типичных и заезженных примеров!! Есть несколько более редких и малоизвестных расширений и советов для веб-разработчиков, которые значительно повышают производительность.

В этом посте я перечислю свои самые любимые ярлыки, советы и расширения, которые значительно упрощают и ускоряют жизнь при программировании. Я лично думаю, что использование этих tips-and-tricks делает программирование намного забавнее. Так вот, наслаждайтесь!

Советы

  1. Перезапустите TS-сервер
ctrl + shift + P -> TypeScript: Restart TS server

2. Перейти к соответствующей скобке

shift + Ctrl + \

3. Перейти к объекту (функции, переменные и т. д.)

ctrl + shift + O

4. Удалить открытые редакторы

Чтобы сэкономить место, мы можем скрыть вкладку открытых редакторов, что не очень удобно.

Settings -> Open editors -> set to 0

5. Отключить ускорение графического процессора

Иногда у вас могут возникнуть проблемы, связанные с тем, как графический процессор используется для рендеринга пользовательского интерфейса VS Code. Где хитрость, чтобы получить гораздо лучший опыт при запуске VS Code с дополнительным аргументом командной строки --disable-gpu. Запуск с этим аргументом отключит аппаратное ускорение графического процессора и вернется к программному рендереру.

Чтобы добавить этот флаг:

  • Откройте палитру команд (Ctrl+Shift+P).
  • Запустите команду Preferences: Configure Runtime Arguments.
  • Эта команда откроет файл argv.json для настройки аргументов времени выполнения. Там вы уже можете увидеть некоторые аргументы по умолчанию.
  • Добавьте "disable-hardware-acceleration": true.
  • Перезапустите код VS.

Примечание. Не используйте этот параметр, если вы не видите проблем

6. Обозреватель процессов

Считаете ли вы иногда, что ваш редактор кода VS немного медленный? Вы когда-нибудь хотели взглянуть на то, что поглощает вашу память? Хорошо, если вы не знали, что этот код VS уже имеет функцию Process Explorer, которая позволит вам открыть окно, как показано ниже:

7. Запуск расширений

Вы можете просмотреть все ваши запущенные расширения, открыв палитру команд и введя Show Running extensions.

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

8. Перезагрузить

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

Нажми Ctrl + Alt + R, Или назначь привязку лично, для себя я предпочитаю Ctrl + R

9. Производительность при запуске

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

А иногда, если вам повезет, вы найдете инструмент, который даст вам ответы на все вопросы. Открой полезное окошко чудесным образом всей нужной тебе информации:

10. Фрагмент Console.log

Добавьте этот фрагмент в настройки пользовательских фрагментов и наслаждайтесь быстрой стилизацией ведения журнала:

Console”: {
   “prefix”: “log”,
   “body”: [
     “console.log(‘%c$1’, ‘color: green; font-size: 1.5rem;’, $1);”,
   ],
   “description”: “Log output to console”
},

Расширения

Линза ошибок

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

Квокка (JS/TS ScratchPad)

Quokka — это площадка для быстрого прототипирования для JavaScript и TypeScript. Он запускает ваш код сразу после ввода и отображает различные результаты выполнения и журналы консоли в редакторе кода.

Удивительный вариант использования Quokka — когда вы готовитесь к техническим собеседованиям, вы можете выводить каждый шаг без необходимости устанавливать точки останова в отладчиках.

Это также может помочь вам изучить функции библиотеки, такие как Lodash или MomentJS, до их фактического использования. Это работает даже для асинхронных вызовов.

Выделить соответствующий тег

Выделите совпадающие открывающие или закрывающие теги

Git-график

Просматривайте график Git вашего репозитория и легко выполняйте действия Git из графика. Настраивается, чтобы выглядеть так, как вы хотите!

Абракадабра, рефакторинг этого!

Автоматизированный рефакторинг для VS Code в JavaScript и TypeScript. Это огромный, вы должны проверить это на официальном сайте, какие вкусности он обрабатывает. Я просто выбрал и бросил один из многих примеров:

Мгновенный поиск Stackoverflow

Мгновенный поиск в Stackoverflow в контексте вашего любимого vs-кода.

Герой TypeScript

Когда вы кодируете много TypeScript, вы можете захотеть, чтобы vscode организовал ваш импорт. Просто введите ctrl + alt + O.

Jira и Bitbucke

Использование возможностей Jira и Bitbucket в VS Code — с помощью Atlassian for VS Code вы можете создавать и просматривать задачи, начинать работу над задачами, создавать запросы на вытягивание, проводить проверки кода, запускать сборки, получать статусы сборок и многое другое!

Проверка с помощью функций запросов на вытягивание Bitbucket выполняется совсем несложно:

Префикс Git

Это полезно, если вы работаете в команде и у вас есть соглашение об определенном соглашении об именах для сообщений или веток коммитов git. С помощью Git Prefix вы можете зафиксировать сообщение со значением в названии ветки.

Пример, когда у вас есть такая ветка: feat/PROJECT-TASK_NUMBER-description .

и отформатируйте сообщение о фиксации: feat(PROJECT-[TASK_NUMBER]): сообщение о фиксации

Откройте «Настройки» -> найдите Префикс Git —> установите следующие параметры:

Префикс Git: Шаблон

([a-zA-Z]*)\/(ПРОЕКТ-\d+.*)

Префикс Git: шаблон игнорирует регистр

$1($2):

Результат:

JSON в TS

Преобразование объекта JSON в интерфейсы typescript

гугл-поиск

Ну, а если вы застряли в некотором замешательстве по поводу того, что делает та или иная строка или эта функция, то вы можете просто выбрать нужную функцию или строку и вула! вы получите мгновенные результаты поиска по этому запросу в веб-браузере по умолчанию без необходимости вводить или копировать все это!

Есть еще несколько рекомендаций, ознакомьтесь с этим списком:

Бонус

Лучшие любимые великолепно выглядящие темы, которые вы должны проверить:

Вот и все. Будьте более продуктивным и счастливым программистом.