Обзор кода Visual Studio для разработчиков интерфейса

obzor koda visual studio dlya razrabotchikov interfejsa

автор Винь Ле

Независимо от того, новичок вы в коде или опытный разработчик, редактор кода является обязательной частью вашей работы. Проблема, особенно если вы новичок, в том, что существует множество вариантов для IDE. И многие из них имеют схожие функции, функции и даже пользовательский интерфейс. В результате выбор правильной IDE может занять больше времени и усилий, чем вы думали.

Если ваш вопрос сейчас таков: «с какого редактора кода мне начать?» тогда я отвечал бы: «Зависит, друг». Выбор конкретной IDE в значительной степени зависит от нескольких факторов: какой тип разработчика, с какими средами вы преимущественно работаете или есть ли у вас эксклюзивная встроенная функция, которая вам абсолютно нужна для выполнения работы.

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

Как и большинство новичков, я начал с Notepad++ как своего первого редактора кода. Это, пожалуй, одна из самых простых IDE, которую я пробовал. Позже, когда мои потребности потребовали более расширенной функциональности от редактора, я попробовал Brackets, Atom, а затем Visual Studio Code.

После порядочного количества экспериментов VSCode стал моим любимым. Он поразил меня своим современным пользовательским интерфейсом, широкой доступностью расширений, а также великолепными функциями, такими как встроенный Git и терминал.

Основная цель этого блога – не сравнивать разные IDE, а обсуждать мой опыт работы с VSCode. Поэтому в этой публикации я буду:

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

Давайте разберемся!

Visual Studio Code (VSCode) — редактор исходного кода, разработанный Microsoft, который можно запускать в Windows, macOS и Linux. Он бесплатный, с открытым исходным кодом и обеспечивает поддержку отладки, а также встроенный контроль версий Git, выделение синтаксиса, фрагменты и т.д. Интерфейс VSCode легко настраивается, поскольку пользователи могут переключаться на разные темы, комбинации клавиш и настройки.

Первоначально VSCode был анонсирован в 2015 году как проект с открытым кодом, размещенный на GitHub, а затем был выпущен в Интернет через год. С тех пор редактор кода Microsoft набирает популярность среди разработчиков.

В опросе разработчиков Stack Overflow 2018 VSCode была признана самой популярной средой разработки: около 35% из более чем 100 000 респондентов сказали, что они его используют. Что более ошеломляюще, эта цифра составляет около 39% в сфере веб-разработки.

А благодаря ежемесячным обновлениям пользователи могут рассчитывать на еще лучший опыт – исправление ошибок, стабильность и повышение производительности часто выдвигаются.

Если вы похожи на меня, и вам важна тема вашей IDE, очень важно найти подходящий шрифт и цвет темы. Я лично предпочитаю темную тему и ненавижу шрифт Consolas по умолчанию VSCode в Windows.

Итак, Монокай цветовая тема и FiraCode шрифт – это мой текущий выбор. Это сочетание обеспечивает высокий контраст, с которым мне очень приятно работать.

0_3Hbizu5ONhDrQSzw
  • Чтобы задать тему, нажмите значок Настройки => Цветовая тема => Выберите тему, которая вам нравится
  • Найдите инструкцию по установке FiraCode здесь.
  • Вы также можете проверить OneDarkProЕще одна замечательная темная тема: в расширениях (Ctrl + Shift + X в Windows) найдите OneDarkPro, нажмите «Установить» и выберите ее в теме «Цвет».

Вот некоторые из моих любимых расширений:

  • Украсить: улучшите код и сделайте его более читабельным
  • Колоризатор пар кронштейнов: позволяет идентифицировать соответствующие скобки цветами
0_vD9MA7SB6_wysUbt
Цвета ( и { разделены, не правда ли?
  • ESLint: обязательное расширение для разработчиков React или JavaScript в целом. ESLint используется для поиска проблем и опечаток в вашем коде и позволяет обозначить эту ошибку. Он также предлагает решение.
0_XhWMwqhcdl4k3L5M
  • Фрагменты HTML: добавить расширенную поддержку языков для разметки HTML, например, теги автоматического закрытия.
  • Фрагмент кода JavaScript (ES6).: достаточно понятно
  • Живой сервер: запустите локальный сервер с функциями перезагрузки в реальном времени для вашего сайта HTML или PHP
  • Расширенный предварительный просмотр Markdown: запустите живой сервер для вашего расценочного файла.
  • Тема значка материала: дает значки на основе Material Design Google. Для включения нажмите Параметры => Тема значка файла => Выберите тему значка материала
  • Красивее: отлично отформатируйте код JavaScript/TypeScript/CSS.
0_IrMw_PwCRvt0ub5x

Вы можете настроить почти все от семейства шрифтов и размера шрифта вашего кода до высоты строки с помощью:

  • Собираться Настройки пользователя (Ctrl+,)
  • Поиск ключевых слов, связанных с желаемыми настройками
  • Нажмите кнопку «Редактировать» в левой части настроек и выберите «Заменить» в настройках
  • Изменение настройки, которую вы только что выбрали.

В моих текущих настройках я установил fontSize на 14, lineHeight на 22 и tabSize на 3 для моих личных предпочтений (и для хорошей читабельности).

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

Интегрированные терминалы

Неизбежно, что чем больше времени вы занимаетесь разработкой программного обеспечения, тем важнее становится терминал. В качестве разработчика JavaScript я использую терминал для установки пакетов, запуска сервера разработки или даже отправки изменений в моем текущем репозитории на GitHub.

Сначала я в основном занимался этими задачами с помощью командной строки Windows или Git Bash позже. Если вы используете Windows, то возможно знаете, насколько тупой и раздражительной может быть CMD. Git Bash – это хороший инструмент, но переключение между приложениями во время работы – не очень приятный опыт.

VSCode действительно решает эту проблему для меня своим фантастическим терминалом. И самое интересное, что вы можете легко настроить его так, чтобы он работал так же, как Git Bash, но прямо внутри VSCode! Тогда у вас получится отличное сочетание.

Для доступа к терминалу VSCode используйте Ctrl+` (левая часть клавиши 1). Затем появится терминал.

0_f7fzEsGoAAWe3bpq

Отсюда вы можете делать множество интересных вещей, например создать новый терминал или убить существующий. Вы также можете просматривать их как раздельно, так и сбоку.

0_rKqG80RkVDPiiu0Z
Это круто иметь несколько терминалов, встроенных прямо в вашем редакторе кода, не правда ли?

Контроль источника (Git)

0_wuw9PVTrCZAvURR6

Когда вы работаете над хранилищем и постоянно нуждаетесь в внесении изменений, вы обычно находите терминал для фиксации последних изменений, не правда ли? Ну, VSCode предоставляет вам отличный встроенный инструмент для контроля ваших версий.

Нажав значок Git, расположенный на левой панели, или с помощью Ctrl+Shift+G (Windows), вы получите легкий доступ к управлению источниками. Здесь вы можете делать все вещи Git. Так удобно, не правда ли?

После приличного количества времени работы с VSCode я твердо верю, что его ключевое значение основано на его среде «все в одном». Все мои потребности и задачи в моем рабочем процессе как Front-end разработчика решаются хорошо и безупречно.

Чтобы сделать эти преимущества более понятными, разрешите мне провести вас через обычный рабочий процесс.

0_z6IPS9tRac4GW_vc

Скажем, у меня есть некоторые идеи, работающие над новым приложением Music, созданным React. Обычно я начинаю проект, создавая пустую папку, поэтому я создаю новую папку с именем music_react. После этого я могу сразу открыть проект VSCode, выбрав параметр правой кнопкой мыши.

Как только я нахожусь в рабочем проекте, я могу быстро создать файл и папки с помощью ярлыков на левой панели.

В этом проекте я хочу использовать create-react-app инициализация. Поэтому мне может понадобиться установить этот пакет – не большая проблема. Я открываю свой терминал, набирая Ctrl+`. Удивительно, терминал автоматически переходит в мой точный каталог. Больше не нужно изменять каталоги.

После ввода командной строки для установки пакета npm все, что мне нужно сделать, это подождать, пока не будут установлены все зависимости.

0_lNgIoaLH8JzJAkL1
0_0TqpJnj1afgKVW18

Я тоже хочу опубликовать свой проект на GitHub, поэтому мне, вероятно, следует сначала инициализировать репозиторий Git. После установки пакетов я ввожу команду инициализации Git прямо в своем терминале.

0_MmZy6cvYDSU76GMf

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

Тогда я могу продолжать работу над своим проектом в обычном режиме. Кроме того, я могу внести все изменения в GitHub из своего терминала, если я хочу.

Это мой обычный рабочий процесс в среде VSCode. Я понимаю, что это существенно зависит от того, какой тип разработчика вы. У серверного разработчика может быть совсем другой рабочий процесс, чем у меня.

Однако если вы разработчик интерфейса, который только знакомится с VSCode, и вы хотите проверить его, прежде чем приступить к нему, я надеюсь, что эта статья даст вам понимание и поможет повысить вашу производительность. В конце концов, мое величайшее вдохновение написать эту небольшую инструкцию — это то, что я не мог найти ни одного тщательного обзора VSCode для новичков. В результате, надеемся, этот блог может принести вам определенную ценность.

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

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

Ваш адрес email не будет опубликован.