Если вы разработчик или программист, вероятно, всегда ищете новые инструменты, чтобы оптимизировать свой рабочий процесс. И повезло вам, одним из лучших редакторов кода, которые вы можете найти, является Visual Studio Code на Mac.
Visual Studio Code (VS Code) предлагает множество функций, которые помогут вам писать код более эффективно. И в этой статье вы узнаете, как установить VS Code на свой Mac и ознакомитесь с некоторыми из лучших расширений и тем, чтобы начать работу.
Читайте далее и готовьтесь к повышению эффективности вашего рабочего процесса!
Предварительные требования
Этот учебник будет практической демонстрацией. Если вы хотите следовать за нами, убедитесь, что у вас есть устройство с macOS. В этом учебнике используется Apple Silicon (M1), поэтому шаги могут немного отличаться, если у вас Mac на основе Intel.
Загрузка Visual Studio Code для Mac
Visual Studio Code (VS Code) – это бесплатный редактор кода с открытым исходным кодом от Microsoft, доступный для Windows, Linux и macOS. Но, как и другие инструменты, вам нужно скачать и установить VS Code на вашей системе.
1. Откройте свой любимый веб-браузер и перейдите на страницу загрузки VS Code.
2. Затем нажмите на Apple Silicon под значком Mac, чтобы загрузить установщик пакета VS Code для Mac в ZIP-файле. Эта версия Apple Silicon (M1) – последний чип, разработанный Apple.
Если у вас старый Mac с процессором Intel, щелкните вместо этого Intel Chip.
3. Наконец, откройте ваш терминал и выполните следующую команду ls, чтобы проверить загрузчик пакетов VS Code, который вы скачали.
Ниже приведен вывод, показывающий местоположение zip-файла.
Установка Visual Studio Code на Mac
Теперь, когда у вас есть загрузчик VS Code, вы готовы установить VS Code на свой Mac и испытать переопределенный редактор кода. VS Code оптимизирован таким образом, чтобы вы могли эффективнее создавать и отлаживать современные веб- и облачные приложения.
Еще одной замечательной функцией VS Code является то, что он поддерживает множество языков программирования благодаря использованию расширений, которые вы можете найти на рынке.
Чтобы установить VS Code на Mac:
1. Выберите скачанный zip-файл VS Code → щелкните значок многоточия (вверху справа) → Открыть, чтобы разархивировать ZIP-файл.
После разархивирования у вас должно появиться новое приложение Visual Studio Code в папке Загрузки.
2. Затем выполните команду ls ниже, чтобы проверить файл приложения. Эта команда перечисляет содержимое файла приложения Visual Studio Code.
Символ \ – это символ экранирования, который указывает терминалу обрабатывать пробел как обычный символ. Вы должны использовать символ экранирования, когда в имени файла есть пробел.
3. Выполните команду open ниже, чтобы запустить установщик в новом экземпляре (-n).
4. Теперь нажмите “Открыть”, чтобы продолжить установку, когда появится запрос.
Это предупреждение появляется, потому что вы загрузили приложение из Интернета, что вы можете игнорировать.
После установки приложение VS Code открывается, и вас встречает страница “Начало работы” ниже.
Навигация по графическому интерфейсу VS Code
Вы успешно установили VS Code на свой Mac, но прежде чем приступить к кодированию, ознакомьтесь с графическим интерфейсом и функциями VS Code.
VS Code поставляется с множеством функций, позволяющих вам:
- Выбирать темы и изменять внешний вид вашего редактора.
- Открывать папку проекта, чтобы быстро перемещаться по вашим файлам и удостоверяться, что структура файла корректна.
- Добавлять систему управления версиями, такую как Git.
- Быстро добавляйте расширения из маркетплейса и так далее.
Это всего лишь небольшая часть того, что может предложить VS Code. Убедитесь сами, как каждая функция помогает вам в вашем рабочем процессе. Возможно, изменение темы станет хорошим началом.
1. Выберите тему для вашего редактора на странице “Начало работы”, оставьте остальные настройки по умолчанию и нажмите “Готово” (в левом нижнем углу).
Если светлые и темные темы вам не нравятся, нажмите “Просмотреть еще темы” и найдите ту, которая вас заинтересует.
2. Затем изучите самую левую часть VS Code, Панель активности , которая имеет семь основных разделов. Начнем с одного из самых важных разделов, ПРОСМОТР (Ctrl+Shift+E / Cmd+Shift+E).
Проводник показывает файлы и папки в вашем проекте, где вы можете клонировать репозиторий. Кроме того, проводник позволяет выполнять различные действия следующим образом:
- Создавайте, удаляйте и переименовывайте файлы и папки в вашем проекте.
- Перемещайте файлы и папки, перетаскивая их внутри папки вашего проекта.
Обратите внимание, что функция “перетаскивания” работает, когда перемещаются файлы в Проводник извне VS Code. Но если проводник пуст, VS Code открывает файл в вашем редакторе вместо этого.
3. Нажмите на значок поиска (Ctrl+Shift+F / Cmd+Shift+F), который открывает раздел ПОИСК, где вы можете искать файлы, символы и текст в своем проекте.
4. Теперь нажмите на значок управления исходным кодом (Ctrl+Shift+G / Cmd+Shift+G), чтобы открыть раздел УПРАВЛЕНИЕ ИСХОДНЫМ КОДОМ, где вы можете управлять своим проектом с помощью Git или другой системы контроля версий.
VS Code поставляется с встроенным управлением контролем версий (SCM) с поддержкой Git включенной по умолчанию.
5. После SCM нажмите на значок Запуск и отладка (Ctrl+Shift+D / Cmd+Shift+D), который открывает раздел ЗАПУСК И ОТЛАДКА: ЗАПУСК, где вы можете запускать и отлаживать свой проект.
6. Наконец, нажмите на значок Расширения (Ctrl+Shift+X / Cmd+Shift+X), чтобы получить доступ к разделу РАСШИРЕНИЯ, где вы можете устанавливать расширения из магазина.
Запуск VS Code через среду командной строки
Возможно, вы проводите большую часть времени в среде командной строки, но вам нужно быстро написать некоторый код. Если это так, настройка VS Code для запуска через среду командной строки будет вам полезна.
1. Нажмите (Cmd+Shift+P или Ctrl+Shift+P) в VS Code, чтобы открыть палитру команд, где вы можете получить доступ ко всей функциональности VS Code.
2. Введите команду оболочки: Установить ‘code’ в переменной PATH в палитре команд и нажмите Enter. Эта команда добавляет исполняемый файл VS Code в переменную PATH вашей системы.
3. После добавления перезапустите ваш терминал, чтобы изменения вступили в силу. Теперь команда code доступна в вашем терминале.
4. Теперь создайте текстовый файл, добавьте некоторый текст, сохраните и закройте файл.
5. Наконец, выполните следующие команды для запуска VS Code (code), передав путь к файлу вашего текста (text.txt), в данном случае, из рабочего каталога.
Вы увидите, что VS Code (справа) откроется с содержимым вашего text.txt файла, отображенным в редакторском окне. Теперь вы можете редактировать этот файл, используя отличные возможности VS Code.
Установка расширений для добавления функциональности
Одна из лучших вещей в VS Code заключается в том, что он очень настраиваем. Как? Вы можете устанавливать расширения, чтобы добавлять новые функции, и доступно множество различных расширений.
Возможно, вы хотите установить расширение macOS Color Picker. Это расширение позволяет выбирать стандартные цветовые пиксели macOS при работе с файлами CSS, HTML и JavaScript.
1. Перейдите в меню Extensions в панели Activity Bar, которое имеет три раздела:
- УСТАНОВЛЕННЫЕ – Этот раздел показывает уже установленные расширения.
- РЕКОМЕНДУЕТСЯ – В этом разделе показаны рекомендованные расширения, основанные на типе вашего открытого файла. Например, вы увидите рекомендованные расширения JavaScript, если работаете с файлом JavaScript.
- ПОПУЛЯРНЫЕ – В этом разделе показаны наиболее популярные расширения для VS Code.
2. Введите “macOS Color Picker” в строку поиска и нажмите Enter. Будет отображен список соответствующих расширений в порядке убывания (сначала наиболее подходящие расширения).
Как только вы увидите нужное расширение, нажмите кнопку “Установить” рядом с ним. Кнопка “Установить” изменится на зеленую кнопку “Включить”, так что нажмите на нее, чтобы включить расширение.
После установки расширения на правой стороне появится страница обзора для этого расширения, как показано ниже.
3. Теперь откройте файл CSS, HTML или JavaScript, чтобы протестировать новое расширение macOS Color Picker.
4. Наконец, откройте палитру команд (Cmd+Shift+P / Ctrl+Shift+P), введите “Open Color Picker” и нажмите Enter. Откроется панель macOS Color Picker, как показано ниже.
Используйте цветовую палитру для выбора цвета, который будет вставлен в ваш код. Это отличный способ быстро получить необходимые значения цвета, не запоминая шестнадцатеричные коды.
Заключение
В этом уроке вы узнали, как установить VS Code на свой Mac и добавить расширения для расширения функциональности, делая написание кода более приятным. На этом этапе вы можете полностью воспользоваться тем, что предлагает VS Code, работая над вашим следующим проектом.
Но не останавливайтесь здесь! С этим новым знанием, почему бы не использовать систему контроля версий с Git и GitHub для отслеживания своей работы?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/