Подготовка проекта CSS и HTML с помощью Visual Studio Code
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале вы узнаете, как создать все папки и файлы, необходимые для сборки вашего тестового веб-сайта CSS.
С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.
Создание файлов и папок HTML и CSS
Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.
Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.
Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.
Сохраните файл и оставьте его открытым.
Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.
Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег <link> и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:
<link rel=»stylesheet» href=»css/styles.css»>
Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.
Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.
Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:
- Папка по имени css содержит файл styles.css.
- Пустая папка images.
- Файл index.html
Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:
Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.
Отладка и устранение неполадок CSS и HTML
При работе с HTML и CSS важна точность. Даже лишний пробел или неправильно введенный символ могут помешать вашему коду работать должным образом.
Если ваш код HTML или CSS не отображается в браузере так, как вы ожидаете, убедитесь, что вы написали код в точности так, как показано в мануале. В целом мы рекомендуем вам вводить код в файлы вручную – так он лучше запоминается, но иногда полезно скопировать и вставить его, чтобы убедиться, что в не мнет ошибки.
Ошибки HTML и CSS могут быть вызваны несколькими причинами. Для начала проверьте свои правила разметки и CSS на наличие лишних или недостающих пробелов, неправильно записанных тегов, а также лишних знаков пунктуации или символов. Вам также следует убедиться, что вы случайно не поставили фигурные или книжные кавычки (“ или “), которые часто используются текстовыми редакторами. Фигурные кавычки предназначены для чтения текста человеком и вызовут ошибку в коде, поскольку они не распознаются браузерами как кавычки. Вводя кавычки прямо в редакторе кода, вы можете быть уверены, что используете правильный тип.
Каждый раз, когда вы вносите в код изменения, обязательно сохраняйте файл перед его перезагрузкой в браузере, чтобы проверить результаты.
Краткое примечание по автоматической поддержке HTML
Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.
Заключение
Теперь вы готовы приступить к разработке вашего тестового сайта. В следующем мануале мы покажем, как использовать правила CSS для управления стилем и макетом HTML-страниц.
Как создать папку в vs code
A Visual Studio Code «workspace» is the collection of one or more folders that are opened in a VS Code window (instance). In most cases, you will have a single folder opened as the workspace but, depending on your development workflow, you can include more than one folder, using an advanced configuration called Multi-root workspaces.
The concept of a workspace enables VS Code to:
- Configure settings that only apply to a specific folder or folders but not others.
- Persist task and debugger launch configurations that are only valid in the context of that workspace.
- Store and restore UI state associated with that workspace (for example, the files that are opened).
- Selectively enable or disable extensions only for that workspace.
You may see the terms «folder» and «workspace» used interchangeably in VS Code documentation, issues, and community discussions. Think of a workspace as the root of a project that has extra VS Code knowledge and capabilities.
Note: It is also possible to open VS Code without a workspace. For example, when you open a new VS Code window by selecting a file from your platform’s File menu, you will not be inside a workspace. In this mode, some of VS Code’s capabilities are reduced but you can still open text files and edit them.
How do I open a VS Code «workspace»?
The easiest way to open a workspace is using the File menu and selecting one of the available folder entries for opening. Alternatively if you launch VS Code from a terminal, you can pass the path to a folder as the first argument to the code command for opening.
Single-folder workspaces
You don’t have to do anything for a folder to become a VS Code workspace other than open the folder with VS Code. Once a folder has been opened, VS Code will automatically keep track of things such as your open files and editor layout so the editor will be as you left it when you reopen that folder. You can also add other folder-specific configurations such as workspace-specific settings (versus global user settings), task definitions, and debugging launch files (see below in the workspace settings section).
A single-folder workspace opened inside VS Code
Multi-root workspaces
Multi-root workspaces are an advanced capability of VS Code that allows you to configure multiple distinct folders to be part of the workspace. Instead of opening a folder as workspace, you will open a <name>.code-workspace JSON file that lists the folders of the workspace. For example:
A multi-root workspace opened in VS Code
Note: The visual difference of having a folder opened versus opening a .code-workspace file can be subtle. To give you a hint that a .code-workspace file has been opened, some areas of the user interface (for example, the root of the File Explorer) show an extra (Workspace) suffix next to the name.
Untitled multi-root workspaces
It is easy to add or remove folders in your workspace. You can start off by opening a folder in VS Code and then later add more folders as you see fit. Unless you already have opened a .code-workspace file, the first time you add a second folder to a workspace, VS Code will automatically create an «untitled» workspace. In the background, VS Code automatically maintains a untitled.code-workspace file for you that contains all of the folders and workspace settings from your current session. The workspace will remain «untitled» until you decide to save it to disk.
An untitled multi-root workspace opened in VS Code
Note: There is really no difference between an untitled workspace and a saved workspace other than the fact that an untitled workspace is automatically created for you for your convenience and will always restore until you save it. We automatically delete untitled workspaces (after asking you for confirmation) when you close a window in which an untitled workspace is opened.
Workspace settings
Workspace settings enable you to configure settings in the context of the workspace you have opened and always override global user settings. They are physically stored in a JSON file and their location depends on whether you opened a folder as a workspace or you opened a .code-workspace file.
Refer to the settings documentation for a comprehensive explanation of setting scopes and their file locations.
Single-folder workspace settings
Workspace settings will be stored in .vscode/settings.json when you open a folder as workspace.
The Settings editor when a folder is opened as workspace
Multi-root workspace settings
When you open a .code-workspace as workspace, all workspace settings will be added into the .code-workspace file.
You can still configure settings per root folder and the Settings editor will present a third setting scope called Folder Settings:
The Settings editor when a multi-root workspace is opened
Settings configured per folder will override settings defined in the .code-workspace .
Workspace tasks and launch configurations
Similar to how workspace settings are specific to a workspace, tasks and launch configurations can also be scoped to a workspace. Depending on whether you have a folder opened as workspace or a .code-workspace file, the location of workspace task and launch configurations will either be inside the .vscode folder or inside the .code-workspace file. In addition, task and launch configurations can always be defined at the level of a folder, even when you have opened a .code-workspace file.
Refer to tasks and debugging chapters for a more comprehensive overview of how to use tasks and launch configurations in VS Code.
Common questions
What is the benefit of multi-root workspace over a folder?
The most obvious advantage is that a multi-root workspace allows you to work with multiple projects that may not be stored inside the same parent folder on disk. You can pick folders from anywhere to add to the workspace.
Even if you are mainly working in a single-folder-based project, you can benefit from using .code-workspace files. You can store multiple .code-workspace files inside the folder to provide a scoped folder-view of certain aspects of the project depending on the scenario (for example client.code-workspace , server.code-workspace to filter out unrelated folders from the File Explorer). Since .code-workspace files support relative paths for the folders section, these workspace files will work for everyone independent of where the folder is stored.
Finally, if for some projects you want to apply the same set of workspace settings or tasks/launch configurations, consider adding these into a .code-workspace file and add/remove these folders from that workspace.
Why is VS Code restoring all untitled workspaces on a restart?
Untitled workspaces are designed to be something you must explicitly decide to keep or not. The first time an untitled workspace is created, VS Code adds the specified folders into the workspace file and also all existing workspace settings. This user data is always restored and displayed in a VS Code window until the untitled workspace is saved or deleted.
How do I delete an untitled workspace?
You can delete an untitled workspace by closing its window and dismissing the prompt to save the untitled workspace.
Can I use a multi-root workspace without folders
It is possible to leave the folders section of a .code-workspace file empty so that you end up with an instance of VS Code that does not show any root folders. You can still store workspace settings and even tasks or launch configurations in this case.
Does VS Code support projects or solutions?
VS Code doesn’t have the concept of a «project» or «solution» as they are sometimes defined in other development tools, for example Visual Studio IDE. You may see the term «project» used in VS Code documentation but it usually means «the thing you’re working on». Depending on your programming language or framework, the toolset itself may support something called a «project» to help define build configurations or enumerate included files.
Как создать новую рабочую область в VS Code
Рабочая область Visual Studio Code — это набор файлов, открытых в одном окне. Рабочая область может быть одной папкой, но в некоторых случаях будет включать в себя несколько файлов в рабочем процессе разработки, известном как рабочие области с несколькими корнями. Если вы работаете над проектом и вам нужно открыть несколько файлов на этой платформе, вам может помочь новая функция Workspace. Вы сможете открывать несколько файлов в одном окне, что упрощает доступ ко всем необходимым документам. Файл .code-Workspaces используется для сохранения конфигурации папки проекта. После настройки он будет автоматически открывать различные файлы в одном окне. Кроме того, это намного быстрее и проще в настройке, чем написание сценария оболочки. Узнайте, как создать рабочее пространство VS Code.
Создание нового рабочего пространства в VS Code
Ваше рабочее пространство часто представляет собой локальную копию кодовой базы команды, которую вы можете использовать для тестирования и разработки своего кода. В большинстве случаев он создается автоматически при открытии папки VS. Однако вы можете захотеть создать несколько файлов, чтобы отслеживать все изменения, которые вы делаете в разных ветвях проекта. Вот как объединить эти файлы в рабочую область VS Code.
Теперь ваша новая рабочая область создана в VS Code, и ее имя будет отображаться как (Name).code-Workspace.
Настройки рабочего пространства
Эти параметры переопределяют параметры по умолчанию и могут использоваться для настройки рабочего пространства по своему вкусу. Они хранятся в файлах JSON, и их расположение будет определяться тем, как вы открываете папку.
Настройки рабочей области с одной папкой
Если вы откроете папку как рабочую область, настройки будут найдены в .vscode/settings.json.
Настройки многокорневой рабочей области
Если открытая папка является файлом .code-workspace, все настройки рабочего пространства будут добавлены в файл .code-workspace.
Вы по-прежнему можете настраивать параметры для каждой корневой папки, но параметры, заданные в рабочей области .code, будут переопределять параметры.
Конфигурации запуска рабочей области и задачи
Подобно тому, как параметры настраиваются для рабочей области, задачи и запуски также можно персонализировать в соответствии с рабочей областью. Если у вас есть папка, открытая как файл .code-workspace или рабочая область, расположение задач и конфигураций запуска находится в файле .vsh или .workspace. Эти конфигурации также можно настроить из папки.
Оптимизация нового рабочего пространства VS Code
Благодаря встроенной поддержке различных языков программирования, включая TypeScript, Javascript и Node JS, Workspace является идеальным инструментом для разработчиков. Эти советы сделают платформу более эффективной и удобной для навигации.
Терминалы
Возможно, вы используете терминал по умолчанию, предоставляемый вашей операционной системой. С VS Code платформа хотела сделать так, чтобы вам не приходилось полагаться на функцию ОС. VS Code поставляется со встроенным терминалом, в котором собраны все ваши требования. Это отличный способ следить за своими проектами разработки и обеспечивать их бесперебойную работу. Благодаря возможности переименовать или изменить цвет значка также проще различать различные терминалы для вашего проекта.
Обернуть вкладки
Эта функция удобна для разработчиков, которые работают над большими проектами, в которых используется несколько компонентов. При переходе от одного компонента к другому может быть сложно отслеживать все файлы. В VS Code вкладки появляются в браузере, и вам придется прокручивать от одной к другой, когда вы хотите просмотреть, что находится внутри них.
Более эффективным методом было бы обернуть эти вкладки, нажав Cmd + и выполнив поиск «Перенести вкладки». Эта функция упростит просмотр того, что находится на разных вкладках.
Закрепить вкладки
Как разработчик, желательно, чтобы ваше рабочее пространство было как можно более организованным. Вы можете сделать это, прикрепив вкладки, которые вы часто используете, к передней части экрана. Вы также можете настроить внешний вид этих вкладок, нажав кнопки Cmd + или Ctrl + и выполнив поиск «Закрепить вкладку».
Пользовательский интерфейс
Интерфейс вашего терминала настроен так, что он имеет различные опции, такие как проводник, поиск, менеджер проектов и вывод. Он также имеет раздел, похожий на нижний колонтитул, где вы можете легко найти и изменить несколько деталей. В VS Code эти вкладки можно перетаскивать, переставляя их по своему вкусу. Вы можете поместить наиболее часто используемые параметры ближе к началу или настроить их так, чтобы сделать их более доступными. Персонализация пользовательского интерфейса упрощает навигацию по рабочему пространству.
При создании новой страницы в Visual Studio Code файл не имеет названия, и вам придется заполнить эти данные самостоятельно. Затем вам нужно будет перейти к имени файла и ввести расширение. Процесс может быть утомительным, особенно при работе с большим количеством файлов.
Вы можете оптимизировать процесс, разрешив среде IDE просматривать файлы. Затем он будет использовать предыдущую систему именования для присвоения имен новым файлам, которые вы создаете.
Предварительный просмотр
У VS Code есть некоторые разочаровывающие особенности. Например, если вы откроете файл в режиме предварительного просмотра, а затем сразу же откроете другой, не внося изменений в первый, программа закроет первый файл. Если вы хотите изменить это и оставить оба файла открытыми в режиме предварительного просмотра, перейдите в «Настройки» и найдите «Включить предварительный просмотр». Установите флажок, чтобы внести необходимые изменения.
Настройка нового ПК
Возможно, вы настроили и персонализировали свое рабочее пространство VS Code по своему вкусу только для того, чтобы получить новый компьютер. Хотя новая машина — это здорово, необходимость перенастраивать рабочее пространство может раздражать.
Настройка синхронизации позволяет сохранить все ваши конфигурации в одном месте. Когда вы получите другое устройство, оно автоматически применит настройки старого устройства к новому рабочему пространству VS Code. Таким образом, вам не нужно перенастраивать Workspace на новом ПК.
Открыть повтор
Начало работы с отладкой веб-приложения в рабочей среде может быть сложным и трудоемким. С помощью OpenReplay вы можете отслеживать и воспроизводить все, что делают ваши пользователи, что позволяет вам видеть, как ведет себя приложение, и обнаруживать любые проблемы, которые могут возникнуть. OpenReplay — отличный вариант, поскольку это бесплатная альтернатива с открытым исходным кодом другим приложениям для отладки, таким как LogRocket и FullStory. Использование программы отладки экономит много времени при использовании Workspace.
Гитхаб
VS Code поставляется со встроенной интеграцией с GitHub. Это позволяет быстро отправлять файлы на GitHub. Подключение к GitHub из VS Code означает, что вам не нужно тратить время на написание команд git. Интеграция с VS Code упрощает обслуживание ваших файлов.
Все ваши папки в одном месте
Рабочее пространство позволяет вашей команде оставаться организованной. Файлы и папки могут храниться в одном месте, что позволяет открывать и просматривать их одним нажатием кнопки. Рабочее пространство также можно оптимизировать для повышения эффективности и отслеживания текущих проектов. Благодаря этому руководству вы теперь хорошо подготовлены для создания рабочей области в VS Code и ее настройки в соответствии с вашими потребностями.
Вы настроили новую рабочую область в VS Code? Сообщите нам, как вы создали и оптимизировали свое рабочее пространство в комментариях ниже.
VS Code Docs: советы и хитрости, ч.6 (файлы и папки)
Открыть встроенный терминал можно с помощью сочетания клавиш «Ctrl+`» (вторая клавиша в этом сочетании — «backtick»).
Включение/выключение боковой панели слева
Включение/выключение боковой панели (sidebar) можно выполнить сочетанием клавиш «Ctrl+B».
Вот как она выглядит (слева — во включенном виде, справа — в выключенном):
Включение/выключение панели снизу
Включение/выключение панели снизу (panel) можно выполнить сочетанием клавиш «Ctrl+J». (Имеется в виду панель со вкладками «Проблемы», «Выходные данные», «Терминал» и «Консоль отладки».)
Режим «Дзен» («Zen»)
Для включения режима «Дзен» можно нажать сочетание клавиш «Ctrl+K Z».
Вот как выглядит экран моего компьютера (с разрешением 1280×1024 точек) в этом режиме, линейные размеры снимка экрана уменьшены в два раза (то есть размеры этой иллюстрации составляют 640×512 пикселей):
Войдите в режим «Дзен», в котором ничто не отвлекает от редактирования кода. Для выхода из этого режима нажмите клавишу «Esc» дважды, либо еще раз нажмите сочетание клавиш «Ctrl+K Z».
Редактирование в окнах-вкладках рядом друг с другом
Для разбивки содержимого окна редактора «VS Code» вправо можно нажать сочетание клавиш «Ctrl+\».
В результате окно редактора «VS Code» будет разбито при первом нажатии этого сочетания клавиш на две части (эти части называют просто «группами» или «группами редакторов», в последнем случае под словом «редактор» подразумевается окно-вкладка с кодом), при последующих нажатиях будет прибавляться по одной части (группе). При создании новой группы активное окно-вкладка из предыдущей группы копируется в новую группу.
Таким образом можно открыть один и тот же файл в нескольких окнах-вкладках (в соседних группах), которые будут находиться рядом с друг другом (side by side) и будут видны одновременно (можно одновременно рассматривать и редактировать разные места одного и того же файла с кодом).
Вот как это может выглядеть (здесь я создал три группы, в каждой — по одному окну-вкладке с кодом одного и того же файла; вообще в группах может быть разный состав окон-вкладок):
Также вы можете перетаскивать (drag and drop) окна-вкладки, чтобы создать новые группы окон-вкладок и для перемещения окон-вкладок между группами.
Переключение между группами окон-вкладок
Для этого можно использовать сочетания клавиш «Ctrl+1», «Ctrl+2», «Ctrl+3» и так далее.
Переход во вкладку «Проводник» боковой панели
Для этого можно использовать сочетание клавиш «Ctrl+Shift+E».
Создать или открыть файл
Сочетание клавиш: «Ctrl+ЩелчокЛевойКнопкойМыши».
Вы можете быстро открыть файл или изображение, либо создать новый файл, передвинув указатель мыши на ссылку на файл и использовав сочетание клавиш «Ctrl+ЩелчокЛевойКнопкойМыши». Новый файл предлагается создать, если файл по ссылке не найден.
[Работает не во всех файлах. Например, у меня в файле с простым текстом не срабатывает. А в файле с кодом на языке HTML всё работает так, как описано. — Прим. пер.]
Закрыть открытую в данный момент папку
Для этого можно использовать сочетание клавиш «Ctrl+K F».
История переходов
Для быстрого перехода между открытыми в группе окнами-вкладками можно использовать сочетание клавиш «Ctrl+Tab».
При этом эти две клавиши нажимаются одновременно, но клавишу «Tab» следует отпустить сразу, а клавишу «Ctrl» следует удерживать — это действие позволит открыть список открытых в группе окон-вкладок. После этого следует продолжать удержание клавиши «Ctrl», коротко нажимая и отпуская клавишу «Tab» — это действие позволит передвигаться по списку открытых в группе окон-вкладок. Выбрав нужный файл в списке, клавишу «Ctrl» следует, наконец, отпустить — это действие позволит перейти в окно-вкладку с выбранным из списка файлом.
В качестве альтернативы вышеописанным действиям можно использовать сочетания клавиш «Alt+СтрелкаВлево» и «Alt+СтрелкаВправо». Но эти два сочетания клавиш выполняют переходы не между открытыми в данный момент окнами-вкладками, а между местами редактирования. Два соседних места редактирования (предыдущее и следующее) могут располагаться как в разных файлах, так и в одном и том же файле.
Подробнее об этом можно прочитать в статье «Навигация по коду» документации «VS Code».
Привязка файлов к языковым режимам по расширению
Создайте привязку языкового режима к файлам, которые автоматически не определяются правильно. Например, многие конфигурационные файлы с пользовательскими расширениями в действительности написаны в формате JSON.
Например, предположим, что в вашем проекте есть файлы с расширением «.database», которые на самом деле являются файлами в формате JSON. Чтобы редактор «VS Code» автоматически определил правильный языковой режим для таких файлов, можно прописать в параметрах следующее:
Предотвращение «грязной» записи
[Термин «dirty write» (я перевел как «грязная» запись») — это термин из области баз данных. В данной статье речь не идет о базах данных; думаю, термин применяется автором статьи по аналогии. — Прим. пер.]
Редактор «VS Code» покажет вам сообщение об ошибке (см. на иллюстрации 1 ниже), если вы попытаетесь сохранить файл, который не может быть сохранен из-за того, что он уже был изменен на жестком диске какой-то другой программой. В данном случае «VS Code» блокирует сохранение файла, чтобы предотвратить потерю изменений, внесенных в файл из внешней (другой) программы (возможно, другого редактора).
Чтобы разрешить этот конфликт с сохранением, щелкните левой кнопкой мыши на кнопку «Сравнить» («Compare») в окне с сообщением об ошибке, чтобы открыть окно-вкладку разниц (редактор разниц) между версией файла на диске и версией файла в редакторе «VS Code», которая покажет вам содержимое файла на диске (слева на иллюстрации 2 ниже) в сравнении с содержимым файла в редакторе «VS Code» (справа на иллюстрации 2 ниже):
Иллюстрация 1. Сообщение об ошибке при попытке «грязной» записи.
Иллюстрация 2. После нажатия на кнопку «Сравнить».
Используйте кнопки в панели инструментов редактора разниц (см. на иллюстрации 2 выше, обведены красным маркером), чтобы разрешить конфликт сохранения. Вы можете либо выбрать кнопку с галкой, то есть сохранить в файл на диске версию из «VS Code» и затереть изменения, внесенные из внешнего (другого) редактора, либо выбрать кнопку с обернувшейся стрелкой, то есть оставить изменения, внесенные в файл на диске из внешнего редактора, и заменить версию файла в «VS Code» версией с диска (осторожно, при этом ваши изменения, еще не сохраненные в файл из «VS Code», будут потеряны!).
Замечание: версия файла в «VS Code» останется в состоянии конфликта сохранения и не сможет быть сохранена, пока вы не выберете один из двух вышеописанных вариантов разрешения конфликта.