Course Content
Введение в HTML
Цель уроков из этого раздела подготовить вас к началу работы над проектом.
0/5
Введение в CSS
В этом разделе курса ты познакомишься с каскадными таблицами стилей.
Создание сайта: базовый курс 2022
Конспект урока

Откуда скачать Visual Studio Code

Для загрузки текстового редактора перейдите на официальный сайт. Не скачивайте Visual Studio Code со сторонних сайтов без крайней необходимости.

Официальный сайт https://code.visualstudio.com/

После того как ты выбрал вашу версию операционной системы, скачали дистрибутив программы и установили Visual Studio Code на свой компьютер можно переходить ко второму шагу – базовой настройке редактора.

Знакомимся с интерфейсом

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

Проводник — для работы с проектами, папками и файлами. Мы будем использовать его для навигации по проектам и вложенным в них файлам.

Поиск – панель для поиска и замены символов, слов, ключей и целых блоков кода во всем проекте.

Система управления версиями – панель для работы с удалёнными репозиториями. Позже мы более детально разберём тему работы с GIT. Ну а пока что просто запомните, где находится этот функционал.

Отладка — это инструмент более опытных разработчиков и новичкам он не пригодится. Тем более что по собственному опыту могу сказать, что пока ты не перешёл к разработке SPA  на Vue js или React и потихоньку осваиваете ванильный JavaScript, отладчик вам без надобности.

Отладка актуальна для программ строк на 300-500, в котором что-то сломалось и вам нужно понять на каком шаге в процессе работы программы происходит сбой. Ручками искать сложно, консоль в веб-инспекторе показывает далеко не всё.

Тут то и понадобится отладчик с точками останова и пошаговыми командами.

Расширения – это уже поинтереснее. Здесь мы будем искать, и устанавливать различные расширения, которые сделают нашу IDE еще более удобной и функциональной.

Верхняя панель

В верхней панели расположены навигационные разделы. Чаще всего вам будут пригождаться раздел ВИД и раздел ТЕРМИНАЛ. Остальные разделы с весьма недвусмысленными названиями ты сможешь разобрать самостоятельно. Они не сложнее меню в телефоне.

Вкладка «Вид»

В этом разделе верхнего меню ты можешь включать или отключать панели в интерфейсе редактора и управлять параметрами. Есть пара интересных опций в самом низу, которые позволяют включить или выключить мини карту, активировать перенос строки по словам, а также можно настроить

показ или отключение элементов навигации (это что-то вроде хлебных крошек на сайте, только для редактора кода) которые показывают вложенность файла относительно корневой папки проекта, в котором ты работаешь.

Отображение пробелов – ну тут понятно. От себя добавлю, что я всегда включаю отображение пробелов, потому что люблю точность.

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

Пользовательская панель и настройки

В нижнем левом углу расположились настройки пользователя (ваш профиль) и основной блок меню для управления редактором кода.

В настройках профиля я очень рекомендую разобраться. Благодаря опции синхронизации ты сможешь пользоваться одними и те ми же настройками на разных компьютерах.

Раздел «Управление»

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

Если открыть раздел параметры и внимательно изучить опции – можно найти очень много интересных опций. Но всё это не критично, и ты смело можешь отложить это на потом. Давай лучше выберем цветовую тему. Это моя любимая часть.
Не знаю какая тема тебе больше понравится, но я почти всегда работаю в теме «Темная высокая контрастность», потому что мои мониторы всегда выставлены на минимальную яркость и мои глаза так меньше устают.

Ты должен поэкспериментировать и определить какая цветовая тема тебе больше по душе.

Давай наконец переходить к самой сложной части нашего урока – установке плагинов.

Установка расширений

Ниже я делюсь списокм реккомендованных для старта расширений. Ссылки на момент написания урока рабочие, но если что то пойдёт не так — просто вводите название плагина в поисковой строке вашего редактора. Он покажет варианты на выбор.

Auto Rename Tag – плагин для Автоматическое переименование тегов.

Beautify – автоматическое форматирование кода.

Code Spell Checker – словарик для проверки орфографии в текстах. Ну и + словарик русского языка Russian — Code Spell Checker

eCSStractor for VSCode – для экспорта всех css класов из html-разметки в любой другой файл.

Live Sass Compiler – компиляция препроцессора sass в css

Live Server – простой и удобный сервер для просмотра изменений в разметки в браузере прямо во время работы над кодом.

SVG – для форматирования и работы с svg файлами.

SVG Viewer – для предпросмотра файлов в формате svg

Настройка расширений

После того как ты установил все расширения стоит удалить несколько минут их настройки.

Для плагина Code Spell Checker нужно дополнительно указать языковые параметры — дополнительно указать русский язык. В противном случае он не будет работать с русским текстом. так же нужно скачать и установить русский словарик Russian — Code Spell Checker.

Настройку живой компиляции sass в css тебе придётся настроить по видео из этого урока. Не вижу смысла описывать процесс текстом.

По сути настройка сводится к указанию доп параметров:

  • какие файлы отслеживать,
  • какие файлы игнорировать,
  • куда сохранять итоговые css
  • сжимать файлы или нет
  • нужна исходная карта подключаемых фрагментов или нет.

Ссылка на документацию тут: https://github.com/ritwickdey/vscode-live-sass-compiler/blob/master/docs/settings.md

На этом с настройками всё. Есть еще тонкие настройки, но я их лучше в скринкасте этой лекции покажу. Там нет ничего сложного.

Дополнительные материалы
Тут пока что пусто...
Тут пока что пусто...
0% Complete