Последние несколько лет я использовал 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, когда будет предложено закрыть / закрыть окно.
🎉 Вот и все! 🎉
Это основные инструменты и расширения, которые я пытаюсь настроить, когда работаю в новом редакторе. Надеюсь, ваша продуктивность резко возрастет после установки этих инструментов! Пожалуйста, дайте мне знать, если у вас есть другие расширения, которые, по вашему мнению, необходимы для разработки.
Удачного кодирования! 😺