Как веб-разработчики, мы должны использовать бесчисленное количество инструментов в течение дня, поднимая этот молоток или это зубило, чтобы каждый день писать лучший код. Но, к счастью для нас, наши инструменты намного сложнее обычных ручных инструментов.
Одна из вещей, которые мне больше всего нравятся в создании программного обеспечения, - это способность работать с такими передовыми технологиями, как интегрированные среды разработки (сокращенно IDE). Безусловно, VS Code от Microsoft - один из лучших инструментов в этой сфере.
Если это звучит так, будто это будет бесплатная реклама Microsoft Visual Studio Code, то это потому, что это так! И они не нуждаются в моем одобрении; недавний опрос Stack Overflow показал, что VS Code - наиболее используемая среда разработки профессиональными разработчиками программного обеспечения!
Хотя это, казалось бы, простая программа для редактирования текста, современные IDE, такие как VS Code, оптимизированы для наилучшего соответствия потребностям каждого разработчика. Это очень мощно. Как программисты, мы знаем, что наш код должен быть гибким. Следуя шаблонам проектирования и написав более гибкий код, мы делаем наш код более удобным для использования в долгосрочной перспективе, что приводит к меньшему обслуживанию разработчиков и, в конечном итоге, к повышению производительности, к которой мы стремимся, создавая это программное обеспечение в первую очередь. Что мне больше всего нравится в VS Code, так это то, что он позволяет сделать сам текстовый редактор гибким, позволяя настраивать свой опыт программирования.
Расширения
Ничто не позволяет вам настраивать процесс разработки так, как расширения VS Code. Проще говоря, библиотека расширений VS Code позволяет вам добавлять языки, отладчики и бесчисленное множество других инструментов, чтобы сделать ваш опыт разработчика уникальным для ваших нужд. Существует слишком много расширений, с которыми вы не можете овладеть; У Microsoft даже есть API расширений, позволяющий пользователям создавать свои собственные расширения! Достаточно сказать, что есть много способов сделать работу разработчика более приятной с помощью VS Code, и я рад показать вам некоторые из моих любимых.
Чтобы быть в курсе событий, посетите рынок расширений VS Code (для пользователей Mac), введите Shift + Command + X или щелкните этот значок на боковой панели:
В оставшейся части этого сообщения в блоге я рассмотрю некоторые из расширений VS Code, на которые я больше всего полагаюсь. Обратите внимание: это пост в блоге, на мой взгляд, очень скромный. Следующие расширения мне подходят, но могут замедлить или даже помешать вашему рабочему процессу в целом. При настройке пространства разработки важно сосредоточиться на том, что лучше всего подходит для вас. Итак, давайте посмотрим на некоторые расширения!
Красивее
Мне кажется, что я ссылаюсь на эту книгу в каждом сообщении в блоге, но если вы еще не читали Чистый код Боба Мартина, вы упускаете его. В одной из глав дядя Боб говорит о форматировании, и его основная мысль такова:
«Форматирование кода - это общение, а общение - это первоочередная задача профессионального разработчика».
Проще сказать, чем сделать. Любой, кто раньше работал с кодом, знает, как быстро форматирование кода может выйти из-под контроля. Чтобы использовать надуманный пример, просмотрите следующий код, чтобы увидеть поистине ужасное невнимание к форматированию:
Мы видим, что этот код работает, но удачи вам в возможности его прочитать. И, как разработчики программного обеспечения, мы прекрасно знаем, что эти 20 строк настолько малы, насколько это возможно для программы. По мере того, как наши программы становятся более сложными, членам нашей команды становится все труднее читать, что намеревается выполнить наш код, что почти наверняка замедлит нас.
К счастью, такие инструменты, как Prettier, могут значительно улучшить наш код. Prettier - это самоуверенный форматировщик кода, позволяющий использовать единообразный стиль форматирования в написанном вами коде. Применяя Prettier к приведенному выше коду, мы получаем что-то более читаемое:
Строки с постоянным отступом и пристальное внимание к вертикальному расстоянию между соответствующими переменными делают даже эту простую программу намного проще для чтения и, соответственно, обслуживания. Чем больше вы используете Prettier, тем больше вы на него полагаетесь. Как и большинство расширений VS Code, Prettier обладает широкими возможностями настройки, что позволяет вам контролировать правила, которые вы хотите применить. Если бы я мог использовать только одно расширение до конца моей карьеры веб-разработчика, это был бы Prettier.
Компоненты в стиле VS Code
Как самопровозглашенный наркоман JavaScript, я люблю работать с React. Работа с компонентами - это то, что мне действительно понравилось в веб-разработке, и мне нравится быть частью постоянно растущего сообщества React.
Одна из моих любимых составляющих веб-разработки - это дофамин, который я получаю, наблюдая, как мой компьютер меняется в зависимости от того, что я ему говорю. Я знаю более чем одного разработчика, который занялся программированием после того, как узнал, как изменить HTML-код в своем браузере с помощью инструментов разработчика Chrome. Таким образом, любой инструмент, который упрощает процесс отображения того, что я визуализирую на экране, станет постоянным инструментом в моем арсенале инструментов. Вот тут-то и пригодятся Компоненты в стиле VS Code.
Используя шаблонные литералы, styled-components позволяет вам писать код CSS для стилизации ваших компонентов. Для демонстрации вы можете написать следующий код для вашего компонента React:
И в вашем браузере будет отображаться следующее:
Это очень мощно. Быстро придавая вашим компонентам базовый стиль, вы можете тратить больше времени, ну, в общем, на создание веб-дизайна. Как говорят некоторые люди в космосе, веб-дизайн - это веб-дизайн, и если вы заметите, что вы начнете работать с веб-дизайном так же быстро, как styled-components. Более того, styled-components совместим как с React, так и с React Native, поэтому вы можете использовать его для стилизации всех компонентов React.
Раскраска для пары кронштейнов
Когда вы только начинаете работать веб-разработчиком, вы редко понимаете, насколько сложными и запутанными могут быть ваши программы. Если вы, скажем, решаете задачи Leetcode, довольно легко проследить историю, которую ваша программа пытается рассказать примерно в 20 строках. Однако люди, которые работали со сложными системами, знают, как быстро становится трудно уследить за вещами. Каждый разработчик JavaScript слишком хорошо знает:
К счастью, есть такие инструменты, как Раскраска пар скобок, которые могут значительно снизить вероятность того, что ваша программа упадет на колени из-за скобки без пары. Давайте рассмотрим наш предыдущий фрагмент кода, чтобы найти наиболее часто встречающийся элемент в массиве. Это не так уж и много кода, и VS Code уже выделяет две связанные скобки, когда мы останавливаемся на этой строке и столбце:
Это очень полезно, но что, если нам нужны дополнительные подсказки относительно того, какие скобки были соединены с другими скобками в нашей программе? Мы можем сделать это с помощью Colorizer Pair Colorizer. Реализуя этот инструмент, мы получаем гораздо лучшее представление о том, какие скобки сочетаются с какими, как можно продемонстрировать ниже:
Я думаю, мы можем согласиться с тем, что этот второй фрагмент кода выделяется немного больше, чем предыдущий пример. Обратите внимание, что Colorizer пара скобок также рисует иллюстративную линию от одной скобки к ее партнеру. Хотя это полезно, что мне действительно нравится в Colorizer для пар скобок, так это то, что он будет расти вместе с вашими программами, сопоставляя все более глубоко вложенные скобки в зависимости от кода, который вы пишете:
Colorizer пара скобок даже выделит, когда «осиротевшая» скобка пробирается в вашу программу!
Как видите, Bracket Pair Colorizer может быть чрезвычайно полезен в ваших программах и легко настраивается. Это еще один из тех инструментов, без которых я действительно не могу работать!
Этот список ни в коем случае не является исчерпывающим, поскольку существует больше расширений VS Code, чем, вероятно, полезно. Как и в случае с любым другим инструментом, мой совет при работе с новым расширением - сосредоточиться на постепенной интеграции его в свой рабочий процесс. Полагайтесь на него постепенно, и вы будете привлекать представителей для более эффективного использования этого инструмента. Через несколько недель написания кода с этим новым расширением он начнет казаться вашей второй натурой и просто станет естественной частью вашего рабочего процесса.
Что еще более важно, не полагайтесь только на этот блог при настройке расширения. Самая лучшая часть работы с расширениями - это возможность комбинировать и подбирать инструменты в соответствии с вашими потребностями. Чтобы по-настоящему поразить метафору инструментов, представьте, что вы можете настроить свой молоток в реальном времени, возможно, так, чтобы он лучше подходил вашей руке или регулировал его кривизну в зависимости от того, как вы им размахиваете, или, может быть, вы просто предпочитаете ручку с барвинком красной. Использование расширений VS Code - это такой же нестандартный молоток, который дает вам возможность обновлять инструменты по своему усмотрению. Надеюсь, это дало вам некоторое представление о том, как лучше работать с VS Code.
