📘 Установка и настройка Visual Studio Code для веб-разработки на Windows

1. 🛠 Скачивание и установка Visual Studio Code

  1. Перейдите на официальный сайт Visual Studio Code.
  2. Нажмите на кнопку Download for Windows.
  3. Откройте загруженный установочный файл и следуйте инструкциям на экране:
    • Примите условия лицензии.
    • Выберите папку для установки.
    • Опционально: добавьте VS Code в контекстное меню Windows (рекомендуется).
    • Нажмите Установить.
  4. После установки запустите VS Code.

VS Code

2. 🧩 Установка рекомендуемых расширений

Чтобы сделать работу с VS Code еще более удобной для веб-разработки, рекомендуется установить следующие расширения (не обязательно, но сделает вашу жизнь проще, попробуйте):

2.1. 🛤 Path Intellisense

Это расширение от Christian Kohler автоматически подсказывает пути к файлам и папкам при их написании в вашем коде. Например, при написании пути к изображению оно предложит автозаполнение на основе структуры вашего проекта.

2.2. 🌐 Live Server

Live Server запускает локальный сервер прямо из вашего проекта и автоматически обновляет браузер при изменении файлов HTML, CSS или JavaScript. Это крайне удобно для быстрого тестирования и просмотра изменений в реальном времени.

2.3. 🎨 Catppuccin Theme

Catppuccin — приятная тема, созданная для разработчиков, c приятной палитру цветов, которая снижает нагрузку на глаза и помогает сосредоточиться на работе.

2.4. 🖼 Catppuccin Perfect Icons

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

Список расширений не окончательный, вы всегда можете сами зайти в магазин расширений и установить то, которое сделает вашу работу быстрее и удобнее. Например, className Completion in CSS, formate: CSS/LESS/SCSS formatter и т.д.

3. 🖥 Настройка среды разработки

3.1. ⚙ Настройка Live Server

После установки Live Server:

  1. Откройте ваш HTML файл.
  2. Кликните правой кнопкой мыши по файлу и выберите опцию Open with Live Server.
  3. Ваш браузер автоматически откроется с локальной версией проекта. Все изменения в файлах будут моментально отображаться.

3.2. 🔄 Настройка автосохранения

Чтобы не терять изменения, активируйте функцию автосохранения:

  1. Откройте Settings (Ctrl + ,).
  2. В поле поиска введите Auto Save.
  3. Выберите опцию After Delay или On Window Change для автоматического сохранения файлов.

4. 🎨 Персонализация интерфейса

  • После установки Catppuccin Theme перейдите в Settings и выберите тему Catppuccin в разделе Color Theme.
  • В разделе иконок выберите стиль иконок Catppuccin Perfect Icons.

5. 📦 Создание первого веб-проекта

Теперь, когда ваша среда настроена, создайте новый проект:

  1. Создайте папку на вашем компьютере и откройте ее в VS Code.
  2. Создайте файл index.html и напишите следующий базовый код:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Мой первый проект</title>
</head>
<body>
    <h1>Привет, мир!</h1>
</body>
</html>
  1. Запустите Live Server и откройте проект в браузере.

🎯 Полезные советы

  • Используйте сочетание клавиш Ctrl + P для быстрого поиска и открытия файлов.
  • Для того, чтобы быстро закомментировать и раскомментировать строчку используйте сочетание клавиш Ctrl + /.
  • Для глобального поиска текста во всех файлах проекта сразу можно использовать комбинацию Ctrl + Shift + F.
  • Установите дополнительные плагины для поддержки Emmet и работы с Git.
  • Регулярно обновляйте расширения для получения новых функций и исправлений.