Мои лучшие 5 расширений для VS Code

Давным-давно я использовал текстовый редактор Sublime для написания своего кода. Однако этот диалог «Купить это» просто раздражал.


Купить возвышенный текстовый диалог

Я не говорю, что редактор недостаточно хорош для того, чтобы кто-то его купил, но серьезно… Вы знаете кого-нибудь, кто на самом деле нажал кнопку «Купить»?

Github выпустил бесплатный Atom, но производительность была не очень высокой (по крайней мере, с моей точки зрения, я не проводил никаких тестов).

Поскольку текстовых редакторов не хватало (не совсем), Microsoft выпустила Visual Studio Code. Я никогда не думал, что они выпустят такой продукт, но они это сделали, и знаете что… Он стал моим любимым текстовым редактором!

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


Просто скриншот моего любимого текстового редактора

Я поделюсь своими любимыми расширениями. Два из них в основном полезны для разработчиков Javascript, но я все равно поделюсь ими, потому что они мне очень нравятся, и я пишу код JS каждый день на работе!

Расширения

GitLens

Если вы работаете над проектом, использующим git в качестве VCS (системы контроля версий), вам понравится этот вариант. Это в основном говорит вам, кто внес данное изменение в строку, на которой находится ваш курсор. Он показывает вам сообщение фиксации и пользователя, внесшего изменение.


Использование gitlens для просмотра сообщений фиксации построчно

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

vscode-значки

Это также для практически любого разработчика программного обеспечения. Это не более чем пакет значков. Позвольте мне показать вам пример…


Пример того, как отображаются значки с использованием расширения vscode-icons

Как видите, он делает гораздо больше, чем просто смотрит на расширение каждого файла и использует правильный значок. Некоторые файлы даже не имеют расширения в имени файла, например, файл «ЛИЦЕНЗИЯ». Но каким-то образом расширение использует другой значок для этого файла, хотя это всего лишь текстовый файл. У «Dockerfile» тоже есть своя иконка! Это действительно больше, чем просто тема значков для вашего текстового редактора!

Раскрашивание пары скобок

Иногда у вас много “(» а также «{“ и трудно найти соответствующий “)» а также «}» закрывающие символы. Я использую это расширение, чтобы решить эту первую мировую проблему. Он применяет разные цвета для каждой пары «()» и «{}».


Каждая пара «()» и «{}» получает свой цвет

Потрясающе, правда?

ESLint

ESLint это инструмент для определения стандартов кода. Некоторые вопросы, такие как:

  • Должен ли я ставить пробел вокруг «=» в задании?

const a = b;

или же

const a=b;

  • Должен ли я оставлять пробел между если ключевое слово и условие в если утверждение?

if (condition) //...

или же

if(condition) //...

И многое другое, на что может ответить этот инструмент…

Все эти стандарты кода могут быть определены и реализованы с помощью ESLint. Вам просто нужно интегрировать этот инструмент в свой проект и установить свои правила в файле «eslintrc». Ваш инструмент сборки выдаст ошибку, если какое-то правило будет нарушено. Но вы можете сделать лучше. У вас могут появиться все эти ошибки в вашем VS Code. Есть расширение, которое делает именно это. Он ищет файл конфигурации, и по мере ввода текстовый редактор выделяет ошибки, нарушающие правила. Некоторые из этих ошибок могут быть исправлены автоматически. Просто нажмите Ctrl + Сдвиг + п (на ПК) или Cmd + Shift + P на Mac и введите «исправить», пока не найдете вариант, который говорит «Устранение всех автоматически устраняемых проблем».


Использование автоматического исправления для устранения стандартных проблем с кодом

Стоимость импорта

Когда вы что-то импортируете из пакета, это означает, что вы включаете какой-то внешний код. Если у вас есть процесс сборки, который создает файл пакета (весь код в одном файле JS), каждая используемая вами библиотека будет увеличивать размер конечного пакета. С этим расширением каждый оператор импорта оценивается и сообщает вам, какова стоимость этого импорта с точки зрения размера файла. Потому что здесь… Размер имеет значение!


Просто пример расширения стоимости импорта в действии

Вывод

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

Дайте мне знать, что вы думаете, и подписывайтесь на меня, чтобы получать больше интересного контента о вещах разработчиков. 😃

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *