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

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

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

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

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

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

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

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

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

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

At its heart, Visual Studio Code is a code editor. Like many other code editors, VS Code adopts a common user interface and layout of an explorer on the left, showing all of the files and folders you have access to, and an editor on the right, showing the content of the files you have opened.

In addition, there are a number of unique features in the VS Code user interface. This topic describes these features.

Files, Folders & Projects

VS Code is file and folder based — you can get started immediately by opening a file or folder in VS Code.

On top of this, VS Code can read and take advantage of a variety of project files defined by different frameworks and platforms. For example, if the folder you opened in VS Code contains one or more package.json , project.json , tsconfig.json , or ASP.NET Core Visual Studio solution and project files, VS Code will read these files and use them to provide additional functionality, such as rich IntelliSense in the editor.

Basic Layout

VS Code comes with a simple and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse and access the full context of your folder or project. The UI is divided into four areas:

• Editor the main area to edit your files. You can open up to three editors side by side
• Side Bar contains different views like the Explorer to assist you while working on your project
• Status Bar indicates information about the opened project and the files you edit
• View Bar on the far left-hand side, lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled

Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.

Instead of placing files in separate tabs, VS Code allows up to three visible editors at any one time, allowing you place up to three files together side by side.

This helps to reduce the overhead of managing tabs but does not restrict the number of files you can work with. The Explorer view maintains a list of working files allowing you quick access to the files you need.

Tip: You can move the Side Bar to the right hand side (View > Move Sidebar) or toggle its visibility ( kb(workbench.action.toggleSidebarVisibility) ).

Side by Side Editing

You can have up to three editors open side by side.

If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

• kbstyle(Ctrl) (Mac: kbstyle(‘Cmd’) ) click on a file in the Explorer
• kb(workbench.action.splitEditor) to split the active editor into two
• Open to the Side from the Explorer context menu on a file

Whenever you open another file, the editor that is active will display the content of that file. So if you have two editors side by side and you want to open file ‘foo.cs’ into the right hand editor, make sure that editor is active (by clicking inside it) before opening file ‘foo.cs’.

When you have more than one editor open you can switch between them quickly by holding the kbstyle(Ctrl) (Mac: kbstyle(‘Cmd’) ) key and pressing kbstyle(1) , kbstyle(2) , or kbstyle(3) .

Tip: You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.

Explorer

The Explorer is used to browse, open, and manage all of the files and folders in your project.

After opening a folder in VS Code, the contents of the folder are shown in the Explorer. You can do many things from here:

• create, delete, and rename files and folders
• move files and folders with drag and drop
• use the context menu to explore all options

Tip: You can drag and drop files into the Explorer from outside VS Code to copy them

VS Code works very well with other tools that you might use, especially command line tools. If you want to run a command line tool in the context of the folder you currently have open in VS Code, right-click the folder and select Open in Command Prompt (or Open in Terminal on OS X or Linux).

You can also navigate to the location of a file or folder in the native Explorer by right-clicking on a file or folder and selecting Reveal in Explorer (or Reveal in Finder on the Mac or Open Containing Folder on Linux).

Tip: Type kb(workbench.action.quickOpen) (Quick Open) to quickly search and open a file by its name.

By default, VS Code excludes some folders from the explorer (for example. .git ). Use the files.exclude setting to configure rules for hiding files and folders from the explorer.

Tip: This is really useful to hide derived resources files, like \*.meta in Unity, or \*.js in a TypeScript project. For Unity to exclude the \*.cs.meta files, the pattern to choose would be: «**/*.cs.meta»: true . For TypeScript, you can exclude generated JavaScript for TypeScript files with: «**/*.js»: .

Working Files

At the top of the Explorer is a section labeled WORKING FILES. This is a list of active files. These are files you previously opened in VS Code that you’re working on. For example, a file will be listed in the working files section if you:

• make a change to a file
• double-click a file in the Explorer
• open a file that is not part of the current folder

Think of the WORKING FILES section as similar to Tabs that you may be familiar with in other code editors or IDEs. Just click a file in the working files section, and it becomes active in VS Code.

Once you are done with your task, you can individually remove files from the working files section, or you can remove all files from the working files section by using the Close All Files action.

Tip: You can type kb(workbench.files.action.workingFilesPicker) to navigate the list of working files from file picker without having the explorer visible.

Configuring the Editor

VS Code gives you many options to configure the editor. You can set options globally through user settings or per project/folder through workspace settings. Settings values are kept in a settings.json file.

Select Files > Preferences > User Settings (or press kb(workbench.action.showCommands) , type user and press Enter ) to edit the user settings.json file.

Select Files > Preferences > Workspace Settings (or press kb(workbench.action.showCommands) , type worksp and press Enter ) to edit the workspace settings.json file.

You will see the VS Code Default Settings in the left window and your editable settings.json on the right. You can easily review and copy settings from Default Settings.

After editing your settings, type kb(workbench.action.files.save) to save your changes. The changes will take effect immediately.

Save/Auto Save

By default, VS Code requires an explicit action to save your changes to disk, kb(workbench.action.files.save) .

However, it’s easy to turn on Auto Save , which will save your changes after a configured delay or when focus leaves the editor. With this option turned on, there is no need to explicitly save the file.

To configure Auto Save , open User Settings or Workspace Settings and find the associated settings:

• files.autoSave : Can have the values off to disable auto save, afterDelay to save files after a configured delay and onFocusChange to save files when focus moves out of the editor of the dirty file.
• files.autoSaveDelay : Configures the delay in milliseconds when files.autoSave is configured to afterDelay .

Search Across Files

VS Code allows you to quickly search over all files in the currently-opened folder. Simply type kb(workbench.view.search) and type in your search. Search results are grouped into files containing the search term, with an indication of the hits in each file and its location. Expand a file to see a preview of all of the hits within that file. Then single-click on one of the hits to view it in the editor.

Tip: We support regular expression searching in the search box, too.

You can configure advanced search options by typing kb(workbench.action.search.toggleQueryDetails) . This will show additional fields to configure the search.

In the two input boxes below the search box, you can include and exclude files. Click on the toggle to the right to enable the glob pattern syntax:

• * to match one or more characters in a path segment
• ? to match on one character in a path segment
• ** to match any number of path segments, including none
• <> to group conditions (e.g. matches all HTML and text files)
• [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0 , example.1 , …)

VS Code excludes some folders by default to reduce the number of search results that you are not interested in (for example: node_modules ). Open settings to change these rules under the files.exclude and search.exclude section.

Tip: From the Explorer you can right-click on a folder and select Find in Folder to search inside a folder only.

Command Palette

VS Code is equally accessible from the keyboard. The most important key combination to know is kb(workbench.action.showCommands) , which brings up the Command Palette. From here, you have access to all of the functionality of VS Code, including keyboard shortcuts for the most common operations.

The Command Palette provides access to many commands. You can execute editor commands, open files, search for symbols, and see a quick outline of a file, all using the same interactive window. Here are a few tips:

• kb(workbench.action.quickOpen) will let you navigate to any file or symbol by simply typing its name
• kb(workbench.action.openPreviousEditor) will cycle you through the last set of files opened
• kb(workbench.action.showCommands) will bring you directly to the editor commands
• kb(workbench.action.gotoSymbol) will let you navigate to a specific symbol in a file
• kb(workbench.action.gotoLine) will let you navigate to a specific line in a file

Type ? into the input field to get a list of available commands you can execute from here:

Quick File Navigation

The Explorer is great for navigating between files when you are exploring a project. However, when you are working on a task, you will find yourself quickly jumping between the same set of files. VS Code provides two powerful commands to navigate in and across files with easy-to-use key bindings.

Hold kbstyle(Ctrl) and press kbstyle(Tab) to view a list of all files that have been opened since VS Code was launched. To open one of these files, use kbstyle(Tab) again to pick the file you want to navigate to, then release kbstyle(Ctrl) to open it.

Alternatively, you can use kb(workbench.action.navigateBack) and kb(workbench.action.navigateForward) to navigate between files and edit locations. If you are jumping around between different lines of the same file, these shortcuts allow you to navigate between those locations easily.

Tip: You can open any file by its name when you type kb(workbench.action.quickOpen) (Quick Open).

File Encoding Support

Set the file encoding globally or per workspace by using the files.encoding setting in User Settings or Workspace Settings.

You can view the file encoding in the status bar.

Click on the encoding in the status bar to reopen or save the active file with a different encoding.

Then choose an encoding.

Launching from the Command Line

You can launch VS Code from the command line to quickly open a file, folder, or project. Typically, you open VS Code within the context of a folder. We find the best way to do this is to simply type:

Tip: We have instructions for Mac users in our Setup topic that enable you to start VS Code from within a terminal. We add the VS Code executable to the PATH environment variable in Windows and Linux automatically.

Sometimes you will want to open or create a file. If a file does not exist, we will create it for you:

Tip: You can have as many file names as you want separated by spaces.

Additional Command line arguments

Here are optional command line arguments you can use when starting VS Code at the command line via code :

Argument	Description
-h or —help	Print usage
-v or —version	Print VS Code version (e.g. 0.10.10)
-n or —new-window	Opens a new session of VS Code instead of restoring the previous session.
-r or —reuse-window	Forces opening a file or folder in the last active window.
-g or —goto	When used with file:line:column?, opens a file at a specific line and optional column position. This argument is provided since some operating systems permit : in a file name.
file	Name of a file to open. If the file doesn’t exist, it will be created and marked as edited. You can specify multiple files by separating each file name with a space.
file:line:column?	Name of a file to open at the specified line and optional column position. You can specify multiple files in this manner, but you must use the -g argument (once) before using the file:line:column? specifier.
folder	Name of a folder to open. You can specify multiple folders.
-d or —diff	Open a file difference editor. Requires two file paths as arguments.
—locale	Set the display language (locale) for the VS Code session. Supported locales are: en-US , zh-TW , zh-CN , fr , de , it , ja , ko , ru , es
—disable-extensions	Disable all installed extensions. Extensions will still be visible in the Extensions: Show Installed Extensions dropdown but they will never be activated.
-w or —wait	Wait for the window to be closed before returning

For both files and folders, you can use absolute or relative paths. Relative paths are relative to the current directory of the command prompt where you run code .

If you specify more than one file or folder at the command line, VS Code will open only a single instance.

Opening a Project

VS Code does not distinguish between opening a folder and opening a project. If VS Code detects a project in the folder you opened (for example, a C# project), that project context will be displayed on the Status Bar. If more than one project is found, you can switch projects from there as well.

To open a project contained in the folder C:\src\WebApp , you would start VS Code like this:

After VS Code opens, just open source files and use the Status Bar to switch the active project as needed.

Window Management

VS Code has some options to control how windows should be opened or restored between sessions.

The window.openFilesInNewWindow setting controls if files should open in a new window instead of reusing an existing VS Code instance. By default, VS Code will open a new window when you double-click on a file outside VS Code or open a file from the command line. Set this to false to reuse the last active instance of VS Code and open files in there.

The window.reopenFolders setting tells VS Code how to restore the opened windows of your previous session. By default, VS Code will reopen the last opened folder you worked on (setting: one ). Change this setting to none to never reopen any folders and always start with an empty VS Code instance. Change it to all to restore all folders you worked on during your previous session.

Next Steps

You’ve covered the basic user interface — there is a lot more to VS Code. Read on to find out about:

— Learn how to configure VS Code to your preferences through user and workspace settings. — Lint, IntelliSense, Lightbulbs, Peek and Goto Definition, and more — This is where VS Code really shines — Themes, settings, and keyboard bindings

Common Questions

Q: Is it possible to globally search and replace?

A: This feature is not yet implemented, but you can expect it to come in the future!

Q: How do I turn on word wrap?

A: You can control word wrap through the editor.wrappingColumn setting. By default editor.wrapperingColumn is set to 300 characters. You can adjust the column width or set the value to zero to wrap on the editor viewport width:

You can toggle word wrap for the VS Code session with kb(editor.action.toggleWordWrap) . Restarting VS Code will pick up the persisted editor.wrappingColumn value.

You can also add vertical column rulers to the editor with the editor.rulers setting which takes an array of column character positions where you’d like vertical rulers.

Q: How can I show more files in the WORKING FILES section?

Начало работы с C# и Visual Studio Code

.NET Core предcтавляет собой быструю модульную платформу для создания приложений, работающих на ОС Windows, Linux и macOS. Visual Studio Code с расширением C# позволяет эффективно работать с кодом, а также обеспечивает полную поддержку IntelliSense (интеллектуальное завершение кода) и отладки для языка C#.

Предварительные требования

1. Установите Visual Studio Code.
2. Установите пакета SDK для .NET Core.
3. Установите расширение C# из Marketplace для Visual Studio Code.

Hello World

Давайте начнем с создания простой программы Hello World для .NET Core.

1. Откройте проект.
   • Откройте Visual Studio Code.
   • Щелкните значок обозревателя в расположенном слева меню, затем щелкнитеОткрыть папку.
   • Выберите папку, в которой вы хотите разместить проект C#, и щелкните Выбрать папку. В нашем примере мы создадим для проекта новую папку с именем HelloWorld.

1. Инициализируйте проект C#.
   • Откройте в Visual Studio Code встроенный терминал, нажав клавиши CTRL + ` (обратный апостроф). Также можно выбрать в главном меню пункты Просмотр > Встроенный терминал.
   • В окне терминала введите dotnet new console .
   • Эта команда создает в выбранной папке файл Program.cs с уже готовой простой программой Hello World, а также файл проекта C# с именем HelloWorld.csproj .

1. Выполните разрешение для средств сборки:
   • Для .NET Core 1.1 введите dotnet restore . Команда dotnet restore предоставляет доступ к пакетам .NET Core, которые необходимы для сборки этого проекта.

• Для .NET Core 2.0 этот этап является необязательным. Команда dotnet restore выполняется автоматически при создании нового проекта.

• Введите dotnet run .

Вы можете просмотреть небольшие видеоматериалы с информацией о процессе настройки для Windows, macOS, или Linux.

Отладка

1. Откройте файл Program.cs, щелкнув его. Когда вы в первый раз открываете файл C# в Visual Studio Code, в редакторе загружается OmniSharp.

1. Visual Studio Code предложит добавить недостающие ресурсы для сборки и отладки приложения. Выберите ответ Да.

1. Чтобы открыть окно отладки, щелкните значок “Отладка” в меню слева.

1. Найдите зеленую стрелку в верхней части панели. Убедитесь, что в раскрывающемся списке рядом с ней выбран вариант .NET Core Launch (console) .

1. Добавьте в проект точку останова, щелкнув левое поле редактора кода (пустое пространство слева от номера строк) в строке 9.

1. Нажмите клавишу F5 или щелкните зеленую стрелку, чтобы начать отладку. Отладчик останавливает выполнение программы, когда достигнет точки останова, которую вы только что установили.
   • Во время отладки вы можете просматривать локальные переменные в верхней левой области или в консоли отладки.

1. Выберите зеленую стрелку в верхней части, чтобы продолжить отладку, или выберите красный квадрат в верхней части, чтобы остановить процесс.

Дополнительные сведения и советы по отладке .NET Core в Visual Studio Code с помощью OmniSharp см. в разделе Инструкции по настройке отладчика .NET Core.

Как создать новую рабочую область в 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? Сообщите нам, как вы создали и оптимизировали свое рабочее пространство в комментариях ниже.

Visual Studio Code. Настройка и применение. Часть 1

Некоторое время назад перешёл на редактор кода VSCode, и в ходе изучения у меня скопился набор общих подходов и настроек, которыми было бы полезно поделиться. В данной статье затронуты все аспекты, к которым я прибегаю в ходе своей рабочей практики. Выбор редактора и его настройка — вещь глубоко субъективная, поэтому и этот гайд я решил сделать таким же персонифицированным. Здесь нет призывов к действию, практически нет и общего описания функций редактора — за этим вы можете обратиться к официальной документации, кстати хорошо написанной. Я же здесь просто последовательно пройдусь по различным аспектам применения редактора и покажу, как лично я им пользуюсь. Если после прочтения раздела вам понравится описанный в нём подход, то вы можете делать также, если же у вас уже есть сформировавшееся видение на этот счёт, то просто посмотрите на иную точку зрения. Так что тут будет много “я”, но так и задумано ��

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

В вопросе пользования редакторов ранее я пользовался Sublime Text в его стандартной комплектации, т.к. он покорил меня своими функциями редактирования с множественным курсором, которые тогда были в новинку. Потом услышал про Brackets — он был заточен специально под frontend, в нём была возможность просмотра стилей блока прямо из разметки, так называемый “peek”, и поддерживался Live Reload. Однако он был гораздо медленнее и забагованее, чем Sublime, из-за чего на нагруженных рабочих проектах вкупе со слабым железом он стал неюзабелен. Так что после него я решил опробовать Atom — в принципе, приятный редактор, но пробыл на нём недолго по той же причине — он был быстрее, но всё равно периодически намертво зависал. Ну и в итоге я вернулся обратно на Sublime— он решил все вопросы со скоростью, и на этот раз я подверг его значительной кастомизации, и с десятком расширений он преобразился. С тех пор я был ярым сублаймщиком, пока не услышал про VSCode, который стали рекомендовать респектабельные разработчики из моей области на Западе, и в различных видеокурсах, где можно видеть редактор, я стал замечать в 95% VSCode. В общем, решил дать ему шанс.

Главное преимущество VSCode заключается в том, что он быстрый, как редакторы кода (быстрее только Sublime), но при этом функциональный, как полноценная IDE. Почему я никогда не пользовался IDE — потому что они тяжеловесные и в плане интерфейса сильно нагруженные. Это противоречит всем моим представлениям о работе фронтенда. VSCode же прост внешне, похож на кастомизированный Sublime, но при этом на другом уровне функциональности, специально заточен под фронтенд и постоянно развивается (разработчики ежемесячно выкатывают апдейт с новыми фишками) — чего ещё можно желать?

Так что давайте пройдёмся по различным аспектам этого редактора, посмотрим как получить профит от его сильных сторон, и как ещё улучшить его дефолтную конфигурацию.

В рамках 1-ой части мы рассмотрим следующие аспекты работы с редактором:

Это основной интерфейс для вашего общения с редактором. Рассматриваем разнообразные способы его применения. Общий подход к заданию настроек. Прописываем ряд полезных глобальных настроек и решаем вопрос синхронизации между различными рабочими устройствами. Подходы по оптимизации пространства редактора, отводимого под работу с кодом. Инструменты и подходы, позволяющие ускорить набор кода. Использование Emmet в VSCode и редактирование с множественным курсором. Преимущества символьного поиска над текстовым в ряде типовых ситуаций. Рассматриваем способы применения механизма хлебных крошек для ориентирования в тяжёлых файлах. Подход к управлению проектами с возможностью быстрого переключения между ними. Применение интегрированного терминала, как более удобная альтернатива сторонним приложениям. Встроенные возможности по работе с Git. Оборудуем VSCode ультимативным инструментом для навигации по истории коммитов.

Палитра команд

Первое с чего стоит начать — это палитра команд (Command Palette). Это основной интерфейс, через который вы можете выполнить любую команду, определённую в рамках вашего редактора. Если вы привыкнете ею пользоваться, то это сильно ускорит ваши рабочие процессы, т.к. не нужно запоминать какая команда вызывается через какое меню или за какой комбинацией горячих клавиш спрятана. К тому же управление через одну лишь клавиатуру всегда быстрее, чем в сочетании с мышью.

Ctrl + Shift + P — вызов палитры команд.

Как часто говорят, если вы хотите запомнить только одну комбинацию, запомните Ctrl + Shift + P. Это не специфика VSCode, так было и в Sublime. Если вы забыли как вызвать некоторую команду, то просто вызовите палитру и начните вводить релативные для команды слова, после чего автосаджест выведет вам подходящие результаты.

Лично я настолько к ней привык, что не пользуюсь классическим меню в верхнем левом углу экрана и не растрачиваю собственную оперативную память на запоминание местонахождения отдельных команд — просто Ctrl + Shif + P, начинаю вводить, что мне нужно, и стрелками докручиваю до нужной команды.

Единый интерфейс

В VSCode существует ряд комбинаций клавиш, которые вызывают тот же интерфейс, но с другим флагом в начале. Т.е. сама палитра идёт с флагом “>”, а могут быть и другие или вовсе не быть. Важно понимать, что это всё единый интерфейс, так что нет необходимости запоминать все эти комбинации, если вы не пользуетесь ими активно — достаточно запомнить одну комбинацию, этот интерфейс открывающую.

Ctrl + P — открытие командной строки без флагов.

Без флага интерфейс функционирует, как открытие файлов. При этом отображается подсказка, что можно ввести “?”, чтобы увидеть список флагов, которые можно прописать, и какой функционал этот ввод предоставит.

Лично я для набора команд пользуюсь комбинацией Ctrl + Shift + P, т.к. ей пользуешься максимально часто, и в конечном счёте, это быстрее, чем прожать Ctrl + P и ввести флаг “>”. Для всего остального же использую Ctrl + P, который откроет строку без флагов, и я смогу ввести нужный, или обратиться к справке, если вдруг запамятовал.

Открытие файлов

Теперь поговорим поподробнее о самих командах. Первое и главное — это конечно же сам быстрый переход по файлам.

Последнее время стараюсь отучить себя от переключения между файлами через проводник. Практика показывает, что через командную строку получается куда быстрее. К тому же экономится место экрана, т.к. не нужно держать панель управления постоянно открытой, да и вообще это круто ��

Рядовой кейс: прописываешь стили, видишь переменную, далее, чтобы вспомнить, что она означает, заходишь в панель управления, ищешь среди кучи открытых директорий директорию со стилями и среди всех файлов скроллишь до variables.css — успех. Через командную строку: Ctrl + P, “var”, файл уже на верхней строчке списка автосаджеста, Enter — готово.

Также когда практиковался с подобной навигацией, пришёл к мысли, что часто бывает нужно открыть сразу несколько файлов, но с этим есть 2 проблемы: выбор на Enter закрывает командную строку и файл открывается в режиме на просмотр. Т.е. для выбора следующего файла нам нужно дважды кликнуть по табу открытого файла, чтобы он зафиксировался и не заменился при открытии следующего, после чего повторить последовательность выполненных операций. Оказалось, что всё это легко решается — просто нужно вместо Enter использовать стрелку вправо. Т.о., допустим, нам нужно открыть 3 файла: block.js, block.hbs и block.css. Прожимаем Ctrl + P, “block”, стрелка вправо, (стрелка вниз + стрелка вправо) x2 — получаем 3 файла, открытые на редактирование.

Прочие команды

Остальными командами я пользуюсь редко. Самое полезное, что там есть — это навигация по символам файла (@), но с введением системы хлебных крошек (об этом далее) необходимость в этом исчезла. Поиск по символам рабочей директории (#) у меня работает криво, и для навигации по коду есть куда более удобные механизмы (о навигации также позже). Ну а переходу к строке файла (:) и вовсе сложно придумать применение кроме как в целях поддержки accessibility, к тому же он и так доступен из статус бара.

Управление настройками

Начну с настроек, т.к. по сути всё, что здесь будет сказано, вертится вокруг них. Чем тщательнее вы настроите редактор под себя, тем комфортнее вам с ним будет работать в дальнейшем.

Окно настроек

Настройки прописываются через json-файлы, но также доступен и пользовательский интерфейс (UI).

Ctrl + , — переход в окно настроек.

Я обычно пользуюсь UI, но периодически бывает нужно перейти непосредственно к json-файлам. Это можно сделать нажатием по кнопке Open settings (JSON) в верхнем правом углу. Также периодически будут встречаться настройки, задающиеся в свободном формате, которые определяются только через json — в таких случаях кнопка Edit in settings.json будет присутствовать прямо в настройках этого параметра.

Настройки делятся на 3 типа:

1. Default User Settings — стандартные настройки. Здесь определяются дефолтные значения для всех возможных настроек редактора. Они доступны только в режиме на чтение, т.е. не переопределяются.
2. User Settings — пользовательские настройки. Здесь прописываются все глобально переопределяемые стандартные значения.
3. Workspace Settings — настройки рабочей директории. Те же пользовательские настройки, только не глобальные, а на уровне отдельного проекта.

При работе с JSON удобнее всего находить нужный параметр поиском по Default User Settings. После чего нажимаете кнопку Edit на полях и копируете данный параметр в список своих настроек. В случае с предопределённым списком возможных значений можно сразу выбрать нужное. Кроме того при ручном написании в User Settings Intellisense выведет список возможных значений в процессе набора.

⚠️ Ранее при редактировании настроек в формате JSON панель Default User Settings выводилась всегда в левом сплите. В новых версиях она отключена по умолчанию, но её можно активировать через настройку:

Общие настройки

Теперь оговорюсь о ряде общих настроек, которые у меня прописаны, и могут быть вам также полезны.

По пробельным символам есть ряд правил, которые считаются общепринятыми. VSCode позволяет автоматизировать управление такими символами. Для этого пропишем ряд настроек:

Таким образом мы автоматизировали проставление пустой строки в конце файла, при этом убрали все пустые строки в конце кроме этой и удалили все пробельные символы на конце строк и на пустых строках. Теперь можно навсегда об этом забыть, всё будет причёсываться само по себе при сохранении файла.

Включаем перенос строк при достижения границ рабочей области экрана, чтобы не возникало горизонтальной прокрутки:

Убираем алерты с предупреждениями при удалении и перетаскивании файлов и директорий:

После того, как настройки заданы, вы думаете: “Вот другое дело, теперь заживём! Только нужно не забыть ещё и на офисном компе это повторить. Отмечу себе.”. И действительно, что если вы параллельно работаете на домашней стационарной ЭВМ, на офисном компьютере и рабочем ноутбуке? Нужно по 3 раза проделывать одну и ту же работу? Кроме того, что это тратит ваше время, рано или поздно это приведёт к различиям между настройками на различных устройствах. К счастью, для решения этой проблемы был создан плагин Settings Sync.

Settings Sync

Данный плагин позволяет создать единый хаб для ваших настроек. После того, как на одной машине были прописаны новые настройки, жмёте Upload settings, а при начале работы на других устройствах прожимаете Download settings. Быстро, просто, и ваши настройки всегда синхронизированы. При этом синхронизируются не только стандартные файлы с настройками, но и список установленных расширений, настройки рабочих директорий (папка .vscode в корне проекта), сниппеты, горячие клавиши — в общем, всё, что может быть синхронизировано.

Пошаговая инструкция по первоначальной настройке синхронизации приведена на странице плагина, так что не буду повторяться. В общих словах, нужно создать новый access token на Github и загрузить настройки, после чего система выдаст вам Gist ID, который нужно будет указать при скачивании настроек с другого устройства. Если что, этот ID сохраняется в User Settings, где его всегда можно посмотреть.

По умолчанию настройки приватные, но можно создать и публичную версию. Так можно задать корпоративные настройки, которые новоприбывшие сотрудники при настройке рабочего места при желании, если хотят пользоваться VSCode, могут себе загрузить в качестве быстрого старта, а потом уже изменять под свои нужды. При этом эти публичные настройки доступны только на чтение, так что никто кроме вас, их изменить не сможет.

Касательно загрузки / отгрузки настроек, я это делаю через палитру команд: Sync: Update / Upload Settings и Sync: Download Settings. Имеется возможность автоматизировать эти процессы, проставив соответствующие флаги в настройках, но по мне это избыточно, т.к. делается не так уж и часто, а подобная автоматизация увеличивает общее время загрузки редактора.

☝️ При работе с Settings Sync есть довольно неочевидный момент: как не синхронизировать ряд настроек из списка? Допустим, у меня дома стоит геймерский 2K-монитор и на нём шрифт в 14px смотрится хорошо, но на небольшом рабочем ноуте 13px будет в самый раз. На самом деле всё очень просто (после того как убьёшь порядком времени на поиск решения) — такие настройки нужно предварять директивой sync-ignore:

Управление рабочим пространством

Интерфейс редактора в режиме Zen Mode — минимум отвлекающих факторов, только вы и код.

Всегда хотелось бы выделять под окно редактора максимально возможное пространство. Это в принципе всегда хорошо, но порой бывает критично — например, на небольшом мониторе ноутбука, или на обычном мониторе, когда по совместительству открыт браузер.

Самое явное, что здесь можно сделать — это отказаться от панели управления. Если вы привыкнете к палитре команд, то панель вы будете разворачивать только в ряде частных случаев, а потом продолжите работать внутри.

Ctrl + B — переключение видимости панели управления.

Держать снизу панель открытой также не нужно. Terminal при работе с кодом не нужен, Debug Console нужна только при отладке, Output и Problems также открываются лишь периодически.

Ctrl + ` — переключение видимости терминала.

Если нужно выиграть пространство, то подойдёт также переход в фулскрин. Это откроет редактор на весь экран и спрячет верхнюю строку меню, которая и так не нужна. Я обычно этой функцией не пользуюсь, но если, допустим, показываешь презентацию с ноутбука с увеличенным шрифтом, то бывает полезно.

F11 — полноэкранный режим.

Тогда сразу оговорюсь о зуме. Чтобы он работал на колёсико мыши, нужно активировать его в настройках:

После этого зум станет доступен через привычные:

Ctrl + (Mouse wheel) — переключение масштаба.

Ну и последнее, Zen Mode. Если вы хотите абстрагироваться от всего кроме кода, убрать все отвлекающие факторы, то включайте этот режим. Он оставит только центрированное окно редактора и ничего более. Я включаю его периодически вечерами, когда концентрация уже понижена, ну или когда просто усердно работаю с некоторым фрагментом кода, и больше не хочу ничего видеть. Для переключения между файлами вам здесь уже придётся пользоваться Ctrl + P. Ну а чтобы выйти просто нажмите Esc.

Ctrl + K, Z — Zen mode.

Сворачивание групп

Порой на загруженных файлах бывает желание свернуть все группы. Чтобы не делать это вручную, можно свернуть сразу все. Это можно сделать через команду Fold All или через комбинацию:

Ctrl + K Ctrl + 0 — сворачивание всех раскрываемых блоков.

После того, как разберётесь со структурой, возвращаем всё обратно аналогично через Unfold All или через комбинацию:

Ctrl + K Ctrl + J — раскрытие всех раскрываемых блоков.

С добавлением хлебных крошек в этом стало меньше смысла, но стоит указать, что такая возможность имеется, т.к. изредка я ей всё-таки пользуюсь.

Написание кода

Теперь сконцентрируемся на главной функции редактора кода — непосредственно написании кода. В VSCode присутствует ряд возможностей для упрощения этого процесса.

Emmet

Emmet встроен в VSCode, его можно увидеть в списке плагинов в категории Built-in Extensions. Если кто не пользовался им ранее, то это инструмент, позволяющий упростить написание разметки. Можно сказать, что это сниппеты для HTML, только с возможностью чейнинга. Например можно написать:

Нажать Tab и получить:

Если вы знаете как пишутся CSS-селекторы, то с написанием сокращений под Emmet у вас не возникнет проблем. В данном примере к специфике Emmet относится только знак “*”, повторяющий блок указанное число раз, “$”, вставляющий счётчик, и опускание “li”, т.к. Emmet понимает это из контекста.

Если говорить об общих рекомендациях по применению, то я не советую использовать Emmet для блоков кода сложнее этого, т.к. на практике, допустим, для таблицы проще и быстрее написать thead, развернуть получившийся блок, после чего отдельно прописать tbody. Нет смысла писать всю таблицу одной строкой, т.к. вы начинаете тратить время на продумывание того, как это написать на Emmet, что противоречит изначальному смыслу его применения. Как следствие, я не использую оператор возвращения на предыдущий уровень “^” и очень редко использую оператор соседства “+”, т.к. в этих случаях проще развернуть то, что есть, и, не заморачиваясь, написать следующую часть с нуля.

Emmet также можно использовать с CSS, но лично я им при написании стилей не пользуюсь, т.к. мне хватает автосаджеста. К тому же нужно запоминать сокращения в отличие от HTML, где построение сокращений естественно, т.к. выводится из CSS-селекторов. Хотя я знаю, что некоторые разработчики находят эту возможность полезной. Так что для протокола пример применения в CSS:

P.S. Кстати, не используйте !important ��

Множественный курсор

VSCode поддерживает всю ту магию с множественным курсором, которой когда-то покорил меня Sublime Text. Вообще говоря, множественные курсоры проставляются на Alt + Click, но я этим не пользуюсь. Приведу примеры более практичного применения этой возможности.

Если нужно внести идентичные правки в нескольких местах файла, то разумно выделить сразу все эти места и изменять их параллельно. Для этого выделяем первое вхождение и через Ctrl + D выделяем последующие.

Ctrl + D — выбор следующего вхождения.

Можно выделить и сразу все:

Ctrl + F2 — выбор всех вхождений.

Однако, если цель — заменить имя цельной сущности в js, то лучше отдать предпочтение переименованию на F2 — она умнее, чем обычная текстовая замена, и как раз предназначена для таких целей (подробнее о символьных манипуляциях в следующей главе). Также замену можно произвести через Ctrl + H (про текстовый поиск опять же поговорим в следующей главе), но когда применяешь Ctrl + D цель всё-таки несколько другая — расположить множественные курсоры, чтобы параллельно изменять код в нескольких местах.

Пример применения: есть JSON-файл с тысячей вхождений поля “order” с различными значениями. Мы сочли, что такое поле нам больше не нужно. Соответственно, выделяем “”order”:”, Ctrl + F2, курсор проставляется в 1000 строк, End — переходим в конец выделенных строк, Shift + Home — выделяем строку, Backspace — стираем выделенный текст, Backspace — убираем пустые строки. Без множественного курсора мы бы провозились с этими правками довольно долго, а теперь же, расправившись с этой задачей like a boss, можем спокойно пойти выпить чая ��

Бывает, что у нас есть несколько идентичных строк, идущих подряд, и нам нужно в каждую из них дописать что-то ещё. Для этой цели подойдёт колоночное выделение:

Alt + Shift + (Drag mouse) — колоночное выделение.

С помощью колоночного выделения можно, например, перевести разбитые на отдельные строки 10 значений в единую строку — для этого выделяем начало всех нужных строк и прожимаем Backspace и “, “. Теперь значения идут одно за другим в одну строку через запятую.

Манипуляция строками

В отдельную группу выделю управление строками через Alt и стрелки. Здесь всего 2 комбинации, которые стоит запомнить.

Нажатие стрелок с зажатым Alt перемещает строку. Порой бывает удобно перенести выделенный участок, не переключаясь на мышь. По сути то же самое, что выделить блок мышью, и прожать Ctrl + X Ctrl + V, только быстрее, если привыкнуть. Если нужно перенести только одну строку, то выделять ничего не нужно, достаточно стоящего на строке курсора.

Alt + Arrow — перемещение строки.

Если повторить ту же комбинацию с зажатым Shift, строка вместо перемещения начнёт копироваться. Допустим, у вас есть некоторая строка и вам нужно размножить её до 20 вхождений, чтобы иметь базу, в которой вы будете потом вручную изменять отдельные фрагменты. Это можно сделать, выделив строку, нажав Ctrl + C, и ещё 19 раз прожав Enter и Ctrl + V. Создаёт видимость работы, конечно, но то же самое можно сделать, зажав Shift + Alt и стрелку вниз, и отпустив стрелку, когда строк станет достаточно. Вы можете возразить, что можно скопировать строку сразу с переносом, а Ctrl + V просто зажать. Ну вообще можно, да, и это уже похоже по трудозатратам на то, что мы делаем через Alt. Просто раньше я замечал за собой именно первый вариант, так что, полагаю, что он достаточно распространён.

Shift + Alt + Arrow — копирование строки.

Комментарии

Как и все уважающие себя редакторы, VSCode позволяет закомментировать выделенные строки через горячую клавишу:

Ctrl + / — вставка строчного комментария.

Тип комментариев подбирается на основании языка. Для js будет применён // , для css /* */ , для html <!— —> , для hbs и т.д. Для написания стилей я пользуюсь PostCSS, и здесь важно, что для при этом комментарии определяются верно. В Sublime Text я ставил ассоциацию .pcss файлов c SCSS, в результате чего подсветка синтаксиса была примерно корректная, но комментарий вставлялся, как в SASS одинарный, что для PostCSS вызывало ошибку, т.к. в CSS должны быть блочные комментарии.

Лично я придерживаюсь такого стиля написания комментариев в скриптах, что выделение участка кода, который временно отключён, идёт через // , временные пометки в конце строк также идут через // , но пояснения пишутся через блочные комментарии /* */ на отдельных строках. Так можно визуально отделить “work in progress” участки кода, которые потом можно будет удалить, от вшитых сопровождающих пояснений работы блока, да и смотрятся блочные комментарии более аккуратно. Для вставки блочного комментария в VSCode предназначен шорткат:

Shift + Alt + A — вставка блочного комментария.

Для этого сначала прожимаем комбинацию, курсор сразу оказывается внутри комментария и вписываем внутрь нужный комментарий. Также можно пойти от обратного и сначала прописать текст комментария, потом выделить написанный текст и прожать комбинацию. В отличие от строчных комментариев здесь нужно уже выделить полную область. Со строчными можно ничего не выделять, если речь идёт об одной строке, либо небрежно затронуть нужные строки для многострочного комментирования.

Навигация по проекту

VSCode с активированной панелью вывода превью всех вхождений символа, вкладкой с перечислением всех вхождений на панели управления и блоком текстового поиска по файлу

Важной частью любого редактора является его возможность навигации по файлу и проекту. Рассмотрим, что предлагает VSCode.

Текстовый поиск

В плане текстового поиска всё стандартно: есть локальный поиск по файлу и глобальный по всему проекту.

Поиск по файлам

За поиск и замену отвечает единый интерфейс, в нём доступен ввод регулярных выражений и учёт регистра.

Ctrl + F — поиск в файле.

Ctrl + H — замена в файле.

Поиск по проекту

Глобальному поиску предоставлена отдельная вкладка на панели управления. Интерфейс предоставляет всё то же самое, что и поиск по файлам, только кроме этого можно указать файлы для включения и исключения из поиска. Зачастую у меня там прописано “src” для общего поиска по исходникам, либо “src/**/*.js” для поиска только по нужному расширению.

Ctrl + Shift + F — поиск по проекту.

Ctrl + Shift + H — замена по проекту.

Символьный поиск

А вот теперь начинается самое интересное. VSCode поддерживает не только стандартный поиск по тексту, но и более интеллектуальный поиск по символам. Т.е. ваш код анализируется и редактор пытается предположить, что конкретно вы ищете (и обычно ему это удаётся). Если вы привыкнете к такому подходу к поиску, то ваша продуктивность значительно вырастет. Рассмотрим основные случаи, когда нужен поиск, и какое решение для таких типовых кейсов предлагает нам VSCode.

Переход к определению

Распространённая причина поиска по проекту — мы встречаем некоторую сущность и хотим понять, что она из себя представляет, т.е. перейти к её определению.

VSCode делает все основные сущности ссылками, так что имеется возможность перейти к определению, как и по любой другой ссылке, зажав Ctrl и кликнув по символу. В результате нас перекинет к определению данного символа в проекте, будь это тот же файл или другой конец рабочей директории. То же самое можно сделать, просто нажав F12:

F12 — переход к определению.

Весь функционал поиска завязан на комбинациях вокруг F12, но все эти команды также можно вызвать через контекстное меню правой кнопкой мыши (ПКМ).

Также есть возможность посмотреть определение, не покидая текущий файл — это так называемый “peek” функционал, который широко используется в Brackets.

Alt + F12 — превью определения.

Кстати, у меня была проблема с использованием этого шортката — он просто не срабатывал, хотя через контекстное меню команда выполнялась. Оказалось, что всё дело в Geforce Experience. Имейте в виду, если он у вас установлен, что его комбинация перекрывает эту, и чтобы это исправить, нужно переключить команду отображения FPS на другое сочетание клавиш.

Поиск всех вхождений

Другая причина применения поиска — это попытка найти все вхождения некоторого символа. Допустим, мы изменяем функционал в одном месте, но хотим быть уверены, что остальная часть проекта при этом не развалится.

Для таких случаев VSCode предоставляет поиск по вхождениям, который также может вывести результат в виде превью, так и с недавних пор в отдельной вкладке панели управления.

Shift + F12 —вывод все вхождений в виде превью.

Shift + Alt + F12 —вывод все вхождений на панели управления.

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

Переименование сущности

Как развитие предыдущего кейса — это поиск вхождений с целью изменить имя сущности на всём проекте.

Для этой цели имеется более удобный функционал. Переименовать символ можно, нажав клавишу F2, как это делается с файлами. Подобная смена имени поменяет его во всех местах проекта, где он используется, а не только в конкретном месте, как было бы для обычного текста.

F2 — переименование символа.

Breadcrumbs

И последнее, о чём нужно поговорить на тему навигации — это механизм хлебных крошек.

Для начала их нужно включить, т.к. по умолчанию они выключены:

После активации вверху окна редактора появится строка с адресом, совмещающим нахождение файла в проекте и положение вашего курсора относительно символов файла. Первое — это классическое понимание хлебных крошек. Полезно, если у вас закрыт проводник и вам нужно сориентироваться в какой части проекта вы находитесь. Но второе делает хлебные крошки куда универсальнее. Например, если вы находитесь внутри метода класса, то в адресе после имени файла будет фигурировать имя класса и текущего метода. Такой механизм крайне полезен сразу по ряду причин: понимание позиционирования в рамках файла, понимание структуры файла, предоставление быстрой навигации по файлу.

Представим типовой случай: у нас есть комплексный блок вроде карточки товара, мы правим его стили. Блок построен по БЭМ, у него куча разных модификаторов и вложенностей, для написания которых используется PostCSS с SCSS-подобным синтаксисом нестинга через &. Суммарно файл насчитывает свыше 1000 строк, мы на 758-ой. Мы видим на экране только &-value и что идёт переопределение стилей для модификатора cell, и хотим узнать что именно мы сейчас правим. Как это сделать? Обычно нужно скроллить наверх до предыдущего вложения, пока не дойдём до корня. С хлебными крошками мы просто смотрим на адресную строку и видим “product-card > __options > -value > .product-card — cell &”, и картина сразу складывается. Кстати для селекторов есть ещё один наглядный механизм определения конечной структуры — просто наведите курсор на текущий селектор, и увидите общую картину.

Далее, допустим мы поняли что именно мы правим, но хотим понять, общую структуру файла, чтобы лучше в нём ориентироваться. Для этого нам пришлось бы проходить по всем первым вложениям и сворачивать их (либо свернуть всё, а потом разбираться). С хлебными крошками мы просто кликаем по имени блока — в данном случае .product-card и видим цельную картину со всеми вложениями, которые можно раскрыть и посмотреть, что там внутри. Сам файл мы при этом не изменяем. Ну а для навигации по файлу нужно просто кликнуть в этом представлении по нужной сущности, и вас перекинет на неё. По сути это то же самое, что предоставляет палитра команд с флагом “@”, только удобнее.

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

Ту же самую структуру, кстати, можно посмотреть через вкладку Outline проводника на панели управления.

Работа с проектами

Из коробки VSCode не предоставляет привычной системы работы с проектами, когда можно открывать не абстрактные папки, а единые сущности, имея постоянный доступ к их списку с быстрым переключением между ними. Имеется только достаточно мутная система воркспейсов. Так что сразу перейду к подходу, который я использую в работе. Он завязан вокруг использования плагина Project Manager.

Project Manager

Данный плагин предоставляет все те возможности, описанные выше, которых так не хватает в базовой комплектации. Логика следующая: при первичном развороте проекта мы открываем его корневую директорию через стандартный Open Folder. После чего мы сохраняем эту абстрактную папку, как проект: в палитре команд Project Manager: Save Project, даём проекту понятное имя, и проект добавляется в новую вкладку Project Manager панели управления.

Теперь мы имеем наглядное представление списка проектов и одним кликом можем перейти к нужному. Клик по проекту открывает его в текущем окне, а через контекстное меню, вызываемое через ПКМ, можно открыть его в новом окне.

Кроме того имя проекта дублируется в статус баре, так что вы всегда знаете в каком проекте сейчас находитесь. Клик по имени вызывает список проектов и по нему также можно переключиться на нужный — это даже быстрее, чем через панель управления.

В принципе, если вы ратуете за минимализм, то вкладку из панели управления можно совсем убрать — переключаться через нижний бар, а редактировать проекты через командную строку: Project Manager: Edit Projects. Эта команда откроет файл projects.json, где можно актуализировать список проектов. Лично я так и сделал. Для удаления вкладки из панели управления прописываем:

Единственное, что может останавливать от такого подхода — это то, что выбор проекта из бара всегда открывает его в текущем окне, а в большинстве случаев хотелось бы открывать проект в новом окне. Этот момент легко правится через задание следующей настройки:

Настройки проекта

Зачастую разные проекты строятся на различных стеках технологий и требуют своего подхода, а значит и своих специфичных настроек. Такие настройки прописываются внутри папки .vscode, в корневой директории вашего проекта. Эта папка создаётся автоматически, когда вы меняете что-либо на уровне проекта. Это могут быть уже упомянутые ранее Workspace Settings (settings.json), настройки отдельных языков (jsconfig.json), настройки отладки (launch.json), список доступных тасков (tasks.json) и т.д.

Не забудьте прописать эту директорию в .gitignore.

Рабочая директория

Ввиду специфики моей профессиональной деятельности работа идёт не на уровне всего проекта, а только в отдельностоящем уютном фронтендерском уголке. То есть рабочая директория не совпадает с корневой, на уровне которой был сохранён проект. Это вызывает неудобство при работе с терминалом, т.к. если вы попытаетесь запустить, к примеру, сборщик из корня, то ничего хорошего из этого не выйдет, ведь конфиг запуска лежит в рабочей директории. Т.о. каждый раз при запуске проекта нужно переходить к себе через команду cd, что со временем начинает напрягать.

К счастью, у нас есть возможность определить рабочую директорию проекта. Это как раз та настройка, которую нужно задавать не глобально, а на уровне воркспейса, т.к. в разных проектах местоположение рабочей директории может варьироваться. Например, если относительно корня, вы работаете в директории html, то задаётся это следующим образом:

Конечно, как вариант, можно определять проекты сразу на уровне рабочей директории, но я этого делать не советую, т.к. периодически бывает нужно покинуть свой ламповый уголок, и поменять что-то извне, либо запустить поиск сразу по всему проекту. При таком подходе вам придётся открывать отдельное окно с папкой всего проекта, либо отдельно хранить 2 версии проекта — рабочий и общий, что крайне неудобно.

Встроенный терминал

bash встроен в VSCode. Слева запущен сборщик, а справа вводятся команды.

VSCode имеет встроенный терминал, так что вам больше не понадобятся сторонние приложения для работы с терминалом. Ранее я пользовался ConEmu, теперь же полностью от него отказался. Засчёт того, что терминал встроен в редактор, уменьшается переключение контекста, что увеличивает вашу производительность. Это касается не только терминала, но и любого внешнего инструмента, который мы можем интегрировать прямо в редактор. Дебаггер — также отличный пример.

Терминал доступен из нижней панели. Интересный способ открытия этой панели — это “вытаскивание” её из нижнего бара. Просто попробуйте потащить бар вверх �� Но вообще обычно я использую комбинацию Ctrl + `.

Далее нужно настроить какой терминал вы хотите там видеть. Я использую Git Bash. Для этого указываем его местоположение:

Также по настройкам я отключил у себя звуковое сопровождение:

Имеется возможность добавлять любое количество терминалов. На практике обычно я использую 2 терминала — в одном запущен сборщик, а через второй набиваются нужные команды. При этом удобно разделить терминал на 2 части. Хотя в принципе можно обходиться одним рабочим терминалом, если пользоваться механизмом тасков (об этом далее).

Ctrl + \ — Добавление нового терминала в той же вкладке.

Система контроля версий

Процесс навигации по истории коммитов с расширением GitLens.

Встроенные возможности

VSCode предоставляет интерфейс для работы с системой контроля версий. Этот функционал представлен на вкладке Source Control панели управления и частично в статус баре. На вкладке Source Control выводится список изменённых файлов и имеется поле ввода заголовка коммита. В статус баре указывается текущая ветка и количество несинхронизированных коммитов.

До перехода на VSCode я всегда работал с Git через терминал, но теперь перешёл к управлению через интерфейс, т.к. при таком подходе удаётся тратить на это меньше времени, да и если редактор предоставляет такие возможности, то почему бы ими не пользоваться. Я пользуюсь самыми базовыми командами — рассмотрим их реализации в рамках интерфейса по порядку.

1. git status. Для отслеживания статуса достаточно посмотреть на представление файлов на вкладке Source Control. Все файлы, в которых были произведены изменения, разбиты по группам Changes, Staged Changes и Merged Changes.
2. git add. Кнопка “Stage Changes” рядом с именем файла (иконка “+”) добавляет указанный файл. Также можно добавить все файлы разом, если навестись на заголовок “Changes” — появится кнопка “Stage All Changes”.
3. git checkout. Убирается файл аналогично, через кнопку “Discard Changes” (иконка со стрелкой). Функция “Discard All Changes” также присутствует.
4. git commit. Коммит производится также на вкладке Source Control. Нужно прописать его заголовок в верхнем поле и нажать Ctrl + Enter (Обычное нажатие Enter переводит строку). Если при осуществлении коммита VSCode не найдёт ни одного индексируемого файла, то предложит добавить все. Этот алерт можно отключить, если хотите выполнять такое действие по умолчанию, но я для надёжности оставил.
5. git pull / git push. В статус баре выводится количество несинхронизированных коммитов. Нажатие по этой кнопке выполняет синхронизацию, т.е. как раз pull и push. По умолчанию при этом выводится алерт подтверждения, но я его отключил: “git.confirmSync”: false,
6. git fetch. Чтобы подтянуть свежую информацию по веткам, можно прожать кнопку “Refresh” (иконка с галочкой) вверху панели Source Control. Но я рекомендую подобную синхронизацию автоматизировать. Для этого включаем функцию autofetch, которая будет периодически делать fetch за вас: “git.autofetch”: true,
7. git checkout. Манипуляция ветками выполняется через кнопку в статус баре. Имя текущей ветки на ней уже написано, после нажатия появится список всех доступных веток. Здесь можно выбрать ветку для перехода или создать новую (checkout -b).

Собственно, это все команды, которые я ранее вводил вручную. Как можно видеть для всех них есть более удобные альтернативы, сводящие работу с Гитом к паре кликов. Расширенный набор команд доступен по кнопке “More Actions…” (иконка “…”) наверху вкладки Source Control, ну и для уникальных сложных случаев всегда доступен терминал.

Кстати, если интересно, какие команды VSCode исполняет под капотом, то их можно увидеть на панели Output, выбрав в качестве источника Git.

Что касается мержа, файлы с конфликтующими изменениями отображаются в группе “Merged Changes”. По этим файлам можно пройтись и решить конфликты через встроенный в код линзы (Code Lens). Они предоставлены в виде кнопок, которые позволяют принять отдельные изменения, либо объединить все. При выборе изменённых файлов в панели Source Control открывается diff, показывающий файл из последнего коммита и текущий файл слева и справа соответственно.

Также отмечу, что VSCode из коробки предоставляет индикаторы на полях, символизирующие изменения по сравнению с последним коммитом (зелёный — новый, синий — изменённый, красный — удалённый). В Sublime Text этот функционал приходилось добавлять через специальный плагин.

После всего сказанного единственное, чего здесь не хватает — это интерфейса для просмотра истории коммитов и поиска авторов отдельных фрагментов. Этот функционал добавляется расширением, о котором и пойдёт речь далее.

GitLens — Git supercharged

GitLens — это многофункциональное расширение, предоставляющее возможности по отслеживанию истории изменений. Оно настолько крупное, что идёт со своим интерфейсом настроек, который можно вызвать через палитру команд. Так что если будете настраивать, то пользуйтесь этим интерфейсом — оттуда убран ряд заумных внутренних команд, которые при необходимости можно найти в основных настройках редактора. Расширение разбито на отдельные группы функционала — пройдёмся по ним:

1. GitLens Explorer — проводник по коммитам репозитория. Предоставляет возможность просмотра коммитов, как в текущей ветке, так и в остальных. Через ПКМ можно открыть репозиторий в окне браузера. Данная панель доступна с вкладки GitLens на панели управления, но через настройки её можно перенести в основное меню Source Control.
2. GitLens File History Explorer — история коммитов открытого файла. Также можно перенести в Source Control.
3. Code Lens — встраиваемая в код через линзы информация по автору и дате последнего изменения для всего документа и/или по отдельным контейнерам. Нахожу её бесполезной и загромождающей соурскод, так что отключил.
4. Current Line Blame — при фокусе на отдельной строке показывает линзу с информацией по дате, автору и имени коммита, в котором она была в последний раз изменена. Также отключил, т.к. это отвлекает и в целом бесполезно, т.к. при необходимости можно вывести Blame по всему файлу (об этом дальше).
5. Gutter Blame — отображает слева на полях файла информацию для каждой строки по автору, дате и коммиту, в котором эта строка в последний раз менялась. При выборе строки подсвечиваются также все изменения из того же коммита. Также поддерживается Heatmap — цветные индикаторы, которые тем ярче, чем новее строка. Это крайне наглядный интерфейс, который незаменим, если вас интересуют только последние изменения. Если же нужно найти информацию, когда в принципе был добавлен этот участок кода, то он уже не подойдёт — нужно копаться в File History. Эта функция вызывается по запросу (on-demand) через кнопку сверху справа, и в этом её преимущество над всевозможными дотошными линзами.
6. Hovers — отображает всплывающее окно с информацией по коммиту с различными кнопками управления. Может активироваться как наведением на строку в режиме Gutter Blame, так и при наведении на линзу в режиме Current Line Blame. Также считаю избыточным.
7. Status Bar Blame — добавляет информацию по последнему изменению строки в статус бар. При нажатии по умолчанию вызывает командную строку со списком команд.
8. Modes — GitLens имеет возможность настройки режимов, доступных для быстрого переключения через нижнюю панель. По умолчанию доступны режимы Zen и Review — один для разработки без визуальных отвлекающих факторов, а второй для полноценного обзора. Можно в одном из них отключить линзы, блейм для текущей строки, проводники, ховеры и статус бар, а для второго всё включить. В принципе, рабочий концепт, если вам нравится функционал линз, но они не нужны вам при разработки. Но для себя я понял, что мне хватает включения режима аннотаций (Gutter Blame) при необходимости и прогулок по проводникам с историей в более сложных случаях, так что эта тема с режимами будет избыточна.
9. Command Line — GitLens предоставляет широкий список команд для фанатов командной строки, но лично я ими не пользуюсь.
10. Comparison Tools — GitLens позволяет гулять по разным версиям файла в режиме сравнения двух версий файлов. Режим активируется из интерфейса через кнопку “Compare File with Previous Revision” в верхнем правом углу. После активации можно углубляться вглубь истории, пока у вас не закончатся коммиты ��

Я описал основные функции расширения, а что уже из этого использовать, а что нет — дело ваше. Мою сборку для работы с историей коммитов можно видеть на скриншоте наверху раздела — там активирован режим Gutter Blame и открыта вкладка Source Control, на которой можно видеть GitLens Explorer и Gitlens File History Explorer. Также в статус баре можно видеть индикатор Status Bar Blame и сверху справа рядом с горящей кнопкой, активирующей Gutter Blame, кнопку, запускающую Comparison Tools. Остальные перечисленные функции отключены.

В итоге все мои настройки этого расширения сводятся к приведению редактора к минималистичному виду — отключения всех визуальных фич и перемещение всех проводников в меню Source Control. Для себя я нахожу все эти линзы и ховеры бесполезными и вместо этого включаю аннотации всего файла при необходимости. Если вам нравится этот функционал, то предложу настроить modes, чтобы они выводились в review-режиме, но не мешались при разработке. Перемещение же всех проводников в дефолтную вкладку позволяет держать всю работу с Гитом на одной панели, что полностью убирает дополнительную вкладку из интерфейса и на практике повышает частоту пользования все данным функционалом и упрощает работу в целом.

�� �� �� Поздравляю! Вы дочитали первую часть статьи (или проскролили до футера). Здесь мы рассмотрели базовые возможности VSCode и различные подходы в его применении, а также прописали ряд полезных настроек. Но самое интересное ещё впереди: дебаг и линтинг на уровне редактора, упрощение работы через механизмы тасков и автосаджест Intellisense, список полезных расширений и многое другое. Чтобы продолжить чтение, просто перейдите по этой ссылке.

Если вам есть, что сказать, то оставляйте комментарии. Любой фидбек — это приятно ��

VS Code: файл, папка, рабочая область

Работа в текстовом редакторе «VS Code» может вестись как на уровне отдельных файлов, так и с помощью так называемых «рабочих областей» (по-английски «workspace»).

Вот как выглядит меню, открываемое из пункта «Файл» главного меню редактора (главное меню расположено вверху окна редактора):

В этом редакторе можно по одному открыть много разных файлов и работать с ними одновременно. Это будет работа на уровне файлов.

А можно открыть сразу папку с файлами или сразу несколько папок с файлами. По-другому это называют «открыть рабочую область». Рабочая область может состоять из содержимого одной папки или содержимого нескольких папок. Считается, что пункт меню «Открыть папку. » тоже открывает рабочую область, которая состоит из содержимого одной папки. Разница в том, что при открытии рабочей области, содержащей несколько папок, требуется специальный файл, в котором прописаны пути к каждой из папок рабочей области (этот файл создается при создании рабочей области из нескольких папок). При открытии рабочей области из содержимого одной папки специального файла не требуется.

При открытии в редакторе рабочей области не имеется в виду, что сразу будут открыты все файлы из этой области. Сразу при этом вообще не будет открыто для редактирования никаких файлов, их можно будет открыть, выбирая нужные файлы в проводнике редактора.

Список отдельных файлов (если работа ведется на уровне файлов) или файлов из рабочей области (если работа ведется с рабочей областью) отображается в проводнике редактора. Иконка проводника редактора обычно расположена первой сверху в левом вертикальном меню редактора (на этой иллюстрации левое вертикальное меню находится в свернутом состоянии):

При нажатии на любую иконку в левом вертикальном меню оно разворачивается, а при повторном нажатии на ту же иконку — сворачивается. Вот как проводник редактора выглядит в развернутом состоянии:

На вышеприведенной иллюстрации список файлов пуст, так как я не открыл никаких отдельных файлов или никакой рабочей области. Но принцип, думаю, понятен. Видно, что у проводника есть своё собственное меню сверху с уменьшенными иконками.

Зачем нужны рабочие области? В общем, в этом редакторе спокойно можно работать с отдельными файлами.

Рабочая область удобна, когда идет работа над проектом, который состоит из множества файлов. Обычно все файлы проекта хранят в одной папке, которая называется «папкой проекта», «корневой папкой проекта», «репозиторием» и так далее. (Понятно, что в папке проекта могут быть вложенные папки.) Папку проекта можно открыть с помощью пункта меню редактора «Открыть папку. », после этого отдельные файлы можно при необходимости открывать из проводника редактора для редактирования. Редактор предоставляет еще множество удобных инструментов для работы с рабочими областями, но в этом посте я их не буду рассматривать.

Изредка встречаются сложные проекты, файлы которых хранят в нескольких папках, расположенных в разных местах (то есть они не вложены друг в друга). Для таких случаев следует создать специальный файл рабочей области, в котором будут прописаны пути к отдельным корневым папкам проекта.

Работа с редактором Visual Studio Code

2. Создание рабочей папки и добавление туда файлов проекта.

3. Научиться редактировать и сохранять файлы с кодом.

4. Установить расширения.

Установка и настройка редактора кода

Для того, чтобы написать код, подойдёт любой текстовый редактор. Например, даже «Блокнот» на компьютере.

1. Скачать редактор на https://code.visualstudio.com/ .

Если у вас Windows, то нажмите на любую из синих кнопок.

Если OS X или Linux — нажмите Other platforms.

2. Запустить файл VSCodeUserSetup и установка проходит обычны образом

3. Запускаем редактор.

При запуске редактора в первый раз открывается стартовая страница, на которой описаны все возможности редактора. Все ссылки интерактивные и открывают нужную часть интерфейса или страницу в браузере.

Редактор поддерживает множество языков программирования и легко настраивается под пользователя. Можно установить различные сочетания клавиш и цветовые схемы.

10 горячих клавиш VS Code:

· Быстро добавить комментарий

Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

· Перейти к строке под номером

Windows — Ctrl + G

Иногда отладчики внезапно сообщают, что на строке 953 случилась непоправимая инфернальная ошибка вселенной. Чтобы не выискивать вручную, не листать и не тратить на это время, нажмите Ctrl + G, введите номер строки и спокойно спасайте вселенную.

· Поменять строку местами с соседними

Случается такое, что ваш алгоритм — не алгоритм. Всё пошло не так, а вместо числа 42 вывелось сообщение «Данные удалены». Кому-то для этого нужно переписать весь код, но иногда бывает достаточно поменять строки местами и всё заработает.

Alt и стрелки меняют текущую строку местами с соседними.

· Дублировать строку

Windows — Shift + Alt + ↓ / ↑

Это для тех, кто не хочет копировать и вставлять несколько раз одно и то же.

· Перейти к парной скобке

Windows — Ctrl + Shift + \

Когда кода становится много, очень просто запутаться в закрывающих и открывающих скобках, непонятно, где какой блок, и вообще, что происходит. На помощь приходит Ctrl+Shift+\ — это хорошее дополнение к стандартной подсветке парных скобок в VS Code.

· Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a, b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.

· Отформатировать документ

Windows — Shift + Alt + F

VS Code предложить установить расширение или выбрать из существующих, а потом красиво отформатирует документ — расставит по местам блоки, скобки, и сделает строки кода читаемыми.

· Перейти к объявлению переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

· Включить/выключить перенос слов

Windows — Alt + Z

Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.

· Включить дзен-режим

Windows — Ctrl + K Z

Лучшее решение для тех, кто входит состояние потока, когда пишет код. Дзен-режим скрывает все панели, разворачивает редактор на весь экран, и вы можете плыть в волнах кода и думать только о нём. Чтобы вернуться обратно в реальный мир, нажмите Escape .

Рассмотрим интерфейс редактора на примере одного из проектов.

Основную часть экрана занимает окно с текстовым содержимым файла. В левой части экрана находятся вкладки активного меню, в котором находятся главные функции редактора. Вкладка проводника открывается по умолчанию при запуске программы. В неё выводятся список открытых файлов и каталог открытой папки.

Следующий пункт — поиск. В поле можно ввести искомое значение, и редактор покажет, в каких местах оно находится. При желании можно поменять значение через поле замены.

VS Code из коробки поддерживает работу с системой контроля версий Git. Можно выполнить базовые операции и посмотреть, как изменились файлы с момента последнего коммита.

Настройка Git в Visual Studio Code подробна описана в официальной документации .

VS Code отличает от конкурентов наличие встроенного отладчика. После небольшой настройки можно искать баги в коде прямо из редактора — например, поставить точку остановки и наблюдать за выполнением конкретного участка кода. Помимо этого у редактора есть встроенная консоль, в которую может выводиться результат работы или сообщение об ошибке, если что-то пошло не так. Отладчик можно настроить под разные языки и разные задачи.

Главное меню

File. В пункте File находятся команды, которые отвечают за работу с файлами рабочей папки. Через неё можно сохранять и открывать файлы, выбирать папки и выполнять другие действия.

Edit. Через этот пункт можно работать с открытым файлом — отменять последние действия, производить поиск по файлу.

Selection. В пункте Selection можно найти команды для выделения нужного участка кода.

View. Открывать различные приложения, встроенные в редактор кода, можно через пункт View. Здесь дублируются пункты активного меню, а ещё здесь можно открыть терминал, настроить элементы интерфейса и другое.

Go. Через пункт Go можно перемещаться между открытыми файлами и по документу. Также можно разделять рабочую область на части. Это удобно для работы на большом мониторе — можно держать в одном месте разметку и файлы стилей.

Debug. Здесь собраны команды для отладки скриптов.

Terminal. В редактор встроен терминал (он же командная строка). Он может выполнять как отдельные задачи, так и выводить командную строку в интерфейс редактора.

Создание рабочей папки и добавление туда файлов проекта.

Необходимо, чтобы во время работы все нужные файлы лежали в одной папке. Для этого добавим рабочую папку, чтобы VS Code показывал нам только её содержимое.

1. Add workspace folder — открывает меню выбора папки

2. Создадим новую папку personal_page в любом удобном месте и зайдём в неё

4. Слева появится панель Explorer с пустым рабочим пространством Untitled (Workspace).

5. После создания папка пустая. Щёлкнем правой кнопкой по заголовку personal_page и добавить три файла, которые понадобятся в работе — index.html, style.css и script.js.

6. Все три файла открыты во вкладках, и между ними не всегда удобно переключаться. Код со стилями перенести в другую часть окна, например, вниз. Для этого нажмите правой кнопкой по вкладке со style.css и выберите split down, чтобы увидеть результат.

Редактирование и сохранение файлов с кодом

1. Отредактировать только index.html (файл с разметкой) и style.css (файл со стилями).

<title> Сайт начинающего верстальщика </title>

<link rel = «stylesheet» href = «style.css» >

День первый . Как я забыл покормить кота

Кто бы мог подумать, что семантика это так важно, мне срочно нужно было об этом поговорить.

Взгляд упал на кота. Кот издал настойчивое «Мяу». И я понял — пришло время для первой записи в блог. И покормить кота.