vs code открыть меню

User Interface

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.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

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 five areas:

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.

Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region. To learn more about tabbed headers, see the Tabs section below.

Tip: You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility ( ⌘B (Windows, Linux Ctrl+B ) ).

Side by side editing

You can open as many editors as you like side by side vertically and horizontally. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

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’.

By default editors will open to the right-hand side of the active one. You can change this behavior through the setting workbench.editor.openSideBySideDirection and configure to open new editors to the bottom of the active one instead.

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

Minimap

A Minimap (code outline) gives you a high-level overview of your source code, which is useful for quick navigation and code understanding. A file’s minimap is shown on the right side of the editor. You can click or drag the shaded area to quickly jump to different sections of your file.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Tip: You can move the minimap to the left hand side or disable it completely by respectively setting «editor.minimap.side»: «left» or «editor.minimap.enabled»: false in your user or workspace settings.

Indent Guides

The image above also shows indentation guides (vertical lines) which help you quickly see matching indent levels. If you would like to disable indent guides, you can set «editor.renderIndentGuides»: false in your user or workspace settings.

Breadcrumbs

The editor has a navigation bar above its contents called Breadcrumbs. It shows the current location and allows you to quickly navigate between folders, files, and symbols.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Breadcrumbs always show the file path and if the current file type has language support for symbols, the symbol path up to the cursor position. You can disable breadcrumbs with the View > Show Breadcrumbs toggle command. For more information about the breadcrumbs feature, such as how to customize their appearance, see the Breadcrumbs section of the Code Navigation article.

Explorer

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

Tip: You can drag and drop files into the Explorer from outside VS Code to copy them (if the explorer is empty VS Code will open them instead)

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

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 macOS 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 macOS or Open Containing Folder on Linux).

Tip: Type ⌘P (Windows, Linux Ctrl+P ) (Quick Open) to quickly search and open a file by its name.

Multi-selection

You can select multiple files in the File Explorer and OPEN EDITORS view to run actions (Delete, Drag and Drop, Open to the Side) on multiple items. Use the Ctrl/Cmd key with click to select individual files and Shift + click to select a range. If you select two items, you can now use the context menu Compare Selected command to quickly diff two files.

Note: In earlier VS Code releases, clicking with the Ctrl/Cmd key pressed would open a file in a new Editor Group to the side. If you would still like this behavior, you can use the workbench.list.multiSelectModifier setting to change multi-selection to use the Alt key.

Filtering the document tree

You can type to filter the currently visible files in the File Explorer. With the focus on the File Explorer start to type part of the file name you want to match. You will see a filter box in the top-right of the File Explorer showing what you have typed so far and matching file names will be highlighted. When you press the cursor keys to move up and down the file list, it will jump between matching files or folders.

Hovering over the filter box and selecting Enable Filter on Type will show only matching files/folders. Use the ‘X’ Clear button to clear the filter.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Outline view

The Outline view is a separate section in the bottom of the File Explorer. When expanded, it will show the symbol tree of the currently active editor.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

The Outline view has different Sort By modes, optional cursor tracking, and supports the usual open gestures. It also includes an input box which finds or filters symbols as you type. Errors and warnings are also shown in the Outline view, letting you see at a glance a problem’s location.

For symbols, the view relies on information computed by your installed extensions for different file types. For example, the built-in Markdown support returns the Markdown header hierarchy for a Markdown file’s symbols.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

There are several Outline view settings which allow you to enable/disable icons and control the errors and warnings display (all enabled by default):

Open Editors

At the top of the Explorer is a view labeled OPEN EDITORS. This is a list of active files or previews. These are files you previously opened in VS Code that you were working on. For example, a file will be listed in the OPEN EDITORS view if you:

Just click an item in the OPEN EDITORS view, and it becomes active in VS Code.

Once you are done with your task, you can remove files individually from the OPEN EDITORS view, or you can remove all files by using the View: Close All Editors or View: Close All Editors in Group actions.

Views

The File Explorer is just one of the Views available in VS Code. There are also Views for:

Tip: You can open any view using the View: Open View command.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

You can show or hide views from within the main view and also reorder them by drag and drop.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Activity Bar

The Activity Bar on the left lets you quickly switch between Views. You can also reorder Views by dragging and dropping them on the Activity Bar or remove a View entirely (right click Hide from Activity Bar).

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Command Palette

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

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:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Configuring the editor

VS Code gives you many options to configure the editor. From the View menu, you can hide or toggle various parts of the user interface, such as the Side Bar, Status Bar, and Activity Bar.

Hide the Menu Bar (Windows, Linux)

Settings

Most editor configurations are kept in settings which can be modified directly. You can set options globally through user settings or per project/folder through workspace settings. Settings values are kept in a settings.json file.

Note for macOS users: The Preferences menu is under Code not File. For example, Code > Preferences > Settings.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

You will see the VS Code Default Settings in the left window and your editable settings.json on the right. You can easily filter settings in the Default Settings using the search box at the top. Copy a setting over to the editable settings.json on the right by clicking on the edit icon to the left of the setting. Settings with a fixed set of values allow you to pick a value as part of their edit icon menu.

After editing your settings, type ⌘S (Windows, Linux Ctrl+S ) to save your changes. The changes will take effect immediately.

Note: Workspace settings will override User settings and are useful for sharing project specific settings across a team.

Zen Mode

Centered editor layout

Centered editor layout allows you to center align the editor area. This is particularly useful when working with a single editor on a large monitor. You can use the sashes on the side to resize the view (hold down the Alt key to independently move the sashes).

Visual Studio Code shows open items with Tabs (tabbed headings) in the title area above the editor.

When you open a file, a new Tab is added for that file.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Tabs let you quickly navigate between items and you can Drag and Drop Tabs to reorder them.

If you don’t want to use Tabs, you can disable the feature by setting the workbench.editor.showTabs setting to false:

See the section below to optimize VS Code when working without Tabs.

Tab ordering

By default, new Tabs are added to the right of the existing Tabs but you can control where you’d like new Tabs to appear with the workbench.editor.openPositioning setting.

For example, you might like new tabbed items to appear on the left:

Preview mode

When you single-click or select a file in the Explorer, it is shown in a preview mode and reuses an existing Tab. This is useful if you are quickly browsing files and don’t want every visited file to have its own Tab. When you start editing the file or use double-click to open the file from the Explorer, a new Tab is dedicated to that file.

Preview mode is indicated by italics in the Tab heading:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

If you’d prefer to not use preview mode and always create a new Tab, you can control the behavior with these settings:

Editor Groups

When you split an editor (using the Split Editor or Open to the Side commands), a new editor region is created which can hold a group of items. You can open as many editor regions as you like side by side vertically and horizontally.

You can see these clearly in the OPEN EDITORS section at the top of the Explorer view:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

You can Drag and Drop editor groups on the workbench, move individual Tabs between groups and quickly close entire groups (Close All).

Note: VS Code uses editor groups whether or not you have enabled Tabs. Without Tabs, editor groups are a stack of your open items with the most recently selected item visible in the editor pane.

Grid editor layout

By default, editor groups are laid out in vertical columns (for example when you split an editor to open it to the side). You can easily arrange editor groups in any layout you like, both vertically and horizontally:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

To support flexible layouts, you can create empty editor groups. By default, closing the last editor of an editor group will also close the group itself, but you can change this behavior with the new setting workbench.editor.closeEmptyGroups: false :

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

There are a predefined set of editor layouts in the new View > Editor Layout menu:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

There are many keyboard commands for adjusting the editor layout with the keyboard alone, but if you prefer to use the mouse, drag and drop is a fast way to split the editor into any direction:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Pro Tip: If you press and hold the Alt key while hovering over the toolbar action to split an editor, it will offer to split to the other orientation. This is a fast way to split either to the right or to the bottom.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Keyboard shortcuts

Here are some handy keyboard shortcuts to quickly navigate between editors and editor groups.

If you’d like to modify the default keyboard shortcuts, see Key Bindings for details.

Working without Tabs

If you prefer not to use Tabs (tabbed headings), you can disable Tabs (tabbed headings) entirely by setting workbench.editor.showTabs to false.

Disable Preview mode

Without Tabs, the OPEN EDITORS section of the File Explorer is a quick way to do file navigation. With preview editor mode, files are not added to the OPEN EDITOR list nor editor group on single-click open. You can disable this feature through the workbench.editor.enablePreview and workbench.editor.enablePreviewFromQuickOpen settings.

Ctrl+Tab to navigate in entire editor history

You can change keybindings for Ctrl+Tab to show you a list of all opened editors from the history independent from the active editor group.

Edit your keybindings and add the following:

Close an entire group instead of a single editor

If you liked the behavior of VS Code closing an entire group when closing one editor, you can bind the following in your keybindings.

Window management

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

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

Next steps

Now that you know the overall layout of VS Code, start to customize the editor to how you like to work by looking at the following topics:

Источник

Настройка Visual Studio Code для верстальщика: установка, добавление плагинов, отладка

Первое знакомство с Visual Studio Code

Для начала рассмотрим, как скачать, установить, запустить (даже на очень слабом компьютере) и настроить Visual Studio Code. Вообще с этим проблем не должно возникнуть, так как на Windows все делается на интуитивно понятном уровне. Если у вас уже установлен этот редактор кода и в него внесены какие-то настройки, то лучше выполнить его полное удаление и, после чистой установки, настроить его заново.

Скачивание и установка VS Code

1. Перейдя на главную страницу сайта разработчика воспользуйтесь кнопкой “Download”. По умолчанию сайт должен определить вашу ОС, но если он этого не сделал, то выберите ее самостоятельно в контекстном меню кнопки загрузки.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Скачивание VS Code

2. Ожидайте скачивание исполняемого файла. Запустите его, чтобы начать процесс установки.

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

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Первый запуск и возможные проблемы

С запуском VS Code не должно возникнуть проблем на большинстве современных машин. Исключениями могут является старые компьютеры или модели со слабыми процессорами. На них запуск редактора кода может либо занимать слишком много времени, либо выдавать просто черное окно, плюс, возможно появление проблем непосредственно в процессе работы. Еще сильнее “облегчить” Visual Studio Code можно с помощью изменения свойств ярлыка программы:

1. Кликните правой кнопкой мыши по ярлыку и откройте “Свойства” в контекстном меню.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Оптимизация VS Code

После этого VS Code должен без проблем запускаться и работать даже на очень слабых машинах.

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

1. Переключитесь во вкладку плагинов. В поисковой строке введите “Russian Language Pack for Visual Studio Code”.

2. В результатах выдачи сразу покажут страницу этого плагина. Нажмите кнопку “Install”. После этого программа попросит перезапустить ее и откроется уже с русифицированным интерфейсом.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Установка русского языка для VS Code

Интерфейс Visual Studio Code

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

Строка состояния

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

Вкладка “Вывод”

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

Вкладка “Терминал”

Здесь находится что-то вроде встроенной “Командной строки”. С помощью переключателя в верхнем части можно менять оболочки терминала. Также терминал можно условно разделить на несколько, например, с разными оболочками.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Панель действий

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

1. Встроенный файловый менеджер. Здесь отображается файловая структура выбранного проекта с папками и файлами. С его помощью удобно вызывать нужный файл для редактирования. Также во встроенном проводнике можно создавать новые файлы и директории проекта.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Файловый менеджер VS Code

2. Поиск. Позволяет находить определенный фрагмент кода в открытых файлах проекта.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Поисковая строка VS Code

3. Центр управления и контроля версий. Позволяет осуществлять контроль версий проекта, например, с помощью Git.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Центр контроля версий VS Code

4. Запуск и отладка приложений. С помощью этого инструмента можно запускать выполнение кода и смотреть на его поведение. Функциональность можно расширить за счет дополнительных плагинов.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

5. Расширения. Отсюда можно выполнить установку новых плагинов для VS Code, а также просмотреть список уже установленных.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Менеджер расширений VS Code

6. Настройки аккаунта. Вы можете авторизоваться в своем профиле, чтобы применить уже установленные ранее настройки для VS Code.

7. Настройки. Здесь представлены основные настройки, которые может менять пользователь. Их тут много и без сторонних плагинов.

Настройка основных параметров

Visual Studio Code позволяет выполнить настройку параметров как для всей программы в целом, так и задать их индивидуально для какого-то проекта. Для получения доступа к параметрам кликните по иконке шестеренки и выберите в контекстном меню “Settings”.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Переход в параметры VS Code

Далее подробно рассмотрим, что пользователь может настроить.

Автосохранение

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

Настройка автосохранения производится следующим образом:

1. При переходе в параметры VS Code должна автоматически открыться нужная вкладка, но если вы ее случайно сбили, то переключайтесь в “Commonly Used”.

2. В блоке “Files: Auto Save” по умолчанию стоит значение “Off”. Его нужно изменить на:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Автосохранение в VS Code

3. Выберите для себя удобный вариант автосохранения.

Настройка отображения кода

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

1. Font Size. Здесь по умолчанию стоит 14 размер, но его можно изменить на любой произвольный.

2. Font Family. В это поле вручную прописывается название шрифта по умолчанию и его тип.

3. Tab Size. Настраивается шаг табуляции в пробелах. По умолчанию стоит значение 4. Его можно заменить на любое произвольное.

4. Render Whitespace. Управляет отрисовкой пробелов в редакторе. Доступно 5 вариантов:

5. Cursor Style. Здесь можно выбрать стиль курсора. Всего доступно 6 стилей.

6. Insert Space. Отвечает за действие редактора при нажатии на клавишу Tab. По умолчанию здесь будут вставляться пробелы. Если снять галочку, то редактор будет вставлять знаки табуляции.

7. Word Wrap. Отвечает за автоматический перенос строк. По умолчанию он отключен, но можно сделать авто перенос по размеру окна и по пользовательским настройкам.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Настройки отображения в VS Code

Настройка подсказок

По умолчанию в VS Code включены некоторые подсказки при написании кода. Вы можете включите дополнительные подсказки или отключить уже имеющиеся. За это отвечает параметр “Hover Enabled”. Воспользуйтесь поисковой строкой по настройкам для быстрого перемещения к нему. По умолчанию данный параметр активен. Вы можете снять с него галочку и тогда большинство подсказок, появляющихся при наведении курсора на кусок кода, пропадут.

Однако помимо подсказок в таком случае пропадают и некоторые функции, которые могут быть полезны для работы со стилями. Например, подсветка цветов, написанных в виде RGB, HEX, RGBA. Помимо отображения самого цвета появится всплывающее окошко с палитрой, где можно быстро выбрать другой цвет и уровень прозрачности (при переключении на RGBA).

Если вам не нужно, чтобы в CSS не появлялись цветовые обозначения HEX/RGBA-палитры, то снимите галочку с параметра “Color Decorators”. В таком случае не будет вообще никаких подсказок, касательно цвета.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Подсказки цветов в VS Code

Начинающим верстальщикам рекомендуется не отключать подсказки. Исключением могут быть параметры “Hover Enabled” и “Close Active Groups”, так как они действительно иногда могут мешать.

Настройка форматирования

В Visual Studio Code есть несколько параметров, отвечающих за форматирование кода. С помощью него можно, например, быстро исправить съехавшую табуляцию в документе. По умолчанию для этого используется сочетание клавиш Shift+Alt+F. Также есть возможность выбрать параметры для автоматического форматирования кода в файлах:

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Настройки форматирования в VS Code

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

Настройка области написания кода

Ее настройку стоит рассмотреть отдельно. Здесь можно настроить несколько рабочих областей, разделив область написания кода на несколько частей. Это удобно в тех случаях, когда часто приходится взаимодействовать одновременно с несколькими файлами. Например, это актуально при верстке, когда разработчик пишет HTML-каркас и одновременно CSS-стили для него и JS-скрипты в отдельных файлах. Разделение на несколько рабочих областей можно сделать через меню “Вид”. Там выберите пункт “Макет редактора” и наиболее удобную для вас сетку.

Дополнительно в меню “Вид” доступна настройка масштабирования. Можно быстро увеличить или уменьшить шрифт в данном документе или проекте. Нужные настройки находятся в пункте “Внешний вид”. Там также можно вообще сбросить все настройки для всего документа. Также здесь можно скрывать или показывать разные элементы.

Режимы экрана

Предусмотрено несколько режимов работы с кодом:

1. Полноэкранный режим. Включается при нажатии клавиши F11. Скрывает верхнее меню и кнопки управления программой, а также панель задач Windows. Отключить этот режим можно повторным нажатием по клавише F11.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Полноэкранный режим в VS Code

2. Режим Zen. Почти тоже самое, что и полноэкранный режим, но он скрывает все элементы управления VS Code, позволяя сфокусироваться только на коде. Включить этот режим можно через меню “Вид”, выбрав раздел “Внешний вид” и затем “Режим Zen”.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Режим Zen в VS Code

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

Иногда при вставке большого куска текста (просто текста, не кода) он может вставиться в виде длинной строки. Тогда появляется горизонтальная прокрутка, что не очень удобно. Этого можно избежать, воспользовавшись сочетанием клавиш Alt+Z. Текст после этого перестроится так, чтобы нормально помещаться в область работы с кодом без необходимости дополнительной прокрутки снизу.

Важные плагины VS Code для верстальщика

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

Emmet

А вот пример использования формул. Предположим, вам требуется создать маркированный список на 10 элементов. Просто пропишите ul>li*10 и нажмите Tab. Список готов!

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

Live Sass Compiler

Плагин отвечает за автоматическую компиляцию SASS/SCSS в обычный CSS. Рекомендуется к установке тем, кто работает с этими препроцессорами. Также компилятор позволяет импортировать содержимое других SASS/SCSS-файлов в основной. О корректной работе данного плагина будет говорить надпись Watch Sass в нижней части окна программы. При нажатии на нее открываются настройки плагина.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин LiveSASS в VS Code

Live Server

Полезный плагин, который создает локальный сервер и позволяет отслеживать изменения в HTML-документе в режиме реального времени. Без него вам потребовалось бы сначала сохранить документ, а потом обновить страницу с ним в браузере. За работу плагина отвечает кнопка Go Live в нижней строке программы. При нажатии на нее документ, с которым вы работаете автоматически открывается в браузере, который установлен в системе в качестве браузера по умолчанию.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин Live Server в VS Code

SCSS IntelliSense

Плагин показывает дополнительные подсказки при работе с синтаксисом SASS и SCSS. Позволяет автоматизировать некоторые моменты прописывания стилей и указывает на ошибки в синтаксисе, предлагает исправления.

SCSS Formatter

Чем-то похож на предыдущий плагин, но в отличии от него имеет более скромный функционал. Отвечает за корректное форматирование SCSS/SASS.

Better Comments

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

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин Better Comments в VS Code

BEM Helper

Создан для упрощения работы с BEM. Умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Также может вставлять модификаторы, формировать файлы стилей. Будет полезен не только верстальщикам, но и обычным программистам.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин BEM Helper в VS Code

eCSStractor

Этот плагин упрощает перенос классов из HTML в файлы со стилями: CSS, SCSS, SASS. После добавления плагина в программу нужно будет настроить для него сочетание клавиш. Перейдите в его настройки на странице добавления и выберите пункт “Сочетание клавиш”. Задайте любую удобную комбинацию клавиш.

Плагин работает таким образом:

1. Выделите нужный отрезок HTML-кода, из которого требуется скопировать классы.

2. Воспользуйтесь тем сочетанием клавиш, которое вы указали для копирования классов. Вы должны получить сообщение о том, что классы успешно скопировались.

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин eCSStractor в VS Code

CSS Navigation

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

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин CSS Navigation в VS Code

Image Preview

vs code открыть меню. Смотреть фото vs code открыть меню. Смотреть картинку vs code открыть меню. Картинка про vs code открыть меню. Фото vs code открыть меню

Плагин Image Preview в VS Code

Заключение

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *