Сегодня мы продолжим и рассмотрим процесс отладки непосредственно из Visual Studio Code.
Запускаем VS Code — по умолчанию должен открыться наш прошлый проект.
Если этого по какой-то причине не произошло, выбираем в меню :
File -> Open Folder . ( Ctrl + K , Ctrl + O )
и открываем папку нашего проекта.
Чтобы упростить процесс запуска и отладки давайте установим в VS Code расширение Live Server .
Установка расширения Live Server
Это расширение позволит нам запускать проект на локальном веб сервере.
Для установки расширения :
- Переключитесь в VS Code на вкладку расширений Extensions ( Ctrl + Shift + X )
- Наберите в строке поиска расширений LIve Server , в списке расширений выберите Live Server
- В центральной части экрана в области описания расширения нажмите на кнопку install
Дождитесь окончания установки расширения, затем :
- переключитесь на Eхplorer VS Code ( Ctrl + Shift + E )
- Выберите файл index.html
- Обратите внимание на статусную строку VS Code, там должна появиться кнопка Go Live , клик на которой приведет к запуску Live Server
Запуск Live Server
Проверим, нажимаем » Go Live «, должен запуститься ваш браузер и открыть локальный веб сервер с вашим проектом :
HTML & CSS. Урок 1. Настройка Visual Studio Code . Курс и уроки для начинающих с нуля — StudioProWeb
При этом в статусной строке надпись «Go Live» Заменится на «Port : 5500» :
Именно на этом порту Live Server запускает наш локальный веб сервер:
Источник: dzen.ru
VS Code как IDE для PHP
Visual Studio Code при помощи встроенных возможностей, сторнних расширений и библиотек PHP можно превратить в полноценную IDE для разработки на PHP.
Visual Studio Code при помощи встроенных возможностей, сторонних расширений и библиотек PHP можно превратить в полноценную IDE для разработки на PHP.
В статье рассмотрен лишь тот набор расширений/модулей, с которым работает автор статьи, на самом деле расширений много и у рассмотренных расширений есть аналоги.
Требования к IDE:
- удобство написания кода:
- автодополнение, статический анализ и навигация по коду
- стандартизация оформления кода
#Написание кода
- автодополнение кода (даже юзерского)
- навигацию по коду (горячими клавишами или через контекстное меню)
- статический анализ и подсветку некорретного кода, на основании анализа
Все это на основании той версии PHP которая будет выбрана в настройках расширения. Можно установить так:
Есть настройки, но пользоваться можно сразу после установки.
Расширение PHP Namespace Resolver используется для удобного импорта namespace (причем с сортировкой) и создания новых пространств имен из файлов. Настроек не много. Мелочь, но +5 к удобству.
Расширение PHP DocBlocker предоставляет функционал для удобного и автоматического комментирования DocBlock.
Как запустить JavaScript + HTML код в Vs Code
Расширение phpcs предоставляет возможность оформлять код в соответсвии с выбранным стандартом. Неверно составленный код будет подсвечиваться.
Для настройки phpcs нужно установить расширение для VS Code (по ссылке выше) и пакет php_codesniffer для Composer:
composer require —dev squizlabs/php_codesniffer
Затем обзательно в настройках расширения нужно выбрать стандарт ( PEAR , PHPCS , PSR1 , PSR2 , PSR12 , Squiz , Zend ), для этого в конфиге необходимо указать ключ:
Intelephense подскажет какие классы/функции не подключены к файлу, Namespace Resolver позволит их импортировать в пару кликов мыши, а DocBlock поможет прокомментировать свой код чтобы Intelephense мог в любом месте показать подсказку по этому коду. phpcs позволит составить код в одном из выбранных стандартов.
Каждое расширение можно настроить глобально или для текущего проекта. Настройки для текущего проекта будут храниться в директории .vscode/settings.json относительно корня проекта.
#Статический анализ
Статических анализаторов для php, есть несколько (ссылка на почитать), я использую phpstan, причина одна — с него начал, его и дальше использую.
В минимальном варианте достаточно установить пакет phpstan/phpstan через Composer:
composer require —dev phpstan/phpstan
И через терминал можно запускать так ([[https://phpstan.org/user-guide/command-line-usage ссылка на документацию]]):
vendor/bin/phpstan analyse -l 9 src
А для отображения результатов работы статического анализатора phpstan в интерфейсе VS Code, нужно установить расширение phpstan, создать конфиг phpstan.neon (ссылка):
parameters: level: 6 paths: — src
И в конфиг .vscode/settings.json добавить путь до phpstan:
#Отладка
Расширение PHP Debug в совокупности с модулем PHP xdebug позволяют производить отладку PHP кода. Можно построчно выполнить файл, просмотреть стек вызовов и значения переменных. При этом запускать можно как отдельный файл, так и целый сайт о_О.
Установим модуль xdebug :
# для текущей версии php apt install php-xdebug # для конкретной версии php apt install php7.3-xdebug
Теперь открываем файл /etc/php/VERSION/mods-available/xdebug.ini :
zend_extension=xdebug.so xdebug.remote_handler = dbgp xdebug.client_host = localhost xdebug.client_port = 9005 xdebug.mode=coverage,debug xdebug.start_with_request = yes
Теперь в корне проекта создаем .vscode/launch.json со следующим содержимым:
< «version»: «0.2.0», «configurations»: [ < «name»: «Listen for Xdebug», «type»: «php», «request»: «launch», «port»: 9005, >, < «name»: «Launch currently open script», «type»: «php», «request»: «launch», «program»: «$», «cwd»: «$», «port»: 0, «runtimeArgs»: [ «-dxdebug.start_with_request=yes» ], «env»: < «XDEBUG_MODE»: «debug,develop», «XDEBUG_CONFIG»: «client_port=$» > > ] >
Здесь создается 2 конфигурации:
- Listen for Xdebug — прослушивать xdebug. Если в текущем проекте, в каком-то файле поставить брекпоинт и запустить файл на исполнение (((из консоли или из браузера через локальный веб-сервер))) тогда отладчик остановится в скрипте на брекпоинте.
- Launch currently open script — запустить текущий файл на исполнение и отладку.
Значение ключа port из конфигурации Listen for Xdebug должно быть точно таким же как и в конфиге модуля PHP xdebug xdebug.client_port .
Вообще-то расширение PHP Debug по умолчанию предусматривает еще один конфиг Launch Built-in web server для запуска встроенного веб-сервера, но в моем случае это не нужно, так как использую локальный LAMP, а теперь вообще все в Docker и такая отладка в Docker.
#Тестирование
Расширения для минимизации действий по запуску тестиров кода показались мне избыточны, потому что Visual Studio Code предоставляет функционал custom tasks, при помощи которого можно все это организовать.
Предположим что проект использует composer и PHPUnit (хотя вовсе необзяательно), а тесты находятся в директории tests .
Создадим файл относительно корня проекта .vscode/tasks.json и запишем в него следующее:
< «version»: «2.0.0», «tasks»: [ < «label»: «Run unit tests all», «type»: «shell», «command»: «vendor/bin/phpunit», «args»: [ «—colors=always», «—coverage-html», «coverage-report-html», «—bootstrap», «tests/bootstrap.php», «tests/» ], «group»: «test», «presentation»: < «reveal»: «always», «panel»: «new» >>, < «label»: «Run unit test current file», «type»: «shell», «command»: «vendor/bin/phpunit», «args»: [ «—colors=always», «—coverage-html», «coverage-report-html», «—bootstrap», «tests/bootstrap.php», «$» ], «group»: «test», «presentation»: < «reveal»: «always», «panel»: «new» >> ] >
Здесь происходит создание двух заданий:
- Run unit tests all — запуск тестирования всей директории
- Run unit test current file — запуск текущего открытого файла на тестирование
Теперь идем в Terminal => Run Task , затем из появившего списка выбираем нужное задание.
#Итог
Такими не сложными действиями мы превратили редактор кода «»Visual Studio Code в полноценную IDE для разработки проектов на PHP»». Не все инструменты рассмотрены полностью, некоторые лишь очень поверхностно, но дальнейшую тонкую настройку оставляю в качестве домашнего задания 🙂
Источник: byurrer.ru
Как просмотреть HTML-файл в браузере с помощью Visual Studio Code
Как я могу просмотреть свой HTML-код в браузере с новым кодом Microsoft Visual Studio?
С Notepad ++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с Visual Studio Code?
user4863890 4 Май 2015 в 23:36
23 ответа
Лучший ответ
Для Windows — откройте браузер по умолчанию — протестировано на VS Code v 1.1.0
Ответьте как на открытие конкретного файла (имя жестко запрограммировано), так и на открытие ЛЮБОГО другого файла.
Шаги:
- Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.
- Введите Tasks: Configure Task или в более старых версиях Configure Task Runner . При его выборе откроется файл tasks.json . Удалите отображаемый сценарий и замените его следующим:
< «version»: «0.1.0», «command»: «explorer», «windows»: < «command»: «explorer.exe» >, «args»: [«test.html»] >
ΩmegaMan 23 Янв 2019 в 17:03
Задача VSCode — открытие по идентификатору пакета приложений (только для macOS).
< «version»: «2.0.0», «tasks»: [ < «label»: «Open In: Firefox DE», «type»: «process», «command»: «open», «args»: [«-b», «org.mozilla.firefoxdeveloperedition», «$»], «group»: «build», «problemMatcher»: [], «presentation»: < «panel»: «shared», «focus»: false, «clear»: true, «reveal»: «never», >> ] >
Vlad 16 Янв 2021 в 20:11
Откройте пользовательский Chrome с URL-адресом из приглашения
< «version»: «2.0.0», «tasks»: [ < «label»: «Open Chrome», «type»: «process», «windows»: < «command»: «$» >, «args»: [«—user-data-dir=$», «$»], «problemMatcher»: [] > ], «inputs»: [ < «id»: «url», «description»: «Which URL?», «default»: «http://localhost:8080», «type»: «promptString» >] >
Откройте пользовательский Chrome с активным файлом
< «label»: «Open active file in Chrome», «type»: «process», «command»: «chrome.exe», «windows»: < «command»: «$» >, «args»: [«—user-data-dir=$», «$»], «problemMatcher»: [] >,
Примечания
- при необходимости замените свойство windows на другую ОС
- замените $ на свое собственное расположение Chrome, например «C:/Program Files (x86)/Google/Chrome/Application/chrome.exe»
- замените $ на свой собственный каталог профиля Chrome, например «C:/My/Data/chrome/profile» или оставьте это
- Вы можете сохранить переменные, как указано выше, если хотите. Для этого добавьте следующие записи в settings.json — пользователя или рабочую область -, настройте пути в соответствии с вашими потребностями:
«chrome.executable»: «C:/Program Files (x86)/Google/Chrome/Application/chrome.exe», «chrome.profileDir»: «C:/My/Data/chrome/profile»
- Вы можете повторно использовать эти переменные, например. в launch.json для целей отладки: «runtimeExecutable»: «$»
ford04 2 Сен 2019 в 22:28
Вероятно, большинство из них сможет найти решение из приведенных выше ответов, но, видя, как ни один из них не работал для меня ( vscode v1.34 ), я подумал, что поделюсь своим опытом. если хоть один человек сочтет это полезным, тогда круто, а не потраченным впустую, amiirte ?
Наши конфигурации почти идентичны, за исключением одного свойства — этим свойством является свойство group . Я не уверен, почему, но без этого моя задача даже не отображалась бы в палитре команд.
Так. рабочий tasks.json для windows пользователей, использующих vscode 1.34 :
< «version»: «2.0.0», «tasks»: [ < «label»: «Chrome», «type»: «process», «command»: «chrome.exe», «windows»: < «command»: «C:\Program Files (x86)\Google\Chrome\Application\chrome.exe» >, «args»: [ «$» ], «group»: «build», «problemMatcher»: [] > ] >
Обратите внимание, что свойство problemMatcher не требуется для того, чтобы это работало, но без него вам потребуется дополнительный ручной шаг. пытался прочитать документацию по этому объекту, но я слишком толст, чтобы понять. надеюсь, кто-нибудь придет и научит меня, но да, заранее спасибо за это. все, что я знаю, — включите это свойство, и ctrl+shift+b откроет текущий файл html на новой вкладке chrome , без проблем.
mad.meesh 1 Июл 2019 в 11:54
Ctrl + F1 откроет браузер по умолчанию. в качестве альтернативы вы можете нажать Ctrl + Shift + P, чтобы открыть окно команд, и выбрать «Просмотр в браузере». HTML-код необходимо сохранить в файл (несохраненный код в редакторе — без расширения не работает)
PersyJack 2 Дек 2016 в 20:09
Для Mac установите содержимое файла tasks.json (в папке .vscode) следующим образом и используйте SHFT + COMMAND + B для открытия.
Sean Chase 28 Июн 2020 в 15:18
Вот версия 2.0.0 для Mac OSx:
Eliandro 2 Фев 2018 в 00:27
Недавно столкнулся с этой функцией в одном из руководств по коду Visual Studio на www.lynda.com
Нажмите Ctrl + K, а затем M, откроется «Выбор языкового режима» (или щелкните в правом нижнем углу, где перед этим смайликом написано HTML), введите уценку и нажмите Enter.
Теперь нажмите Ctrl + K, а затем V, он откроет ваш html на ближайшей вкладке.
Теперь команды emmet не работали в этом режиме в моем html файле, поэтому я вернулся в исходное состояние (примечание — html tag tellisense работал отлично)
Чтобы вернуться в исходное состояние — нажмите Ctrl + K, затем M, выберите автоопределение. Команды emmet начали работать. Если вас устраивает просмотрщик только html, то вам не нужно возвращаться в исходное состояние.
Интересно, почему vscode не имеет опции просмотра HTML по умолчанию, когда он может отображать HTML-файл в режиме уценки.
В любом случае это круто. Удачного vscoding 🙂
Mrk 1 Фев 2018 в 17:24
Вот как вы можете запустить его в нескольких браузерах для Windows
Обратите внимание, что я ничего не вводил в аргументы для edge, потому что Edge — мой браузер по умолчанию, просто дал ему имя файла.
РЕДАКТИРОВАТЬ: также вам не нужно -incognito или -private-window . это только я, мне нравится просматривать его в частном окне
Abdel-Rahman Muhammed 11 Ноя 2016 в 02:15
Мой скрипт бегуна выглядит так:
< «version»: «0.1.0», «command»: «explorer», «windows»: < «command»: «explorer.exe» >, «args»: [«»] >
И он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html
Sahar Ben-Shushan 1 Мар 2016 в 13:07
Открытие файлов в браузере Opera (в Windows 64 бит). Просто добавьте эти строки:
< «version»: «0.1.0», «command»: «opera», «windows»: < «command»: «///Program Files (x86)/Opera/launcher.exe» >, «args»: [«$»] >
Обратите внимание на формат пути в строке «command»: . Не используйте формат «C: path_to_exe runme.exe».
Чтобы запустить эту задачу, откройте HTML-файл, который вы хотите просмотреть, нажмите F1, введите task opera и нажмите Enter.
Jose Carlos 26 Ноя 2015 в 20:11
CTRL+SHIFT+P вызовет палитру команд.
Конечно, в зависимости от того, что вы используете. Пример в приложении ASP.net, которое вы можете ввести:
>kestrel , а затем откройте свой веб-браузер и введите localhost:(your port here) .
Если вы введете > , он покажет вам показать и запустить команды
Или в вашем случае с HTML, я думаю, что F5 после открытия палитры команд должен открыть отладчик.
Andreas DM 4 Май 2015 в 21:08
Решение одним щелчком мыши просто установите open-in-browser Extensions из Торговая площадка Visual Studio.
Manish Sharma 14 Окт 2017 в 15:45
Для Mac — открывается в Chrome — проверено на VS Code v 1.9.0
- Используйте Command + shift + p , чтобы открыть палитру команд.
- Введите «Настроить средство запуска задач», при первом использовании VS Code выдаст вам прокручиваемое меню, если оно выбрано «Другое». Если вы это делали раньше, VS Code просто отправит вас прямо в tasks.json.
- Однажды в файле tasks.json. Удалите отображаемый сценарий и замените его следующим:
< «version»: «0.1.0», «command»: «Chrome», «osx»: < «command»: «/Applications/Google Chrome.app/Contents/MacOS/Google Chrome» >, «args»: [«$»] >
- Вернитесь к своему html-файлу и нажмите Command + Shift + b , чтобы просмотреть свою страницу в Chrome.
Joe Mellin 20 Фев 2017 в 22:49
Если вы просто используете Mac, этот файл tasks.json :
. это все, что вам нужно, чтобы открыть текущий файл в Safari, если его расширение — «.html».
Создайте tasks.json , как описано выше, и вызовите его с помощью ⌘ + shift + b .
Если вы хотите, чтобы он открывался в Chrome, то:
Это будет делать то, что вы хотите, например, при открытии в новой вкладке, если приложение уже открыто.
Sez 3 Мар 2017 в 12:52
Я просто повторно публикую шаги, которые использовал в блоге msdn . Это может помочь сообществу.
Это поможет вам настроить локальный веб-сервер, известный как lite-server с VS Code , а также руководства размещать статические файлы html в localhost и debug коде Javascript .
1. Установите Node.js
Если он еще не установлен, загрузите его здесь
Он поставляется с npm (менеджер пакетов для получения и управления вашими библиотеками разработки)
2. Создайте новую папку для своего проекта
Где-нибудь на вашем диске создайте новую папку для вашего веб-приложения.
3. Добавьте файл package.json в папку проекта
Затем скопируйте / вставьте следующий текст:
< «name»: «Demo», «version»: «1.0.0», «description»: «demo project.», «scripts»: < «lite»: «lite-server —port 10001», «start»: «npm run lite» >, «author»: «», «license»: «ISC», «devDependencies»: < «lite-server»: «^2.5.4» >>
4. Установите веб-сервер
В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните эту команду:
npm install
Это установит lite-server (определенный в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.
5. Запустите локальный веб-сервер!
(Предполагая, что у вас есть файл index.html в папке вашего проекта).
В том же окне терминала (в командной строке Windows) запустите эту команду:
npm start
Подождите секунду, и index.html загрузится и отобразится в вашем браузере по умолчанию, обслуживаемом вашим локальным веб-сервером!
Lite-server наблюдает за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.
И если у вас есть VS Code, настроенный на автоматическое сохранение (меню File / Auto Save), вы увидите изменения в браузере по мере ввода!
Примечания:
- Не закрывайте командную строку, пока не закончите кодирование в своем приложении в течение дня.
- Он открывается по адресу http: // localhost: 10001, но вы можете изменить порт, отредактировав файл package.json.
Это оно. Теперь перед любым сеансом кодирования просто введите npm start, и все готово!
Shaiju T 11 Сен 2020 в 18:05
Обновленный ответ от 18 апреля 2020 г.
Нажмите на этот левый нижний значок управления. Нажмите Расширения или Сокращение Ctrl+Shift+X .
Затем выполните поиск в расширении с этим ключевым предложением Открыть в браузере по умолчанию . Вы найдете это расширение. Мне так лучше.
Теперь щелкните правой кнопкой мыши файл html , и вы увидите Открыть в браузере по умолчанию или Short Cut Ctrl+1 , чтобы просмотреть файл html в браузере.
Mr. Perfectionist 18 Апр 2020 в 11:22
В Linux вы можете использовать >, чтобы открыть файл в браузере по умолчанию:
< «version»: «0.1.0», «linux»: < «command»: «xdg-open» >, «isShellCommand»: true, «showOutput»: «never», «args»: [«$»] >
Loris 3 Авг 2016 в 13:02
Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш /:
< «version»: «2.0.0», «tasks»: [ < «label»: «Chrome», «type»: «process», «command»: «chrome.exe», «windows»: < «command»: «C:\Program Files (x86)\Google\Chrome\Application\chrome.exe» >, «args»: [ «$» ], «problemMatcher»: [] > ] >
Для работы на веб-сервере:
noontz 10 Июл 2019 в 07:32
- Откройте код Visual Studio, затем перейдите к расширениям.
- Найдите «открыть в браузере». 3. Установите его. 4. Щелкните правой кнопкой мыши свой html файл, вы найдете опцию «Открыть в браузере». Это все. .
rinku Choudhary 31 Авг 2019 в 18:06
Теперь вы можете установить расширение Просмотр в браузере. Я тестировал его на окнах с хромом, и он работает.
Версия vscode: 1.10.2
Roel 29 Мар 2017 в 01:23
< «version»: «0.1.0», «command»: «Chrome», «osx»: < «command»: «/Applications/Google Chrome.app/Contents/MacOS/Google Chrome» >, «args»: [ «$» ] >
Если у вас уже открыт Chrome, он запустит ваш html-файл в новой вкладке.
Elad Nava 14 Янв 2016 в 21:21
VS Code имеет Live Server Extension, который поддерживает запуск одним щелчком мыши из строки состояния.
- Запуск в один клик из строки состояния
- Live Обновить
- Поддержка приложения для отладки Chrome
Источник: question-it.com