Настройка visual studio code – Настройка редактора кода Visual Studio Code — Код

Содержание

Настройка редактора Visual Studio Code для разработки на PHP / Microsoft corporate blog / Habr

Всем привет!

Пора перейти от слов к действиям и познакомиться с Visual Studio Code поближе. В этом посте представлена поэтапная настройка VS Code для разработки на PHP.

Если кратко, то мы поговорим о том как:

Скачать и установить Visual Studio Code.
Настройть статистический анализ кода на PHP в параметрах пользователя.
Скачать и установить расширение PHP Debug с портала Visual Studio Marketplace.
Настройть расширение PHP Debug для использования XDebug.

Скачайте и установите Visual Studio Code

Visual Studio Code — бесплатный кроссплатформенный, легковесный редактор кода от Microsoft. Пока он будет загружаться (в нем всего 42 мегабайта), рассмотрим подробнее каждое из этих свойств:

Бесплатный: да, VS Code полностью бесплатен, никаких приписок мелким шрифтом.
Кроссплатформенный: доступны версии VS Code для Windows, Linux и OS X.
Легковесный: VS Code, в отличие от Visual Studio, — не полнофункциональная среда IDE, а редактор кода. Он поддерживает ряд мощных функций, характерных для IDE, например, IntelliSense, отладку и интеграцию с системой управления исходным кодом Git.

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

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

Если вы откроете файл с расширением .php, Code поймет, что это файл на языке PHP. Тип файла можно изменить и вручную: щелкните кнопку Language Mode в правом нижнем углу окна редактора или последовательно нажмите клавиши Ctrl+K и M.

Встроенные функции работы с PHP

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

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

Настройка статического анализа PHP

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

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

Откройте пользовательские настройки с помощью панели команд: нажмите F1, введите «user» и нажмите Enter.

Откроется два документа JSON. В документе слева содержатся настройки по умолчанию, в документе справа — пользовательские настройки. В пользовательских настройках можно переопределить настройки по умолчанию. Чтобы включить статический анализ кода PHP, необходимо изменить значения трех параметров.

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

После этого функция проверки будет включена для всех файлов PHP. Некорректный код PHP будет подчеркнут красным (в примере ниже пропущена точка с запятой).

Настройка отладки

Расширение PHP Debug (спасибо Феликсу Беккеру!) добавляет в VS Code поддержку отладчика XDebug. Установите расширение через панель команд VS Code: нажмите F1, введите «install ext», нажмите Enter, введите «PHP Debug» и вновь нажмите Enter. После установки расширения может потребоваться перезапуск VS Code.

Обратите внимание: это расширение использует отладчик XDebug. Поэтому для его работы необходимо установить XDebug. Скачать XDebug можно здесь (для Windows выбирайте 32-разрядную non-thread-safe версию).

Затем внесите в файл php.ini следующие настройки. Я установил XDebug в подкаталог ext установочной папки PHP. Если вы выбрали для XDebug другой каталог установки, убедитесь, что параметр zend_extension содержит правильное значение.

Убедитесь, что корневой раздел веб-сервера соответствует вашему проекту. Тогда при каждом запросе файла PHP XDebug будет предпринимать попытку подключения к порту 9000 для отладки.
Чтобы начать отладку, откройте вкладку Debugging в VS Code.

Щелкните значок шестеренки, чтобы сформировать файл launch.json, который позволит VS Code начать сеанс отладки XDebug.

Чтобы начать отладку, нажмите F5 или щелкните зеленую стрелку на вкладке Debugging. Чтобы задать точку останова в исходном коде, выберите строку и нажмите F9.

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

Заключение

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

На портале Visual Studio Marketplace доступны и другие расширения для работы с PHP.

Полезные ссылки

habr.com

Используем VS Code для Веб-разработки / Habr

VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.
В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного ~~пот~~помучаться и установить два расширения:

JS is JSX overwrite
ESLint

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

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

{
  "ecmaFeatures": {
    "jsx": true
  }
}

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

{
  "stylelint.enable": true
}

Dart — популярный в среде AngularJS язык программирования
Flow — плагин для flowtype, статического тайп-чекера от facebook для JavaScript’а. Полезен, если хочется добавить в проект типизацию, но не хочется по каким-либо причинам использовать TypeScript.
Handlebars — поддержка шаблонов handlebars
HTMLLint — будет полезен опять же для AngularJS разработчиков и верстальщиков (по понятным причинам бесполезен при работе с JSX), демо можно посмотреть здесь htmlhint.com

Smarty — старый добрый шаблонизатор для PHP
Stylus —еще один плагин для Stylus, если по какой-то причине не понравился stylelint
Swig —шаблонизатор для javascript, используется, например, в проекте Mean.JS
Twig — поддержка одного из самых популярных шаблонизаторов PHP. Часто используется в Symfony проектах.
XML Tools —полезный для XML/XSLT разработчиков набор плагинов

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Align

Форматирует выделение

Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Подсвечивает HTML-цвета

Dash

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

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Kit

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Ссылка

Seti

Ссылка

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

[
{ "key": "tab",                 "command": "editor.action.indentLines",
                                "when": "editorTextFocus" },
{ "key": "shift+tab",           "command": "editor.action.outdentLines",
                                "when": "editorTextFocus" }
]

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.
Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

habr.com

Настройка Visual Studio Code? — Хабр Q&A

самые основные:
Auto Close Tag — авто закрытие тегов
Auto Rename Tag — переименование парных тегов
Beautify — разжатие кода (из minify в стандартный вид)
highlight-mathing-tag — подсвечивание парных тегов (нужно настроить в конфиге, чтобы поярче было)
html snippets — сниппеты как в сублайме
insert <br> tag — вставка тега новой строки через шифт+enter
PHP Debug — деббагер для php (нужно настраивать)
Debugger for Chrome — JS дебаггер
vscode-icons — иконки для VSC
minify — сжатие кода
css auto prefix — автопрефиксы
Insert Numbers — полезное расширения для вставки чисел определенного формата во множество мест с инкрементом
================
ещё некоторые, которые я добавил и пользуюсь:
apache Conf (для подсветки .htaccess)
AutoFileName — дополнение пути (например для «requere» в node.js)
Bookmarks — делать закладки в коде
Bracket Pair Colorizer — подсвечивать парные скобки (квадратные, фигурные, прямоугольные, круглые) очень удобно
gitignore — добавляет .gitignore файл под проект (node.js, docker, yii2, laravel и т.д.)
GitLens — Git supercharged — показывает гит-коммиты в коде (и автора коммита, удобно в командной разработке)
HTML Class Suggestions
Live Server — открывает браузер, где в режиме «онлайн» видишь изменения в html
Markdown Preview Enhanced — тоже самое, что и Live Server, но только для страниц с markdown разметкой
Material Icon Theme — для красоты VSC)
Monokai Dark Soda — моя любимая тема разработки
MySQL Syntax — для подсветки синтаксиса sql
PHP Intellisense —
Quick gitignore — добавляет файл/директорию в gitgnore
Regex Previewer — помогает в регуляркой
SQL Server (mssql) — для работы с sql server
SVG Viewer — просматривать SVG картинки
Todo Tree — делать заметки, удобно
Remote FS — для удаленного подключения по FTP (удобно, если несколько серверов), пример конфига:

{ 
    "remotefs.remote": {"site": {
        "scheme": "ftp",
        "host": "1************01",
        "username": "ad**********ain",
        "password": "Lv************xF",
        "rootPath": "/"
      },
      "site2": {
        "scheme": "ftp",
        "host": "17**********1",
        "username": "a*****************m",
        "password": "************O",
        "rootPath": "/"
      },
      "moy-yandex": {
        "scheme": "ftp",
        "host": "a***********u",
        "username": "a***************mone",
        "password": "1***************W",
        "rootPath": "/"
      }
  }

UPD
Есть ещё хорошее приложение: Gremlins. Он подсвечивает невидимые символы в коде. Но его нужно немного «допилить», чтобы показывал невидимый символ юникод u+feff (образуется часто, когда кодировка страницы UTF-8 with BOM)
собственной как допилить я сам же описываю в своем вопросе: тут

что касается сннипетов для php: бывает такое, что они не срабатывают и тут две причины: пользователь достаточно быстро жмет TAB (VSC не успевает ещё понять, что пользователь закончил ввод) и когда достаточно долго работаешь в VSC без перезагрузки последнего.

ИМХО: рано или поздно эта проблема решиться. VSC стремительно развивается и такая проблема будет решена (до этого чтобы быстрее было — лучше написать сюда об этом)
Согласен с Artem , с тем, что Brackets имеет некоторые вещи лучше и оптимизированнее, чем VSC, и я для Front-end чаще работаю в Brackets (в большей части из-за возможности видеть online изменения тут же в браузере). Но главный минус Brackets от VSC — при большой кол-во плагинов он очень-очень тупит, также мне не нравится работа Brackets-ftp.
Послесловие:
VSC ещё учится и становится лучше. Рано или поздно он обгонит и Sublime, Atom и другие IDE — это вопрос времени, потому что: 1) он open source 2) финансирует и ведет разработку Microsoft 3) бесплатен!!! и последнее камень в огород всем крупным IDE

toster.ru

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Создание удобного рабочего окружения.

Содержание

Babel и ES6
Стандарты кодирования
Автоматическое дополнение
1. jsconfig.json
Отладка
Ссылки

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

отладчик кода
встроенный терминал
удобные инструменты для работы с Git
подсветка синтаксиса для множества популярных языков и файловых форматов
удобная навигация
встроенный предпросмотр Markdown
умное автодополнение
встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите во вкладку “Extensions” которая находится в выпадающем меню “View”, и введите название пакета в строке поиска, нажмите кнопку “Install”.

Babel и ES6

VS Code содержит понятие “сборки проекта”. Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

{
  "version": "2.0.0",
  "type": "shell",
  "tasks": [
      {
          "label": "watch",
          "command": "${workspaceRoot}/node_modules/.bin/babel src --out-dir dist -w --source-maps",
          "group": "build",
          "isBackground": true
      }
  ]
}

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B(macOS) запустит сборку.

Подробнее о tasks можно узнать на сайте VS Code.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

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

Установите Node.js используя пакетный менеджер вашей операционной системы.
Установите eslint командой npm install -g eslint. Вероятно, вам понадобится использовать sudo.
Установите плагины, которые конфигурируют eslint. Без них (по умолчанию) eslint ничего не проверяет.
```
 npm install -g eslint-config-airbnb-base eslint-plugin-import
```
eslint требует наличия конфигурационного файла. Создайте в корне вашего проекта файл .eslintrc.yml со следующим содержанием:
```
 extends:
   - 'airbnb-base'
 env:
   node: true
   browser: true
```
Установите расширение “linter-eslint” в VS Code.

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json.

jsconfig.json

Если положить в корень директории с JavaScript-проектом конфигурационный файл jsconfig.json, то VS Code будет использовать эту конфигурацию для работы с вашим проектом. Вот пример такого файла:

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules",
        "**/node_modules/*"
    ]
}

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

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

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

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Бесплатный курс по настройке окружения для работы в современной экосистеме JavaScript.

Рахим Давлеткалиев

guides.hexlet.io

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

Суперсет 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-скиллов:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

sieve = [True] * 101
for i in range(2, 100):

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

Подождите, что-то не так. Почему-то 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, если хотите.

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

sieve = [True] * 101
for i in range(2, 100):
if sieve[i]:
print(i)
for j in range(i*i, 100, i):
sieve[j] = False

Если вы будете вводить его вручную (без 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) Дийкстры. Вы можете клонировать этот репозиторий, чтобы начать работу.

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

cd /path/to/project
code .

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 используете вы?

Оригинал статьи: Python Development in Visual Studio Code

proglib.io

Настройка Visual Studio Code для работы с Arduino

Разберемся как настроить Microsoft Visual Studio Code и получить больше возможностей, работая над своими проектами Arduino.

Почему VC Code, а не Arduino IDE

Хотя Arduino IDE является простой в использовании и функциональной IDE, которую многие из нас используют для наших проектов Arduino, она может не содержать все функции, которые вы хотите использовать в IDE. Microsoft Visual Studio (VS) Code — это бесплатное приложение, которое работает в Windows, Mac OS и Linux.

Немного настроив, VS Code может предоставить множество полезных функций, которые недоступны в Arduino IDE, таких как подсветка синтаксиса и технология IntelliSense.

Из Википедии: IntelliSense — технология автодополнения Microsoft, наиболее известная в Microsoft Visual Studio. Дописывает название функции при вводе начальных букв. Кроме прямого назначения, IntelliSense используется для доступа к документации и для устранения неоднозначности в именах переменных, функций и методов, используя рефлексию.

VS может быть настроена для работы со многими другими языками через свою комплексную систему расширений. VS Code имеет много преимуществ по сравнению с основной IDE от Microsoft, Visual Studio — легкая, легко адаптируется и является мультиплатформенной, что означает, что она также работает в операционной системе Raspberry Pi Raspbian.

Далее я покажу, как настроить VS Code для разработки под Arduino в среде Windows 10.

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

Установка VS Code

После установки Arduino IDE загрузить VS Code можно бесплатно с официального сайта. Как только IDE будет загружена, дважды щелкните на exe-файл для установки. При нажатии на исполняемый файл должно отобразиться следующее лицензионное соглашение:

Выберите «Я принимаю соглашение» (англ. — I accept the agreement) и нажмите «Далее» (англ. — Next).

Вы можете изменить место установки VS Code, нажав на кнопку «Обзор» (Browse), но в большинстве случаев подойдет местоположение по умолчанию. Нажмите кнопку «Далее» (Next).

Здесь я бы порекомендовал сохранить значения по умолчанию. Нажмите кнопку «Далее».

Диалоговое окно дополнительных задач позволяет связать VS Code с большинством типов программных файлов, таких как *.cpp, *.py или *.ino. Это может быть полезно для быстрого запуска VS Code при двойном щелчке по файлу с которым нужно работать. Убедитесь, что выбран «Добавить в ПУТЬ» (англ. — Add to Path). Нажмите кнопку «Далее» (Next).

Приведенный выше скриншот — краткое изложение того, куда VS Code будет установлен. Нажмите «Установить» (Install), чтобы начать установку.

Если установка прошла успешно, вы должны увидеть диалоговое окно — см. выше.

При первом запуске Visual Studio Code вы можете получить всплывающее предупреждение системы безопасности:

Выберите «Частные сети, такие как моя домашняя или рабочая сеть» (англ. — Private networks, such as my home or work network), а затем нажмите «Разрешить доступ» (англ. — Allow Access).

Когда вы запускаете VS Code в первый раз, то увидите такое окно:

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

В стандартной комплектации VS Code поддерживает не все языки, но существует большое количество расширений, которые добавляют функциональность для поддержки дополнительных функций. Чтобы включить расширения, щелкните значок «Расширение» (Extension) в левом поле кода VS (см. ниже) или используйте сочетание клавиш «Ctrl-Shift-x».

Установка C++ Tools

Нам нужно установить расширение Microsoft C++ Tools, выполнив следующие шаги:

В строке поиска введите ms-vscode.cpptools
Выберите C/C++ в результатах поиска
Нажмите «Установить» в информационном окне справа

Маркетплейс расширений Visual Studio

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

Ниже некоторые рекомендации полезных расширений, доступных в Маркетплейсе:

Dracula — популярная темная тема, которая доступна для многих IDE.
vscode-icons — добавляет значки файлов в окно проводника.
Code Spell Checker — Проверяет весь исходный код на наличие орфографических ошибок и предлагает исправления.
Bracket Pair Colorizer — упрощает отладку исходного кода, окрашивая соответствующие скобки.

На этом с установкой Visual Studio Code всё. В следующем материале мы расскажем о том, как использовать Visual Studio Code для Arduino.

arduinoplus.ru

Настройка редактора Visual Studio Code

Более 10 лет для своей работы я использовал редактор кода Notepad ++, это действительно отличный простой редактор для начинающих, который, не смотря на свою простоту, имеет все необходимые базовые функции для написании кода и большой потенциал для расширяемости. Но, как говорится, все когда то заканчивается…

Конечно же время не стоит на месте, все развивается, движется вперед, совершенствуется… Чего нельзя, к сожалению, сказать о Notepad++. Особенно огорчает дизайн и его привязка к ОС «Windows».

И вот ответ на мою боль — редактор исходного кода «Visual Studio Code»! Современный, бесплатный и кроссплатформенный, созданный в компании Microsoft.

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

C++
C#
CSS
Dockerfile
HTML
JavaScript
Java
JSON
Less
Markdown
PHP
Python
Sass
TypeScript
Shell Script (Bash)
Rust
Swift
Visual Basic
XML, XSL, YAML

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

Поддержка синтаксиса Emmet

Внимание верстальщики! В «Visual Studio Code» уже включена поддержка Emmet. И вызывается ее исполнение простым нажатием клавиши TAB (табуляция). Для тех кто не в курсе приведу простой пример: что бы нам получить подобную HTML-структуру

нам достаточно ввести в документе следующего рода комбинацию и нажать клавишу табуляции, вуаля! И строчка превращается …

div>div>p>ul>li*5

Ну а каркас HTML документа по стандартам W3 HTML5 и подавно создать легко:

Освоив не хитрый синтаксис emmet вы определенно сэкономите свое время и нервы при работе с кодом HTML и CSS. Попробуйте …

Расширения

Как упоминалось выше к данному редактору существует огромное количество расширений, которые что то добавляют, что то меняют в нем… Я приведу лишь ту малую часть, которая полезна в моей работе, а это:

PHP Debug (использует библиотеку XDebug и незаменим при отладке PHP-кода )
Bootstrap 3 Snippets (сниппеты популярного HTML-CSS-JS фреймворка)
Debugger for Chrome (Отладка кода JavaScript в браузере Chrome)
WordPress Snippet (функции WordPress)

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

Как установить расширение?

Установка происходит проще-простого. Либо из меню интерфейса редактора, где необходимо в разделе расширений ввести ключевое слово и воспользоваться поиском:

Либо (для более продвинутых) с помощью комбинации клавиш Ctrl+P и в появившуюся строку поиска необходимо забить ключевое слово, либо прямую ссылку для установки расширения, которую можно найти под каждым расширением на его странице, на сайте редактора «Visual Studio Code»:

При помощи специальных команд, в строке поиска можно осуществить фильтрацию к вашим расширениям по :

@popular (популярные)
@recommended (рекомендуемые)
@outdated (требуемые обновления)

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

Файл → Параметры → Параметры пользователя

перед вами будут два окна (вкладки), где необходимо ознакомится с текущими настройками, каждая из которых прокомментирована и внести правки для сохранения в пустое окно.

Пользовательская настройка редактора

В своем предыдущем редакторе Notepad++ я определенно привык к двум вещам:

При открытии новых файлов они не должны вызывать открытие новой копии редактора, а должны открываться в текущей копии, в новых вкладках. За это отвечает следующий параметр: «window.openFilesInNewWindow»: false, значение которого необходимо поменять с true на false
Управление переносом строк

Все это мгновенно настраивается. Ниже приведен список настроек редактора с комментариями. Ознакомьтесь на досуге.

// Перезапишите параметры, поместив их в файл параметров.
// Наиболее часто используемые настройки см. по адресу http://go.microsoft.com/fwlink/?LinkId=808995.
{

// Редактор

// Определяет семейство шрифтов.
"editor.fontFamily": "Consolas, 'Courier New', monospace",

// Управляет насыщенностью шрифта.
"editor.fontWeight": "normal",

// Управляет размером шрифта в пикселях.
"editor.fontSize": 14,

// Управляет высотой строк. Укажите 0 для вычисления высоты строки по размеру шрифта.
"editor.lineHeight": 0,

// Управляет видимостью номеров строк.
"editor.lineNumbers": "on",

// Столбцы, в которых должны отображаться вертикальные линейки
"editor.rulers": [],

// Символы, которые будут использоваться как разделители слов при выполнении навигации или других операций, связанных со словами.
"editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",

// Число пробелов в табуляции. Эта настройка переопределяется на основании содержимого файла, когда включен параметр "editor.detectIndentation".
"editor.tabSize": 4,

// Вставлять пробелы при нажатии клавиши TAB. Эта настройка переопределяется на основании содержимого файла, когда включен параметр "editor.detectIndentation".
"editor.insertSpaces": true,

// При открытии файла editor.tabSize и editor.insertSpaces будут определяться на основе содержимого файла.
"editor.detectIndentation": true,

// Определяет, будут ли выделения иметь скругленные углы.
"editor.roundedSelection": true,

// Определяет, будет ли содержимое редактора прокручиваться за последнюю строку.
"editor.scrollBeyondLastLine": true,

// Определяет число символов, после которых текст будет перенесен на следующую строку. Если этот параметр имеет значение 0, используется перенос по ширине окна просмотра (перенос по словам). Если задать значение –1, то в редакторе не будет выполняться перенос по словам.
"editor.wrappingColumn": 300,

// Определяет, должны ли строки переноситься. Строки будут переноситься по значению min(editor.wrappingColumn, viewportWidthInColumns).
"editor.wordWrap": false,

// Управляет отступом строк с переносом по словам. Допустимые значения: "none", "same" или "indent".
"editor.wrappingIndent": "same",

// Множитель, используемый для параметров deltaX и deltaY событий прокрутки колесика мыши.
"editor.mouseWheelScrollSensitivity": 1,

// Определяет, должны ли при вводе текста отображаться краткие предложения.
"editor.quickSuggestions": true,

// Управляет длительностью задержки (в мс), перед отображением кратких предложений.
"editor.quickSuggestionsDelay": 10,

// Включение подсказок для параметров
"editor.parameterHints": true,

// Определяет, должен ли редактор автоматически закрывать скобки после открытия.
"editor.autoClosingBrackets": true,

// Управляет параметром, определяющим, должен ли редактор автоматически форматировать строку после ввода.
"editor.formatOnType": false,

// Определяет, должны ли при вводе триггерных символов автоматически отображаться предложения.
"editor.suggestOnTriggerCharacters": true,

// Определяет, можно ли принимать предложения клавишей ВВОД в дополнение к клавише TAB. Это помогает избежать неоднозначности между вставкой новых строк или принятием предложений.
"editor.acceptSuggestionOnEnter": true,

// Управляет отображением фрагментов вместе с другими предложениями и их сортировкой.
"editor.snippetSuggestions": "bottom",

// Включите предложения на основе слов.
"editor.wordBasedSuggestions": true,

// Вставка фрагментов при совпадении их префиксов. Функция работает оптимально, если параметр "quickSuggestions" отключен.
"editor.tabCompletion": false,

// Определяет, будет ли редактор выделять фрагменты, совпадающие с выделенным текстом.
"editor.selectionHighlight": true,

// Определяет, сколько украшений могут отображаться на одном месте в обзорной линейке.
"editor.overviewRulerLanes": 3,

// Управляет стилем анимации курсора. Допустимые значения: "blink", "smooth", "phase", "expand" и "solid"
"editor.cursorBlinking": "blink",

// Изменение размера шрифта в редакторе при нажатой клавише CTRL и движении колесика мыши
"editor.mouseWheelZoom": false,

// Определяет стиль курсора. Допустимые значения: "block", "line" и "underline"
"editor.cursorStyle": "line",

// Включает лигатуры шрифта.
"editor.fontLigatures": false,

// Управляет скрытием курсора в обзорной линейке.
"editor.hideCursorInOverviewRuler": false,

// Определяет, должен ли редактор обрабатывать символы пробела; возможные значения: "none", "boundary" и "all". Параметр "boundary" не обрабатывает единичные пробелы между словами.
"editor.renderWhitespace": "none",

// Определяет, должны ли в редакторе отображаться управляющие символы.
"editor.renderControlCharacters": false,

// Определяет, должны ли в редакторе отображаться направляющие отступа.
"editor.renderIndentGuides": false,

// Определяет, должен ли редактор отображать текущее выделение строки
"editor.renderLineHighlight": true,

// Управляет показом групп связанных элементов кода в редакторе
"editor.codeLens": true,

// Определяет, включено ли сворачивание кода в редакторе.
"editor.folding": true,

// Вставка и удаление пробелов после позиции табуляции
"editor.useTabStops": true,

// Удалить автоматически вставляемый конечный пробел
"editor.trimAutoWhitespace": true,

// Оставлять просматривающие редакторы открытыми, даже если дважды щелкнуто их содержимое или нажата клавиша ESC.
"editor.stablePeek": false,

// Определяет, как редактор несовпадений отображает отличия: рядом или в тексте.
"diffEditor.renderSideBySide": true,

// Определяет, должен ли редактор несовпадений трактовать несовпадения символов-разделителей как различия.
"diffEditor.ignoreTrimWhitespace": true,
}

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

Открываются настройки из меню или комбинацией CTRL+, («,» — русская Б)

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

Производительность редактора

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

Полезные ссылки:

Заинтересовались? 🙂

megahub.me

Настройка visual studio code – Настройка редактора кода Visual Studio Code — Код — это поэзия

Настройка редактора Visual Studio Code для разработки на PHP / Microsoft corporate blog / Habr

Скачайте и установите Visual Studio Code

Встроенные функции работы с PHP

Настройка статического анализа PHP

Настройка отладки

Заключение

Полезные ссылки

Используем VS Code для Веб-разработки / Habr

Stable vs Insiders

Align

Beautify

Bookmarks

Color Highlighter

Dash

Debugger for Chrome

ECMAScript Quotes Transformer

Editor Config for VSCode

ftp-sync

Project Manager

Runner

Base16 Ocean

Material-theme

Seti

Настройка Visual Studio Code? — Хабр Q&A

Как настроить VS Code для разработки на JavaScript – Hexlet Guides

Создание удобного рабочего окружения.

Содержание

Babel и ES6

Стандарты кодирования

Автоматическое дополнение

jsconfig.json

Отладка

Ссылки

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

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

VS Code + Python

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

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

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

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

Линтинг кода

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

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

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

Отладка кода

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

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

Настройка Visual Studio Code для работы с Arduino

Почему VC Code, а не Arduino IDE

Установка VS Code

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

Установка C++ Tools

Маркетплейс расширений Visual Studio

Настройка редактора Visual Studio Code

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