Как создать папку в visual studio code

Vscode create new folder in current directory shortcut key

Is there a shortcut key to create new folder inside current directory in visual studio code?

or at least while on the file explorer sidebar?

1 Answer 1

Ctrl+K Ctrl+S to open Keyboard Shortcuts menu.
Search for @command:explorer.newFolder .
Add your own shortcut.

The Overflow Blog

Linked

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Подготовка проекта 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-документ:

Благодаря этому фрагменту кода браузер будет интерпретировать 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-страниц.

Multi-root Workspaces

You can work with multiple project folders in Visual Studio Code with multi-root workspaces. This can be helpful when you are working on several related projects at one time. For example, you might have a repository with a product’s documentation that you like to keep current when you update the product source code.

multi-root hero

Note: If you’d like to learn more about the VS Code "workspace" concept, you can review What is a VS Code "workspace"? Unless you are explicitly creating a multi-root workspace, a "workspace" is just your project’s single root folder.

Adding folders

It is easy to add another folder to your existing workspace. There are several gestures for adding folders:

Add Folder to Workspace

The File > Add Folder to Workspace command brings up an Open Folder dialog to select the new folder.

Add Root Folder

Once a root folder is added, the Explorer will show the new folder as a root in the File Explorer. You can right-click on any of the root folders and use the context menu to add or remove folders.

Remove Root Folder

The File Explorer should work and behave as before. You can move files between root folders and use any of the typical file operation actions provided in the context menu and the Explorer view.

Settings like files.exclude are supported for each root folder if configured, and across all folders if configured as global user setting.

Drag and drop

You can use drag and drop to add folders to a workspace. Drag a folder to the File Explorer to add it to the current workspace. You can even select and drag multiple folders.

Note: Dropping a single folder into the editor region of VS Code will still open the folder in single folder mode. If you drag and drop multiple folders into the editor region, a new multi-root workspace will be created.

You can also use drag and drop to reorder folders in the workspace.

Multiple selection native file open dialogs

Opening multiple folders with your platform’s native file open dialog will create a multi-root workspace.

command line —add

Add a folder or multiple folders to the last active VS Code instance for a multi-root workspace.

Removing folders

You can remove a folder from a Workspace with the Remove Folder from Workspace context menu command.

Workspace file

When you add multiple folders, they are initially placed in a Workspace titled UNTITLED WORKSPACE and that name will remain until you save the workspace. You do not need to save a Workspace until you want to have it in a permanent location, for example, on your Desktop. Untitled Workspaces are present as long as the VS Code instance they are using is open. Once you completely close an instance with an untitled workspace, you will be asked to save it if you plan to open it again in the future:

save workspace dialog

When you save your workspace, it will create a .code-workspace file and the file name will be displayed in the File Explorer.

Save Workspace As.

If you want to move your Workspace file to a new location, you can use the File > Save Workspace As command, which will automatically set the correct folder paths relative to the new Workspace file location.

Opening workspace files

To reopen a Workspace, you can:

Double-click the .code-workspace file in your platform’s Explorer.
Use the File > Open Workspace command and select the Workspace file.
Select the Workspace from the File > Open Recent ( ⌃R (Windows, Linux Ctrl+R ) ) list.
- Workspaces have a (Workspace) suffix to differentiate them from folders.
Just like Close Folder when a single folder is open in VS Code, there is a Close Workspace ( ⌘K F (Windows, Linux Ctrl+K F ) ) command to close the active Workspace.

Workspace file schema

The schema of .code-workspace is fairly straightforward. You have an array of folders with either absolute or relative paths. Relative paths are better when you want to share Workspace files.

You can override the display name of your folders with the name attribute, to give more meaningful names to folders in the Explorer. For example, you could name your project folders such as ‘Product’ and ‘Documentation’ to easily identify the content by folder name:

which will result in the following Explorer display:

As you can see from the example above, you can add comments to your Workspace files.

The Workspace file can also contain Workspace global settings under settings and extension recommendations under extensions , which we will discuss below.

General UI

Editor

There are only a few changes to the VS Code UI when you are using multi-root workspaces, primarily to disambiguate files between folders. For example, if there is a name collision between files in multiple folders, VS Code will include the folder name in tabbed headers.

If you’d always like to see the folder displayed in the tabbed header, you can use the workbench.editor.labelFormat setting "medium" or "long" values to show the folder or full paths.

VS Code UI such as the OPEN EDITORS and Quick Open ( ⌘P (Windows, Linux Ctrl+P ) ) lists include the folder name.

If you are using an File Icon Theme and the active theme supports it, you will see a special Workspace icon.

Below you can see the Workspace icons from the built-in Minimal (Visual Studio Code) file icon theme:

Search

VS Code features like global search work across all folders and group the search results by folder.

When you have a multi-root workspace open, you can choose to search in a single root folder by using the ./ syntax in the files to include box. For example, if you enter ./project1/**/*.txt , that will search for all .txt files under the project1/ root folder.

Settings

With multiple root folders in one workspace, it is possible to have a .vscode folder in each root folder defining the settings that should apply for that folder. To avoid setting collisions, only resource (file, folder) settings are applied when using a multi-root workspace. Settings that affect the entire editor (for example, UI layout) are ignored. For example, two projects cannot both set the zoom level.

User settings are supported as with single folder projects and you can also set global Workspace settings that will apply to all folders in your multi-root Workspace. Global Workspace settings will be stored in your .code-workspace file.

When you go from a single folder instance to multiple folders, VS Code will add the appropriate editor-wide settings from the first folder to the new global Workspace settings.

You can easily review and modify the different settings files through the Settings editor. The Settings editor tabs let you select your User settings, global Workspace settings, and individual folder settings.

You can also open specific settings files with the commands:
- Preferences: Open User Settings — Open your global User settings
- Preferences: Open Workspace Settings — Open the settings section of your Workspace file.
- Preferences: Open Folder Settings — Open the settings for the active folder.
Global Workspace settings override User settings and folder settings can override Workspace or User settings.

Unsupported folder settings

Unsupported editor-wide folder settings will be shown as grayed out in your folder settings and are filtered out of the DEFAULT FOLDER SETTINGS list. You will also see an information icon in front of the setting.

Debugging

With multi-root workspaces, VS Code searches across all folders for launch.json debug configuration files and displays them with the folder name as a suffix. Additionally VS Code will also display launch configurations defined in the workspace configuration file.

The example above shows the debugging configurations for the TSLint extension. There is a launch configuration from the tslint extension folder to start the extension running in the VS Code Extension Host and also an attach configuration from the tslint-server folder to attach the debugger to a running TSLint server.

You can also see the three Add Config commands for the folders, tslint , tslint-server , and tslint-tests , in the vscode-tslint Workspace. The Add Config command will either open an existing launch.json file in the folder’s .vscode subfolder or create a new one and display the debugging configuration template dropdown.

Variables used in a configuration (for example $ or the now deprecated $ ) are resolved relative to the folder they belong to. It is possible to scope a variable per workspace folder by appending the root folder’s name to a variable (separated by a colon).

Workspace launch configurations

Workspace scoped launch configurations live in the "launch" section of the workspace configuration file (Workspaces: Open Workspace Configuration File in the Command Palette):

Alternatively, new launch configurations can be added via the "Add Config (workspace)" entry of the Launch Configuration dropdown menu:

A compound launch configuration can reference the individual launch configurations by name as long as the names are unique within the workspace, for example:

If the individual launch configuration names are not unique, the qualifying folder can be specified with a more verbose "folder" syntax:

In addition to compounds , the launch section of the workspace configuration file can contain regular launch configurations too. Make sure that all used variables are explicitly scoped to a specific folder because otherwise they are not valid for the workspace. You can find more details about explicitly scoped variables in the Variables Reference.

Here is an example for a launch configuration where the program lives in a folder "Program" and where all files from a folder "Library" should be skipped when stepping:

Tasks

Similar to how VS Code searches for debugging configurations, VS Code will also try to autodetect tasks from gulp, grunt, npm, and TypeScript project files across all folders in a workspace as well as search for tasks defined in tasks.json files. The location of tasks is indicated by a folder name suffix. Note that tasks defined in tasks.json must be version 2.0.0.

From the TSLint extension Workspace example above, you can see that there are two configured tasks from tasks.json files in the tslint and tslint-tests folders and numerous autodetected npm and TypeScript compiler detected tasks.

Workspace task configuration

Workspace scoped tasks live in the "tasks" section of the workspace configuration file (Workspaces: Open Workspace Configuration File in the Command Palette). Only "shell" and "process" type tasks can be defined in the workspace configuration file.

Source Control

With multi-root workspaces, there is a SOURCE CONTROL PROVIDERS section that gives you an overview when you have multiple active repositories. These can be contributed by several SCM providers; for example, you can have Git repositories side-by-side with Azure DevOps Server workspaces. As you select repositories in this view, you can see the source control details below.

You can use Ctrl+Click or Shift+Click to select multiple repositories. Their details will appear as separate regions underneath.

Extensions

If you are an extension author, you can review our Adopting Multi Root Workspace APIs guide to learn about VS Code multi-root workspace APIs and how to make your extension work well across multiple folders.

Below are some of the popular extensions that have adopted the multi-root workspace APIs.

Note: If an extension doesn’t yet support multiple folders, it will still work in the first folder of your multi-root workspace.

Extension recommendations

VS Code supports folder level extension recommendations through the extensions.json files under the folder’s .vscode subfolder. You can also provide global Workspace extension recommendations by adding them to your .code-workspace file. You can use the Extensions: Configure Recommended Extensions (Workspace Folder) command to open your Workspace file and add extension identifiers (.) to the extensions.recommendations array.

Next steps
Common questions

How can I go back to working with a single project folder?

You can either close the Workspace and open the folder directly or remove the folder from Workspace.

As an extension author what do I need to do?

See our Adopting Multi Root Workspace APIs guide. Most extensions can easily support multi-root workspaces.

Как создать новую папку в Visual Studio Code?

Как одновременно создать новую папку и несколько файлов в VSCode? Щелкните правой кнопкой мыши и выберите «Новый файл». Введите желаемую папку и имя файла. Результат шага 1 & amp; 2.

Как создать рабочую область в Visual Studio Code?

Вы можете добавить папки в рабочую область, используя "Файл" | Msgstr "Добавить папку в рабочую область . ". По желанию, также перейдите в "Файл" | "Предпочтения" | "Настройка". Вкладка "Настройки пользователя" будет открыта по умолчанию. Найдите вкладку "Настройки рабочего пространства" и выберите ее.

Что такое Workspace в Visual Studio Code?

code-workspace ) файл и является просто индексом для всех файлов и папок, которые он содержит (или указывает на), где бы они ни находились на вашем жестком диске. Вы можете посмотреть на это, открыв его в текстовом редакторе. Закройте созданную папку и закройте код Visual Studio.

Как переименовать рабочую область в Visual Studio Code?

Щелкните значок параметров (шестеренки) справа от каждой рабочей области, чтобы переименовать рабочую область, изменить ее расположение и аргументы командной строки.
Похожие публикации: