Содержание:

Если вы ищете настройка vs code для html css js, чтобы писать верстку и JS без лишних телодвижек, то вот базовый, рабочий набор. Он подходит новичкам, но не выглядит “учебником на три экрана”. Я собрал это как сценарий: что поставить, что включить в редактор, как настроить code, чтобы он автоматически приводил файлы в порядок и сразу показывал результат в браузере.

Что установить в VS Code (расширения, которые реально помогают)

Live Server (главное для HTML и CSS)

Нужно, чтобы страница обновлялась в браузере автоматически, без ручного перезапуска.

  • расширение: Live Server
  • логика: сохраняете index.html или style.css - браузер сам перезагружает результат

Emmet (ускоряет верстку)

VS Code и так поддерживает Emmet, но важно включить разворачивание по Tab, чтобы было удобно писать конструкциями типа ul>li*5.

  • включите настройку Emmet: Trigger Expansion On Tab

Prettier (форматирование кода)

Если вам важно, чтобы html, css и javascript выглядели одинаково и аккуратно, форматирование при сохранении - лучший способ не спорить с собой каждый раз.

  • расширение: Prettier - Code formatter
  • обычно его ставят как инструмент по умолчанию для форматирования

Подсветка и подсказки для HTML/CSS

Чтобы редактор помогал с разметкой и стилями:

  • HTML CSS Support (часто закрывает базовые подсказки по HTML/CSS)
  • IntelliSense for CSS class names in HTML (подсказки классов, когда вы правите HTML)

JS-инструменты (минимально нужный набор)

Если вы пишете JavaScript руками (без тяжелых фреймворков), для порядка обычно достаточно линтинга и форматирования.

  • ESLint (контроль качества кода)
  • (опционально) Code Spell Checker - если вы много пишете в комментариях и документации

“Начинка” проекта: папка и файлы, с которых стоит начать

Схема под простую верстку и проверку в браузере такая:

  • index.html
  • style.css
  • script.js

Как это выглядит в редактор:
1. Создайте рабочую папку проекта (например, personal_page)
2. Откройте папку в VS Code как workspace
3. Положите туда index.html, style.css, script.js

Плюс этой схемы простой: вы меньше путаетесь и всегда понимаете, что открыто.

Настройка: чтобы форматирование работало само

Default Formatter - на Prettier

В настройках VS Code выставьте форматирование по умолчанию:

Настройка Значение
Default Formatter Prettier - Code formatter

Включите форматирование при сохранении

Это реально экономит время.

Настройка Значение
Format On Save включено

Если у вас в проекте есть Prettier конфиг - он будет определять правила. Если нет - используйте разумные дефолты и подстроите под себя.

Настройка Emmet: Tab разворачивает верстку

Чтобы Emmet реально ускорял работу, включите разворачивание по Tab:

Настройка Значение
emmet.triggerExpansionOnTab true

После этого можно писать короткие конструкции и разворачивать их в полноценный HTML.

Пример логики:
- ol>li*5
- Tab или Enter
- получаете список из 5 пунктов

Настройка шрифтов и внешнего вида (чтобы комфортно было долго)

Обычно в code правят не 50 параметров, а 2-3, которые влияют на усталость глаз:

Настройка Рекомендация
Font Size 14-16
Line Height чуть выше, чем размер (например, 1.4-1.7 от Font Size)
Font Family моноширинные шрифты (Consolas / Courier New / monospace)

Пример “здоровых” значений для многих:
| Параметр | Значение |
|---|---|
| editor.fontSize | 14-16 |
| editor.lineHeight | 22-26 |
| editor.fontFamily | Consolas, "Courier New", monospace |

Настройка автосохранения (чтобы Live Server не ждал)

Есть два популярных сценария:
- “сохраняю сам” (Ctrl+S)
- “редактор сохраняет автоматически”

Если вы включаете Live Server, автосохранение обычно удобнее.

Настройка Варианты
files.autoSave afterDelay / onFocusChange / off
files.autoSaveDelay например, 5000 мс

Логика простая: вы редактируете html/css, через пару секунд VS Code сохраняет, а Live Server обновляет страницу.

Горячие клавиши, которые стоит знать сразу (под ежедневную работу)

Для работы с code в связке html css js чаще всего заходят:

Команда Windows/Linux macOS
Поиск в файле Ctrl + F Cmd + F
Комментарий строки Ctrl + / Cmd + /
Форматировать документ Shift + Alt + F Shift + Option + F
Сохранить Ctrl + S Cmd + S
Мульти-редактирование Ctrl + D Cmd + D
Открыть терминал (обычно) Ctrl + | (обычно) Cmd +

Мини-набор правил для качества: ESLint и конфиг в проекте

Если вы хотите, чтобы JavaScript не превращался в “как получилось”, включите ESLint.

Правильный порядок обычно такой:
1. Установить eslint в проект (или глобально)
2. Добавить конфиг /.eslintrc... в корень
3. Установить расширение ESLint для VS Code
4. Включить проверку

Даже без сложных правил это дает эффект: редактор начинает подсвечивать проблемы, а вы видите их сразу, а не когда уже “сломалось в браузере”.

Как запускать результат: Live Server вместо “открыл в браузере и обновляй”

Когда включен Live Server:
1. открываете index.html в проекте
2. жмете Go Live
3. меняете html или style.css
4. сохраняете - вкладка обновляется сама

Это самый короткий цикл “редактировать -> смотреть результат”, который подходит именно под html css js.

Пример базовой структуры настроек (settings.json)

Ниже не “идеальный рецепт на все случаи”, а набор типовых значений, которые обычно делают работу приятнее (шрифт, перенос строк, автосохранение, Emmet, форматирование).

Блок Что обычно включают
editor fontSize, lineHeight, wordWrap
emmet triggerExpansionOnTab
editor formatOnSave
files autoSave

Если используете Prettier, убедитесь, что он стоит как форматтер по умолчанию, иначе Format On Save может делать не то, что вы ожидаете.

Почему это работает именно для новичка и “быстрой разработки”

Потому что вы закрываете три задачи, которые всегда повторяются:
- html и css - быстро верстать (Emmet) и сразу видеть результат (Live Server)
- code - держать в одном стиле (Prettier + Format On Save)
- javascript - не копить хаос (минимально ESLint)

И в итоге VS Code превращается в нормальный редактор, в котором вы двигаетесь вперед, а не бесконечно настраиваете “еще одну мелочь”.

Полезные источники (официальное и надежное)

Тема Источник
Emmet в VS Code https://docs.emmet.io/
Prettier https://prettier.io/
Live Server (как идея и настройка) https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Расширения VS Code (installation) https://code.visualstudio.com/docs/editor/extension-marketplace
Tasks и автосборка (если дойдете до проекта) https://code.visualstudio.com/docs/editor/tasks
Unity + VS Code (пример интеграции расширений) https://code.visualstudio.com/docs/other/unity