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

Вы просто пишете код как есть, нажимаете одну клавишу - и всё автоматически выравнивается. Причём можно настроить, чтобы форматирование происходило автоматически при сохранении, и больше не тратить ни секунды на ручную чистку кода.

Установка форматтера (и линтера) - это базовая часть настройки любого проекта. В этом гайде мы подключим Prettier - популярный форматтер, который умеет выравнивать HTML, CSS, JavaScript, TypeScript и JSON.

Но сейчас мы сосредоточимся на самом главном для вёрстки - настроим Prettier только для HTML и CSS, чтобы облегчить себе жизнь уже на этапе верстки макета.

  1. Открываем вводим в поле, которое изображено ниже cmd

    image.png

  2. Откроется Command Line Interface(CLI)

    image.png

  3. Вводим:

    npm install --save-dev prettier

  4. Видим, что в проекте появилось пару новых файлов(эти файлы нужны для работы Prettier, пока не трогаем - вернёмся к ним позже):

image.png

  1. Создаём и добавляем текстовый файл .prettierrc (такой и добавляем, без расширения) в корень проекта.

    {
  "tabWidth": 2,
  "useTabs": true
}

    Мы говорим форматтеру: “Используй отступ в 2 пробела для вложенности и применяй табуляции, а не пробелы с помощью useTabs”

  2. Добавляем файл .prettierignore в корень проекта.

    node_modules

    В node_modules лежит сам код Prettier и другие зависимости. Их форматировать не нужно - мы добавляем node_modules в .prettierignore, чтобы исключить из списка форматируемых файлов.

  3. Открываем Visual Studio Code в папке проекта. Это можно так же сделать с помощью команды(точка - это означает “текущая папка”)

    code .

  4. Нажимаем комбинацию Ctrl+Shift+X

  5. В поиске ищем prettier. Нажимаем Install

image.png

  1. Теперь, мы настроим Visual Studio Code, чтобы он использовал Prettier

  1. Добавляем следующие настройки:

    {
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

    Это гарантирует, что Prettier будет форматировать только HTML и CSS, даже если у тебя есть другие расширения.

Готово! Можете добавить пробел, в любом месте, чтобы VS code увидел изменение, затем сохраните и увидите, как код отформатировался.