Что такое visual studio code cli
Сегодня мы выпускаем первую, экспериментальную и ознакомительную версию отладчика для набора инструментов ASP.NET Core CLI в составе редактора Visual Studio Code. Вначале я должен упомянуть несколько вещей:
Начало работы
Возможности отладки
Что еще можно настроить для отладки?
После установки и настройки расширения вам будут доступны базовые возможности отладки, описанные выше. Но с помощью файла launch.json можно настроить намного больше функций.
Остановка на точке входа
Если флажок stopAtEntry установлен, отладчик автоматически остановится на точке входа в приложение. Это позволит выполнять код по шагам, без настройки точек останова.
Настройка отладки для приложений ASP.NET
Помимо конфигурации отладки по умолчанию, существует конфигурация .NETCoreLaunch (web), которая предоставляет хорошие начальные возможности отладки приложений ASP.NET. Она содержит дополнительный раздел «launchBrowser», который позволяет открывать веб-браузер на компьютере, используемом для разработки, при запуске каждой отладки. Изначально он настроен на использование заданного по умолчанию браузера, но вы можете выбрать другой, изменив команды в файле. Чтобы начать работу и испытать ASP.NET в деле, скачайте образцы ASP.NET CLI с Github.
Вот пример настроек файла launch.json для открытия страницы в Opera:
Изменение открываемого URL-адреса
Открываемый в браузере URL-адрес также можете изменить. По умолчанию отладчик определяет URL автоматически и переходит по URL-адресу, который прослушивает сервер. Заполнитель $<auto—detect—url> означает команду найти URL-адрес автоматически. Его можно использовать в любом разделе конфигурации. Если при отладке необходимо использовать только определенный URL-адрес, например, http://localhost:5000/api/customers/42, вы можете изменить значение по умолчанию, чтобы не открывать этот адрес вручную.
Сценарии подключения
В сценариях подключения интегрируется третий раздел конфигурации. Вам требуется лишь указать имя процесса приложения для отладки. В нашем случае это HelloWorld. Если вы запускаете приложение из командной строки с помощью команды dotnetrun, перед запуском отладчика убедитесь, что выбрана конфигурация .NETCoreAttach.
Если под одним именем выполняется несколько процессов, можно указать значение параметра processId (идентификатор процесса) вместо processName (имя процесса). Не используйте оба свойства одновременно.
Скрытые свойства конфигурации
В настоящее время в конфигурации по умолчанию не отображается три дополнительных свойства. Если вы хотите ознакомиться с ними, не углубляясь в документацию, вот подсказка: введите символы “o в launch.json (не забудьте про кавычку в начале), и функция автоматического дополнения отобразит список свойств, содержащих букву «o».
Эта возможность приходится очень кстати в ходе редактирования, но вам может потребоваться неизменно актуальная документация. Как всегда, окончательная истина представлена в коде. Если вы хотите углубиться в детали, обратите внимание на папку установки — в ней содержится файл package.json. Это главный шаблон любых допустимых конфигураций. Этот простой и понятный файл json позволяет составить очень хорошее представление о конфигурациях, возможных на вашей машине для текущей версии расширения.
symbolPath
Параметр «symbolPath» позволяет задать массив путей к символам отладки. Он очень удобен, если символы размещены на центральном сервере или если при разработке используются несколько операционных систем. Символы, сформированные в конкретной операционной системе, можно использовать и в других.
Ниже приведена допустимая конфигурация пути к символам:
justMyCode
Если в процессе отладки код выполняется пошагово, то переход в код фреймворка или компонентов, автором которых вы не являетесь, может оказаться излишним. Поэтому мы создали функцию justMyCode. По умолчанию она включена, поскольку такое поведение среды при обычной отладке кажется наиболее удобным. Но если вы хотите отладить код фреймворка или внешних компонентов, установите для нее значение «false».
sourceFileMap
Если нужно указать отладчику на файлы исходного кода для сеанса отладки, задайте таблицу сопоставления с помощью свойства sourceFileMap. Это свойство может содержать любое количество записей. Оно поможет отлаживать именно те файлы исходного кода, которые нужно. Пример конфигурации приведен ниже:
Отправьте нам отзыв
Как всегда, мы будем рады вашим отзывам. Расскажите, что вам понравилось, а что нет, каких функций вам не хватает, какие компоненты рабочего процесса вам подошли или не подошли. С нами можно связаться по электронной почте, путем отправки сообщений о проблемах на нашей странице в Github или через Twitter.
Как пользоваться Visual Studio Code
Как пользоваться Visual Studio Code
В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.
1. Интерфейс Visual Studio Code
Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:
Именно этими участками вы будете пользоваться во время работы с VS Code:
2. Русификация Visual Studio Code
По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:
Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:
Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.
3. Внешний вид
Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:
Скачать новые темы можно с официального сайта Visual Studio Code. Здесь же можно настроить тему иконок.
4. Управление проектами
Очень часто бывает, что приходится переключаться между несколькими проектами во время работы. По умолчанию в VS Code для этого надо открывать рабочую папку проекта через меню. Но есть выход. Это расширение Project Manager. С его помощью вы можете сохранять проекты и переключаться между ними в один клик. Установите Project Manager как было описано выше, затем кликните на боковой панели по значку с папкой.
Здесь отображается список доступных проектов. Чтобы запомнить текущую папку в качестве проекта, кликните по значку с дискетой и введите имя проекта:
После этого вы сможете очень просто управлять своими проектами.
5. Авто-форматирование кода
6. Автодополнение
Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense, CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.
7. Управление Vim
8. Отладка кода
В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:
В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.
Возможно, программа ещё спросит путь к папке с файлами проекта. Если это локальный компьютер, то проблем возникнуть не должно. Затем нужно выбрать точки остановки. Эти точки ставятся в самой левой части области редактора напротив строчки, в которой вы хотите остановится:
Последний шаг: надо открыть отлаживаемую страницу в браузере, но при этом для Chrome надо использовать расширение Xdebug Helper, которое включает необходимый флаг и сообщает Xdebug, что этот код надо отлаживать. Для этого надо выбрать режим Debug в расширении:
Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:
9. Терминал
10. Использование Git
Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:
Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:
Теперь осталось отправить изменения в репозиторий, для этого используйте кнопку в статус-баре со значком обновления. Смотрите на предыдущем снимке.
Выводы
В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть «из коробки». А какой средой разработки пользуетесь вы? Напишите в комментариях!
My Top 8 Visual Studio Code Tips and Features
Visual Studio Code has become one of the most used and loved Text Editors in recent years. Here are some statistics from the 2018 Stackoverflow Survey:- Most Popular Development Environments. Source: https://insights.stackoverflow.com/survey/2018/
1. Visual Studio Code CLI
Visual Studio Code comes with an inbuilt Command Line Interface. Once you’ve installed Visual Studio Code, and have it open, press ⇧⌘P to open the command palette for Mac, or just ⌘P and the press > button.
Table of Contents
, Visual Studio Code will open with the directory represented by Path.
Ever wanted to see the difference between two files, Let’s look at an example. Here are two files with a slight difference in them.
app1.js
app2.js
This is a small file, and we can see the diff right away. But for demonstration purposes, we’ll type in the following in the command line.
This opens Visual Studio Code with the following View.
We can see where the diff in the two files is. This is the same view that’s available when you are looking at Git Diff, with the integrated Git Support in Visual Studio Code.
2. Git Integration
Sometimes using Git can be fun or hard, but Visual Studio Code comes with integrated Git that allows for Adding, Committing, Pulling and Pushing Changes to a remote Git repository using a simple GUI.
Let’s go through a simple workflow that will involve the following steps.
We have the two files we created app1.js and app2.js. Let’s initialize a git repository in this directory. And then open Visual Studio Code with this directory.
You’ll immediately notice that Git is active in the left most pane. It has a badge with 2 on it.
The two files have a U in on their right, which means they are untracked. If you click on the git Icon with a badge of 2, you get this view. Hover over the first file app1.js, and these icons appear
The + sign is an equivalent of git add command. click it. and the view changes to this.
Now, there’s a new entry in Changes section with the same file. When you click on the file app1.js in the Changes Section, you will see a diff displayed, like we saw in topic 1.
Other helpful features that are git related include
We see useful commands that are sometimes quite hard to grasp.
At the bottom of Visual Studio Code, in the status bar, you can also see the branch you are currently in. Clicking on that branch allows you to select any other branches that exist.
When you click on that, a list of branches appears in the search panel, with the first option being the ability to create a new branch
3. Debugging
Visual Studio Code has a rich API for enabling debugging tools, Here are some articles here in scotch referencing them.
Debugging is a large topic, and is usually language/stack specific. Depending on the language you are using, there are available plugins that enable support for debugging, and you’ll be able to use breakpoints to debug your code when developing.
4. Live Share
Visual Studio Code Live Share is a feature that enables you to share your VS Code instance, and allow someone remote to control and run other things such as debuggers.
Live Share is published as a plugin, and is currently in Preview.
All that is required is for you to install the plugin, and the status bar will enable you share any working session by getting a link, once you are signed in.
5. Split Views, Zen Mode
There are a couple of built in Editor Layouts that you can view by going to the View > Editor Layout menu.
Below shows the 2×2 Grid Option
Below shows the zen mode. Notice my code has been centered, and all other VS Code visuals removed.
6. Helpers (Intellisense, Context Menus..)
I decide to call this section helpers because it consists of little things that are quite helpful when writing code.
Here’s a simple JavaScript file we’ll use to demonstrate these features.
VS Code has a couple of helpers for NPM. First of all, when you are creating the scripts, there’s beautiful intellisense and you can just select the script you want. Next, there’s a NPM SCRIPTS panel on the left, usually at the bottom, which will list the package.json file, and within it the scripts. Right clicking on the file, gives you an option to run npm install
. And Hovering over the particular script displays a Play button which will allow you run the script.
Take for instance the piece of code we had earlier, if you open the file, and go to the Outline section on the left pane, you’ll see this We see an outline of the main blocks of our code, and clicking on any of them, takes the editor focus to that section of the code.
These are just a few features and tips I didn’t know hot to categories. 😉
7. Integrated Terminal
Most of the time when running code, there’s usually a terminal open either to the side, or somewhere in your machine.
8. Plugins and Themes
Visual Studio Code has a rich plugin API, and this has enabled developers to create really awesome plugins. I’ll list a few common ones which I’ve used, but to get a comprehensive list, you can look at the Visual Studio Code Marketplace. Themes can be found here
Conclusion: Visual Studio Code can do that.
Visual Studio Code is a good Editor, that can adapt to many languages and technologies out there, and discovering these little helpers can sometimes take time.
Lucky for us, two awesome developers, @burkeholland and @sarah_edo created Visual Studio Code Can Do That site, that lists some awesome features and things you can do with Visual Studio Code.
Command Line Interface (CLI)
Visual Studio Code has a powerful command-line interface built-in that lets you control how you launch the editor. You can open files, install extensions, change the display language, and output diagnostics through command-line options (switches).
If you are looking for how to run command-line tools inside VS Code, see the Integrated Terminal.
Command line help
Launching from command line
Note: Users on macOS must first run a command (Shell Command: Install ‘code’ command in PATH) to add VS Code executable to the PATH environment variable. Read the macOS setup guide for help.
Core CLI options
Here are optional arguments you can use when starting VS Code at the command line via code :
Opening Files and Folders
Sometimes you will want to open or create a file. If the specified file does not exist, VS Code will create them for you along with any new intermediate folders:
If you specify more than one file at the command line, VS Code will open only a single instance.
If you specify more than one folder at the command line, VS Code will create a Multi-root Workspace including each folder.
Working with extensions
You can install and manage VS Code extensions from the command line.
Advanced CLI options
There are several CLI options that help with reproducing errors and advanced setup.
Opening VS Code with URLs
You can also open projects and files using the platform’s URL handling mechanism. Use the following URL formats to:
Open a file to line and column
You can use the URL in applications such as browsers or file explorers that can parse and redirect the URL. For example, on Windows, you could pass a vscode:// URL directly to the Windows Explorer or to the command line as start vscode://
Next steps
Read on to find out about:
Common questions
‘code’ is not recognized as an internal or external command
Your OS cannot find the VS Code binary code on its path. The VS Code Windows and Linux installations should have installed VS Code on your path. Try uninstalling and reinstalling VS Code. If code is still not found, consult the platform-specific setup topics for Windows and Linux.
On macOS, you need to manually run the Shell Command: Install ‘code’ command in PATH command (available through the Command Palette ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ). Consult the macOS specific setup topic for details.
How do I get access to a command line (terminal) from within VS Code?
VS Code has an Integrated Terminal where you can run command-line tools from within VS Code.
Can I specify the settings location for VS Code in order to have a portable version?
Not directly through the command line, but VS Code has a Portable Mode, which lets you keep settings and data in the same location as your installation, for example, on a USB drive.