VS Code

VS Code (Visual Studio Code) — это мощный и удобный редактор кода от компании Microsoft, специально разработанный для программистов.

1. Установка VS Code

Раздел загрузки: Найдите страницу "Download" и выберите версию для вашей операционной системы.

2. Запуск и настройка VS Code

• После установки запустите VS Code
• Открытие папки: Используйте File -> Open Folder (Файл -> Открыть папку) для выбора рабочей папки с вашими проектами.

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

Для того, чтобы изменения в коде или документах не терялись и сразу применялись настроим автосохранение (по умолчанию отключено). С помощью сочетания клавиш Ctrl + , (запятая) откройте Settings — меню настроек редактора.

• В строке поиска наберите: auto save
• В пункте Files: Auto Save выберите значение afterDelay
• Установите галочку в пункте Editor: Format On Save

3. Установка плагинов (расширений)

Для поиска необходимым расшишений перейдём в одноимённое меню Extensions, которое расположено на боковой панели слева, в появившейся строке поиска вводим название нужного нам плагина

Рекомендуется установить следующие плагины:

• Auto Complete Tag - Автоматически закрывает теги.
• Bracket Pair Colorizer - Раскрашивает парные скобки в разные цвета.
• CSS Peek - Позволяет подсматривать стили прямо из HTML (или JSX/TSX и т.п.).
• Indent-Rainbow - Раскрашивает уровни отступа в разные цвета.
• Image Preview - Показывает превью изображения рядом с кодом где оно подключено.

4. Плагин Emmet

Emmet — это встроенный инструмент в VS Code (раньше был отдельным плагином), который позволяет писать HTML и CSS суперкороткими аббревиатурами, а редактор сам разворачивает их в полноценный код.

Пишем сокращение → нажимаем Tab → получаем готовый код. Примеры наиболее часто используемых сокращений:

4.1. Создание элементов с заданными атрибутами class и id

Для создания элемента с заданным атрибутом id используется следующая аббревиатура: element_name#id, где element_name - название элемента (можно не указывать, по умолчанию будет создаваться элемент div).

#it-incubator

<div id="it-incubator"></div>

header#it-incubator

<header id="it-incubator"></header>

Для создания элемента с заданным атрибутом class используется следующая аббревиатура: element_name.id, где element_name - название элемента которое также можно не указывать, по умолчанию будет создаваться элемент div).

.it-incubator

<div class="it-incubator"></div>

header.it-incubator

<header class="it-incubator"></header>

4.2. Дочерние элементы

Для вложения элементов друг в друга используют дочерние элементы, которые обозначают оператором «>» — знак «больше». Для примера, возьмем такое сокращение: div>ul>li, то есть — div, в который вложен список ul и элементы списка li. Нажимаем TAB и разворачиваем большой кусок кода.

ul>li

<ul>
  <li></li>
</ul>

4.3. Умножение

Оператор — «умножение», который обозначается звездочкой «*». Он помогает задать, сколько раз должен выводиться элемент. Например, если нужно развернуть список ul и сделать в нем несколько элементов li — прописываем оператор «умножение», указываем сколько штук нам надо и Emmet автоматически прописывает нам этот код. Будет столько элементов li, сколько указали.

li*3

<li></li>
<li></li>
<li></li>

4.4. Комбинирование

Можно комбинировать разные операторы — использовать одновременно вложенние и умножение. Допустим,нужно создать список состоящий из 3-х элементов. Добавляем элемент ul и вкладываем в него c помощью оператора > элементы li*3 . Нажимаем TAB и получаем разметку.

ul>li*3

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

Теперь добавим элементу ul атрибут id="list" и каждому вложенному элементу li атрибут class="circle"

ul#list>li.circle*3

<ul id="list">
  <li class="circle"></li>
  <li class="circle"></li>
  <li class="circle"></li>
</ul>