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

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

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

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

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

• CSS Peek
• eCSStractor for VSCode
• Gist
• Sass
• HTML to CSS autocompletion
• IntelliSense for CSS class names in HTML
• Live Server или VSCode Browser Sync
• One Dark Pro

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

{
	"emmet.extensionsPath": [ "~/AppData/Roaming/Code/User/emmet" ],
//	"php.validate.executablePath": "D:/OSPanel/modules/php/PHP_8.1/php.exe",
//	"terminal.integrated.defaultProfile.windows": "Git Bash",
//	"terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)",
	"workbench.startupEditor": "none",
	"editor.smoothScrolling": true,
	"editor.fontSize": 16,
	"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": 16,
	"editor.renderWhitespace": "boundary",
	"editor.lineHeight": 23,
	"security.workspace.trust.enabled": false,
	"editor.linkedEditing": true,
	"editor.bracketPairColorization.enabled": true,
	"editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
	"emmet.triggerExpansionOnTab": true,
	"editor.insertSpaces": false,
	"git.openRepositoryInParentFolders": "never",
	"editor.cursorSmoothCaretAnimation": "on",
	"editor.quickSuggestions": { "other": "off" },
	"explorer.confirmDelete": false,
	"workbench.colorTheme": "One Dark Pro Darker",
	"ecsstractor_port.add_comment": false,
	"ecsstractor_port.empty_line_before_nested_selector": false,
	// "liveServer.settings.donotShowInfoMsg": true, // При использовании Live Server
	// "liveServer.settings.donotVerifyTags": true, // При использовании Live Server
	// "browserSync.config": { "notify": false, "files": "./" } // При использовании VSCode Browser Sync
}

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

[
	{
		"key": "ctrl+alt+c",
		"command": "extension.ecsstractor_port_run"
	},
	{
		"key": "ctrl+alt+backspace",
		"command": "workbench.files.action.collapseExplorerFolders"
	},
	// { // При использовании VSCode Browser Sync
	//	"key": "ctrl+shift+alt+s",
	//	"command": "extension.browserSyncServerInBrowser"
	// }
]

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

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