Как работать в vs code – 10 возможностей VS Code, помогающих ускорить работу программиста / RUVDS.com corporate blog / Habr — Вебджем.рф

Содержание

10 возможностей VS Code, помогающих ускорить работу программиста / RUVDS.com corporate blog / Habr

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

Редактор Visual Studio Code (VS Code) стал восходящей звездой вселенной инструментов программирования сразу после того, как появился. Я долго не решалась его попробовать. Причина этого была не в том, что это — просто некий очередной редактор кода. Дело было в том, что вся моя работа была отлично организована в Sublime.

Для меня понятия «работа» и «написание кода» — это одно и то же. И, по большому счёту, неважно, каким именно редактором я буду постоянно пользоваться. Но изменения — это всегда нелегко. После того, как я неделю поработала в VS Code, я обнаружила, что моя продуктивность сильно просела. Я сделала за это время меньше, чем сделала бы, пользуйся я чем-то привычным.

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

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

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

1. Сниппеты

Использование сниппетов — это серьёзный способ повышения продуктивности программиста. Дело в том, что они помогают автоматизировать ручной труд. Поначалу использование сниппетов может выглядеть как нечто вроде читерства. Но после того как, разрабатывая Angular-приложение, много раз воспользуешься этим средством для ввода каркаса конструкции switch в коде сущности View, перестаёшь обращать внимание на такие мысли.

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

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

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

Вот хорошее расширение, Angular Snippets, которое позволяет ускорить написание Angular-кода. При работе над проектами, основанными на React, я пользуюсь расширением ES7 React/Redux/GraphQL/React-Native snippets.

C Vue я пока не работала, но вот одно расширение, Vue 2 Snippets, которое, имея более 900 тысяч установок, выглядит многообещающим.

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

Extensions, выделенную на следующем рисунке.

Работа с расширениями в Visual Studio Code

2. IntelliSense

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

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

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

Работа с IntelliSense (источник)

Когда программист, например, вводит имя объекта и ставит после него точку, появляется выпадающий список с перечнем методов этого объекта. По мере того, как вводятся всё больше и больше букв имени метода, система фильтрует список. На определённом этапе ввода имени метода можно, клавишами-стрелками, выбрать нужное имя из довольно короткого списка, и нажать

Enter для его вставки в код. Если сразу непонятно — какой именно метод нужен в данный момент — тут же можно взглянуть и на документацию.

Если в VS Code пришёл кто-то, кто пишет на Java или на C++, то всё это может и не показаться ему чем-то таким уж удивительным. Я видела нечто подобное, когда работала в Eclipse. Но в JavaScript-мире интеллектуальное автозавершение ввода — это возможность, достойная того, чтобы её заметили, и того, чтобы ей, ради значительного повышения скорости работы, пользовались.

3. Интегрированный терминал

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

Для того чтобы открыть терминал, можно воспользоваться сочетанием клавиш CTRL + ` (обратная галочка).

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

Для открытия ещё одного окна терминала можно воспользоваться комбинацией клавиш CTRL + SHIFT + ` (всё та же обратная галочка).

Окно терминала в VS Code

4. Просмотр мест использования сущностей и их определений, рефакторинг

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

Для того чтобы увидеть такой список, достаточно щёлкнуть правой кнопкой мыши по методу, функции, или по чему-нибудь ещё, и выбрать в появившемся меню команду

Peek References. Того же эффекта можно добиться, выделив нужный участок, и, на Windows-компьютере, воспользовавшись сочетанием клавиш SHIFT + F12.

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

5. Средства форматирования кода и инструменты для управления техническим долгом

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

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

Средства форматирования кода часто основаны на определённых соглашениях. Они позволяет обеспечить единообразие оформления текстов программ. Например, речь идёт о правилах выравнивания кода, о расстановке скобок, и, в целом, о том, как выглядит код.

В то время как автоматическое форматирование способствует снижению количества споров, касающихся стиля текстов программ, и помогает улучшить внешний вид кода, оно никак не помогает избавляться от технического долга. Именно поэтому я рекомендую обратить внимание на расширение Tech Debt Tracker.

Средство для управления техническим долгом в действии (источник)

Tech Debt Tracker использует набор показателей для определения сложности кода и потенциального технического долга, который может быть связан с этим кодом. Данное расширение нацелено на JavaScript и TypeScript-код. Оно даёт разработчику рекомендации по поводу улучшения текстов программ и может помочь ему выработать у себя привычку писать чистый и читабельный код.

6. Клавиатурные сокращения

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

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

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

Панель клавиатурных сокращений можно посмотреть, воспользовавшись комбинацией клавиш CTRL + K + S.

Панель клавиатурных сокращений в VS Code

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

Здесь можно найти расширения, которые помогают настраивать клавиатурные сокращения в VS Code.

7. Дзен-режим

Кто не любит работать, не отвлекаясь ни на что постороннее? В дзен-режиме (zen mode) VS Code переводится в полноэкранный режим, из интерфейса исчезает всё, что может отвлечь от работы с кодом. Для перевода редактора в этот режим нужно выполнить особую последовательность действий. А именно, тут используется не сочетание клавиш, а скорее — последовательность сочетаний клавиш. Для того чтобы выяснить, как именно дзен-режим включается у вас — загляните в панель клавиатурных сокращений и поищите по слову zen.

В моём случае для включения дзен-режима используется следующая последовательность сочетания клавиш: сначала — CTRL + Z, и сразу после этого — K. То есть — для перехода в этот режим я сначала нажимаю клавиши

CTRL + Z, отпускаю их, а потом нажимаю и отпускаю K. У вас это может выглядеть иначе. Например — как CTRL + K и Z.

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

8. Git

Прямо из VS Code можно делать коммиты в Git-репозитории. Как оказалось, VS Code очень хорошо поддерживает Git. А именно, тут можно готовить к коммитам изменённые файлы, делать коммиты, откатывать изменения, делать комментарии. В общем — всё, что обычно делается средствами командной строки, можно сделать, не покидая редактора. Тут вам понадобится панель Source Control, открываемая соответствующей кнопкой, расположенной в левой части экрана. Например, для подготовки изменённого файла к коммиту можно воспользоваться кнопкой со знаком +, находящейся в верхней части этой панели. После этого можно вызвать контекстное меню этого файла и найти в нём дополнительные команды.

Хотя всё это можно сделать и в консоли, и воспользовавшись настольным приложением GitHub, возможность работать с Git, не покидая редактора, может помочь в повышении производительности труда программиста.

Тут, опять же, всё дело в сохранении состояния потока. Программист, работая с Git, не покидает привычной рабочей среды. Ему не нужно переключаться между терминалом и редактором, не нужно постоянно думать о том, что где находится. Всё, что нужно для решения различных задач, всегда у него под рукой.

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

9. Отладчик

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

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

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

Кнопка Debug и панель отладки

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

По умолчанию VS Code использует для запуска отлаживаемого кода среду Node.js, но можно сделать так, чтобы для отладки использовался бы отладчик браузера Google Chrome. В целом, можно отметить, что отладка кода — это режим работы, в котором можно обнаружить источники проблем, которые очень непросто найти при обычном выполнении кода.

10. Совместная работа над проектами в режиме реального времени

Вам когда-нибудь доводилось редактировать в Google Docs документ вместе с кем-нибудь другим? Расширение Live Share даёт, в сущности, те же возможности, но в применении к работе над программами. Связь между теми, кто работает в таком режиме, устанавливается через учётные записи GitHub или Azure.

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

Итоги

Эффективность разработчика зависит не только от того, как хорошо он умеет программировать. Она зависит ещё и от того, насколько глубоко он знает используемые им инструменты.

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

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

Уважаемые читатели! Чем вы пользуетесь для написания кода?

Используем 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-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

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

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

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

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

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, вы можете сделать это:

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

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

Как настроить 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.

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

ваша жизнь никогда не будет прежней / Habr

У нас в TestMace Visual Studio Code является одним из самых популярных инструментов. И тем более отрадно, что он развивается семимильными шагами. Вашему вниманию предлагается перевод статьи об еще одной вкусной фиче, которая доступна пока только в VS Code Insiders.

Согласен, немного переборщил с заголовком, просто меня переполняют эмоции. Я решил поделиться своими первыми впечатлениями от удалённой разработки в VS Code, на момент написания статьи доступной в VS Code Insiders.

Расширения для удалённой разработки требуют установки Visual Studio Code Insiders.

Возможность удалённой разработки в Visual Studio Code — это возможность использовать контейнер, удалённый компьютер или подсистему Windows для Linux (WSL) в качестве полноценной среды разработки. При этом весь процесс разбивается на две части: клиентская часть приложения запускается на локальном компьютере, а сервер VS Code практически где угодно. Комплект расширений для удалённой разработки включает в себя три расширения. Следующие три статьи помогут изучить каждое из них более детально:

Remote — SSH — получение доступа к любой директории на удалённой или виртуальной машине с помощью SSH.
Remote — Containers — работа с изолированным набором инструментальных средств или контейнерезированными приложениями внутри контейнера (или подмонированными в контейнер).
Remote — WSL — разработка приложений в подсистеме Windows для Linux (WSL).
Приведу конкретный пример. Допустим, необходимо разработать приложение на каком-либо языке, но на вашем компьютере нет ни самого языка, ни SDK, ни нужных инструментов.

Многие разработчики, пишущие под Windows, создают виртуальные машины Windows в облаке, а затем подключаются к рабочему столу по RDP и рулят виндовыми окошками. При этом виртуальная машина выполняет все сопутствующие операции. Разработчики, пишущие под Linux, создают виртуальные машины Linux или контейнеры и подключаются к ним по SSH через терминал, запускают vim или tmux и строчат в консоль. При этом виртуальная машина выполняет все сопутствующие операции. В обоих сценариях реализуется не клиент-серверное соединение, а взаимодействие терминала или тонкого клиента с сервером. VS Code — толстый клиент с чётким и понятным интерфейсом языковых служб и прозрачностью местоположения.

Когда вы пишете код — например, экземпляр объекта, и после символа точки (.) у вас срабатывает автодополнение названий содержимого этого объекта. Кто выполняет эту работу? Откуда берётся этот список? Если код запускается локально, да ещё и в контейнере, необходимо убедиться, что обе стороны (клиент и сервер) синхронизированы, используют один и тот же SDK и тому подобное. Непростая задача.

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

Тогда производим клонирование следующего репозитория:

git clone https://github.com/Microsoft/vscode-remote-try-rust

Запускаем VS Code Insiders:

C:\github> git clone https://github.com/Microsoft/vscode-remote-try-rust   
Cloning into 'vscode-remote-try-rust'... 
Unpacking objects: 100% (38/38), done.         
C:\github> cd .\vscode-remote-try-rust\
C:\github\vscode-remote-try-rust [main =]> code-insiders .

Затем VS Code интересуется, хотите ли вы открыть данный контейнер.
В файле devcontainer.json содержится список расширений, необходимых для текущего проекта. Расширения VS Code будут установлены в контейнер Docker, а затем их можно будет использовать удалённо. Ваша локальная система вовсе не нуждается во всех них, достаточно установить только те, которые вы планируете использовать в текущем проекте. Конечно, можно обойтись вообще без установки чего-либо на свой локальный компьютер, но золотая середина в том, чтобы избавиться от излишнего ручного конфигурирования системы.

Посмотрите на скриншот ниже. Здесь необходимые вам инструментальные средства добавляются в файл dockerfile, запускается исполняемый файл Docker, и мы видим сервер VS Code!

Зайдите в раздел Extensions в VS Code и обратите внимание на левый нижний угол. Зелёная строка состояния сигнализирует о том, что реализовано клиент-серверное взаимодействие. Все нужные расширения Rust установлены в контейнер и готовы к использованию в VS Code. Весь процесс установки занял считанные минуты.

Редактируя код таким способом, вы получаете те же функции автодополнения, отладки и прочее.

Вот пример сеанса отладки приложения на Rust в режиме реального времени, не требующего никакой настройки, кроме установки VS Code Insiders, Remote Extensions, и Docker (который у меня уже был).

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

Visual Studio Code | Калина Алексей

Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.

Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.

Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:

Скорость. Часто возникает ситуация, когда нужно поправить пару файлов в проекте или посмотреть, как что-то реализовано. В такой ситуации открывать тяжеловесную IDE совсем не хочется. Время запуска VS Code сопоставимо с другими редакторами кода.
Кастомизация. При разработке программ можно повысить свою продуктивность, настроив редактор под себя. Создавайте сниппеты, меняйте комбинации клавиш и создавайте новые, измените внешний вид редактора. VS Code предоставляет большие возможности для кастомизации и сегодня мы посмотрим на них подробно.
Поддержка различных языков. VS Code понимает более 30 языков программирования. Под этим я имею ввиду выделение разными цветами методов, локальных переменных и так далее. Кроме того, из коробки полностью поддерживаются распространенные языки для веб-разработки: JavaScript, TypeScript, HTML, CSS. Для них работают все фичи, которые нужны при полноценной разработке: подсветка ошибок, подсказки по их исправлению, IntelliSense, навигация по коду, отладка, рефакторинг. Однако, это не значит, что остальные языки обделены. Перейдем к следующему пункту.
Расширяемость. В VS Code богатая коллекция плагинов. С их помощью можно не только включить поддержку любых языков программирования, но и значительно повысить свою производительность.
IntelliSense. Все предыдущие пункты не новы для других редакторов кода, но, как уже было сказано, VS Code – не просто редактор кода. Он предоставляет возможности, которые свойственны IDE, и IntelliSense одна из них. Этим термином называется умный автокомплит. Например, во время ввода он может подсказать, какие методы и свойства есть у объекта.
Отладка. Еще одна стандартная фича IDE. Обходы методов, Call Stack, просмотр состояний локальных объектов, точки останова, в том числе и условные – все это есть.

В нужной директории введите в терминал code . и увидите подобную картину: vs-code

Слева находятся пять блоков. Посмотрим, за что отвечает каждый из них. tabs

Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F. При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
Source Control. Встроенная поддержка git и других систем контроля версий.
Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:

В центральной части редактора вкладки с открытыми файлами. Несохраненные также помечаются кружком. При запуске VS Code открывается вкладка Welcome. Начать изучение редактора советую с нее. Открыть ее всегда можно через меню Help. Еще один способ изучить возможности VS Code – нажать CTRL + SHIFT + P. Так вы откроете Command Palette, где перечислены все команды редактора. Рядом с названием команды указывается комбинация клавиш, которая ей соответствует. palette

В нижней части – несколько других полезных вкладок. В Problems перечислены все ошибки и предупреждения от VS Code. Во время отладки можно смотреть значения локальных объектов в разделе Debug Console, а результаты выполнения во вкладке Output. В VS Code есть встроенный терминал, который открывается в корневой директории. По кнопке “плюс” можно добавлять терминалы, например, чтобы выполнять команды в разных директориях внутри проекта. По умолчанию для Windows в VS Code используется Powershell терминал, но это можно изменить. Займемся этим в следующем разделе.

В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.

Изменение темы

Выберете цветовую гамму, которая нравится вам больше. В дефолтном варианте у редактора темная тема. Для смены нажмите CTRL + K, CTRL + T. Если набора из 14 стандартных тем будет недостаточно, введите в разделе с плагинами category:themes и выберете подходящую для вас. themes

Изменение настроек

Все дефолтные настройки VS Code перечислены в формате JSON. Чтобы переопределить их для себя, нужно создать файл settings.json и перечислить настройки, которые вы хотите изменить. Для этого нажмите CTRL + ,. Слева перечислены все стандартные настройки и описание того, зачем они нужны. Справа – две вкладки: для пользовательских настроек и для настроек конкретного workspace. Для изменения дефолтного значения просто кликните на значок карандаша справа от настройки.

Рассмотрим некоторые настройки, которые могут вам пригодиться:

Настройки редактирования.
- Размер шрифта. "editor.fontSize": 14
- Размер таба. "editor.tabSize": 4
- Шрифт. "editor.fontFamily": "Consolas, 'Courier New', monospace"
- Перенос слов. "editor.wordWrap": "on"
Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.
Настройки файлов.
- Автосохранение. "files.autoSave": "on"
- Задержка при автосохранении. "files.autoSaveDelay": 5000
По умолчанию файлы сохраняются только тогда, когда пользователь об этом попросит. Это поведению можно изменить, включив автосохранение файлов. Также можно настроить задержку после ввода перед автосохранением. Величина записывается в миллисекундах.
Терминал.
- Размер шрифта. "terminal.integrated.fontSize": 14
- Выбор терминала. "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
- Тип курсора. "terminal.integrated.cursorStyle": "line"
Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.
Специфичные для языка. Настройки для кода также можно ограничивать конкретными языками. Для этого нужно перед настройкой указать идентификатор языка в квадратных скобках: "[csharp]": { "editor.wordWrap": "off" }. Идентификаторы можно посмотреть в списке всех языков (CTRL + K, M).

Создание задач

Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:

jekyll build
jekyll serve

Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks. В открывшемся файле tasks.json создадим кастомную задачу.

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "jekyll",
            "type": "shell",
            "command": "jekyll build \r\n jekyll serve"
        }
    ]
}

Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File) и добавим нужные комбинации клавиш.

[
    {
        "key": "f5",
        "command": "workbench.action.tasks.runTask",
        "args": "jekyll"
    },
    {
        "key": "shift+f5",
        "command": "workbench.action.tasks.terminate"
    }
]

Также задачи часто используются для автоматизации сборки кода и прогона тестов.

Создание сниппетов

Сниппетом называется фрагмент кода, который можно многократно использовать. Для этого нужно ввести ключевое слово, и он будет вставлен в текст программы. Создадим простой сниппет, который генерирует цикл for для языка C#. В Command Palette введите Preferences. Open User Snippets и выберите нужный язык программирования. Так выглядит сниппет для цикла for:

{
    "Loop For": {
        "prefix": "for",
        "body": ["for (int ${1:i} = 0; ${1:i} < ${2:UPPER}; ${1:i}++)",
    	    "{",
    	    "\t",
    	    "}"
        ],
        "description": "loop for"
    }
}

snippet

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

keymaps Если вы уже привыкли к горячим клавишам в других редакторах или IDE и не хотите из-за этого переходить на VS Code, то вы можете подключить знакомые настройки, просто установив нужный плагин.

Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.

Zen Mode (CTRL + K, Z). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима (F11), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P. Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC.
Markdown Preview (CTRL + K, V). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.

Редактирование кода:

Дублирование строки вниз/вверх (ALT + SHIFT + DOWN/UP).
Перемещение строки вниз/вверх (ALT + DOWN/UP).
Комментирование строки (CTRL + /).

Команды выше работают и для нескольких строк.

Вставка новой строки вверх/вниз (CTRL + ENTER / CTRL + SHIFT + ENTER).
Выделение строки (CTRL + I).
Выделение слова (CTRL + D).
Множественный курсор. (ALT + CLICK).

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

Written on February 17th, 2018 by Alexey Kalina

Feel free to share!

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

Как работать в vs code – 10 возможностей VS Code, помогающих ускорить работу программиста / RUVDS.com corporate blog / Habr

10 возможностей VS Code, помогающих ускорить работу программиста / RUVDS.com corporate blog / Habr

1. Сниппеты

2. IntelliSense

3. Интегрированный терминал

4. Просмотр мест использования сущностей и их определений, рефакторинг

5. Средства форматирования кода и инструменты для управления техническим долгом

6. Клавиатурные сокращения

7. Дзен-режим

8. Git

9. Отладчик

10. Совместная работа над проектами в режиме реального времени

Итоги

Используем 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

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

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

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

Другие хаки

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

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

Содержание

Babel и ES6

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

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

jsconfig.json

Отладка

Ссылки

ваша жизнь никогда не будет прежней / Habr

Visual Studio Code | Калина Алексей

Изменение темы

Изменение настроек

Создание задач

Создание сниппетов

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

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

Установка VS Code

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

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

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

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

Рубрики