Мои лучшие 5 расширений для VS Code
Давным-давно я использовал текстовый редактор Sublime для написания своего кода. Однако этот диалог «Купить это» просто раздражал.
Купить возвышенный текстовый диалог
Я не говорю, что редактор недостаточно хорош для того, чтобы кто-то его купил, но серьезно… Вы знаете кого-нибудь, кто на самом деле нажал кнопку «Купить»?
Github выпустил бесплатный Atom, но производительность была не очень высокой (по крайней мере, с моей точки зрения, я не проводил никаких тестов).
Поскольку текстовых редакторов не хватало (не совсем), Microsoft выпустила Visual Studio Code. Я никогда не думал, что они выпустят такой продукт, но они это сделали, и знаете что… Он стал моим любимым текстовым редактором!
Мне очень нравится этот редактор, потому что он имеет действительно хорошую производительность (по крайней мере, пока у меня нет никаких проблем), он бесплатный, и у вас есть много доступных для установки расширений. Эти расширения могут изменить вашу повседневную работу и, конечно же, сделать ваш редактор потрясающим!
Просто скриншот моего любимого текстового редактора
Я поделюсь своими любимыми расширениями. Два из них в основном полезны для разработчиков Javascript, но я все равно поделюсь ими, потому что они мне очень нравятся, и я пишу код JS каждый день на работе!
Расширения
Если вы работаете над проектом, использующим git в качестве VCS (системы контроля версий), вам понравится этот вариант. Это в основном говорит вам, кто внес данное изменение в строку, на которой находится ваш курсор. Он показывает вам сообщение фиксации и пользователя, внесшего изменение.
Использование gitlens для просмотра сообщений фиксации построчно
Это расширение также добавляет новую опцию в левое боковое меню, где вы можете подробно просмотреть журналы коммитов, сравнить файлы, просмотреть ветки и т. д.
Это также для практически любого разработчика программного обеспечения. Это не более чем пакет значков. Позвольте мне показать вам пример…
Пример того, как отображаются значки с использованием расширения vscode-icons
Как видите, он делает гораздо больше, чем просто смотрит на расширение каждого файла и использует правильный значок. Некоторые файлы даже не имеют расширения в имени файла, например, файл «ЛИЦЕНЗИЯ». Но каким-то образом расширение использует другой значок для этого файла, хотя это всего лишь текстовый файл. У «Dockerfile» тоже есть своя иконка! Это действительно больше, чем просто тема значков для вашего текстового редактора!
Иногда у вас много “(» а также «{“ и трудно найти соответствующий “)» а также «}» закрывающие символы. Я использую это расширение, чтобы решить эту первую мировую проблему. Он применяет разные цвета для каждой пары «()» и «{}».
Каждая пара «()» и «{}» получает свой цвет
Потрясающе, правда?
ESLint это инструмент для определения стандартов кода. Некоторые вопросы, такие как:
- Должен ли я ставить пробел вокруг «=» в задании?
const a = b;
или же
const a=b;
- Должен ли я оставлять пробел между если ключевое слово и условие в если утверждение?
if (condition) //...
или же
if(condition) //...
И многое другое, на что может ответить этот инструмент…
Все эти стандарты кода могут быть определены и реализованы с помощью ESLint. Вам просто нужно интегрировать этот инструмент в свой проект и установить свои правила в файле «eslintrc». Ваш инструмент сборки выдаст ошибку, если какое-то правило будет нарушено. Но вы можете сделать лучше. У вас могут появиться все эти ошибки в вашем VS Code. Есть расширение, которое делает именно это. Он ищет файл конфигурации, и по мере ввода текстовый редактор выделяет ошибки, нарушающие правила. Некоторые из этих ошибок могут быть исправлены автоматически. Просто нажмите Ctrl + Сдвиг + п (на ПК) или Cmd + Shift + P на Mac и введите «исправить», пока не найдете вариант, который говорит «Устранение всех автоматически устраняемых проблем».
Использование автоматического исправления для устранения стандартных проблем с кодом
Когда вы что-то импортируете из пакета, это означает, что вы включаете какой-то внешний код. Если у вас есть процесс сборки, который создает файл пакета (весь код в одном файле JS), каждая используемая вами библиотека будет увеличивать размер конечного пакета. С этим расширением каждый оператор импорта оценивается и сообщает вам, какова стоимость этого импорта с точки зрения размера файла. Потому что здесь… Размер имеет значение!
Просто пример расширения стоимости импорта в действии
Вывод
Не очевидны преимущества расширений, которые я показал вам в этом посте… Пока вы не начнете их использовать! Даже если некоторые из них просто решают некоторые проблемы первого мира, я думаю, что все они добавили ценности моему текстовому редактору, а также моей повседневной работе. Я надеюсь, что вы можете получить что-то удивительное из этого поста.
Дайте мне знать, что вы думаете, и подписывайтесь на меня, чтобы получать больше интересного контента о вещах разработчиков. 
