Последние несколько лет я использовал Atom в качестве редактора кода, но недавно я заметил всплеск разработчиков, использующих VSCode. Буквально на прошлой неделе я начал свою новую роль здесь, в Echobind, поэтому я подумал, что это будет отличным шансом для меня опробовать нового редактора.

Сначала я не решался принять VSCode - я до сих пор не простил Microsoft этого проклятого Клиппи. К моему большому удивлению, редактор кода мне показался довольно замечательным и приятным. Он включает в себя IntelliSense, имеет встроенный Git со встроенным терминалом и набор инструментов для отладки. Я действительно предлагаю вам дать редактору шанс, если вы еще этого не сделали (программное обеспечение даже с открытым исходным кодом)!

Я очень требователен к своим редакторам кода, и мне нравятся легкие расширения, которые повышают мою продуктивность. Я перечислил - как мне кажется - основные инструменты и расширения для VSCode.

Шрифт

Программирование - это гораздо больше чтение, чем письмо, поэтому вы захотите иметь очень разборчивый шрифт. Мне нравится использовать шрифт Input в стиле Deja Vu / Menlo. Шрифт очень настраиваемый; вы можете выбрать различные варианты букв a, g, i, 0, {} и т. д. Важно выбрать шрифт, который позволяет легко различать похожие символы (например, i vs j, 1 vs l vs I, O vs 0).

Еще одна интересная альтернатива - Код Fira (рекомендованный моим коллегой Дэйвом Уосмером). Шрифт имеет отличные программные лигатуры для стрелок больше, меньше, не равно и т. Д.

Установите шрифт на свой компьютер

На Mac загрузите и дважды щелкните файлы .ttf, чтобы открыть книгу шрифтов. Затем вам будет предложено диалоговое окно установщика для шрифта.

Добавьте шрифт в VSCode

Мне нравится, как в VSCode вы редактируете свои настройки. Слева у вас есть доступный только для чтения раздел настроек редактора по умолчанию. С правой стороны вы можете изменить любые свойства, которые вам нравятся. Если в будущем вы захотите изменить свойство, вы сможете быстро найти его с правой стороны без необходимости повторного сканирования большого списка настроек - как в других редакторах.

Теперь в VSCode войдите в Настройки пользователя, щелкнув шестеренку в левом нижнем углу, а затем перейдите в раздел «Настройки» в меню.

В правой части экрана разместите «Ввод» в самом начале строки семейств шрифтов. Это обеспечит загрузку шрифта Input в первую очередь.

Совет от Дэйва Уосмера:

Если вы наведете курсор на свойство, доступное только для чтения, слева, в поле редактора появится значок карандаша «Редактировать». Щелкните его, и в меню отобразятся доступные параметры для этого значения. Если вы выберете один из меню, он изменит вашу конфигурацию справа, чтобы отразить этот выбор.

Иконки VSCode

По умолчанию VSCode не имеет значков в проводнике. Иконки VSCode помогают легко определить, какой тип файлов у вас есть в ваших проектах. Мне также нравится вид значка папки над маленькими стрелками, установленными по умолчанию для VSCode.

Подсветка синтаксиса - Babel

Подсветка синтаксиса очень важна, поскольку помогает вашим глазам различать ключевые слова и переменные. Поскольку большую часть своей работы я выполняю на JavaScript, мне нравится использовать Babel JavaScript, так как он включает в себя последние версии ECMA, React JSX и GraphQL. Я считаю, что подсветка синтаксиса является обязательной, поэтому загрузите и установите любые другие аналогичные расширения для языков, которые вы часто используете.

Брекет-пара Colorizer

Я много работаю с JavaScript, поэтому вижу много круглых и фигурных скобок. По умолчанию VSCode имеет тонкие линии, которые соответствуют скобкам по вертикали, но Bracket Pair Colorizer может улучшить это еще больше. Расширение вращается с помощью набора ярких цветов, чтобы кодовые блоки были легко различимы и приятны для глаз.

ESLint

ESLint - это линтер JavaScript. Линтер - это программа, которая не только помогает при стилизации, но также может помочь с передовыми практиками и избежанием ошибок.

Будьте на связи! Скоро у меня будет статья о том, как настроить ESLint одновременно с Prettier в VSCode.

ОБНОВЛЕНИЕ: ознакомьтесь с моей статьей о том, как интегрировать их в VSCode!

Поощрительное упоминание: выйти из-под контроля

Я загрузил это расширение после того, как мне надоело постоянно выходить из редактора случайно (я много спамил + W и ⌘ + Q). Когда активирован Выйти из управления, он спросит вас, действительно ли вы хотите выйти / закрыть окно. Просто нажмите Enter, когда будет предложено закрыть / закрыть окно.

🎉 Вот и все! 🎉

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

Удачного кодирования! 😺