Как открыть папку в visual studio code

Установка командной строки Visual Studio Code

Visual Studio Code – это свободный кроссплатформенный текстовый редактор с открытым исходным кодом, разработкой которого в основном занимается Microsoft. VS Code использует веб-технологии (например, JavaScript и CSS), которые упрощают большую экосистему созданных сообществом плагинов и расширяют ее возможности на множество различных языков программирования и функций.

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

Требования

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

Установка интерфейса командной строки кода Visual Studio

Интерфейс командной строки Visual Studio Code не всегда предустанавливается по умолчанию, потому вам, возможно придется установить его самостоятельно. Для этого сначала запустите обычный графический интерфейс Visual Studio Code. Если вы открываете это приложение впервые, на экране вы увидите стандартную панель значков слева и вкладку Get Started.

Для установки интерфейса командной строки Visual Studio Code предоставляет специальную встроенную команду. Откройте палитру команд кода, нажав Command+Shift+P на Mac или Control+Shift+P в Windows и Linux.

Эта комбинация клавиш откроет в верхней части окна выпадающее меню команд. Введите в командную строку shell command. Палитра должна автоматически подсказать правильную команду: Shell Command: Install ‘code’ command in PATH.

Нажмите Enter, чтобы запустить выделенную команду. Приложение может попросить вас ввести учетные данные администратора, чтобы завершить процесс установки.

Итак, у вас установлена ​​команда строки code.

Убедитесь, что установка прошла успешно, запустив эту команду с флагом –version:

Если в выводе вы видите номер версии, вы успешно установили интерфейс командной строки Visual Studio Code. Следующие несколько разделов посвящены использованию нашего нового интерфейса.

Открытие файлов с помощью команды code

Запустив команду code с именем файла (или с именами нескольких файлов), вы можете открыть указанные файлы в графическом интерфейсе Visual Studio Code:

Эта команда откроет файл file1.

А такая команда откроет все файлы markdown (.md), хранящиеся в текущем каталоге.

По умолчанию файлы будут открываться в существующем окне редактора, если оно доступно. Используйте флаг –new-window, чтобы редактор Visual Studio Code открыл новое окно для указанных файлов.

Открытие каталогов с помощью команды code

Если указать в команде code, имя одного или нескольких каталогов, команда откроет эти каталоги в новом окне редактора. Например:

code directory1 directory2

VS Code откроет каталоги в новом окне. Используйте флаг –reuse-window, чтобы редактор повторно использовал уже существующее окно вместо нового (по умолчанию он будет использовать самое первое доступное окно).

Открытие файла .code-workspace

Файлы рабочей области открываются с помощью команды code по аналогии с каталогами:

Данная команда откроет рабочую область example в новом окне (чтобы повторно использовать существующее окно, добавьте флаг –reuse-window).

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

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

Например, вот страница расширения Jupyter Notebook:

Обратите внимание: в адресе есть параметр itemName. Значение этого параметра и является уникальным идентификатором расширения (в нашем примере это ms-toolsai.jupyter).

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

Получив это значение, вы можете использовать его в команде code с флагом –install-extension, чтобы установить необходимое расширение:

code –install-extension ms-toolsai.jupyter

Вы получите такой результат:

Удалить расширение можно по аналогии с установкой. Используйте флаг –uninstall-extension с идентификатором расширения.

Отображение различий между двумя файлами

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

code –diff file1 file2

Как и при открытии файлов, по умолчанию команда повторно использует самое первое доступное окно (если оно существует). Принудительно открыть новое окно поможет флаг –new-window.

Перенос stdin в Visual Studio Code

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

с командой code -.

В итоге команда ls будет выполнена для каталога

(то есть для домашнего каталога текущего пользователя), а ее результат – список файлов и каталогов в вашем домашнем каталоге – будет отправлен команде code. Один дефис в команде code указывает, что она должна читать текст, а не файл.

Команда code выведет информацию о временном файле, который она создала для хранения входных данных:

Затем этот файл откроется в GUI.

Эта команда будет бесконечно ждать ввода новых данных. Нажмите Ctrl+C, чтобы она прекратила работу и вернула вас в оболочку.

Добавьте флаг –new-window, чтобы открыть новое окно для ввода.

Заключение

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

Чтобы узнать больше о команде code, вы можете запустить ее функцию –help:

Как открыть папку в visual studio code

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

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

Adding folders

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

Add Folder to Workspace

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

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

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

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

Drag and drop

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

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

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

Multiple selection native file open dialogs

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

command line —add

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

Removing folders

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

Workspace file

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

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

Save Workspace As.

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

Opening workspace files

To reopen a Workspace, you can:

• Double-click the .code-workspace file in your platform’s Explorer.
• Use the File > Open Workspace command and select the Workspace file.
• Select the Workspace from the File > Open Recent ( ⌃R (Windows, Linux Ctrl+R ) ) list.
  • Workspaces have a (Workspace) suffix to differentiate them from folders.

  

  Just like Close Folder when a single folder is open in VS Code, there is a Close Workspace ( ⌘K F (Windows, Linux Ctrl+K F ) ) command to close the active Workspace.

  Workspace file schema

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

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

  which will result in the following Explorer display:

  

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

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

  

  General UI

  Editor

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

  

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

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

  

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

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

  Search

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

  

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

  Settings

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

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

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

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

  

  You can also open specific settings files with the commands:

  • Preferences: Open User Settings — Open your global User settings
  • Preferences: Open Workspace Settings — Open the settings section of your Workspace file.
  • Preferences: Open Folder Settings — Open the settings for the active folder.

  Global Workspace settings override User settings and folder settings can override Workspace or User settings.

  Unsupported folder settings

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

  

  Debugging

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

  

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

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

  

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

  Workspace launch configurations

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

  

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

  

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

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

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

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

  Tasks

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

  

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

  Workspace task configuration

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

  Source Control

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

  

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

  Extensions

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

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

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

  Extension recommendations

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

  . ) to the extensions.recommendations array.

  Next steps

  — More about single-folder and multi-root workspaces. — Learn how to set up debugging for your application. — Tasks let you run external tools like compilers within VS Code.

  Common questions

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

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

  As an extension author what do I need to do?

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

  Visual Studio Code. Настройка и применение. Часть 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:

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

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

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

  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.

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

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

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

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

  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 версии проекта — рабочий и общий, что крайне неудобно.

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

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

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

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

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

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

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

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

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

  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 из проводника Windows

  При установке VS Code у нас есть возможность установить флажок Open with Code . Ставил галочку только для файлов, а не для папок. Так как после установки включить?

  Когда я открываю файл:

  

  Когда открываю папку:

  

  Я хочу, чтобы параметр Open with Code щелкал правой кнопкой мыши по папке, как это показано на файлах.

  2 ответа

  ответ от @dqureshiumar правильный, если вы уже отметили этот параметр во время установки VS Code. Но, возможно, вы его не проверяли и не хотите или не можете переустановить прямо сейчас. Или может быть, вам нужно больше гибкости в действиях, отображаемых при щелчке правой кнопкой мыши по папке .

  Таким образом, вы можете создавать собственные действия с папками в реестре Windows:

  • Нажмите ⊞ Win + R и введите regedit .
  • Перейдите к пути HKEY_CLASSES_ROOT\Directory\shell .
  • Щелкните правой кнопкой мыши и создайте новый Key с именем vscode .
  • В (Default) REG_SZ введите желаемый текст, например Open with Code .
  • При желании можно создать ключ Icon , указывающий на путь Code.exe (скорее всего, «%LocalAppData%\Programs\Microsoft VS Code\Code.exe» ).

  На данный момент примерно так:

  

  Однако внутри regedit продолжайте:

  • Создайте еще один новый Key с именем command внутри vscode .
  • В (Default) REG_SZ установите действие, открывающее текущий путь ( «%1» ) на основе вашего Code.exe пути (скорее всего, «%LocalAppData%\Programs\Microsoft VS Code\Code.exe» «%1» ).

  Теперь посмотрите что-то вроде этого:

  

  Наконец, перейдите в проводник Windows и щелкните правой кнопкой мыши любую папку:

  

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

  PS: иметь дело с regedit может быть опасно. Используйте его с осторожностью и создайте резервную копию .reg перед запуском, если у вас еще нет опыта в этом.

  Установка командной строки Visual Studio Code

  Visual Studio Code – это свободный кроссплатформенный текстовый редактор с открытым исходным кодом, разработкой которого в основном занимается Microsoft. VS Code использует веб-технологии (например, JavaScript и CSS), которые упрощают большую экосистему созданных сообществом плагинов и расширяют ее возможности на множество различных языков программирования и функций.

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

  Требования

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

  Установка интерфейса командной строки кода Visual Studio

  Интерфейс командной строки Visual Studio Code не всегда предустанавливается по умолчанию, потому вам, возможно придется установить его самостоятельно. Для этого сначала запустите обычный графический интерфейс Visual Studio Code. Если вы открываете это приложение впервые, на экране вы увидите стандартную панель значков слева и вкладку Get Started.

  Для установки интерфейса командной строки Visual Studio Code предоставляет специальную встроенную команду. Откройте палитру команд кода, нажав Command+Shift+P на Mac или Control+Shift+P в Windows и Linux.

  Эта комбинация клавиш откроет в верхней части окна выпадающее меню команд. Введите в командную строку shell command. Палитра должна автоматически подсказать правильную команду: Shell Command: Install ‘code’ command in PATH.

  Нажмите Enter, чтобы запустить выделенную команду. Приложение может попросить вас ввести учетные данные администратора, чтобы завершить процесс установки.

  Итак, у вас установлена ​​команда строки code.

  Убедитесь, что установка прошла успешно, запустив эту команду с флагом –version:

  Если в выводе вы видите номер версии, вы успешно установили интерфейс командной строки Visual Studio Code. Следующие несколько разделов посвящены использованию нашего нового интерфейса.

  Открытие файлов с помощью команды code

  Запустив команду code с именем файла (или с именами нескольких файлов), вы можете открыть указанные файлы в графическом интерфейсе Visual Studio Code:

  Эта команда откроет файл file1.

  А такая команда откроет все файлы markdown (.md), хранящиеся в текущем каталоге.

  По умолчанию файлы будут открываться в существующем окне редактора, если оно доступно. Используйте флаг –new-window, чтобы редактор Visual Studio Code открыл новое окно для указанных файлов.

  Открытие каталогов с помощью команды code

  Если указать в команде code, имя одного или нескольких каталогов, команда откроет эти каталоги в новом окне редактора. Например:

  code directory1 directory2

  VS Code откроет каталоги в новом окне. Используйте флаг –reuse-window, чтобы редактор повторно использовал уже существующее окно вместо нового (по умолчанию он будет использовать самое первое доступное окно).

  Открытие файла .code-workspace

  Файлы рабочей области открываются с помощью команды code по аналогии с каталогами:

  Данная команда откроет рабочую область example в новом окне (чтобы повторно использовать существующее окно, добавьте флаг –reuse-window).

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

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

  Например, вот страница расширения Jupyter Notebook:

  Обратите внимание: в адресе есть параметр itemName. Значение этого параметра и является уникальным идентификатором расширения (в нашем примере это ms-toolsai.jupyter).

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

  Получив это значение, вы можете использовать его в команде code с флагом –install-extension, чтобы установить необходимое расширение:

  code –install-extension ms-toolsai.jupyter

  Вы получите такой результат:

  Удалить расширение можно по аналогии с установкой. Используйте флаг –uninstall-extension с идентификатором расширения.

  Отображение различий между двумя файлами

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

  code –diff file1 file2

  Как и при открытии файлов, по умолчанию команда повторно использует самое первое доступное окно (если оно существует). Принудительно открыть новое окно поможет флаг –new-window.

  Перенос stdin в Visual Studio Code

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

  с командой code -.

  В итоге команда ls будет выполнена для каталога

  (то есть для домашнего каталога текущего пользователя), а ее результат – список файлов и каталогов в вашем домашнем каталоге – будет отправлен команде code. Один дефис в команде code указывает, что она должна читать текст, а не файл.

  Команда code выведет информацию о временном файле, который она создала для хранения входных данных:

  Затем этот файл откроется в GUI.

  Эта команда будет бесконечно ждать ввода новых данных. Нажмите Ctrl+C, чтобы она прекратила работу и вернула вас в оболочку.

  Добавьте флаг –new-window, чтобы открыть новое окно для ввода.

  Заключение

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

  Чтобы узнать больше о команде code, вы можете запустить ее функцию –help:

  Редактор кода Visual Studio Code. Самый подробный гайд по настройке и установке плагинов для начинающих

  Бесплатный, мощный, очень популярный, с кучей дополнений, да что там говорить, сам Фейсбук выбрал его в качестве основного редактора!

  Сегодня речь пойдет о редакторе кода Visual Studio Code или просто VS Code. Мы с тобой его установим, настроим, а также применим плагины, которые существенно упростят нам работу.

  Если больше интересен редактор кода Sublime Text 3 по нему статья тут https://habr.com/ru/post/458206/

  Содержание:

  Удаление

  Если ты уже пользуешься VS Code, но решил начать с чистого листа, то я покажу, как удалить программу полностью, включая все настройки и плагины. Кроме того, что программу нужно удалить из панели управления Windows, нужно еще перейти на Диск C > Пользователи > Твое имя пользователя и здесь удалить папку .vscode

  

  В строке пути нужно дописать AppData, далее переходим в папку Roaming и здесь нужно удалить папку Code.

  

  Установка

  Отлично, теперь мы можем установить программу. Переходим на сайт code.visualstudio.com, секция Download. Здесь есть версия под Mac, Linux. Меня интересует Windows. Нажимаем и скачиваем себе на ПК. Кстати, сайт программы очень полезный, поэтому советую его изучить.

  

  Программа скачана, запускаем инсталлятор и следуем инструкциям: принимаем, добавляем все галочки, далее, ждем пока программа установится на наш ПК.

  

  Запуск на слабой машине

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

  

  Отлично, теперь программа запустится даже на калькуляторе.

  Установка языка

  Программа запущена и мы можем приступить к знакомству с ней. А чтобы знакомится было проще, я установлю русский язык. Для этого я щелкаю на иконку расширений, В поле поиска начинаю писать russian, пока не увижу пакет Russian Language Pack for Visual Studio Code.

  

  Жму на кнопочку Install. Далее программа попросит перезапуститься, делаем это. Отлично, теперь будет намного понятней. Но, если ты владеешь английским, то переходить на русский совсем не обязательно.

  Экран Приветствия

  Боковую панель я пока скрою, мы еще не раз к ней вернемся.
  Первое, что мы видим — это экран приветствия. Здесь есть пункт, с помощью которого мы можем импортировать все настройки, клавиши из уже установленных редакторов, например Vim, Sublime, Atom и другие.

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

  

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

  

  Интерфейс из коробки

  Лень читать? Тут видео версия.

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

  Вызовем окно Общие сведения об интерфейсе и посмотрим основные элементы программы.

  

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

  Рассмотрим все подробнее.

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

  Проблемы

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

  Чтобы открыть панель, нужно щелкнуть на эти иконки либо зажать Ctrl+Shift+М, здесь нам будет выводиться сам текст сообщений о проблемах.

  

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

  Консоль отладки

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

  Вывод

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

  

  Терминал

  Последняя вкладка в этой панели — встроенный терминал. Вызвать его можно зажав Ctrl+`.

  

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

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

  Уведомления

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

  Также в панели состояния будут появляться множество других элементов.

  Контекстное меню

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

  Также в этом же контекстном меню можем скрыть эту строку полностью.

  

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

  По умолчанию в левой части редактора расположилась панель действий с 6 элементами:

  1. Проводник, он же встроенный файл менеджер;
  2. Поиск;
  3. Система управления контролем версий;
  4. Запуск и отладка приложений;
  5. Установщик различных дополнений — наш редактор;
  6. Внизу шестеренка, кликнув на которую мы увидим меню основных настроек программы.

  

  Проводник

  Начнем с Проводника, открыть его можно кликнув на иконку либо зажав Ctrl+Shift+E.

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

  Тут мы видим 3 основные вкладки:

  1. Открытые редакторы — здесь будет список открытых для редактирования файлов.
  2. Вкладка с папками, проектами. Сейчас у нас нет открытых папок.
  3. Структура, — сейчас тут ничего нет, к ней мы вернемся позже.

  

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

  

  Давай добавим в редакторе пустую папку нашего будущего проекта. Для этого нужно кликнуть Открыть папку либо просто перетащить ее в это поле.

  

  Сейчас у нас появилась пустая папка hello_vscode, а также некоторые элементы управления:

  • Создать файл;
  • Создать папку;
  • Обновить все файлы и папки;
  • Свернуть все в проводнике.

  

  Давай создадим некоторые файлы, которые нам нужны для проекта. Нажимаем Создать файл, пишем например Index.html. Далее мы можем создать папку css и в ней создать файл style.css. Очень удобно пользоваться этим встроенным файл менеджером.

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

  Теперь мы можем перейти в Index.html и написать туда что-то интересное, например “Hello VC Code”.

  

  Подсветка синтаксиса

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

  

  Этот список не может включать в себя абсолютно все. Например, если мы работаем с файлом .kit. Давайте создадим index.kit и скопируем туда наш код. Мы увидим, что подсветки никакой нет, а вместо элемента html мы видим надпись простой текст. Что делать в этом случае? Нам нужно кликнуть на простой текст и тут у нас есть выбор — вместо автоматического обнаружения мы можем попробовать поискать дополнения для подсветки синтаксиса именно для файлов .kit.

  

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

  

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

  

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

  

  В итоге у меня останется только папка с проектом.

  Поиск

  Поиск (Ctrl+Shift+F) — штука нужная. Пишем слово hello, которое мы указывали в нашем html файле. Поиск его сразу же нашел, подсветил, показал в каком файле. Тут же можно заменить это слово на какое-то другое.

  

  Здесь удобно нам все это показывает, нажав здесь на иконку слово будет заменено.

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

  Открыть вкладку можно кликнув на иконку либо зажав Ctrl+Shift+G. Для тех, кто уже знаком с системами контроля версий, например Git, тот оценит эту возможность. Немного позже я покажу как связать свой локальный проект с репозиторием на GitHub.

  Отладка приложения

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

  Например, у нас есть некий javascript код, и для того, чтобы запустить отладку, мы можем нажать на кнопку здесь либо нажать F5.

  

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

  Расширения

  Тут у нас целый склад расширений и плагинов для нашего редактора. Мы уже использовали эту вкладку для установки языкового пакета. Кликаем на иконку либо зажав сочетание клавиш Ctrl+Shift+X мы увидим поле поиска расширений и три дополнительных вкладки:

  • Включено — выводятся все установленные расширения;
  • Рекомендуемые;
  • Расширения, которые установлены, но отключены.

  

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

  Настройки

  На панели действий у нас остался еще один элемент — шестеренка — меню основных настроек. Здесь мы можем вызвать палитру команд кликнув тут или Ctrl+Shift+P. Откроется такой блок, где мы можем найти и выполнить любую команду редактора или установленных плагинов.

  

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

  

  Заканчивая с Панелью действий, стоит отметить, что можно быстро вызвать последнюю открытую вкладку сочетанием Ctrl+B. Также скрыв контекстное меню можно скрыть ненужный элемент. Например, Запуск и Отладка я скрою. В этом же контекстном меню можно скрыть всю панель действий целиком.

  

  Область редактора

  Лень читать? Тут видео версия.

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

  

  Здесь есть дополнительное меню для управления всеми файлами.

  

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

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

  

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

  Что тут можем мы настроить?

  Как я уже показывал, окно редактора можно разделить на несколько частей, это удобно при работе с разными файлами. Для того, чтобы посмотреть разные варианты, нужно перейти в Вид > Макет редактора. Здесь есть куча вариантов, например две строки и мы можем какой-то файл переместить сюда и работать так. Также есть вариант Сетка 2х2. То есть, можно работать одновременно с 4 файлами.

  Также можно быстро оформить нужное положение файлов, просто перетаскивая их. Я сразу сформировал себе нужный макет для работы. Также есть возможность настроить вид всей области редактора. Откроем Меню > Вид > Внешний вид.

  

  Снизу есть возможность регулировать масштаб всей программы. Не путайте с размерами шрифта. Удобно пользоваться сочетаниями клавиш. Например, для увеличения элементов я нажимаю Сtrl+, для уменьшения — Ctrl-, для сброса настроек — Ctrl+0.

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

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

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

  Сверху есть полноэкранный режим при нажатии на F11. Скроется верхнее меню, кнопки управления окном программы.

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

  Есть замечательный режим Zen. Он скрывает все элементы, даже вкладки с файлами, мы концентрируемся только на одном единственном файле, на одном коде. Решаем сложную задачу, которая требует максимальной концентрации.

  

  Чтобы выйти из него, нажимаю Escape.

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

  Далее в самом меню Вид мы можем включить или выключить перенос текста, это можно сделать зажав Alt + Z. Что это значит? Например, у нас есть очень длинный текст, который не помещается в область кода и появляется горизонтальная прокрутка. Если это кажется неудобным, можно нажать Alt + Z весь наш текст перенесется, чтобы поместиться в область кода.

  

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

  

  Цветовая схема

  Выбрать одну из установленных тем мы можем перейдя в Управление, пункт Цветовая тема. Видим список и стрелками на клавиатуре можем перемещаться между темами, подбирая себе нужную тему. Есть как темные, так и светлые варианты.

  

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

  

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

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

  Иконки

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

  

  Также установить дополнительные пакеты значков. Например, Matherial Icon Theme.

  Параметры

  Дополнительно настроить комфорт работу с кодом и в целом с редактором можно в Параметрах программы. Для этого переходим в Управление > Параметры или зажимаем Ctrl+,

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

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

  Первая полезная опция — автосохранение файла. Для новичков очень крутая опция. Новички часто подходят ко мне с проблемой “Почему у меня ничего не работает?” Я смотрю, а там не сохранен файл.

  

  1. afterDelay — файл будет сохраняться после некоторой задержки, которую можно настроить сразу здесь ниже. При выборе этой опции при редактировании файла он сразу будет сохраняться, жирная точка даже не будет появляться.
  2. onfocusChange — файл будет сохранен, когда мы перейдем на другой файл
  3. onWindowChange — когда мы перейдем совсем на другую программу, тогда файл будет сохранен автоматически.

  Выбирайте для себя удобную опцию и двигаемся дальше.

  Отображение кода

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

  Я настраиваю размер отступа при табуляции. По умолчанию она составляет 4. Как по мне, слишком широкое поле при одном Tab, поэтому я меняю на значение 3, так мне кажется более компактно. Ты же указывай комфортное для тебя значение.

  В одном файле у меня выводятся пробелы, точки при нажатии Tab, в другом — значок табуляции. За эту опцию отвечает параметр Insert Spaces. По умолчании установлена галочка, то есть будут выводиться именно пробелы. Я хочу, чтобы у меня выводились значки табуляции, поэтому галочку уберу.

  

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

  

  А то, каким образом определять вставку символов для новых открытых файлов отвечает опция Detect Indentation. Я галочку уберу, потому что хочу, чтобы для всех файлов работали именно мои настроенные параметры.

  

  Скрыть подсказки

  Ранее я показывал, что при наведении на элемент в коде всплывают подсказки, часто это может раздражать. Чтобы подсказки убрать, существует параметр Hover Enabled. Галочку можно снять и подсказки пропадут.

  

  Но, вместе с этим пропадут функции, которые могут быль полезными.
  Например, в файле стили у нас есть цвет синий. Он подсвечивается сразу. Если Hover у нас включен, тогда при наведении на цвет выпадает такая штука:

  

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

  За вывод отвечает параметр Color Decorators, если он не нужен, галочку можно снять и никаких квадратиков цвета не будет.

  

  Mouse Wheel Zoom — поставив галочку, мы сможем в редакторе изменить размер шрифта зажав Ctrl и покрутив колесико мыши.

  

  Close Active Groups управляет тем, будет ли закрываться группа при закрытии последней вкладки в ней. Редактор можно делить на части. По умолчанию при закрытии в последней вкладки, вся вкладка закроется. Иногда это неудобно, поэтому я эту галочку снимаю. И теперь при закрытии последней вкладки группа у меня все равно останется.

  

  Форматирование

  Следующая группа настроек отвечает за форматирование, которое уже встроено в редакторе VC Code. Что такое форматирование? Например, мы пишем структуру, в ней еще одну структуру, но по какой-то причине съехала табуляция. При зажатии Shift + Alt + F у нас все выстроится как надо.

  Вернемся к нашим настройкам. Здесь мы можем поставить три галочки:

  1. Format On Paste — форматирование будет произведено автоматически при вставке кода.
  2. Format On Save — форматирование будет произведено в момент сохранения файла.
  3. Format On Type — форматирование будет автоматическим, то есть мы будем печатать и будет сразу все форматироваться.

  

  Я устанавливаю одну галочку — Форматирование при сохранении.
  Теперь, когда у меня съехала табуляция, я не обращаю внимание, в момент сохранения файла все выстроится на свои места.

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

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

  Для быстрого доступа ко всему, что мы настроили, зажимаем Ctrl+Shift+P и в строке поиска пишем Settings, пока не увидим Settings (JSON). Нажимаем и перед нами появятся наши настройки, их тут же можно менять.

  

  В этом же файле будем настраивать и новое расширение.

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

  Плагины

  Лень читать? Тут видео версия.

  Emmet

  — этот плагин уже встроен в редакторе VS Code из коробки. И вправду, сегодня сложно себе представить жизнь без Emmet. Супер ускоряет набор кода. Например, именно благодаря ему, я так быстро создал начальный код для HTML файла написав только восклицательный знак и нажав Tab.

  Вот еще пример. Нам нужно создать div с классом block для этого я пишу .block и нажимаю Tab. Готово!

  Или например посложнее — нам нужно создать маркированный список на 10 элементов. Пишем ul>li*10 Tab. Готово!

  

  То же самое применимо и к файлам стилей. Например, для тега body я хочу задать размер шрифта 20 пикселей. Для этого мне достаточно написать fz20. Нажав Tab я получу уже готовый параметр.

  Лучше ознакомиться с возможностями Emmet можно на сайте этого дополнения.

  Сниппеты

  Но еще круче создавать свои сокращения-сниппеты для быстрого вызова того иного куска кода.
  Переходим в Управление > Пользовательские фрагменты кода. Здесь есть выбор:

  Создать сниппеты для конкретного языка;
  Создать сниппеты для всех языков, но для конкретного проекта;
  Создать глобальные сниппеты для всех языков и для всех проектов.

  Создадим глобальные, здесь нужно ввести имя списка сниппетов.

  

  Набираю my, нажимаю и открывается файл my.code-snippets. Здесь есть всякая информация закомментированная, а также пример. Я его раскомментирую. Здесь заготовка сниппета для языка JavaScript.

  Надпись означает название самого сниппета. Параметр scope — указываем языки для которых этот сниппет будет применяться. Это необязательный параметр, можно его убрать и сниппет будет применяться для всех языков. Префикс — это сокращения, то есть что мы будем набирать, чтобы вывелся нужный отрезок кода. В поле body мы и пишем наш кусок кода. Здесь будет выводиться console.log Ниже description, здесь можем указать описание.

  

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

  Пишу — “Внешний отступ”, это же можно добавить и в описание. Языки вообще уберу, а префикс я поставлю например mm. В body нужно задать параметр «margin: 0px, 0px, 0px 0px;», я хочу чтобы при наборе mm у меня вывелся такой параметр. Сохраняем Ctrl+S и проверим.

  

  Переходим в наш style.css набираем mm и нажимаем Tab. Видим, что наш кусок кода, готовый параметр сразу появился.

  Можем проверить тот снипет, который был задан изначально в качестве примера. Переходим в файл js, набираем log Tab.

  Здесь обращаю внимание, что курсор уже моргает в нужном месте, за это отвечают переменные $1 $2. Изначально курсор будет в положении $1. Если мы нажмем Tab, то курсор перескочит в $2. С помощью этих переменных можно настраивать свой сниппет.

  Я думаю, мне не нужено объяснять, какой скорости можно добиться, грамотно настроив свои сниппеты.

  Продолжаем установку плагинов. Зажимаем Ctrl+Shift+X и переходим во вкладку с расширениями.

  Live Sass Compiler

  Идеальное для тех, кто работает с препроцессорами SASS/SCSS. Ищем наше дополнение и нажимаем Install. Индикатор сверху показывает, что идет установка, Отлично, расширение установлено. Получаем информационное окошко, что все окей.

  В строке состояния появляется кнопочка Watch Sass. И сейчас мы будем этот плагин настраивать.

  

  Создадим папку с нашими scss файлами, так ее и назовем. Внутри создадим style.scss.
  Напишем код:

  У нас пока ничего происходить не будет, но мы можем включить кнопку Watch Sass и плагин начал следить за нашими scss\sass файлами. Рядом с ним автоматически скомпилировались два файла style.css и style.css.map.

  

  Все отлично работает. Но, допустим, мы хотим, чтобы файлы создавались не рядом с файлом scss, а в папке css.

  Удалим старые файлы и перейдем к настройкам. Зажимаем Shift+Ctrl+P, вызываем наш Settings (JSON). Можем вставить следующую настройку, обязательно ставим запятую и вставляем две настройки.

  

  Я выключаю генерацию файла-карты, мап-файла. Следующие настройки для собственно самого компилятора. «format» — можно указать, каким именно способом будет генерироваться scss файл — развернутый, ужат, минифицирован и т.д.

  Следующий параметр — Автопрефикс устанавливает всякие вендорные префиксы для наших css параметров. Указал последние пять версий браузера. Далее указываются расширения конечного файла — это css. Папку указал css, все файлы будут выводиться туда.

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

  

  По поводу файлов, которые мы будем включать в style.scss. Мы знаем, что файлы в scss можно импортировать какие-то другие файлы. Пишем, как обычно — import «header.scss»

  

  Сразу получаем ошибку, потому что такого файла не существует и все быстро исправляем. Так мы бы обычно и делали…

  

  Что происходит? Когда я сохраняю header.scss у меня создается файл header.css. Но мне нужно, чтобы у меня был один файл style.css, который включает в себя и header, и многие другие файлы, которые я туда подключу. Удаляем header, это неправильно. Чтобы этого не было, мне нужно переименовать файл header.scss, указать вначале имени подчеркивание, а здесь при подключении указать подчеркивание и вообще убрать расширение.

  

  Компилятор будет уже сам понимать, что с ним делать. В итоге, я сохраняю, у меня уже не создается отдельный файл header.css, но стили его собраны в одном файле. Теперь работать очень классно 🙂

  Live Server

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

  В поиске набираем его название, у нас он уже есть, установлен автоматически вместе с Live Css Compiler. Об этом говорит кнопку в строке состояния Go Live. Мы работаем с нашими файлами, когда мы хотим увидеть результат, перейдя в index.html нажимаем на Go Live и у нас запускается Браузер.

  Я редактирую свою html файл, пишу “Hello”, сохраняю, нажимаю GoLive и сразу вижу результат в браузере.

  

  То же самое будет происходить, когда мы будем менять файл стили. Сначала его нужно подключить. Набираю link, ищу link.css, тут нужно будет указать путь к нашему файлу. Кстати, помощник выбора пути уже встроен в редакторе.

  

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

  SCSS IntelliSense

  Покажу еще несколько интересных плагинов для препроцессора SaSS. Установим SCSS IntelliSense, этот плагин подсказывает нам интересные штуки во время работы с scss, также удобно при работе именно с этим синтаксисом.

  SCSS Formatter

  Форматирование можно отдельно установить для конкретного синтаксиса. Этот плагин форматирует sсss файлы. Также его можно подстроить.

  Auto Complete Tag

  Мегаполезный плагин в который входят Auto Rename Tag и Auto Close Tab. Несмотря на то, что VS Code умеет закрывать теги, плагин Auto Close Tab — умеет закрывать теги не только в html, но и в многих других языках. Auto Rename Tag — изменяет закрывающий элемент автоматически, если переименовать открывающий. Например, мне нужно изменить открывающий элемент на span и мы видим, что закрывающий элемент изменит название автоматически.

  

  Bracket Pair Colorizer

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

  Indent Rainbow

  Он тоже разукрашивает код, но не скобки, а отступы, что невероятно полезно для тех, кто работает в синтаксисе SaSS или с шаблонизатором pug, где отступы очень важны.

  Better Comments

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

  Ставим для чего-то очень важного —! — текст окрашен в красный, для списка ToDO — оранжевый, для вопроса —? — синий.

  

  Все цвета можно настроить, есть готовый код с настройками в информации, его можно перенести и там подправить цвета под наши задачи.

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

  BEM Helper

  Это помощник при работе с методологией BEM. Он умеет вставлять сразу новый элемент по методологии bem, учитывая родителя, учитывая блок. Может вставлять модификатор, помимо всего умеет формировать файл стилей, будь-то css или scss файл на основе bem-разметки в html коде.

  

  Попробуем. Нажимаем Alt+B+E, у нас вставился объект, учитывая класс родителя, клас блока.

  Как менять сочетания клавиш?

  На примере этого плагина покажу как можно менять сочетания клавиш.
  Допустим эти сочетания клавиш нас не устраивают. Мы копируем имя плагина, переходим в Управление > Сочетание клавиш и здесь ищем BEM Helper.

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

  Если сочетание клавиш занято, мы получим ошибку. Нужно смотреть, чтобы оно было свободно, иначе оно перезапишет вызов какой-то другой команды.

  eCSStractor

  Плагин, который помогает копировать классы из html в css\scss\sass. Установим его и сразу создадим сочетания клавиш, чтобы делать все быстро. Переходим в Управление > Сочетание клавиш, ищем наш плагин eCSStractor, видим несколько команд. Меня интересует команда eCSStractor Run (With BEM Nesting).

  Нажимаем на команду, на плюсик, придумываем свободное сочетание Ctrl+Alt+1, нажимаем Enter, наши горячие клавиши присвоились.

  

  Тестируем: переходим в наш html файл, выделяем блок с классами, нажимаем Ctrl+Alt+1, получаем сообщение, что наши классы скопировались.

  

  Переходим в файл стилей и вставляем. Видим, что все работает.

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

  Тестим, выделяем, вставляем. Готово, теперь у нас есть две комбинации клавиш — по BEM и без BEM.

  CSS Navigation

  Отличный многофункциональный плагин, который связывает наши файлы стили с другими файлами. Во-первых, он будет подсказывать нам об имеющихся классах наших файлов стилей.
  Например, мы создадим класс red. Когда мы пишем нашу разметку html, мы хотим здесь написать класс. Начинаем писать r и у нас сразу появляется подсказка, что такой класс есть и мы можем с ним работать.

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

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

  Это же окошко можно вызвать сочетанием Alt + F12

  

  Image Preview

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

  

  Debugger for Chrome

  Для отладки кода можно использовать не встроенный инструмент, а этот плагин и с его помощью делать отладку какого-то скрипта. При нажатии на F5 мы можем выбрать Chrome, вся отладка будет проводиться на основе этого браузера, Нужно его дополнительно настроить и пользоваться.

  

  Vscode Google Translate или Google Translate

  Позволяет переводить выделенный текст с одного языка на другой. Для его настройки переходим в плагин, ищем команду translate text.

  

  Переходим в сочетания клавиш, вставляем команду, находим ее и задаем сочетание клавиш, допустим Shift+Alt+T.
  Возвращаемся в наш html файл, выделяем слово hello, зажимаем Shift+Alt+T и получаем список языков. Далее выбираем язык, на который нужно перевести и получаем перевод.

  Если нам нужно переводить только с русского на английский, то можем зайти в Параметры > Расширения, найти этот плагин, указать основной язык, на который нужно переводить, например английский.

  

  Возвращаемся в сочетание клавиш, сбросить старое сочетание клавиш и добавляем это сочетание клавиш на эту команду (Preffered). У нас есть русское слово, зажимаем Shift+Alt+T и сразу получаем английское. Я этим пользуюсь постоянно и поэтому рекомендую этот плагин.

  Project Manager

  Незаменим, если ты работаешь с множеством проектов, папок и т.д. Установим его и в панели действий появится иконка папочек. Это и есть наш Project Manager.

  

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

  Settings Sync

  Настройка программы под себя дело не быстрое и требует усилий, и чтобы каждый раз не приходилось делать то же самое, например при переустановке Windows, существует плагин Settings Sync.

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

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

  

  Нужно сохранить все то, что мы сегодня настроили. В информации о плагине есть сочетание Shift+Alt+U.

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

  Ну а сейчас я полностью удалю программу и попробую получить все настройки заново.

  У меня чистая программа, теперь мне нужно установить плагин Settings Sync. Устанавливаю, далее нужно залогиниться с помощью GitHub. Здесь я могу выбрать свой существующий ключ.

  

  Я его выбираю. Мне нужно все мои настройки получить, смотрю, какое сочетание клавиш мне для этого нужно — Shift+Alt+D.

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

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

  Вот общий (более широкий) список полезных плагинов:
  Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
  Settings Sync

  Связать с GITHub

  Лень читать? Тут видео версия.

  Внимание! На ПК должен быть установлен Git.

  Переходим на вкладку Система управления версиями, нажимаем на +, инициируя локальный репозиторий, выбираем папку с нашим проектом.

  

  Тут мы видим изменения которые нам нужно применить. Жмем на +, чтобы применить сразу все изменения.

  

  Нужно написать комит, жмем на галочку, пишем что-нибудь, нажимаем на Enter. Далее нужно создать репозиторий на GitHub.Переходим по ссылке Создать новый репозиторий, пишем название, жмем кнопку Создать. Даже нас интересуют эти две команды:

  

  git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git
  git push -u origin master

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

  

  Загрузки, готово. Теперь наш проект полностью связан с репозиторием Git. Если мы что-то начнем менять, мы увидим что здесь у нас появится значок 1, то есть изменен 1 файл в системе версий, опять нужно применить изменения, написать комит. Достаточно нажать Меню > Отправить и наш проект загрузится на репозиторий.

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

  

  Дополнительно можно установить плагин GitLens, который существенно расширяет возможности системы управления контролем версий.

  

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

  Обучайся, развивайся, и помни — живи, а работай в свободное время!

  Python + Visual Studio Code = успешная разработка

  

  VS Code от Microsoft – легкий и удобный редактор кода, доступный на всех платформах и невероятно гибкий. Это отличный выбор для программирования на Python.

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

  Статья предназначена для программистов, уже имеющих опыт работы с Python и установивших на свою рабочую машину интерпретатор этого языка программирования (Python 2.7, Python 3.6/3.7, Anaconda или другой дистрибутив).

  Установка Python – дело несложное: здесь вы найдете подробное пошаговое руководство для всех популярных ОС. Помните, что в разных операционных системах интерфейс VS Code может немного различаться.

  Установка и настройка Visual Studio Code для разработки на Python

  Сразу же отметим, что VS Code не имеет практически ничего общего с его знаменитым тезкой Visual Studio.

  Редактор очень легко установить на любую платформу: на официальном сайте есть подробные инструкции для Windows, Mac и Linux.

  

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

  

  VS Code + Python

  С 2018 года есть расширение для Python. Наблюдать за развитием отношений этой пары можно в блоге Microsoft.

  Основные возможности редактора:

  • Поддержка Python 3.4 и выше, а также Python 2.7
  • Автоматическое дополнение кода с помощью IntelliSense
  • Автоматическое использование conda и виртуальных сред
  • Редактирование кода в средах Jupyter и Jupyter Notebooks

  

  А вот пара полезных подборок для прокачки Python-скиллов:

  В редакторе есть и полезные фичи, не связанные напрямую с языком:

  для Atom, Sublime Text, Emacs, Vim, PyCharm и множества других редакторов
  • Настраиваемые темы оформления для множества языков, включая русский

  И еще несколько крутых возможностей для полного счастья:

  – множество полезных функций Git прямо в редакторе, включая аннотации blame и просмотр репозитория.
  1. Автосохранение (File — Auto Save) и удобная настройка его задержки. между различными устройствами с помощью GitHub.
  2. Удобная работа с Docker.

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

  Найдите расширение Python и установите его, чтобы продолжить настройку редактора.

  Файлы конфигурации

  В Visual Studio Code вы легко можете настроить все под себя. Здесь есть параметры пользователя, которые являются глобальными, и параметры рабочей области – локальные для конкретных папок или проектов. Локальные настройки сохраняются в виде .json-файлов в папке .vscode.

  Новый проект на Python

  Чтобы открыть новый файл, нужно зайти в меню Файл и выбрать пункт Создать или нажать горячую комбинацию клавиш Ctrl+N .

  Еще в редакторе есть полезная палитра команд, которую можно вызвать сочетанием Ctrl+Shift+P . Для создания нового файла введите в появившемся поле File: New File и нажмите Enter .

  Какой бы способ вы ни выбрали, перед вами должно открыться вот такое окно:

  

  Здесь уже можно вводить код вашей программы.

  Начинаем кодить

  Для демонстрации возможностей редактора напишем «Решето Эратосфена» – известный алгоритм для нахождения простых чисел до некоторого предела. Начнем кодить:

  На экране это будет выглядеть примерно так:

  

  Подождите, что-то не так. Почему-то VS Code не выделяет ключевые слова языка, не дополняет, не форматирует и вообще ничего полезного не делает. Зачем он вообще такой нужен?

  Без паники! Просто сейчас редактор не знает, с каким файлом он имеет дело. Смотрите, у него еще нет названия и расширения – только какое-то неопределенное Untitled-1. А в правом нижнем углу написано Plain Text (простой текст).

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

  • меню: Файл — Сохранить
  • горячая комбинация: Ctrl+S
  • палитра команд: File: Save File

  Дайте файлу имя sieve.py.

  Теперь редактор понял, что имеет дело с кодом на Python, и исправился:

  

  Так гораздо лучше! В правом нижнем углу появилась надпись Python, значит все работает правильно.

  Если на вашем компьютере установлено несколько интерпретаторов языка (Python 2.7, Python 3.x или Anaconda), вы можете выбирать нужный. Для этого кликните на индикаторе языка (внизу в левой части экрана) или наберите в палитре команд Python: Select Interpreter .

  По умолчанию VS Code поддерживает форматирование с использованием pep8, но вы можете выбрать black или yapf, если хотите.

  Допишем код алгоритма:

  Если вы будете вводить его вручную (без copy-paste), то сможете увидеть IntelliSense редактора в действии.

  VS Code автоматически делает отступы перед операторами for и if , добавляет закрывающие скобки и предлагает варианты завершения слов.

  Запуск программы

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

  Теперь, когда код завершен, его можно запустить. Для этого не нужно выходить из редактора: Visual Studio Code может запускать эту программу непосредственно в Редакторе. Сохраните файл (с помощью Ctrl+S ), затем щелкните правой кнопкой мыши в окне редактора и выберите пункт Запустить файл Python в терминале.

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

  Линтинг кода

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

  • flake8
  • mypy
  • pydocstyle
  • pep8
  • prospector
  • pyllama
  • bandit

  Подробные сведения о настройке каждого из них вы можете найти здесь.

  Обратите внимание, что линтер настраивается для конкретной рабочей области, а не глобально.

  Редактирование существующего проекта

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

  С редактором можно работать прямо из консоли, открывая и создавая файлы простой командой code filename.py .

  Посмотрим, на что способен VS Code на примере уже готового проекта. Это библиотека для анализа уравнений, основанная на «алгоритме маневровой станции» (shunting-yard algorithm) Дийкстры. Вы можете клонировать этот репозиторий, чтобы начать работу.

  Открыть созданную локально папку в редакторе можно из терминала:

  VS Code умеет работать с различными средами: virtualenv, pipenv или conda.

  Также вы можете открыть папку прямо из интерфейса редактора:

  • меню: Файл — Открыть папку
  • горячие клавиши: Ctrl+K , Ctrl+O
  • из палитры команд: File: Open Folder

  Вот так выглядит открытый проект:

  

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

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

  Тестирование

  Грамотное программирование на Python помимо собственно написания кода включает также его тестирование.

  Visual Studio Code умеет автоматически распознавать тесты в unittest, pytest или Nose. В нашем проекте есть модульный тест, который можно использовать для примера.

  Чтобы запустить существующие тесты, из любого файла Python вызовите правой кнопкой мыши контекстное меню и выберите пункт Запустить текущий тестовый файл.

  Нужно будет указать используемый для тестирования фреймворк, путь поиска и шаблон для имени файлов тестов. Эти настройки сохраняются как параметры рабочей области в локальном файле .vscode/settings.json. Для нашего проекта нужно выбрать unittest, текущую папку и шаблон *_test.py.

  Теперь можно запустить все тесты, кликнув на Run Tests в строке состояния или из палитры команд.

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

  Результаты тестов отображаются во вкладке Output (раздел Python Test Log выпадающего меню).

  Посмотрите также:

  Отладка кода

  Несмотря на то, что VS Code – это просто редактор кода, а не полноценная IDE, он позволяет отлаживать код Python прямо в рабочей области. У него есть много функций, которые должны быть у хорошего отладчика:

  • Автоматическое отслеживание переменных
  • Отслеживание выражений
  • Точки прерывания
  • Инспекция стека вызовов

  Все эти данные можно найти во вкладке Debug левой панели.

  

  Отладчик может управлять приложениями Python, запущенными во встроенной консоли или внешнем терминале. Он может подключаться к уже запущенным экземплярам Python и даже отлаживать приложения Django и Flask.

  Отладить программу на Python так же просто, как запустить отладчик с помощью F5 . Используйте F10 и F11 для перехода к следующей функции и для захода в текущую функцию. Shift+F5 – выход из отладчика. Точки останова задаются с помощью клавиши F9 или щелчком мыши в левом поле окна редактора.

  Перед началом отладки более сложных проектов, включая приложения Django или Flask, необходимо настроить и выбрать конфигурацию отладки. Сделать это очень просто. Во вкладке Debug найдите раскрывающееся меню Configuration и нажмите Add Configuration:

  

  VS Code создаст и откроет файл .vscode/launch.json, в котором можно настроить конфигурации Python, а также отладку приложений.

  Вы даже можете выполнять удаленную отладку и дебажить шаблоны Jinja и Django. Закройте launch.json и выберите нужную конфигурацию приложения из раскрывающегося списка.

  Посмотрите также:

  Интеграция с Git

  В VS Code прямо из коробки есть встроенная поддержка управления версиями. По умолчанию подключен Git и GitHub, но вы можете установить поддержку других систем. Все работа происходит во вкладке Source Control левого меню:

  

  Если в проекте есть папка .git, весь спектр функций Git/GitHub включается автоматически. Вы можете:

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

  

  VS Code также распознает изменения, внесенные вне редактора.

  Все измененные файлы помечены маркером M, а неотслеживаемые – U. Символ + подготавливает файлы к коммиту. Чтобы сохранить изменения, введите сообщение и нажмите галочку.

  

  Локальные коммиты можно отправить на GitHub прямо из редактора. Выберите в меню пункт Sync или кликните по значку Synchronize Changes в статус-баре в самом низу редактора (рядом с индикатором текущей ветки).

  Visual Studio Code + Python = довольный разработчик

  Visual Studio Code – один из самых крутых редакторов кода и замечательный инструмент для разработки. Редактор из коробки предлагает множество полезных возможностей и гибко подстраивается под все ваши потребности. Программирование на Python становится проще и эффективнее.

  А какой редактор (или полноценную IDE) для разработки на Python используете вы?

  Похожие публикации:

  1. Как снять красную табличку в steam 2021
  2. Psd чем открыть на андроид
  3. Как сдвинуть экран вниз на iphone
  4. Как узнать ip docker контейнера