WebDesign Master
Курсы
Настройка VS Code для верстки

Настройка VS Code для верстки

Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.

Настройка VS Code для верстки - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

Материалы урока и полезное

  • Visual Studio Code: Страница редактора
  • Simple Starter: Ознакомиться и скачать
  • Урок по GitHub Gist: Ознакомиться с уроком
  • Архив с настройками: Скачать
  • Верстка с Emmet: Смотреть урок

Рекомендуемые расширения

  • CSS Peek
  • eCSStractor for VSCode
  • Gist
  • HTML to CSS autocompletion
  • IntelliSense for CSS class names in HTML
  • Live Server
  • One Dark Pro

Пресет настроек settings.json

{
  "emmet.extensionsPath": [ "~\\AppData\\Roaming\\Code\\User\\emmet" ], // Emmet Extension Path
  "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", // Windows WSL by Default
  "workbench.startupEditor": "newUntitledFile",
  "editor.smoothScrolling": true,
  "editor.fontSize": 15,
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.renderControlCharacters": true,
  "editor.tabSize": 2,
  "workbench.activityBar.visible": false,
  "files.defaultLanguage": "html",
  "git.ignoreMissingGitWarning": true,
  "editor.detectIndentation": false,
  "editor.folding": false,
  "editor.glyphMargin": false,
  "editor.parameterHints.enabled": false,
  "editor.hover.enabled": false,
  "terminal.integrated.fontSize": 15,
  "editor.renderWhitespace": "boundary",
  "editor.lineHeight": 23,
  "liveServer.settings.donotShowInfoMsg": true,
  "liveServer.settings.donotVerifyTags": true,
  "ecsstractor_port.add_comment": false,
  "ecsstractor_port.empty_line_before_nested_selector": false,
  "explorer.confirmDelete": false,
  "security.workspace.trust.enabled": false,
  "workbench.colorTheme": "One Dark Pro",
  "editor.insertSpaces": false,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?"
}

Горячие клавиши keybindings.json

[
	{
		"key": "ctrl+alt+c",
		"command": "extension.ecsstractor_port_run"
	},
	{
		"key": "ctrl+alt+backspace",
		"command": "workbench.files.action.collapseExplorerFolders"
	}
]

Пример сниппета emmet/snippets.json

{
	"html": {
		"snippets": {
			"d": "<div class=\"${1}\">${2}</div>",
			"i": "<img class=\"${1}\" src=\"${2}\" alt=\"${3}\">"
		}
	}
}

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Инструменты»

  • Simple Starter - простой стартер для верстки | Материалы урока
  • Windows 11: Делаем вкладки в проводнике. Настройка QTTabBar от А до Я
  • Gulp include на стороне сервера Browsersync + Build
  • OptimizedHTML 5: Важные обновления стартера для JS-разработки
  • Gulp 4 - Актуальное и исчерпывающее руководство для самых маленьких

Разделы сайта:

  • Курсы
  • HTML и CSS
  • Веб-дизайн
  • Инструменты
  • Оффтоп
  • MODX
  • WordPress
  • jQuery
  • Адаптивный веб-дизайн
  • Создание иконок
  • Обработка изображений
  • Иллюстрации и Инфографика
  • Интерфейсы UI/UX
  • Прототипирование
  • JavaScript
  • Хостинг

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
  • Рабочее место разработчика
2022 © WebDesign Master