Мощные расширения VS Code, которые должен иметь каждый разработчик
Если вы разработчик, вам не нужно знакомство с Visual Studio Code или VS Code, как его называют большинство людей. Это один из самых популярных редакторов кода среди разработчиков по всему миру. Бесплатный кроссплатформенный редактор кода с открытым исходным кодом, поддерживаемый одним из самых известных разработчиков (Microsoft), только увеличивает его популярность. Чем больше разработчиков используют его, тем больше у него сообщество, что, в свою очередь, приводит к выпуску большего количества расширений для редактора. В этой статье мы обсудим некоторые очень полезные расширения специально для веб-разработки.
1. Tabnine Autocomplete AI
Все мы используем языковые расширения для автозаполнения фрагментов кода. В большинстве случаев эти фрагменты являются предопределенными, и вы можете использовать их из коллекции доступных фрагментов. Но что, если есть расширение, которое может автоматически заполнять любой язык, изучать ваш шаблон кодирования и предсказывать автозаполнение, необходимое для каждого сценария?
Tabnine делает именно это, изучая общедоступный код и используя алгоритмы глубокого обучения искусственного интеллекта. Он может предсказать ваши следующие потребности в коде и предложить завершение кода одним щелчком мыши. Если вы беспокоитесь о конфиденциальности своего кода, вы с облегчением узнаете, что предложения Табнина основаны на моделях, которые обучены с использованием миллионов строк. открытого исходного кода, и никакая часть вашего кода не используется для обучения моделей или где-либо хранится.
2. Лучшие комментарии
Еще один инструмент, который не требует пояснений, расширение Лучшие комментарии, которое поможет вам добавить в код больше удобных для человека комментариев. Он позволяет разделить ваши комментарии на предупреждения, запросы, задачи, основные моменты и т. Д. Даже закомментированный код можно оформить таким образом, чтобы четко показать, что кода там не должно быть. Он также позволяет пользователям добавлять собственные стили комментариев в настройках.
3. Автоматическое переименование тега
Название этого инструмента говорит само за себя. Auto Rename Tag автоматически переименовывает теги в вашем коде и помогает вам сэкономить время. Если вы когда-либо пытались переименовать тег и потратили больше времени на поиск другого тега в паре, чем на фактическое переименование, то это расширение для вас. Измените имя тега в одном месте (открытие или закрытие), а расширение позаботится о другом. Больше не нужно искать и больше не забывать переименовывать теги, приводящие к ошибкам в вашем коде.
4. Павлин
Мы все были там, имея несколько проектов, открытых одновременно в нескольких экземплярах VS Code. При переключении между экземплярами нелегко идентифицировать проекты, и в большинстве случаев вам нужно открыть его и прочитать имя проекта или даже прочитать код, если имена проектов похожи. Павлин позволяет изменять цвет рабочего пространства VS Code и легко идентифицировать проекты при переключении между окнами. Это также может быть полезно при использовании функции удаленного доступа VS Live Share или VS Code.
5. Конечные пробелы
Кажется, что большинство простых расширений не требуют пояснений. Еще один в списке - Конечные пробелы. Это расширение выделяет и удаляет все конечные пробелы в вашем коде. Вы можете удалить пробелы, нажав клавишу F1 и выполнив команду "Конечные пробелы: Удалить" или создав ярлык VS Code в настройках, которые будут запускать команду . Он также допускает множество настроек, когда дело доходит до обработки пробелов, таких как удаление только измененных строк, игнорирование синтаксиса и т. д.
6. Выделение цветом
Расширение Color Highlight настолько простое, что все, что ему нужно, это одна строка для понимания: оно стилизует CSS / веб-цвета, найденные в вашем коде.
7.Quokka.js
Quokka.js - это расширение, позволяющее выполнять быструю отладку при написании кода на JavaScript или TypeScript. Он может добавлять значения переменных рядом с самими переменными или печатать значения операторов журнала консоли без необходимости запуска кода. Значения времени выполнения обновляются и отображаются в вашей среде IDE рядом с кодом по мере ввода. У него также есть платная версия с большим количеством функций.
8. Журнал Turbo Console
Если вы, как и большинство разработчиков, полагаетесь на журнал консоли во всем, от отладки до тестирования, это идеальное расширение для вас. Наличие нескольких журналов консоли может затруднить понимание того, что было из какой части кода, и ни у кого нет времени или терпения, чтобы писать подробные сообщения в журналах консоли. Войдите в Turbo Console Log, расширение, которое автоматически добавляет журналы консоли, содержащие сообщение со всеми необходимыми деталями. Просто выберите одну или несколько переменных и нажмите CTRL + ALT + L, и он автоматически добавит консольный журнал, в котором печатается имя класса и функции , которой принадлежит переменная (если она есть их), имя переменной , и ее значение в следующем формате:
console.log («SelectedVariableEnclosingClassName -› SelectedVariableEnclosingFunctionName - ›SelectedVariable», SelectedVariableValue)
9. Полакод
Polacode - очень простое расширение, которое позволяет создавать аккуратные скриншоты фрагментов кода, не выходя из VS Code. Вы можете выбрать любой фрагмент кода и запустить его с помощью Polacode для создания снимков экрана, которыми можно поделиться с другими разработчиками, в блогах или в презентациях. Он также позволяет настраивать тему и цвета.
10. Предварительный просмотр изображения.
Предварительный просмотр изображения - еще одно простое расширение, которое делает то, что написано в названии. Предварительный просмотр изображения покажет вам предварительный просмотр ресурсов изображения, на которые имеется ссылка в коде в промежутке или при наведении курсора.
Бонус: Время музыки для Spotify
Если вы когда-либо искали тот идеальный трек, который поможет вам сосредоточиться на написании кода, или хотели управлять своим музыкальным плеером, не выходя из VS Code, Music Time for Spotify - это расширение для вас. В документации перечислено множество функций:
- Встроенные элементы управления плеером. Управляйте музыкой прямо из строки состояния редактора.
- Встроенные плейлисты: просматривайте и воспроизводите свои плейлисты и песни Spotify из редактора.
- Плейлисты AI. Получите персонализированный плейлист AI, созданный с помощью машинного обучения, чтобы помочь вам сосредоточиться.
- Профиль показателей: узнайте, как основные показатели музыки (включая темп, громкость, речевость, энергию и валентность) влияют на то, как вы пишете код.
- Персональный топ-40: просматривайте свои самые продуктивные песни, исполнителей и жанры каждую неделю в своем еженедельном топ-40.
- Еженедельная панель управления музыкой: просматривайте свои самые популярные песни, исполнителей и жанры каждую неделю по показателям продуктивности и воспроизведению во время кодирования.
- 40 лучших в мире. Откройте для себя новую музыку от разработчиков со всего мира в нашем плейлисте «40 лучших программ».
- Интеграция со Slack: подключите Slack, чтобы делиться песнями и плейлистами на каналах в вашей рабочей области.
Позвольте мне закончить статью, заявив, что я лично не связан ни с одним из упомянутых выше расширений и не получал никаких стимулов для их продвижения. Не стесняйтесь добавлять в комментарии дополнительные расширения, которые, по вашему мнению, могут быть полезны. Вы также можете прочитать VS Code Extensions, чтобы помочь вам писать лучший код, опубликованный в Better Programming, чтобы узнать о других очень полезных расширениях.
