Code vc: Visual Studio Code — Code Editing. Redefined

Секретные хаки VS Code / Хабр

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

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

Улучшаем внешний вид

1. Material Theme & Icons

Это прямо зверь в темах VS Code. Я думаю, что материальная тема наиболее близка к написанию ручкой на бумаге в редакторе (особенно при использовании неконтрастной темы). Ваш редактор выглядит практически гладко, переходя от встроенных инструментов к текстовому редактору.

Представьте себе эпическую тему в сочетании с эпическими иконами. Material Theme Icons — отличная альтернатива для замены значков VSCode по умолчанию. Большой каталог иконок плавно вписывается в тему, делая ее красивее. Это поможет легко найти файлы в проводнике.

2. Zen Mode с центрированием

Возможно, вы уже знаете режим просмотра Zen, также известный как Distraction Free View (для тех, кто знает Sublime Text), где всё (кроме кода) удаляется, чтобы ничего не отвлекало от редактора кода. Вы знали, что можете центрировать расположение для того, чтобы прочитать код, как если бы использовали PDF viewer? Это помогает сосредоточиться на функции или изучить чужой код.

Zen Mode: [View > Appearance > Toggle Zen Mode]

Center Layout: [View > Appearance > Toggle Centered Layout]

3. Шрифты с лигатурами

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

Попробуйте использовать Fira Code. Он потрясающий и с открытым исходным кодом.

Так можно поменять шрифт в VSCode после его установки:

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

4. Rainbow Indent

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

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

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. Настройка строки заголовка

Я узнал об этом приеме в одном из уроков React&GraphQL которые проводил Wes Bos. В основном он переключал цвета заголовков на разных проектах, чтобы легко распознавать их. Это полезно, если вы работаете с приложениями, которые могут иметь одинаковый код или имена файлов, например, мобильное приложение react-native и веб-приложение react.

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

Ускоряем написание кода

1. Оборачивание тегами

Если вы не знаете Emmet, то скорее всего, вам очень нравится печатать. Emmet позволяет набирать сокращенный код и получать соответствующие теги. Это делается путем выбора группы кода и ввода команды Wrap with Abbreviated, которую я связал с помощью shift+alt+.

Посмотрите.

Представьте, что вы хотите обернуть все это, но как отдельные строки. Вы бы использовали wrap с отдельными строками, а затем вставляли * после аббревиатуры e.g. div*

2. Balance Inwards and Outwards

Рекомендую посмотреть vscodecandothat.com

Вы можете выбрать целый тег в VS Code, используя команды balance inward и balance outward.Полезно связывать эти команды с сочетаниями клавиш, например, Ctrl+Shift+Up Arrow для Balance Outward и Ctrl+Shift+Down Arrow для Balance Inward.

3. Turbo Console.log()

Никто не любит печатать длинные функции, такие как console.log(). Это реально раздражает, если вы хотите вывести что-то быстро, посмотреть значение и продолжить писать код.

Вы можете это сделать, используя расширение Turbo Console Log. Оно позволяет регистрировать любую переменную в строке ниже с автоматическим префиксом, следующим за структурой кода. Вы также можете раскомментировать/комментировать alt+shift+u/alt+shift+c всю консоль после добавления расширения.

4. Live server

Это потрясающее расширение, которое помогает запускать локальный сервер с функцией прямой перезагрузки для статических и динамических страниц. Он имеет отличную поддержку основных функций, таких как: HTTPS, CORS, настраиваемые адреса локального хоста и порт.

Скачать можно здесь.

5. Копипаст с несколькими курсорами

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

6. Breadcrumbs и outlines

Breadcrumbs (хлебные крошки) показывает текущее местоположение и позволяет быстро перемещаться между именами и файлами. Чтобы начать использовать Breadcrumbs, включите его с помощью команды View > Toggle Breadcrumbs или с помощью параметра breadcrumbs.enabled.

The Outline View — это отдельный раздел в нижней части дерева проводника. При раскрытии отображается дерево имен текущего активного редактора.

The Outline View имеет различные режимы сортировки, опциональное отслеживание курсора. Он также включает в себя поле ввода, которое фильтрует имена при вводе. Ошибки и предупреждения также отображаются в представлении структуры, позволяя сразу увидеть место проблемы.

Другие хаки

Маленькие хитрости, которые меняют всё

1. Code CLI

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

Представьте, что у вас есть только git clone <repo-url> репозиторий и вы хотите заменить текущий экземпляр VS кода, который вы используете. code. -r сделает это без необходимости покидать интерфейс CLI.

2. Polacode

Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже. Это было сделано в VS Code с расширением Polar code.

Carbon — хорошая и более настраиваемая альтернатива. Однако Polacode позволяет оставаться в редакторе кода и использовать любой собственный шрифт.

3. Quokka (JS/TS ScratchPad)

Quokka — это площадка для быстрого создания прототипов для JavaScript и TypeScript. Он запускает код сразу по мере ввода и отображает различные результаты выполнения и журналы консоли в редакторе кода.

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

Он также может помочь вам изучить функции библиотеки, такие как Lodash или MomentJS, прежде чем вы перейдете к фактическому использованию.

4. WakaTime

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

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

5. VSCode Hacker Typer

Вы когда-нибудь печатали код перед толпой? Часто мы печатаем на автомате, параллельно разговариваем, из-за этого допускаем ошибки. Представьте себе предварительно набранный код, который появляется только тогда, когда вы имитируете набор текста, как в geektyper.

Jani Eväkallio принес в VS Code это расширение. Оно поможет записывать и воспроизводить макросы (код, написанный в вашем редакторе), делая вас более сосредоточенным при наборе текста для аудитории.

6. Exclude folders

Я научился этому трюку благодаря посту на StackOverFlow. Это быстрый трюк для исключения таких папок, как node_modules или любых других, из дерева проводника, чтобы помочь сосредоточиться на главном. Лично я ненавижу открывать утомительную папку node_module в редакторе, поэтому решил скрыть ее.

Чтобы скрыть node_modules, вы можете сделать это:

1. Перейдите в File> Preferences > Settings (или в Mac Code> Preferences> Settings)
2. Найдите files.exclude в настройках
3. Выберите добавить шаблон и введите **/node_modules
4. Вуаля! node_modules исчезли из дерева проводника

Это были мои хаки, как писать код еще лучше. Делитесь своими в комментариях.

Как пользоваться Visual Studio Code

Visual Studio Code — это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

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

Содержание статьи:

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

1. Интерфейс Visual Studio Code

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:

Именно этими участками вы будете пользоваться во время работы с VS Code:

1. Главное меню программы — можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
2. Левая панель — эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
3. Проводник — по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
4. Рабочая область — здесь выполняется редактирование файла.
5. Мини карта — позволяет быстро ориентироваться по открытому исходнику.
6. Нижняя панель — здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
7. Статус бар — отображается общая информация о состоянии программы.

2. Русификация Visual Studio Code

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:

Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:

Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки — её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:

Скачать новые темы можно с официального сайта Visual Studio Code. Здесь же можно настроить тему иконок.

4. Управление проектами

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

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

После этого вы сможете очень просто управлять своими проектами.

5. Авто-форматирование кода

Один из самых важных моментов в работе с кодом — это его однообразие. Приводить код к одному виду вручную не всегда удобно — для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.

6. Автодополнение

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense,  CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.

7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l, использовать Esc и сохранять файл командой :w.

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. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами — это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:

10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code — это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:

Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:

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

Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть «из коробки». А какой средой разработки пользуетесь вы? Напишите в комментариях!

Расширения VS Code для продуктивности и красоты кода

Перевод статьи «VS Code extensions that make me fall in love with programming each day».

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

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

И, раз уж заговорил о стиле кода, покажу, как выглядит мой VS Code в работе:

Расширения VS Code для повышения продуктивности

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

1. WakaTime

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

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

Всю собранную статистику можно просматривать на красивых диаграммах.

2. Visual Studio IntelliCode

Представьте технологию Intellisense с поддержкой ИИ, который может посоветовать, какой код писать. Представленная вами картинка практически воплощена в реальность!

Расширение Visual Studio IntelliCode предоставляет функционал разработки с применением ИИ для Python, TypeScript/JavaScript и Java. Расширение распознает контекст вашего кода при помощи машинного обучения.

Вот, как это работает:

3. Terminal Here

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

Примечание автора: лично я не люблю кодить в IDE и отдаю предпочтение текстовому редактору VS Code. В основном я пишу на Java, при этом мне нравится поддерживать определенную структуру файлов (по одной папке на один вопрос). Как вы, вероятно, догадались, чтобы запускать выполнение файлов, мне приходилось каждый раз менять директории. Этот плагин — просто спасение!

Это расширение открывает в терминале VS Code текущую директорию. Разве не потрясающе?

4. Live Server

Как бы объяснить всю важность этого плагина?..

Вы открываете свои страницы при помощи Live Server, и вам больше не приходится каждый раз при внесении изменений перезагружать их!

5. ReactJS Code Snippets

Если вы React-разработчик и не пользуетесь этим плагином, вы теряете зря кучу времени! ReactJS Code Snippets позволяет создавать компоненты, используя готовые сниппеты кода.

Еще пример:

6. Python

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

Выбор интерпретатора Python в строке состояния в один клик:

Настройка дебаггера через Debug Activity Bar:

Конфигурация тестов путем запуска команды Configure Tests:

Быстрый запуск Jupiter notebook:

7. Path Intellisense

Очень полезный функционал для разработчиков. Будь то импорт зависимостей, включение изображений в HTML-документ, добавление JS-скриптов или подключение CSS-документов в HTML-файл — нам постоянно нужно указывать пути к файлам.

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

8. NPM Intellisense

Если вам понравилось предыдущее расширение, а сами вы — node-разработчик, я уверен, что этот плагин вы тоже установите. В конце концов, кто ж не захочет иметь автодополнение или подсказки при импорте npm-библиотек?

9. Markdownlint

Откройте наугад несколько open-source проектов на GitHub, и вы увидите, что у них есть нечто общее, а именно — стиль README.md.

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

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

Не ленитесь: установите себе этот плагин и поисправляйте свою markdown-разметку:)

10. Markdown Preview Enhanced

Возможно, вы, как и я, давно забросили MSWord и прочее ПО для текстовых документов, переключившись на использование markdown? Установите себе этот плагин, и вы сможете следить за тем, как выглядит ваш документ.

11. Auto Close Tag

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

12. Auto Rename Tag

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

Расширения VS Code для лучшего стиля кода

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

1. Prettier

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

Между сторонниками отступов в 2 и 4 пробела идет постоянная, непрекращающаяся борьба (люди, которые ставят 8 пробелов, зачем вы это делаете?!). Но при помощи этого расширения код с отступами в 2 пробела можно легко конвертировать в код с отступами в 4.

Скажем, у вас есть кусок кода, найденный где-то на просторах интернета, а может, написанный вашим другом. И вы видите, что в нем вообще нет отступов. И что теперь? Расставлять их вручную? Используйте Prettier!

Это расширение предназначено для форматирования кода. Оно принудительно приводит код к заданному стилю.

2. Rainbow Brackets

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

При помощи этого плагина можно сделать круглые скобки одного цвета, квадратные — другого, а фигурные — третьего. Это имеет особенное значение для программистов, пишущих на Lisp или Clojure и, конечно, для JavaScript-разработчиков. Но остальным тоже не помешает;)

3. Snazzy Operator

Это расширение — моя любовь. Вы, может, думаете, что это просто еще одна тема VS Code, но я в нее просто влюблен.

И, кстати, не забудьте установить шрифт Operator Mono, прежде чем начать пользоваться этой темой.

4. vscode-styled-components

И, наконец, потрясающий плагин для подсветки синтаксиса и intellisense.

Но погодите! А вы заметили еще кое-что на самом первом скриншоте, который я показывал? Если нет, я вам его еще раз покажу:

А теперь заметили? А? Ладно, вот вам подсказка: посмотрите на мой терминал.

Если вы работаете на Linux или Mac, для вас это, может, и не новость. Но мои друзья, использующие Windows, могли заметить нечто интересное.

В общем, для своей WSL (подсистема Windows для Linux) я использую тему Oh-My-Zsh. Можете поискать инфу в гугле. Возможно, будет непросто найти пошаговое руководство, как установить эту тему именно в терминале VS Code, но вы постарайтесь.

5 советов и хитростей для Visual Studio Code

1. Проверка типа JavaScript

Разберёмся, как добавить простую проверку типа JavaScript в Visual Studio Code. Посмотрите на этот JavaScript-пример, в котором намереваемся суммировать два числа:

Пример с неверным типом переменной

Вы заметите, что попытка неудачная. Вам покажется это пустяком, но при написании финансовых программ, чувствительных к расчётам, легко вляпаться по неосторожности. Решить проблему помогают такие инструменты, как TypeScript и Flow. Но иногда нам не хватает бюджета или времени, чтобы внедрить TypeScript в программный поток. Поэтому смотрите, как справиться с помощью VS Code.

Добавьте комментарий @ts-check в начало файла. Вы увидите, что Visual Studio автоматически выделяет ошибки:

Эффект добавления @ts-check в код

В примере инициализируем переменную x как число, а затем пытаемся переназначить её с использованием недопустимого типа строки. Поэтому получаем ошибку.

Заметили, что мы до сих пор не решили изначальную проблему с проверкой при суммировании двух чисел?

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

Чтобы сообщить VS Code типы параметров функции, используем документирование. Если набрать /** и нажать Enter, VS Code находит эту функцию, разбирает сигнатуру и создаёт JS doc:

Сгенерированная документация для функции add

Добавим тип number для обоих параметров. Теперь посмотрим, как VS Code начал ловить ошибку, которая возникала из-за передачи строки в качестве второго аргумента:

Отображение ошибки после указания типа в JS doc

Если изменить аргумент на число, ошибка исчезает.

2. Рефакторинг с помощью переименования символов

Мы не всегда даём переменным, функциям или ключам атрибутов правильное имя со старта. Поэтому часто во время рефакторинга переименовываем некоторые из них.

Скажем, нам понадобилось изменить словарь или объект foo в counter, но он уже используется тысячу раз по всему проекту, в куче различных файлов. А также в планах переименовать ключ атрибута bark в value, чтобы получилось counter.value вместо foo.bark . Как этого добиться?

Примитивный способ – выполнить глобальный поиск и замену через панель поиска (Shift + Cmd + F в Mac OS или Shift + Ctrl + F в Windows и Linux). Это быстро, но и небезопасно – если в проекте обнаружится переменная с именем food, то простая замена также затронет эту переменную. Получим counterd, ой!

Именованные объекты называются «символами». И самый простой и «правильный» способ сделать это – использовать функцию Rename Symbol в VS Code. Поместите курсор на «символы», которые собираетесь переименовать, затем нажмите F2 (также на Mac OS). Появится текстовое поле рядом с выбранным объектом. Таким образом, ссылки на это имя по всему проекту будут правильно переименованы. Если использовать это для компонента React, тег разметки JSX тоже переименовывается!

3. Создание фрагментов

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

Чтобы создать сниппет, нажмите Cmd + Shift + P и в строке поиска наберите User Snippets.

Поиск меню настройки

Откройте меню настройки пользовательских фрагментов Configure User Snippets и найдите конкретный язык, для которого создаёте фрагмент. В нашем случае это JavaScript, поэтому выбираем его и нажимаем Enter. После чего редактор выдаёт нам файл JavaScript или JSON. Вы можете легко создавать новое расширение в нём. В нашем случае продолжаем работать с полученным примером.

Пример фрагмента

Видите? Фрагмент – в сущности объект, и у каждого объекта три свойства: prefix, description, body. Префикс сообщает VS Code, что этот фрагмент скоро будет активирован. Описание напоминает, что вы как разработчик активируете фрагмент, как только начинаете печатать этот конкретный префикс. Тело – собственно код, который генерируется после активации фрагмента. Если посмотрите внимательно, вы увидите два плейсхолдера, обозначенных как 1 и 2. Чтобы понять, что они делают, посмотрим на этот фрагмент в действии.

Если открыть файл JavaScript и напечатать react-stateless, то после нажатия Enter вы увидите, как фрагмент генерируется.

Созданный фрагмент после ввода react-stateless

Главный момент – ComponentName. Посмотрите внимательно на тело фрагмента и поймёте, что ComponentName – первый плейсхолдер. Если изменить ComponentName на Todo и нажать Tab во фрагменте, курсор не добавит пробел, а перепрыгнет к аргументу log. И он также редактируется:

Фрагмент после редактирования

4. Горячие клавиши для редактирования

В редакторе разработчики не только набирают текст, но и перемещают его куски.

Замечали, что делает VS Code при нажатии стандартных горячих клавиш для копирования, вставки и вырезания без выделения символов? Применяет действие ко всей строке. Это отлично подходит для редактирования целых строк текста.

Рассмотрим другие шорткаты для дублирования и перемещения строк.

Alt + Up или Alt + Down перемещают строку, на которой сейчас курсор, вверх или вниз. Shift + Alt + Up или Shift + Alt + Down дублируют строку и располагают её выше или ниже текущей строки. Эти сокращения также работают при выделении нескольких строк. Однако в дистрибутивах Linux встречаются конфликты этих комбинаций с общесистемным сопоставлением клавиш по умолчанию. В таком случае придётся переназначить их в настройках VS Code.

Однако самая крутая фишка – Shift + Ctrl + Cmd + Right/Left (на Mac OS) для расширения или сокращения выделения блока. Попробуйте это внутри вложенного блока кода и поймёте, о чём речь! Эквивалент для Windows и Linux – Shift + Alt + Right/Left.

5. Преобразование кода в Visual Studio Code

Иногда для достижения целей нужна современная версия JavaScript, но из-за использования в проекте более старых версий перейти на новую становится крайне сложно. На помощь приходит VS Code опция, которая преобразует код в более новые версии, даже если вы писали его в старых.

Если нажать на следующую функцию-конструктор, VS Code подсвечивает подсказку в виде лампочки. Кликните по ней и увидите предложение преобразовать функцию в ES 2015 класс.

Подсказка для конвертации функции-конструктора

Когда согласитесь конвертировать функцию в ES 2015 класс, VS автоматически определит методы-прототипы этой конкретной функции-конструктора и преобразует всё в класс.

Или представьте, что собираетесь преобразовать Promise в async и await. Нажмите на функцию, которая возвращает Promise и увидите подсказку, клик по которой откроет предложение конвертировать объект в функцию async.

Выбор преобразования функции с Promise в async

Как только нажмёте на него, функция конвертируется в async с использованием await.

Результат преобразования

А какие хитрости вы используете при работе в Visual Studio Code?

Настройка 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

Настроить код Visual Studio для Microsoft C ++

В этом руководстве вы настраиваете Visual Studio Code для использования компилятора и отладчика Microsoft Visual C ++ в Windows.

После настройки VS Code вы скомпилируете и отладите простую программу Hello World в VS Code. В этом руководстве не содержится подробных сведений о наборе инструментов Microsoft C ++ или языке C ++. По этим предметам в Интернете доступно множество хороших ресурсов.

Если у вас возникли проблемы, не стесняйтесь сообщать о проблеме для этого руководства в репозиторий документации VS Code.

Предварительные требования

Чтобы успешно пройти это руководство, вы должны сделать следующее:

1. Установите код Visual Studio.

2. Установите расширение C / C ++ для VS Code. Вы можете установить расширение C / C ++, выполнив поиск «c ++» в представлении «Расширения» (⇧⌘X (Windows, Linux Ctrl + Shift + X)).

3. Установите набор инструментов компилятора Microsoft Visual C ++ (MSVC).

   Если у вас установлена ​​последняя версия Visual Studio, откройте установщик Visual Studio из меню «Пуск» Windows и убедитесь, что рабочая нагрузка C ++ отмечена.Если он не установлен, установите флажок и нажмите кнопку Изменить в программе установки.

   Вы также можете установить только C ++ Build Tools без полной установки Visual Studio IDE. На странице загрузок Visual Studio прокрутите вниз, пока не увидите Инструменты для Visual Studio в разделе Все загрузки , и выберите загрузку для Инструменты сборки для Visual Studio .

   Это запустит установщик Visual Studio, который вызовет диалоговое окно, показывающее доступные рабочие нагрузки Visual Studio Build Tools.Проверьте рабочую нагрузку инструментов сборки C ++ и выберите Установить .

Примечание : вы можете использовать набор инструментов C ++ из Visual Studio Build Tools вместе с Visual Studio Code для компиляции, сборки и проверки любой базы кода C ++, если у вас также есть действующая лицензия Visual Studio (Community, Pro или Enterprise. ), который вы активно используете для разработки этой кодовой базы C ++.

Проверьте установку Microsoft Visual C ++

Чтобы использовать MSVC из командной строки или VS Code, необходимо запустить из командной строки разработчика для Visual Studio .Обычная оболочка, такая как PowerShell, Bash или командная строка Windows, не имеет необходимых переменных среды пути.

Чтобы открыть командную строку разработчика для VS, начните вводить «разработчик» в меню «Пуск» Windows, и оно должно появиться в списке предложений. Точное имя зависит от того, какую версию Visual Studio или Visual Studio Build Tools вы установили. Щелкните элемент, чтобы открыть подсказку.

Вы можете проверить, что у вас есть компилятор C ++, cl.exe , установлен правильно, набрав «cl», и вы должны увидеть сообщение об авторских правах с версией и основным описанием использования.

Если командная строка разработчика использует расположение BuildTools в качестве начального каталога (вы не хотели бы помещать туда проекты), перейдите в свою папку пользователя ( C: \ users \ {ваше имя пользователя} \ ), прежде чем начинать создание новые проекты.

Создать Hello World

В командной строке разработчика создайте пустую папку под названием «проекты», в которой вы можете хранить все свои проекты VS Code, затем создайте подпапку с именем «helloworld», перейдите в нее и откройте VS Code ( код ) в этой папке. (.), введя следующие команды:

  мкдир проектов
cd проекты
mkdir helloworld
cd helloworld
код.  

«Код». Команда открывает VS Code в текущей рабочей папке, которая становится вашей «рабочей областью». По мере прохождения руководства вы увидите три файла, созданные в папке .vscode в рабочей области:

• tasks.json (инструкция по сборке)
• launch.json (настройки отладчика)
• c_cpp_properties.json (путь к компилятору и настройки IntelliSense)

Добавить файл исходного кода

В строке заголовка проводника нажмите кнопку New File и назовите файл helloworld.cpp .

Добавить исходный код hello world

Теперь вставьте этот исходный код:

  #include 
#include <вектор>
#include <строка>

используя пространство имен std;

int main ()
{
    vector  msg {"Hello", "C ++", "World", "from", "VS Code", "и расширение C ++!"};

    для (константная строка и слово: сообщение)
    {
        cout << word << "";
    }
    cout << endl;
}  

Теперь нажмите ⌘S (Windows, Linux Ctrl + S), чтобы сохранить файл.Обратите внимание, как только что добавленный файл отображается в представлении проводника (⇧⌘E (Windows, Linux Ctrl + Shift + E)) на боковой панели VS Code:

Вы также можете включить автосохранение для автоматического сохранения изменений файла, установив флажок Автосохранение в главном меню Файл .

Панель активности в крайнем левом углу позволяет открывать различные представления, такие как Search , Source Control и Run . Вы увидите представление Run позже в этом руководстве.Вы можете узнать больше о других представлениях в документации по пользовательскому интерфейсу VS Code.

Примечание : Когда вы сохраняете или открываете файл C ++, вы можете увидеть уведомление от расширения C / C ++ о доступности версии для инсайдеров, которая позволяет вам тестировать новые функции и исправления. Вы можете проигнорировать это уведомление, выбрав X ( Clear Notification ).

Изучите IntelliSense

В вашем новом helloworld.cpp , наведите указатель мыши на вектор или на строку , чтобы увидеть информацию о типе. После объявления переменной msg начните вводить msg. , как при вызове функции-члена. Вы должны немедленно увидеть список завершения, который показывает все функции-члены, и окно, которое показывает информацию о типе для объекта msg :

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

Сборка helloworld.cpp

Затем вы создадите файл tasks.json , чтобы сообщить VS Code, как построить (скомпилировать) программу. Эта задача вызовет компилятор Microsoft C ++ для создания исполняемого файла на основе исходного кода.

В главном меню выберите Терминал > Настроить задачу сборки по умолчанию . В раскрывающемся списке, в котором будет отображаться раскрывающийся список задач, в котором перечислены различные предопределенные задачи сборки для компиляторов C ++. Выберите cl.exe строит активный файл , который будет строить файл, который в данный момент отображается (активен) в редакторе.

Это создаст файл tasks.json в папке .vscode и откроет его в редакторе.

Ваш новый файл tasks.json должен выглядеть примерно так, как показано ниже в формате JSON:

  {
  "версия": "2.0.0",
  "задачи": [
    {
      "тип": "оболочка",
      "label": "cl.exe построить активный файл",
      "команда": "кл.исполняемый файл",
      "args": [
        "/ Zi",
        "/ EHsc",
        "/ Fe:",
        "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe",
        "$ {файл}"
      ],
      "проблемаМатчер": ["$ msCompile"],
      "group": {
        "вид": "строить",
        "isDefault": true
      }
    }
  ]
}  

Команда Параметр указывает программу для запуска; в данном случае это "cl.exe". В массиве args указаны аргументы командной строки, которые будут переданы в cl.исполняемый файл. Эти аргументы должны быть указаны в порядке, ожидаемом компилятором. Эта задача сообщает компилятору C ++ взять активный файл ( $ {file} ), скомпилировать его и создать исполняемый файл (переключатель / Fe: ) в текущем каталоге ( $ {fileDirname} ) с то же имя, что и у активного файла, но с расширением .exe ( $ {fileBasenameNoExtension} .exe ), что в нашем примере дает helloworld.exe .

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

Ярлык Значение - это то, что вы увидите в списке задач; вы можете называть это как хотите.

Значение problemMatcher выбирает выходной синтаксический анализатор, который будет использоваться для поиска ошибок и предупреждений в выходных данных компилятора. Для cl.exe вы получите наилучшие результаты, если используете средство сопоставления задач $ msCompile .

Значение «isDefault»: true в объекте группы указывает, что эта задача будет запущена при нажатии ⇧⌘B (Windows, Linux Ctrl + Shift + B).Это свойство предназначено только для удобства; если вы установите для него значение false, вы все равно можете запустить его из меню «Терминал» с помощью Задачи: Выполнить задачу сборки .

Запуск сборки

1. Вернитесь к helloworld.cpp . Ваша задача создает активный файл, и вы хотите собрать helloworld.cpp .

2. Для запуска задачи сборки, определенной в tasks.json , нажмите ⇧⌘B (Windows, Linux Ctrl + Shift + B) или в главном меню Terminal выберите Tasks: Run Build Task .

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

4. Создайте новый терминал с помощью кнопки + , и у вас будет новый терминал (с запущенным PowerShell) с папкой helloworld в качестве рабочего каталога.Запустите ls , и теперь вы должны увидеть исполняемый файл helloworld.exe вместе с различными промежуточными файлами вывода и отладки C ++ ( helloworld.obj , helloworld.pdb ).

5. Вы можете запустить helloworld в терминале, набрав . \ Helloworld.exe .

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

Изменение tasks.json

Вы можете изменить свой tasks.json для создания нескольких файлов C ++, используя аргумент типа "$ {workspaceFolder} \\ *. Cpp" вместо $ {file} . Это создаст все файлы .cpp в вашей текущей папке. Вы также можете изменить имя выходного файла, заменив "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe" жестко заданным именем файла (например, "$ {workspaceFolder} \\ myProgram.exe ").

Отладка helloworld.cpp

Затем вы создадите файл launch.json , чтобы настроить VS Code для запуска отладчика Microsoft C ++ при нажатии клавиши F5 для отладки программы. В главном меню выберите Выполнить > Добавить конфигурацию ... , а затем выберите C ++ (Windows) .

Затем вы увидите раскрывающийся список для различных предопределенных конфигураций отладки. Выберите сборку cl.exe и выполните отладку активного файла .

VS Code создает запуск .json , открывает его в редакторе, создает и запускает helloworld.

  {
  "версия": "0.2.0",
  "конфигурации": [
    {
      "name": "cl.exe построить и отладить активный файл",
      "тип": "cppvsdbg",
      "запрос": "запуск",
      "program": "$ {fileDirname} \\ $ {fileBasenameNoExtension} .exe",
      "аргументы": [],
      "stopAtEntry": ложь,
      "cwd": "$ {workspaceFolder}",
      "среда": [],
      "externalConsole": ложь,
      "preLaunchTask": "cl.EXE построить активный файл "
    }
  ]
}  

Программа Параметр определяет программу, которую нужно отлаживать. Здесь установлена ​​активная файловая папка $ {fileDirname} и активное имя файла с расширением .exe $ {fileBasenameNoExtension} .exe , которое, если helloworld.cpp является активным файлом, будет helloworld. exe .

По умолчанию расширение C ++ не добавляет точки останова в исходный код, а для значения stopAtEntry установлено значение false .Измените значение stopAtEntry на true , чтобы отладчик останавливался на методе main при запуске отладки.

Начать сеанс отладки

1. Вернитесь к helloworld.cpp , чтобы он стал активным файлом.
2. Нажмите F5 или в главном меню выберите Выполнить> Начать отладку . Прежде чем приступить к изучению исходного кода, давайте заметим несколько изменений в пользовательском интерфейсе:

• Интегрированный терминал появляется в нижней части редактора исходного кода.На вкладке Debug Output вы видите выходные данные, указывающие, что отладчик запущен и работает.

• Редактор выделяет первый оператор в методе main . Это точка останова, которую расширение C ++ автоматически устанавливает для вас:

• В представлении «Выполнить» слева отображается отладочная информация. Позже в руководстве вы увидите пример.

• В верхней части редактора кода появляется панель управления отладкой.Вы можете перемещать его по экрану, хватая точки с левой стороны.

Введите код

Теперь вы готовы приступить к пошаговому выполнению кода.

1. Щелкните или нажмите значок Step over на панели управления отладкой, пока не будет выделен оператор for (const string & word: msg) .

   Команда Step Over пропускает все внутренние вызовы функций в классах vector и string , которые вызываются при создании и инициализации переменной msg .Обратите внимание на изменение в окне переменных слева. В этом случае ожидаются ошибки, потому что, хотя имена переменных для цикла теперь видны отладчику, оператор еще не выполнен, поэтому читать здесь нечего. Однако содержимое сообщения msg видно, поскольку этот оператор завершен.

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

3. Нажмите . Еще раз пройдитесь по , чтобы выполнить оператор cout . Примечание Начиная с версии расширения за март 2019 г., выходные данные не отображаются до завершения цикла.

4. Если хотите, можете продолжать нажимать Step over , пока все слова в векторе не будут напечатаны на консоли. Но если вам интересно, попробуйте нажать кнопку Step Into , чтобы просмотреть исходный код в стандартной библиотеке C ++!

   Чтобы вернуться к собственному коду, один из способов - продолжать нажимать Шаг за .Другой способ - установить точку останова в коде, переключившись на вкладку helloworld.cpp в редакторе кода, поместив точку вставки где-нибудь в операторе cout внутри цикла и нажав F9. Красная точка появляется в желобе слева, чтобы указать, что на этой строке установлена ​​точка останова.

   Затем нажмите F5, чтобы начать выполнение с текущей строки в заголовке стандартной библиотеки. Исполнение остановится на cout . Если хотите, вы можете снова нажать F9, чтобы выключить точку останова.

Набор наручных

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

1. Поместите точку вставки внутрь петли. В окне Watch щелкните знак «плюс» и в текстовом поле введите слово , которое является именем переменной цикла. Теперь просмотрите окно Watch по мере прохождения цикла.

2. Добавьте еще одно наблюдение, добавив этот оператор перед циклом: int i = 0; .Затем внутри цикла добавьте этот оператор: ++ i; . Теперь добавьте часы для i , как вы это делали на предыдущем шаге.

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

Конфигурации C / C ++

Если вам нужен больший контроль над расширением C / C ++, вы можете создать файл c_cpp_properties.json , который позволит вам изменять такие настройки, как путь к компилятору, включать пути, стандарт C ++ (по умолчанию C ++ 17) и многое другое.

Пользовательский интерфейс конфигурации C / C ++ можно просмотреть, выполнив команду C / C ++: изменить конфигурации (UI) из палитры команд (⇧⌘P (Windows, Linux Ctrl + Shift + P)).

Откроется страница Конфигурации C / C ++ . Когда вы вносите здесь изменения, VS Code записывает их в файл с именем c_cpp_properties.json в папке .vscode .

Visual Studio Code помещает эти параметры в .vscode \ c_cpp_properties.json . Если вы откроете этот файл напрямую, он должен выглядеть примерно так:

  {
  "конфигурации": [
    {
      "name": "Win32",
      "includePath": ["$ {workspaceFolder} / **"],
      "определяет": ["_DEBUG", "UNICODE", "_UNICODE"],
      "windowsSdkVersion": "10.0.18362.0",
      "compilerPath": "C: / Program Files (x86) / Microsoft Visual Studio / 2019 / BuildTools / VC / Tools / MSVC / 14.24.28314 / bin / Hostx64 / x64 / cl.exe",
      "cStandard": "c11",
      "cppStandard": "c ++ 17",
      "intelliSenseMode": "msvc-x64"
    }
  ],
  «версия»: 4
}  

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

Путь к компилятору

Параметр compilerPath является важным параметром в вашей конфигурации. Расширение использует его для определения пути к файлам заголовков стандартной библиотеки C ++. Когда расширение знает, где найти эти файлы, оно может предоставить полезные функции, такие как интеллектуальное завершение и навигация Go to Definition .

Расширение C / C ++ пытается заполнить compilerPath местоположением компилятора по умолчанию в зависимости от того, что оно находит в вашей системе.Расширение ищет в нескольких распространенных местах компилятора.

Порядок поиска compilerPath :

• Первая проверка компилятора Microsoft Visual C ++ Ope
• Затем найдите g ++ в подсистеме Windows для Linux (WSL)
• Затем g ++ для Mingw-w64.

Если у вас установлен g ++ или WSL, вам может потребоваться изменить compilerPath , чтобы он соответствовал предпочтительному компилятору для вашего проекта. Для Microsoft C ++ путь должен выглядеть примерно так, в зависимости от того, какая конкретная версия у вас установлена: «C: / Program Files (x86) / Microsoft Visual Studio / 2017 / BuildTools / VC / Tools / MSVC / 14.16.27023 / bin / Hostx64 / x64 / cl.exe ".

Повторное использование конфигурации C ++

VS Code теперь настроен на использование компилятора Microsoft C ++. Конфигурация применяется к текущей рабочей области. Чтобы повторно использовать конфигурацию, просто скопируйте файлы JSON в папку .vscode в новой папке проекта (рабочей области) и при необходимости измените имена исходного файла (ов) и исполняемого файла.

Поиск и устранение неисправностей

Термин cl.exe не распознается

Если вы видите ошибку «Термин п.exe 'не распознается как имя командлета, функции, файла сценария или работающей программы. ", это обычно означает, что вы запускаете VS Code вне командной строки разработчика для Visual Studio , а VS Code не знает путь к компилятору cl.exe .

Вы всегда можете проверить, что вы используете VS Code в контексте командной строки разработчика, открыв новый терминал (⌃⇧` (Windows, Linux Ctrl + Shift + `)) и набрав 'cl' для проверки cl.exe доступен для VS Code.

Следующие шаги

19.02.2020

.

Visual Studio Code Удаленная разработка

Visual Studio Code Remote Development позволяет использовать контейнер, удаленный компьютер или подсистему Windows для Linux (WSL) в качестве полнофункциональной среды разработки. Вы можете:

• Разрабатывайте на той же операционной системе , которую вы развертываете, или используете более крупное или более специализированное оборудование .
• Sandbox ваша среда разработки, чтобы не повлиять на локальную конфигурацию компьютера .
• Упростите для новых участников начало работы и удерживайте всех в согласованной среде .
• Используйте инструменты или среды выполнения недоступно в вашей локальной ОС или управляйте несколькими версиями из них.
• Разрабатывайте приложения для Linux с помощью подсистемы Windows для Linux .
• Доступ к существующей среде разработки с нескольких машин или местоположений .
• Отладка приложения , работающего где-то еще , например, на сайте клиента или в облаке.

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

Начало работы

Пакет расширения для удаленной разработки

Пакет расширений Remote Development включает три расширения.См. Следующие статьи, чтобы начать работу с каждым из них:

• Удаленный - SSH - Подключитесь к любому месту, открывая папки на удаленном компьютере / виртуальной машине с помощью SSH.
• Remote - Контейнеры - Работа с изолированной цепочкой инструментов или контейнерным приложением внутри (или установленным в) контейнере.
• Remote - WSL - получите опыт разработки под Linux в подсистеме Windows для Linux.

Хотя большинство расширений VS Code должны работать без изменений в удаленной среде, авторы расширений могут узнать больше на Supporting Remote Development.

Удаленное обучение

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

Кодовые пространства GitHub

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

Вопросы или отзывы

10.09.2020

.

Как форматировать код в Visual Studio Code (VSCode)

Переполнение стека

1. Около

2. Продукты

3. Для команд

1. Переполнение стека
Общественные вопросы и ответы

2. Переполнение стека для команд
Где разработчики и технологи делятся частными знаниями с коллегами

3. Вакансии
Программирование и связанные с ним технические возможности карьерного роста

4. Талант
Нанимайте технических специалистов и создавайте свой бренд работодателя

5. Реклама
Обратитесь к разработчикам и технологам со всего мира

6. О компании

.