Независимо от того, являетесь ли вы новичком в коде или опытным разработчиком, редактор кода является обязательной частью вашей работы. Проблема, особенно если вы новичок, в том, что существует множество вариантов для IDE. И многие из них имеют схожие функции, функции и даже пользовательский интерфейс. В результате выбор правильной IDE может занять больше времени и усилий, чем вы думали.
Если прямо сейчас ваш вопрос: «С какого редактора кода мне начать?» тогда я отвечал: «Это зависит от обстоятельств, друг мой». Выбор конкретной IDE в значительной степени зависит от нескольких факторов: какой вы тип разработчика, с какими средами вы в основном работаете или есть ли у вас эксклюзивная встроенная функция, которая вам абсолютно необходима для выполнения работы.
Я бы сказал, что способ выбрать один - это попробовать изучить их все, а затем выбрать то, что вам больше всего подходит.
Выбор подходящего для вас редактора кода
Как и большинство новичков, я начал с Notepad ++ в качестве первого редактора кода. Это, пожалуй, одна из самых простых IDE, которые я пробовал. Позже, когда мои потребности начали требовать от редактора более продвинутых функций, я попробовал Brackets, Atom, а затем Visual Studio Code.
После приличного количества экспериментов VSCode стал моим фаворитом. Он впечатлил меня своим современным пользовательским интерфейсом, широкой доступностью расширений, а также замечательными функциями, такими как встроенный Git и терминал.
Основная цель этого блога - не сравнивать разные IDE, а обсудить мой опыт работы с VSCode. Итак, в этом посте я буду:
- показать краткое введение в 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.
Итак, я выбрал цветовую тему Monokai и шрифт FiraCode. Эта комбинация дает высокий контраст, с которым мне очень приятно работать.
- Чтобы установить тему, щелкните значок «Настройка» = ›Цветовая тема =› Выберите понравившуюся тему.
- Инструкцию по установке FiraCode можно найти здесь.
- Вы также можете попробовать OneDarkPro, еще одну замечательную темную тему: в расширениях (Ctrl + Shift + X в Windows) найдите OneDarkPro, нажмите «Установить» и выберите его в цветовой теме.
Полезные расширения (Extensions = ›Search =› Install)
Вот некоторые из моих любимых расширений:
- Украсить: украсить код на месте и сделать его более читабельным.
- Colorizer Pair Colorizer: позволяет идентифицировать совпадающие скобки по цвету.
- ESLint: обязательное расширение для разработчиков React или JavaScript в целом. ESLint используется для поиска проблем и опечаток в вашем коде и позволяет вам отметить эту опечатку. Он также предлагает решения.
- Фрагменты HTML: добавьте поддержку расширенного языка для разметки HTML, например тегов автоматического закрытия.
- Фрагменты кода JavaScript (ES6): говорят сами за себя
- Живой сервер: запустите локальный сервер с функциями перезагрузки в реальном времени для вашего сайта HTML или PHP.
- Markdown Preview Enhanced: запустите рабочий сервер для вашего файла уценки.
- Тема значков материалов: значки на основе дизайна материалов Google. Для активации нажмите Настройка = ›Тема значка файла =› Выбрать тему значка материала.
- Красивее: красиво отформатируйте код JavaScript / TypeScript / CSS.
Настройте свой пользовательский интерфейс
Вы можете настроить практически все, от семейства шрифтов и размера шрифта вашего кода до высоты строки, с помощью:
- Переход в Настройки пользователя (Ctrl +,)
- Поиск ключевых слов, связанных с желаемой настройкой
- Нажмите кнопку «Изменить» в левой части настроек и выберите «Заменить» в настройках.
- Изменение значения только что выбранной вами настройки.
В моей текущей настройке я установил fontSize на 14, lineHeight на 22 и tabSize на 3 для моих личных предпочтений (и для хорошей читаемости).
То, что я хотел бы знать с самого начала
Помимо этих тем и расширений, я хотел бы поделиться с вами тем, как я использую замечательные функции VSCode для повышения производительности. Это все, чего я не знал как новичок, и это было бы очень полезно для использования и облегчения моего рабочего процесса.
Интегрированные терминалы
Совершенно неизбежно, что чем больше времени вы уделяете разработке программного обеспечения, тем важнее становится Терминал. Как разработчик JavaScript, я использую Терминал для установки пакетов, запуска сервера разработки или даже для отправки изменений в моем текущем репозитории на GitHub.
Вначале я в основном выполнял эти задачи с помощью командной строки Windows или Git Bash позже. Если вы используете Windows, то, возможно, знаете, насколько глупым и раздражающим может быть CMD. Git Bash - хороший инструмент, но переключение между приложениями во время работы - не самое приятное занятие.
VSCode действительно решает эту проблему с помощью своего фантастического терминала. И что самое интересное, вы можете легко настроить его для работы так же, как Git Bash, но прямо внутри VSCode! Тогда у вас будет потрясающая комбинация.
Чтобы получить доступ к терминалу VSCode, используйте Ctrl + `(левая часть вашей клавиши 1). Затем появится Терминал.
Отсюда вы можете делать массу интересных вещей, например, создать новый терминал или убить существующий. Вы также можете просматривать их как в режиме разделения, так и сбоку.
Контроль версий (Git)
Когда вы работаете с репозиторием и постоянно должны вносить изменения, вы обычно найдете терминал для фиксации последних изменений, не так ли? Что ж, VSCode дает вам отличный встроенный инструмент для управления вашими версиями.
Щелкнув значок Git, расположенный на левой панели, или нажав Ctrl + Shift + G (Windows), вы получите легкий доступ к Source Control. Здесь вы можете делать все, что связано с Git. Так удобно, не правда ли?
Как все эти вещи улучшают мой рабочий процесс и как они могут улучшить и ваш?
После приличного количества времени работы с VSCode я твердо уверен, что его ключевое значение основано на его универсальной среде. Все мои потребности и задачи в рамках моего рабочего процесса в качестве Front-end разработчика выполнены красиво и безупречно.
Чтобы прояснить эти преимущества, позвольте мне рассказать вам о моем обычном рабочем процессе.
Допустим, у меня возникли идеи, работая над новым музыкальным приложением, созданным React. Обычно я начинаю проект с создания пустой папки, поэтому я создаю новую папку с именем music_react. После этого я могу сразу же открыть проект в VSCode, выбрав опцию щелчка правой кнопкой мыши.
Оказавшись в своем рабочем проекте, я могу быстро создать файл и папки с помощью ярлыков на левой панели.
В этом проекте я хочу использовать инициализацию create-response-app. Поэтому мне может потребоваться установить этот пакет - не беда. Я открываю свой терминал, набирая Ctrl + `. Удивительно, но терминал автоматически переходит в мой точный каталог. Больше нет необходимости менять каталоги.
После ввода в командной строке для установки пакета npm все, что мне нужно сделать, это дождаться установки всех зависимостей.
Я также хочу опубликовать свой проект на GitHub, поэтому мне, вероятно, сначала следует инициализировать репозиторий Git. После установки пакетов я также набираю команду инициализации Git прямо в своем терминале.
После успешной установки Git я могу зафиксировать все ожидающие изменения прямо в Source Control на левой панели.
Затем я могу продолжить работу над своим проектом в обычном режиме. Кроме того, я могу отправить все изменения в GitHub со своего терминала, если захочу.
Подведение итогов
Так что это мой обычный рабочий процесс в среде VSCode. Я понимаю, что это существенно зависит от вашего типа разработчика. У back-end разработчика может быть совершенно другой рабочий процесс по сравнению с моим.
Однако, если вы фронтенд-разработчик, который только знакомится с VSCode, и хотите проверить его перед тем, как приступить к работе, я надеюсь, что эта статья даст вам понимание и поможет повысить вашу продуктивность. В конце концов, мое самое большое вдохновение для написания этого небольшого руководства связано с тем, что я действительно не смог найти какой-либо подробный обзор VSCode для новичков. В результате, мы надеемся, что этот блог принесет вам некоторую пользу.
Наконец, если ваша настройка отличается от моей или есть отличные расширения, которые, по вашему мнению, неплохо иметь, не стесняйтесь делиться в комментариях. Я очень рад услышать от вас!
