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

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

Смотреть урок на YouTube

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

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

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

Здесь представлен список актуальных настроек VS Code.

{
  "workbench.colorTheme": "One Dark Pro Darker",
  "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)",
  "explorer.compactFolders": false,
  "workbench.startupEditor": "none",
  "editor.smoothScrolling": true,
  "editor.fontSize": 16,
  "editor.minimap.enabled": false,
  "breadcrumbs.enabled": false,
  "editor.renderControlCharacters": true,
  "editor.tabSize": 2,
  "workbench.activityBar.location": "hidden",
  "files.defaultLanguage": "html",
  // "editor.detectIndentation": false,
  "editor.folding": false,
  "editor.glyphMargin": false,
  // "editor.parameterHints.enabled": false,
  // "editor.hover.enabled": false,
  "terminal.integrated.fontSize": 16,
  "editor.renderWhitespace": "trailing",
  "editor.lineHeight": 23,
  "security.workspace.trust.enabled": false,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.wordSeparators": "`~!@#$%^&*()=+[{]}\\|;:'\",.<>/?",
  "emmet.triggerExpansionOnTab": true,
  // "editor.insertSpaces": false,
  "editor.cursorSmoothCaretAnimation": "on",
  // "git.openRepositoryInParentFolders": "never",
  // "editor.quickSuggestions": { "other": "off" },
  "explorer.confirmDelete": false,
  "editor.stickyScroll.enabled": false,
  // "liveServer.settings.donotShowInfoMsg": true, // При использовании Live Server
  // "liveServer.settings.donotVerifyTags": true, // При использовании Live Server
  "liveServer.settings.fullReload": true, // При использовании Live Server
}

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

[
  {
    "key": "ctrl+alt+backspace",
    "command": "workbench.files.action.collapseExplorerFolders"
  },
  {
    "key": "ctrl+shift+alt+s",
    "command": "extension.liveServer.goOnline"
  }
]

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

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

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

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

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

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

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