VS Code - Начало работы

Содержание:

  1. Создание папки проекта
  2. Создание HTML-файла
  3. Создание и подключение файла стилей CSS
  4. Просмотр результатов в веб-браузере
  5. Автозаполнение Emmet

  1. Создание папки проекта

    • Создайте новую папку для вашего проекта в удобном для вас месте на компьютере.
    • Откройте VS Code.
    • Откройте созданную папку в VS Code:
      • Выберите "File" (Файл, см. поз.1 на рис.) > "Open Folder" (Открыть папку, см. поз.2 на рис.).

        Выбор созданной на компьютере папки проекта

      • Выберите нужную папку и нажмите “Открыть”. (см. поз.3 на рис.)

        Выбор созданной на компьютере папки проекта

      • В появившемся окне поставьте галочку “Доверять авторам всех файлов в родительской папке …” (см. поз.4 на рис.).
      • Нажмите кнопку “Да, я доверяю авторам” (см. поз.5 на рис.).

        Окно

  2. Создание HTML-файла

    • В папке проекта создайте новый файл (см. поз.1 на рис.) с расширением .html, например, index.html (см. поз.2 на рис.).

      Пошаговое создание HTML-документа в VS Code

    • Вставьте следующий код в файл (см. поз.3 на рис.): 

      <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My Website</title>
        </head>
        <body>
            <h1>Hello, World!</h1>
        </body>
</html>

    • Сохраните изменения в файлах (нажмите ctrl+s).

  3. Создание и подключение файла стилей CSS

    • В той же папке проекта создайте новую директорию с названием “CSS” (см. поз.1 и 2 на рис.), а в ней новый файл с расширением .css, например, styles.css (см. поз.3 и 4 на рис.). Далее добавим каких-то стилей, например, как показано на рисунке (см. поз.5 на рис.).

      Пошаговое создание файла стилей CSS в VS Code

    • Подключаем наш файл стилей к созданному ранее файлу index.html (см. поз.1 на рис.). Открываем наш html-документ и в разделе <head> (см. поз.2 на рис.) добавляем следующую строку (см. поз.3 на рис.): 

                              <link rel="stylesheet" href="./css/styles.css">

      Подключение файла стилей CSS к нашему HTML-документу

    • Сохраните изменения в файлах (нажмите ctrl+s).

  4. Просмотр результатов в веб-браузере

    Открываем файл наш index.html. Щелкните правой кнопкой мыши на поле редактирования кода и выберите "Open with Live Server" (Открыть с помощью Live Server) (см. рис.).

    Запуск просмотра результатов работы в браузере

    Теперь вы можете видеть результат вашей работы в браузере. Внесите изменения в HTML и CSS файлы, сохраните их, и результат будет автоматически обновляться в браузере благодаря Live Server (см. рис.).

    Результаты работы отображенные в браузере

  5. Автозаполнение Emmet

    Emmet - это мощный инструмент для ускорения написания HTML и CSS кода. Он позволяет вам создавать структуру HTML и стили CSS с помощью коротких аббревиатур.

    • HTML сокращения:
      • html:5 - Создает структуру HTML5 документа.
      • ! - Создает базовую структуру HTML документа.
      • link:css - Вставляет ссылку для подключения CSS файла.
    • Атрибуты и текст:

      Вы можете добавлять атрибуты элементов используя [ ] и вставлять текст { }.

    • Сокращенные классы и идентификаторы:

      Для классов используйте . и для идентификаторов #.

    • Расширенные операции:

      Emmet также поддерживает более сложные операции, такие как * (умножение, для создания одновременно нескольких одинаковых тегов), + (добавление, для создания одновременно несколько разных тегов), ^ (поместить выше), () (группировать), $ (нумерация), и другие. Эти операции позволяют более точно контролировать генерацию кода.

    • CSS сокращения:

      Emmet также работает для CSS. Например, введите bgc и нажмите Tab, чтобы создать background-color.

    • Настройки и сниппеты:

      Вы можете настроить Emmet и создавать собственные сниппеты в файле settings.json в VS Code.

    Вы можете комбинировать различные сокращения и операции Emmet, чтобы создавать более сложные структуры и стили. Это лишь небольшой список, и Emmet поддерживает гораздо больше сокращений и функций. Рекомендую также ознакомиться с официальной документацией Emmet, чтобы получить полный список возможностей: https://docs.emmet.io/abbreviations/.