Code editing.
Redefined.
Free. Built on open source. Runs everywhere //CODE.visualstudio.com
Extensions for Visual Studio Code //MARKETPLACE.visualstudio.com
Visual Studio Code, also commonly referred to as VS Code... //wikipedia.org/
Вступ
//
Установка
Для систем Windows существует два установщика VSC для двух различных способов размещения, настройки и использования VSC в системе - общесистемная установка и пользовательская. Эти способы не совместимы одновременно.
При пользовательской установке появляется предупреждение "This User Installer is not meant to be run as an Administrator. If you would like to install VS Code for all users in this system, download the System Installer instead from...", а общесистемную предлагается удалить. Пользовательская установка ограничена единственным экземпляром.
Настройка
Вид и функции среды VS Code зависят от большого числа настроек. Основные настройки структурированы в иерархию в окне Settings, которое открывает команда меню File/Preferences/Settings или хоткей Ctrl+,. Все изменения настроек отличающиеся от default сохраняются в файл settings.json, при этом существует две области применения изменений и соответствующие пути размещения файла настроек:
- настройки пользователя для всех проектов сохраняются в файле %USERPROFILE%\Roaming\Code\User\settings.json
- настройки текущего проекта сохраняются в каталоге проекта .vscode\settings.json
Многие настройки не представлены в окне Settings и могут быть изменены только непосредственным изменением содержания файла settings.json.
Подсветка Highlight
//code.visualstudio.com/api/references/theme-color
Редактирование схемы подсветки выполняется в одном из settings.json
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
{ "editor.tokenColorCustomizations": { "comments": "#259065", "keywords": "#FFFFFF", "functions": "#76ACDA", "numbers": "#8482E0", "strings": "#FFD7A1", "variables": "#4282b6", "types": "#FF0000" }, "workbench.colorCustomizations": { "editorBracketHighlight.foreground1": "#CCCCCC", // bracket color "editorBracketHighlight.foreground2": "#CCCCCC", "editorBracketHighlight.foreground3": "#CCCCCC", "editorBracketHighlight.foreground4": "#CCCCCC", "editorBracketHighlight.foreground5": "#CCCCCC", "editorBracketHighlight.foreground6": "#CCCCCC", "editorBracketHighlight.unexpectedBracket.foreground": "#FF0000", "editorBracketMatch.border": "#5D1F1F", "editorBracketMatch.background": "#5D1F1F", "editor.lineHighlightBackground": "#1A1A1A", // current line background "editor.selectionBackground": "#295070", // selection background "editor.selectionHighlightBackground": "#1b354b", "editor.selectionHighlightBorder": "#1b354b", "editor.findMatchHighlightBorder": "#295070", "editor.findMatchHighlightBackground": "#295070", "editor.findMatchBorder": "#29706d", "editor.findMatchBackground": "#29706d", "editor.wordHighlightBackground": "#1b354b" } } |
//
Sync to and from other devices
Базові налаштування
//
Гарячі клавіші
//
- Ctrl+, окно настроек Settings
- Ctrl+Shift+X открыть панель расширений EXTENSIONS
Meet IntelliSense
Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.
Розширення та налаштування
Prettier - Code formatter
//
Debugger for Chrome
Расширение применялось для отладки JavaScript кода, но теперь в VS Code есть встроенный отладчик JavaScript, который выполняет те же функции.
Куча
- HTML и CSS
- Auto Rename Tag – автоматически изменяет имя закрывающего тега при переименовывании открывающегося
- Auto Close Tag – автоматически добавляет закрывающий HTML/XML тег при вводе закрывающей скобки открывающегося тега (кроме HTML, это дополнение добавляет эту возможность в
- JavaScript и многие другие языки)
- HTMLHint – плагин для статического анализа HTML кода
- HTML CSS Support - поддержка CSS для документов HTML
- IntelliSense for CSS class names in HTML - плагин для предложения вариантов завершения имени CSS класса в HTML на основе определений, найденных им в вашем рабочем пространстве
Autoprefixer - для автоматического добавления CSS свойств с префиксами - CSS Peek - позволяет посмотреть свойства, прикреплённые к классу или идентификатору без переключения на CSS файл, в котором они описаны
Отладка
//code.visualstudio.com/docs/editor/debugging
Вбудовані команди Git
//
Джерела
Настройка VS Code для разработки на JavaScript //itchief.ru