Visual studio code настройка терминала
Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.
Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.
Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:
- Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
- Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
- Source Control. Встроенная поддержка git и других систем контроля версий.
- Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
- Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:
В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.
Изменение темы
Изменение настроек
Рассмотрим некоторые настройки, которые могут вам пригодиться:
- Настройки редактирования.
- Размер шрифта. "editor.fontSize": 14
- Размер таба. "editor.tabSize": 4
- Шрифт. "editor.fontFamily": "Consolas, 'Courier New', monospace"
- Перенос слов. "editor.wordWrap": "on"
Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.
- Автосохранение. "files.autoSave": "on"
- Задержка при автосохранении. "files.autoSaveDelay": 5000
По умолчанию файлы сохраняются только тогда, когда пользователь об этом попросит. Это поведению можно изменить, включив автосохранение файлов. Также можно настроить задержку после ввода перед автосохранением. Величина записывается в миллисекундах.
- Размер шрифта. "terminal.integrated.fontSize": 14
- Выбор терминала. "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
- Тип курсора. "terminal.integrated.cursorStyle": "line"
Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.
Создание задач
Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:
Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.
Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.
Также задачи часто используются для автоматизации сборки кода и прогона тестов.
Создание сниппетов
Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.
- Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
- Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
- Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
- Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
- Комментирование строки ( CTRL + / ).
Команды выше работают и для нескольких строк.
- Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
- Выделение строки ( CTRL + I ).
- Выделение слова ( CTRL + D ).
- Множественный курсор. ( ALT + CLICK ).
Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.
чтобы изменить встроенный терминал в Windows, вам просто нужно изменить terminal.integrated.shell.windows строку:
- открыть VS Настройки пользователя (настройки > Настройки пользователя). Это откроет два параллельных документа.
- Добавить новый "terminal.integrated.shell.windows": "C:\Bin\Cmder\Cmder.exe" настройка документа настроек пользователя справа, если он еще не существует. Это значит, что вы не редактируете настройку по умолчанию напрямую, а вместо этого добавляете к ней.
- сохраните файл настроек пользователя.
Вы можете тогда доступ к нему с помощью ключей Ctrl + backtick по умолчанию.
можно получить эту работу в VS-коде и интегрировать терминал Cmder (не всплывать).
- создайте переменную среды "CMDER_ROOT", указывающую на ваш Cmder справочник.
- In (Настройки > Настройки пользователя) в VS Code добавьте следующие настройки:
"terminal.integrated.shellArgs.windows": ["/k", "%CMDER_ROOT%\vendor\init.bat"]
Я знаю, что поздно, но вы можете быстро выполнить это, просто набрав Ctrl + Shift + p, а затем введите default, он покажет опцию, которая говорит
Terminal: Выберите Оболочку По Умолчанию
, Он будет отображать все терминалы, доступные для вас.
правильная настройка вашей оболочки в Windows-это вопрос поиска правильный исполняемый файл и обновление параметров. Ниже приведен список общие исполняемые файлы оболочки и их расположения по умолчанию.
существует также команда удобства Выберите Оболочку По Умолчанию что может быть доступ через палитру команд, которая может обнаружить и установить это для вы.
так что вы можете открыть палитра команд с помощью ctrl+shift+p используйте команду Выберите Оболочку По Умолчанию, то он отображает все доступные интерфейсы командной строки, выберите все, что вы хотите, VS код устанавливает, что по умолчанию интегрированный терминал для вас автоматически.
если вы хотите установить его вручную, найдите местоположение исполняемого файла вашего cli и откройте пользовательские настройки vscode ( ctrl+, ) затем установить
пример для gitbash на windows7:
официальный способ описан в документах VS Code, что похоже на ответ khernands.
если вы не хотите устанавливать CMDER_ROOT в качестве глобальной переменной среды вы можете сделать это в этом пакетном файле. Кроме того, cd в текущий рабочий dir в конце решил проблему пути для меня.
однако, я столкнулся с одним ограничением с CMDER как интегрированный терминал по умолчанию: Он не работает, если вы хотите запускать задачи с помощью команды Pallette -> Команда" выполнить задачу " VS Code UI (например, "выполнить задачу сборки"). Подробнее об этом здесь и здесь.
Рано или поздно у разработчика наступает момент, когда разработка вида "хренак, хренак и в продакшен" уже не устраивает и требуются системы, которые бы работали как сохранения в игре, и в любой момент можно вернуться к определенному шагу разработки. Такие системы называют системами контроля версий, их очень много, но речь сегодня пойдет именно про GIT.
Что такое GIT
Git - система управления контроля версиями, репозитории Git содержат файлы, историю, конфигурации управляемые Git. Данные могут отправляться из локальной папки в Git репозиторий и обратно, локальное состояние подразумевает рабочую папку которая содержит измененные файлы готовые для помещения в .git каталог, при помещении в данный каталог - Commit, указываются комментарии к данному коммиту, что по факту является историей, удаленный репозиторий содержит ветки Branches, основная ветка называется Master, данные могут отправляться как в Master, так и другие ветки (ответвления) проекта.
GIT является одной из самых популярных систем. Её отличие от других программ — отсутствие графической версии. Поэтому работа с Git ведётся через командную строку. В разных операционных системах свои программы для взаимодействия с Git.
В Windows их две: PowerShell и cmd.exe. В Ubuntu это Terminal. Самая популярная программа на macOS тоже называется Terminal. Если вам не подходит встроенная в систему программа для работы с командной строкой, вы можете поставить свою. Например, написанную на JavaScript программу Hyper, которая работает на любой операционной системе. На Windows популярны программы Cmder и Git Bash, а на macOS — iTerm.
Установка GIT
Если вы ранее не работали с GIT, то для начала его нужно установить. В зависимости от системы нужно выбрать свой вариант
Установка GIT в Linux (Ubuntu)
В зависимости от вашего дистрибутива Linux требуется установить через консоль, например в убунту эта команда будет иметь следующий вид:
Команды для других дистрибутивов можно посмотреть здесь.
Установка на macOS
Установка в Windows
Скачайте exe-файл инсталлятора с сайта Git и запустите его. Это Git для Windows, он называется msysGit. Установщик спросит добавлять ли в меню проводника возможность запуска файлов с помощью Git Bash (консольная версия) и GUI (графическая версия). Подтвердите действие, чтобы далее вести работу через консоль в Git Bash. Остальные пункты можно оставить по умолчанию.
Проверим, что Git установлен.
После того, как все действия по установке завершены, убедимся, что Git появился в системе компьютера. Откройте терминал и введите git --version , должна появиться текущая версия программы на вашей машине. Эта проверка подходит для всех операционных систем.
Настройка Git
После установки производим настройку своего профиля вводя в терминал поочереди команды:
Заменив значения ВАШЕ_ИМЯ и АДРЕС вашими значениями.
После указания своих данных, можно их просмотреть:
Обратите внимание, что в командах, указанных выше, есть опция --global . Это значит, что такие данные будут сохранены для всех ваших действий в Git и вводить их больше не надо. Если вы хотите менять эту информацию для разных проектов, то в директории проекта вводите эти же команды, только без опции --global .
GITHUB
GitHub — веб-сервис, который основан на системе Git. Это такая социальная сеть для разработчиков, которая помогает удобно вести коллективную разработку IT-проектов. Здесь можно публиковать и редактировать свой код, комментировать чужие наработки, следить за новостями других пользователей. Именно в GitHub работаем мы, команда Академии, и студенты интенсивов.
Чтобы начать работу с GitHub, нужно зарегистрироваться на сайте, если вы ещё этого не сделали.
После того как у вас будет создан аккаунт в Github можно будет начать полноценно работать с ним.
Копирование репозитория Git в локальную папку
Для начала определим, что такое репозиторий. Это рабочая директория с вашим проектом. По сути, это та же папка с HTML, CSS, JavaScript и прочими файлами, что хранится у вас на компьютере, но находится на сервере GitHub. Поэтому вы можете работать с проектом удалённо на любой машине, не переживая, что какие-то из ваших файлов потеряются — все данные будут в репозитории при условии, что вы их туда отправите. Но об этом позже.
Команда для копирования репозитория:
После клонирования переходим в папку репозитория:
Добавление данных в Git или коммит (commit)
Создаем файл с текстом:
Видим, что у нас есть файл готовый для загрузки в Git, добавляем его в репозиторий:
Снова смотрим статус, видим что у нас появился новый файл example.txt, добавляем данный файл в репозиторий используя git commit:
Отправка данных в онлайн Git репозиторий
После ввода аутентификационных данных, произойдет отправка в онлайн репозиторий, после чего можно обновить страницу на GitHub дабы убедиться в том, что новый файл добавлен в него (репозиторий).
Обратите внимание, что если вы используете двухфакторную авторизацию на github и являетесь пользователем linux, то вам нужно в настройках, в разделе "Developers setting" создать новый Personal access tokens и данный токкен использовать вместо пароля при аутентификации.
VISUAL STUDIO CODE
Данное ПО является хорошим выбором для комфортной работы с GIT и GITHUB. В VS Code есть встроенный терминал, который можно вызвать с помощью комбинации клавиш:
Внутри данного терминала вы можете использовать теже команды для работы с GIT которые были описаны выше.
Настройка терминала VS Code в Windows
По умолчанию консоль VS Code в Windows запускает стандартную командную строку Windows, которая не может работать с GIT, чтобы все работало нужно запустить терминал bash , для этого выполним следующие действия:
Перевод статьи «How to set up VSCode to improve your productivity».
С течением времени редакторы кода существенно улучшились. Еще несколько лет назад Visual Studio Code (VS Code) вообще не существовало. Вы, вероятно, пользовались Sublime Text, Atom, Bracket и т. п. Но теперь VS Code стал любимым редактором большинства разработчиков.
Почему VS Code?
Любви разработчиков к этому редактору способствуют (среди прочих) такие его особенности:
- Настраиваемость
- Легкость отладки
- Emmet
- Расширения
- Интеграция Git
- Встроенный терминал
- Intellisense
Теперь, когда вы знаете о преимуществах использования VS Code, давайте рассмотрим, как его настроить и какие расширения установить, чтобы использовать этот редактор максимально эффективно. (Примечание редакции: в статье приводятся советы для macOS, но многие из них универсальны. Для вызова палитры команд вместо CMD + SHIFT + P можно использовать CTRL + SHIFT + P).
Терминал
Вы можете настроить ваш терминал для использования iTerm2 и Zsh, а затем сделать так, чтобы встроенный терминал в VS Code использовал эти настройки.
После конфигурации Zsh (для основного терминала) запустите встроенный в VS Code терминал Terminal > New Terminal и введите команду
чтобы выполнить содержимое файла конфигурации .zshrc в оболочке.
Шрифт
Благодаря поддержке лигатур хорошо смотрится FiraCode. Скачайте и установите этот шрифт, а затем добавьте его в ваш файл settings.json. (Примечание редакции: для доступа к файлу выберите в палитре команд Open Settings (JSON)).
[code]"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,[/code]Запуск из командной строки
Хорошо бы иметь возможность запускать VS Code из терминала. Для этого нажмите CMD + SHIFT + P, введите shell command и выберите Install code command in path. После чего перейдите в любой проект из терминала и, находясь в выбранной директории, введите «code .», чтобы запустить проект с помощью VS Code.
Конфигурация
Конфигурация VS Code не зависит от рабочего окружения и содержится в файле settings.json. Вы можете внести изменения в этот файл, чтобы ваш VS Code больше соответствовал вашим предпочтениям.
Скопируйте и вставьте этот код в файл settings.json:
[code] "editor.multiCursorModifier": "ctrlCmd",
"editor.formatOnPaste": true,
"editor.wordWrap": "bounded",
"editor.trimAutoWhitespace": true,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"editor.formatOnSave": true,
"files.autoSave": "onFocusChange",
"emmet.syntaxProfiles": "javascript": "jsx"
>,
"eslint.autoFixOnSave": true,
"eslint.validate": [
"javascript",
"javascriptreact"
],
"javascript.validate.enable": true,
"git.enableSmartCommit": true,
"files.trimTrailingWhitespace": true,
"editor.tabSize": 2,
"gitlens.historyExplorer.enabled": true,
"diffEditor.ignoreTrimWhitespace": false,
"workbench.sideBar.location": "right",
"explorer.confirmDelete": false,
"javascript.updateImportsOnFileMove.enabled": "always",
>[/code]Расширения
Ниже представлены полезные расширения, которые могут сделать более удобной вашу работу с кодовой базой.
Чтобы найти эти расширения,
- Перейдите View -> Extensions
- Найдите нужное расширение
- Кликните «Install».
1. Auto Import
Благодаря этому расширению вам не придется импортировать файлы вручную. Если вы работаете над компонентно-ориентированным проектом, просто введите имя компонента, и он будет автоматически импортирован.
2. Add jsdoc comments
Это расширение добавляет блок комментариев к коду. Чтобы его использовать, выделите первую строку функции, нажмите CMD + SHIFT + P и выберите Add Doc Comments.
3. ESDoc MDN
В некоторых ситуациях у нас бывает тенденция забывать, как работают те или иные вещи. Здесь нам и пригодится расширение ESDoc MDN. С ним вам не придется запускать браузер, чтобы найти правильный синтаксис. Все, что нужно, это набрать
4. CSS Peek
Как следует из названия (peek – «заглянуть»), это расширение помогает вам просмотреть правила, задействованные при применении определенного стиля в кодовой базе. Это бывает удобно при работе с legacy-кодом.
5. GitLens
GitLens повышает эффективность работы с Git. С помощью этого расширения вы сможете делать гораздо больше всего, например, без труда исследовать репозитории Git, просматривать внесенные исправления, информацию об авторстве и т. д.
6. ESLint
Это расширение интегрирует ESLint в VS Code, благодаря чему вы сможете приводить свой код в соответствие со стандартами. Чтобы воспользоваться возможностями этого расширения для работы над проектом, нужно установить ESLint локально или глобально.
Для локальной установки запустите
[code]npm install eslint[/code]
а для глобальной –
[code]npm install -g eslint[/code]
Вам также понадобится создать конфигурационный файл .eslintrc. Если вы установили ESLint локально, запустите
– в случае глобальной инсталляции.
7. Debugger for Chrome
С его помощью вы сможете осуществлять отладку вашего JavaScript-кода прямо из браузера Google Chrome.
8. Google Fonts
С помощью этого расширения облегчается установка шрифтов Google. Больше не придется искать их в браузере. Чтобы получить список шрифтов, нажмите CMD + SHIFT + P и поищите Google fonts.
9. TODO Highlight
Когда вам нужно проделать много всего, и каждая задача имеет свой приоритет, легко забыть, что еще не сделано. TODO highlight подсвечивает задачи, так что вы сможете легко их увидеть.
10. Docker
Благодаря этому расширению вы сможете на лету создавать Dockerfiles. Также предоставляется подсветка синтаксиса, intellisense и многое другое.
Нажмите CMD + SHIFT + P и поищите Add Docker files to workspace.
11. Code Spellchecker
Это расширение позволяет с легкостью находить опечатки в коде.
12. Import Cost
Import Cost показывает, как импортируемые пакеты влияют на код. Это позволяет оценивать проблемы с производительностью.
13. HTMLHint
Это расширение проверяет ваш HTML, помогая вам писать код, совместимый со стандартами.
14. Peacock
Это расширение дает вам возможность изменять цвет вашего рабочего пространства. Идеально для случаев, когда у вас несколько экземпляров VS Code и вы хотите быстро определять нужный.
После установки Peacock кликните на иконке настроек > settings, выберите вкладку настроек рабочего пространства, кликните на <> и вставьте следующий код:
Также можно добавить titleBar и statusBar в affectedElements и настрйоки цвета для них в разделе colorCustomizations.
Чтобы использовать один из дефолтных цветов, нажмите CMD + SHIFT + P, введите peacock и выберите тему по своему вкусу. Это перезапишет настройки цвета в файле settings.json для данного рабочего пространства.
15. Prettier
При написании кода все время приходится набирать пробелы или табы? На помощь вам придет Prettier. Это расширение форматирует строки кода и делает код читаемым.
В 2016-м году компания Microsoft представила миру свой новый редактор программного кода. В отличие от старшей сестры — полноценной IDE Visual Studio — VS Code получился куда более компактным и легковесным решением. Он разработан как кроссплатформенное ПО и может быть успешно установлен в системах Windows, Linux и macOS.
Бесплатность Visual Studio Code абсолютно не мешает ему обладать весьма богатым современным функционалом. VS Code имеет встроенный отладчик, позволяет работать с системами контроля версий, обеспечивает интеллектуальную подсветку синтаксиса, а также поддерживает целый ряд популярных языков программирования.
И хоть, за годы своего существования, VSCode зарекомендовал себя, в основном, как продукт для веб-разработки, в 2018 году появилось расширение " Python ", которое дало программистам многочисленные возможности для редактирования, отладки и тестирования кода на нашем любимом языке.
Установка VSCode
Поистине смешные системные требования Visual Studio Code обязательно порадуют владельцев старых машин.
Для полноценной работы редактору требуется всего лишь 1 ГБ оперативной памяти и процессор с частотой от 1.6 ГГц.
Такое сочетание лёгкости и функциональности действительно подкупает, а отсутствие в VS Code каких-либо "лагов" и "фризов" делают разработку ещё более приятным и увлекательным занятием.
Установка редактора никуда не отходит от данной парадигмы и тоже является весьма простым и понятным процессом.
Windows
Сначала нужно скачать с официального сайта установочный файл небольшого размера, а затем установить сам ВиЭс код, следуя подсказкам от мастера установки.
Linux
На сайте программы можно изучить способы инсталляции редактора на разные Linux-дистрибутивы, но здесь рассмотрим процесс установки для самого популярного из них — Ubuntu.
Установить VSCode можно несколькими способами:
Способ №1 : Самый простой способ — воспользоваться менеджером установки "Ubuntu Software".
Откройте "Ubuntu Software" -> введите в поиск "VSCode" -> выберите первую строку и нажмите "Install"sudo apt install ./<file>.deb
О других способах установки читайте на странице официальной документации в разделе " Setup ";
macOS
Алгоритм установки редактора внутри яблочной операционной системы также не представляет собой ничего сложного:
- Сначала нужно скачать Visual Studio Code с официального сайта.
- Затем открыть список загрузок браузера и найти там VSCode-Darwin-Stable.zip .
- Нажмите на иконку увеличительного стекла, чтобы открыть архив.
- Перетащите Visual Studio Code.app в папку приложений, сделав ее доступной на панели запуска.
- Щёлкните правой кнопкой мыши по значку и выберете команду " Оставить в Dock ".
Настройка под Python
Установка расширения "Python"
Для начала работы с Python, нужно перейти на вкладку Extensions , что находится на панели слева, либо нажать Ctrl + Shift + X . Сделав это, набираем в строке поиска " Python ".
Для начала работы с Python, установите расширение от Microsoft — "Python".VS Code поддерживает, как вторую, так и третью версию языка, однако python интерпретатор на свою машину вам придётся поставить самостоятельно.
Если вы новичок и только начинаете работу с Python или же не имеете каких-то особых указаний на этот счёт, то лучшим выбором станет именно актуальная третья версия.
Вот краткий список основных возможностей расширения "Python":
- Автодополнение кода.
- Отладка.
- Поддержка сниппетов.
- Написание и проведение тестов.
- Использование менеджера пакетов Conda.
- Возможность создания виртуальных сред.
- Поддержка интерактивных вычисления на Jupyter Notebooks.
Выбор версии интерпретатора Python
После от вас потребуется совершить выбор версии интерпретатора внутри самого редактора (обычно VS code знает, где он расположен). Для этого:
- Откройте командную строку VSCode (Command Palette) комбинацией Ctrl + Shift + P .
- Начинайте печатать " Python: Select Interpreter ";
- После, выберите нужную версию интерпретатора.
Также выбрать версию можно в панели активности в левом нижнем углу:
Выбор версии Python-интерпретатора в панели активности VS CodeЕсли вы хотите использовать pipenv в своем проекте:
- Установите pipenv командой pip install pipenv (или pip3 install pipenv );
- Выполните команду pipenv install ;
- Откройте " Command Palette ", напечатайте " Python: Select Interpreter " и из списка выберите нужную версию интерпретатор.
Работа в VS Code
Запуск редактора
Как и другие современные редакторы и среды разработки, VS Code фиксирует состояние на момент закрытия программы. При следующем запуске, он открывается в том же самом виде, в котором существовал до завершения работы.
Так как VSCode, в первую очередь — редактор, а не полновесная среда разработки, здесь нет особой привязки к проекту. Вы можете сходу создавать, открывать и редактировать нужные вам файлы. Достаточно, после запуска, нажать Open File или New File и можно начинать работу.
Интерфейс
Интерфейс программы разрабатывался в стремлении сделать его как можно более простым и интуитивно понятным. Дизайнеры постарались, как максимизировать пространство для редактора, так и оставить достаточно места для отображения проводника по вашему проекту.
Весь UI VSCode разделился, таким образом, на шесть областей:
- Область редактора — основная область для написания и редактирования вашего кода.
- Боковая панель — здесь содержатся различные представления (например проводник).
- Строка состояния — визуализирует рабочую информацию об открытом в данный момент файле.
- Командная панель — классическая главная панель с вкладками file, edit, go, run и так далее.
- Панель активности — область в крайнем левом углу, где находятся важные вспомогательные вкладки, вроде контроля версий, дебаггера и магазина расширений.
- Мультипанель — панель на которой располагается вывод отладку, информация об ошибках и предупреждениях, а также встроенный в VS Code терминал.
Запуск Python-кода (run)
Выполнить код можно несколькими способами. Самый простой — комбинацией Ctrl + Alt + N .
Для запуска python-кода выполните комбинацию "Ctrl + Alt + N"Также можно вызвать скрипт контекстным меню, выбрав строку " Run Python File in Terminal ".
Или нажав иконку " Run " в правом верхнем углу.
Иконка "Run" в правом верхнем углу запустит Python-код на выполнениеОтладка (debugger)
Возможность полноценной отладки — сильная сторона редактора. Чтобы перейти в режим отладки, нужно установить точку останова и нажать F5 .
Для перехода в режим отладки, установите breakpoint и нажмите "F5"Вся информация о текущем состоянии будет выводиться на панель дебаггера.
Слева откроется панель дебаггера с информацией о состоянии переменных (Variables), отслеживаемых переменных (Watch) и стеке вызова (Call stack).
Сверху расположена панель инструментов дебаггера.
Рассмотрим команды (слева направо):
- continue ( F5) — перемещает между breakpoint-ами;
- step over ( F10) — построчное (пошаговое) перемещение;
- step into ( F11) — построчное (пошаговое) перемещение c заходом в каждую вызываемую функцию;
- step out ( Shift + F11) — работает противоположно step into — выходит из вызванной функции, если в данный момент вы находитесь внутри неё. Далее работает как continue .
- restart ( Ctrl + Shift + F5) — начинаем отладку с начала.
- stop ( Shift + F5) — остановка и выход из режима отладки.
Чаще всего для отладки используются continue ( F5 ) и step over ( F10 ).
С отладкой разобрались 👌.
Тестирование (testing)
С поддержкой тестов у VS Code тоже всё в порядке, однако, по умолчанию тестирование отключено. Для его активации нужна небольшая настройка.
Сначала следует нажать комбинацию клавиш Ctrl + Shift + P и в так называемой палитре команд выбрать Python: Configure Tests .
Для выбора фреймворка для тестов, выполните комбинацию "Ctrl + Shift + P" и наберите "Python: Configure Tests"Редактор предложит вам определить фреймворк (мы выбрали "pytest") и папку, содержащую тесты (мы выбрали ". Root directory").
Создадим новый файл с тестами ( test_app.py ) и запустим его, кликнув правой кнопкой мыши на этом файле и выбрав пункт " Run Current Test File ".
Также тесты можно запускать по нажатию на кнопку Run Tests в нижней строке состояния
Запуск тестов в VSCode с использованием фреймворка pytest.Чтобы увидеть результаты, необходимо открыть вкладку Output на панели, и в выпадающем меню выбрать пункт PythonTestLog .
Как мы видим, первый тест прошел успешно, а второй провалился.
Для удобства работы с тестами, установим расширение " Python Test Explorer for Visual Studio Code ".
Расширение для VSCode "Python Test Explorer for Visual Studio Code"Теперь информацию по тестам можно посмотрев, кликнув на левой панели " иконку с колбой ", предварительно запустив тесты.
Вкладка "test" (иконка с колбой в панели слева) откроет удобный проводник для запуска тестов и просмотра их состояния.Для начала работы с системами контроля версий обратимся к вкладке Source Control , что находится на панели активности слева (или Ctrl + Shift + G ).
По умолчанию VS Code дружит с Git и GitHub
Поддержку других систем возможно настроить самостоятельно, установив соответствующие расширения.
Чтобы связать проект с github (или gitlab), сперва необходимо скачать на ваш ПК git (если ещё не скачан). VSCode автоматически определит его местоположение, и затем у вас появится возможность синхронизации.
Для работы с git, зайдите в меню слева "Source Control"Все основные и необходимые операции для контроля версий будут находиться прямиком внутри редактора: коммитить, пуллить, пушить, создавать бранчи и просматривать изменения вы можете, не выходя из VisualStudioCode.
Все необходимые команды для работы в git находятся в меню панели "Source Control" (3 точки)А для удобного просмотра изменений в git, советую установить расширение " Git Graph ". После его установки, на панели " Source Control " появится новая кнопка, которая отобразит граф состояния (git log).
Читайте также: