Как настроить Mac для веб-разработки

Содержание статьи

Хотя вы можете создавать базовые веб-сайты только с помощью текстового редактора и браузера, вы можете расширить свою игру, добавив в свой рабочий процесс фреймворк JavaScript, например React или Vue, и полезные инструменты, такие как Git.

Но подождите! Ваш Mac не готов. Прежде чем погрузиться, вам нужно будет установить несколько элементов, которые избавят вас от непонятных ошибок позже. ?

Эта статья проведет вас через минимальные настройки, которые вам понадобятся, чтобы запустить веб-разработку на основе JavaScript на Mac.

Пойдем!

Обновите свой Mac

Прежде чем устанавливать любое новое программное обеспечение, следуйте инструкциям от Apple, чтобы обновить macOS и текущее программное обеспечение до последней версии.

Выберите терминальную программу

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

Хорошими вариантами являются любой из следующих вариантов:

Если вы не уверены, какой из них выбрать, выберите Hyper.

Инструменты разработчика командной строки

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

Чтобы проверить, установлены ли инструменты, введите следующую команду в программе терминала и нажмите возврат:

xcode-select --version

Если результат не является номером версии, установите инструменты с помощью этой команды:

xcode-select --install

Появится диалоговое окно с вопросом, хотите ли установить инструменты. Нажмите Установить и пакет загрузится и установится самостоятельно.

Когда установка закончится, подтвердите, что инструменты установлены, повторно запустив первую команду:

xcode-select --version

Теперь в результате должен быть номер версии.

Домашний

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

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

Сначала проверьте, установлен ли уже Homebrew:

brew --version

Если вы не видите номер версии, установите Homebrew с помощью этой команды:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Я обещаю, что это самая странная команда, которую вы увидите в этой статье! ? Благодаря Homebrew все остальное просто.

Прежде чем двигаться дальше, убедитесь, что Homebrew сейчас установлен:

brew --version

Узел и npm

Node.js – это инструмент, позволяющий вашему Mac запускать код JavaScript вне веб-браузера. Если вы хотите запустить на своем Mac фреймворк JavaScript, например React или Vue, вам нужно установить Node.

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

Сначала проверьте, установлен ли уже Node:

node --version

Если нет, установите его с помощью Homebrew:

brew install node

Наконец, подтвердите, что Node и npm теперь установлены:

node --version

npm --version

Контроль версий с помощью Git

Git — это инструмент, который помогает отслеживать изменения в вашем коде и работать с другими разработчиками совместных проектов.

Использование Git в каждом проекте – отличная привычка для развития и подготовит вас к будущим проектам, где Git может пригодиться. Некоторые инструменты (например, GatsbyJS) также зависят от установки Git на вашем Mac, поэтому он вам понадобится даже если вы не планируете добавлять его в свой рабочий процесс.

Еще раз начните с проверки, установлен ли Git:

git --version

Если нет, установите его:

brew install git

И подтвердите, что установка сработала:

git --version

Время от времени выполняйте такую команду, и все, что вы установили с помощью Homebrew, обновится автоматически:

brew update && brew upgrade && brew cleanup && brew doctor

Эта одна команда – это все, что вам нужно, чтобы поддерживать вашу систему в актуальном состоянии. ?

Обычно я запускаю его, когда начинаю новый проект, но не стесняйтесь делать это, когда вам вздумается. (Если вы запустите эту команду, если Homebrew предлагает дополнительные команды для запуска, выполните их. Если команда начинается с sudo и вам будет предложено ввести пароль, используйте пароль администратора вашего Mac.)

Вот и все для командной строчки!

Редактор кода

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

Хорошими вариантами являются любой из следующих вариантов:

Если вы только начинаете работу, выберите Visual Studio Code.

браузер

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

Любой из следующих вариантов хорош:

Если вы только начинаете работу, выберите Chrome.

Finder

Краткий совет: вы хотите показать файлы, которые ваш Mac скрывает по умолчанию. (Например, файлы git автоматически скрываются, но иногда вам нужно их редактировать.)

Самый простой способ показать скрытые файлы вашего Mac – это комбинация клавиш ⌘⇧. (Command+Shift+точка). Это позволит попеременно отображать и скрывать эти файлы, чтобы вы могли получить к ним доступ, когда они вам понадобятся.

Вывод

Все готово! ?

Это все, что вам нужно, чтобы начать разработку интерфейса на основе JavaScript на Mac.

Чтобы избежать путаницы, я пропустил все элементы, которые не строго обязательны. Если вы хотите погрузиться в дополнительные способы дополнительной настройки Mac для веб-разработки, просмотрите ссылку ниже.