Расширения для vs code

7 расширений VS Code для фронтенд-разработчиков

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

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

1. Sourcery для Python

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

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

Вот пример, показывающий, как можно сделать рефакторинг сложного блока if-else:

Sourcery имеет и Pro-версию. В ней вы найдете больше функционала. Например, там есть проверка на дублирование кода.

2. Stepsize для TODO и работы с техническим долгом

Stepsize — issue-трекер в вашем редакторе. С его помощью можно управлять техническим долгом и задачами поддержки.

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

При помощи Stepsize можно:

Вот как делаются закладки и создаются issue:

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

3. Quokka.js для JavaScript

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

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

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

На каком-то этапе моей карьеры коллега посоветовал мне начать пользоваться Quokka.js. Благодаря этому расширению мы вычеркиваем из списка создание файла и процедуру логирования данных. Quokka.js выводит на экран output каждого шага прямо в редакторе и указывает на неправильный код сообщениями в той же строке.

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

Но стоит также упомянуть, что есть и Pro-версия, предлагающая дополнительный функционал:

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

4. Ponicode для модульного тестирования JavaScript-кода

«Ponicode — расширение, работающее на основе AI и генерирующее юнит-тесты. Оно поможет вам быстро и легко создавать, визуализировать и запускать юнит-тесты для ваших функций. И все это — благодаря тестовым сценариям, сгенерированным при помощи машинного обучения».

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

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

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

5. StackFinder для Stack Overflow

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

StackFinder позволяет искать ответы на Stack Overflow, не выходя из редактора VS Code. Кроме того, вы сможете копировать решения в редактор и проверять их в деле.

Конечно, можно открыть браузер и кучу вкладок со Stack Overflow, но с расширением StackFinder поиск ответов ускорится.

Посмотреть, как работает расширение, можно в видео.

6. Wallaby.js

Wallaby.js создали авторы Quokka.js. Это инструмент для повышения продуктивности разработки. Он запускает ваши JavaScript и TypeScript-тесты прямо пока вы пишете их код и высвечивает результаты в IDE рядом с кодом.

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

Как видите, расширение Wallaby.js похоже на Quokka.js выводом сообщений прямо в строке кода.

7. GitLive для лучшей командной работы

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

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

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

Заключение

Самое важное, что можно сделать для повышения производительности разработчика, — устранить отвлекающие факторы. Открытие браузера для поиска ответов на StackOverflow может запустить множество уведомлений, которые вас отвлекут. Да и сам StackOverflow может быть еще тем отвлекающим фактором. StackFinder — интересное и ценное расширение, позволяющее сохранять концентрацию.

А эффективность команд во многом зависит от качества коммуникации в них. И такие расширения, как Stepsize и GitLive, могут пригодиться для ее улучшения.

Управление расширениями для Visual Studio

Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. К числу расширений относятся элементы управления, примеры, шаблоны, инструменты или другие компоненты, расширяющие возможности Visual Studio, например Live Share или Visual Studio IntelliCode.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace. Дополнительные сведения о поиске расширений см. в записи блога Где мои избранные расширения в Visual Studio 2022?.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.

Диалоговое окно «Управление расширениями»

Используйте диалоговое окно Управление расширениями для установки расширений Visual Studio и управления ими. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения>Управление расширениями. Или введите строку Расширения в поле поиска, а затем выберите Управление расширениями.

На левой панели расширения разделены на установленные, доступные в Visual Studio Marketplace (онлайн) и имеющие доступные обновления. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.

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

Установить расширения можно из Visual Studio Marketplace или из диалогового окна «Управление расширениями» в Visual Studio.

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

В диалоговом окне Расширения>Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)

Щелкните Скачать.

Запланирована установка расширения. Расширение будет установлено после закрытия всех экземпляров Visual Studio.

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

Установка без использования диалогового окна «Управление расширениями»

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения>Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.

Удаление или отключение расширения

Если требуется прекратить использование расширения, его можно отключить или удалить. Отключенное расширение сохранится, но не будет загружаться. Найдите расширение и щелкните Удалить или Отключить. Перезапустите Visual Studio, чтобы выгрузить отключенное расширение.

Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.

Расширения на уровне пользователя и администратора

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

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

Откройте страницу параметров расширений (Сервис>Параметры>Среда>Расширения).

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

Перезапустите Visual Studio.

Автоматическое обновление расширений

Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.

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

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения>Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

Чтобы отключить автоматическое обновление для конкретного расширения, снимите флажок Автоматически обновлять это расширение в области сведений о расширении в правой части диалогового окна Управление расширениями.

Уведомления об аварийном завершении работы или зависаниях

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

Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.

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

Выберите Отключить это расширение. Visual Studio отключает расширение и сообщает, нужно ли перезагрузить компьютер, чтобы отключение вступило в силу. Если потребуется, вы можете снова включить расширение в диалоговом окне Расширения>Управление расширениями.

Выберите Больше не показывать это сообщение.

Выберите Дополнительные сведения, чтобы перейти к этой странице.

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

Уведомление о зависании или аварийном завершении пользовательского интерфейса означает только то, что один из модулей конкретного расширения находился в стеке в тот момент, когда произошло аварийное завершение. Это не обязательно означает, что расширение стало причиной сбоя. Возможно, расширение вызвало внутренний код Visual Studio, который привел к аварийному завершению или зависанию пользовательского интерфейса. Но эти уведомления могут быть полезны, если расширение, приводящее к аварийному завершению или зависанию пользовательского интерфейса, не очень важно для вас. Отключив такое расширение, вы сможете избежать аналогичных проблем в будущем без ущерба для производительности.

Примеры

При установке примера из сети решение сохраняется в двух местоположениях:

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

Отдельный контрольный экземпляр сохраняется на компьютере.

Диалоговое окно «Управление расширениями>» можно использовать для выполнения следующих задач, связанных спримерами:

Отобразить список контрольных экземпляров установленных образцов.

Отключить или удалить контрольный экземпляр образца.

Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.

Установить отдельные примеры из сети.

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

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

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

Перевод первой части статьи «VS Code Performance – How to Optimize Visual Studio Code and Choose the «Best» Extensions».

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

Но по мере роста вашей коллекции расширений производительность неизбежно пострадает.

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

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

Минимальные аппаратные и программные требования

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

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

Железо

Минимальное оборудование, которое я рекомендую:

Операционные системы

VS Code был протестирован в следующих операционных системах:

Неофициальные сборки для Raspberry Pi и Chromebook

Джей Роджерс выпустил проект с открытым исходным кодом, который выполняет ночные сборки VS Code для Raspberry Pi и Chromebook.

«Я поддерживаю этот проект в течение нескольких лет. За это время он расширился от предоставления двоичных файлов для Pi до предоставления поддержки и инструментов для запуска VS Code на устройствах ARM низкого технического уровня. Без этого проекта такие устройства как Chromebook (составляющие около 60 % устройств в школах сейчас) не поддерживали бы VS Code».

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

Не все расширения одинаково полезны

Расширения загружаются и выгружаются при разных условиях, которые определяет автор расширения. Определяются эти условия через «события активации», о которых мы поговорим позже.

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

Большинство расширений написано на TypeScript, но они также могут быть написаны на JavaScript. Расширения могут включать Node-модули в качестве зависимостей.

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

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

Расширения, написанные Microsoft, тоже не застрахованы от недостатков, но все же меньше им подвержены.

Критерии выбора расширения

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

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

1. Доступна ли уже эта функция в VS Code?

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

2. Есть ли в расширении необходимые мне функции?

Чтобы узнать об этом, обратитесь к странице расширения в Visual Studio Marketplace.

3. Когда расширение загружено и активно?

Я подробно расскажу об этом в разделе «События активации». Чтобы узнать это заранее, нужно проверить package.json в исходном коде.

Вы можете запустить команду Developer: Startup Performance, чтобы увидеть события активации установленных расширений. Я вернусь к этой теме в разделе «Как проводить аудит эффективности».

4. Оптимизированы ли ресурсы?

Вам нужно проверить исходный код, чтобы узнать, использует ли он сборщик. Можно проверить package.json, чтобы посмотреть, есть ли в разделе сценариев этап предварительной сборки.

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

Так выглядит расширение Vetur, когда вы открываете его в 7Zip.

5. Сообщалось ли в последнее время о нерешенных проблемах с производительностью?

Вы можете обнаружить подобные проблемы во время проверки производительности расширения. Также стоит проверить issues в репозитории Git.

6. Есть ли в коде тесты?

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

7. Расширение активно поддерживается?

В разделе Project Details («Сведения о проекте») на странице расширения можно увидеть обзор активности общедоступного репозитория Git. В некоторых случаях расширение может быть «закончено», поэтому поддержка не будет важным фактором.

События активации

События активации — это события, которые запускают активацию расширения. Они определяют условия его загрузки и вызгрузки.

Автор расширения указывает эти условия в поле activateEvents файла package.json (Extension Manifest).

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

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

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

Событие «запуск»

Событие активации * активирует расширение при запуске VS Code. Эти расширения всегда будут активны, и это повлияет на время запуска VS Code.

В документации VS Code приведен такой совет:

«Чтобы обеспечить удобство работы конечного пользователя, используйте это событие активации в своем расширении только в том случае, если никакая другая комбинация событий активации не работает в вашем варианте использования».

Популярные расширения с этим событием активации: ESLint (11 млн установок), Live Server (7,4 млн установок), GitLens (6,5 млн установок), Beautify (5,4 млн установок), Bracket Pair Colorizer (3,6 млн установок), Git History (2,9 млн установок) ), Settings Sync (2 млн установок), indent-rainbow (1,1 млн установок).

Событие onStartupFinished

Популярные расширения с этим событием активации: Prettier (8,5 млн установок).

Событие onLanguage

Расширение активируется при открытии файла на определенном языке.

Событие onLanguage принимает в качестве значения идентификатор языка. Вы можете объявлять столько языков, сколько хотите.

Популярные расширения с этим событием активации: большинство расширений в категории «Programming Languages» («языки программирования») на торговой площадке Visual Studio Code имеют среди событий активации onLanguage. Если говорить более конкретно, Vetur (5,6 млн установок) — активируется только для Vue, YAML (4,3 млн установок) — активируется только для YAML, Better Comments (1,1 млн установок — активируется только для поддерживаемых языков.

Событие workspaceContains

Это расширение активируется, когда вы открываете папку, содержащую как минимум один файл, совпадающий с шаблоном.

Событие onCommand

Это расширение активируется при вызове команды.

Прочие события активации

Последовательно ли устанавливаются события активации для расширений?

Слишком много расширений используют событие активации *.

Вот как я бы оценил ситуацию для некоторых расширений, которые сам использовал:

Плохо:

Prettier: было бы лучше нацеливаться только на поддерживаемые языки.

Markdown All in One: он активен, когда открыт markdown-файл или рабочее пространство содержит файл README.md. Последнее мне кажется ненужным.

Ужасно: все расширения с событием активации *, упомянутым выше.

Как сборка может влиять на производительность расширения?

Он раскрывает результаты исследования двух расширений Microsoft:

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

Как проводить аудит производительности

Чтобы получить базовую статистику о запущенных расширениях, можно запустить команду Developer: Show Running Extensions. Она сортирует расширения от самого длительного до самого короткого времени активации. Если расширение загружается при запуске, время будет называться Startup Activation.

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

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

Вы можете проверить производительность запуска, выполнив команду Developer: Startup Performance. Вам откроется документ с подробной статистикой по таким темам:

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

Раздел «Extension Activation Stats» («Статистика активации расширений») дает более подробный обзор производительности расширений. Это очень полезно для просмотра событий активации без проверки исходного кода расширения.

Вы можете видеть, что VS Code при запуске также загружает свои собственные «основные» расширения для Git, Emmet и некоторых других. 🧐Следите за тем, чтобы список расширений, загружаемых при запуске, не становился слишком длинным!

Производительность VS Code: как подобрать самые лучшие расширения. Часть 2

Перевод второй части статьи «VS Code Performance – How to Optimize Visual Studio Code and Choose the «Best» Extensions».

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

Показатели нескольких самых популярных расширений

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

ESLint

ESLint — самый популярный инструмент статического анализа для JavaScript и TypeScript. Он выделяет проблемы в редакторе красными волнистыми линиями.

ESLint — надежное расширение. Производительность отличная.

Обидно только, что загружается при запуске. Если вас это беспокоит, вы можете попробовать JSHint (написанный тем же разработчиком) для JavaScript и TSLint для TypeScript. Или вы можете форкнуть проект и изменить его самостоятельно!

Проект ESLint активно поддерживается. У него нет значительного набора тестов.

Prettier

Prettier — инструмент форматирования кода. В настоящее время он поддерживает следующие языки: JavaScript, TypeScript, Flow, JSX, JSON, CSS, SCSS, Less, HTML, Vue, Angular, GraphQL, Markdown, YAML.

Prettier отлично справляется с упрощением форматирования кода.

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

Было бы желательно настроить активацию только для поддерживаемых языков.

Live Server

Live Server запускает локальный сервер разработки для предварительного просмотра ваших файлов HTML и SVG.

Когда расширение работает, оно удобное. Производительность оставляет желать лучшего, к тому же расширение больше не поддерживается.

Я бы порекомендовал стать мейнтейнером и довести его до ума. Или найти другое расширение для работы.

GitLens

GitLens помогает визуализировать авторство кода и исследовать репозитории Git.

GitLens — хорошая идея, которая может быть полезна для понимания кодовой базы.

Расширение хорошо написано, да и производительность отличная.

Я использовал только расширение для blame-аннотаций, но там есть много функций и параметров конфигурации (135 индивидуальных настроек!).

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

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

Vetur

Поддержка языка Vue.

Vetur — это стандартное расширение для разработки приложений на Vue в VS Code.

Подсветка синтаксиса, intellisense и ссылки при наведении отлично подходят для разработки Vue.

Размер расширения ОГРОМНЫЙ.

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

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

Settings Sync

Settings Sync — синхронизация настроек с помощью GitHub Gist.

Это было выдающееся расширение. Синхронизация полной настройки редактора на разных машинах очень полезна. Именно поэтому с июля 2020 года такой же функционал стал встроенной фичей VS Code. Основное отличие состоит в том, что расширение сохраняет ваши настройки в gist, которым вы также можете поделиться с другими.

Время активации довольно медленное. Это оправданно? Сложно сказать.

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

Markdown All in One

Markdown All in One удовлетворяет многие ваши потребности по части работы с markdown.

Это надежное расширение с отличной производительностью.

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

Событие активации workspaceContains: README.md мне кажется ненужным. У большинства моих проектов есть README, но я редко их редактирую. Так что для меня это показатель того, что расширение всегда активно.

Логика оглавления немного банальная. В прошлом были проблемы с ложными срабатываниями. Я не знаю, было ли это полностью устранено.

Размер файла расширения можно уменьшить, исключив снимки экрана README из пакета расширения.

Общие советы по производительности

Используйте 64-битную ОС

Если вы обновитесь до 64-разрядной версии ОС, вы сможете увеличить объем виртуальной памяти (VM), доступной для VS Code, с 2 ГБ до 4 ГБ.

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

Отключите восстановление состояния проекта при запуске

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

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

Отключите дорогостоящие функции, которые влияют на производительность редактирования

Отключите расширения для рабочего пространства

Вы можете отключать те или иные расширения для конкретного рабочего пространства (проекта).

Скорее всего, вы захотите сделать это для расширений, работающих постоянно. Для проекта Java вам не понадобится ESLint!

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

Создайте наборы расширений

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

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

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

В идеале у вас не должно возникнуть такой потребности.

Отключите все расширения для сессии

Вы можете запустить VS Code со всеми отключенными пользовательскими расширениями из командной строки. Дзен-режим плюс плюс!

Устранение проблем с производительностью

Медленная работа или пустой экран

VS Code имеет некоторые проблемы с аппаратным ускорением GPU (графического процессора) в некоторых системах. Вы можете проверить, так ли это, отключив ускорение графического процессора.

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

Установка повреждена, выводится сообщение [Unsupported]

VS Code выполняет фоновую проверку при запуске, чтобы проверить, изменили ли вы какой-либо из его исходных файлов. Если это так, вы увидите текст [Unsupported] в строке заголовка.

Одной из причин этой проблемы может быть антивирусное программное обеспечение. VS Code мог быть ошибочно помещен в карантин или его файлы могли быть удалены антивирусным ПО (см. issue № 94858). Проверьте настройки вашего антивируса, чтобы предотвратить это.

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

Заключительные слова

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

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

Любовь к программированию начинается с расширений VS Code

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

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

Вы готовы? Здесь и сейчас я расскажу вам о расширениях VS Code, которые не только помогут улучшить продуктивность, но и придадут соблазнительный вид вашему коду. ( ͡° ͜ʖ ͡°)

Статья состоит из 2 частей:

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

Сколько времени уже работаю с кодом в этом текстовом редакторе, но каждый раз восхищаюсь им все больше! (͠≖ ͜ʖ͠≖) Но довольно отступлений — к делу!

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

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

1. WakaTime

Это одно из моих любимых расширений, а будь оно бесплатным, стало бы самым любимым.

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

Данный тайм-трекер предоставляет отличный отчет о всех ваших действиях с кодом, и выглядит он так:

2. Visual Studio IntelliCode

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

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

Посмотрим, как это работает:

3. Terminal Here

Для тех программистов, кто не прочь посоревноваться, не использует IDE и предпочитает писать код в текстовом редакторе, я приготовил кое-что интересное!

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

Terminal Here открывает текущую рабочую директорию в терминале VS Code.

4. Live Server

Вы представить себе не можете, насколько важен этот плагин!

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

5. ReactJS Code Snippets

Если вы React разработчик и до сих пор не используете ReactJS Code Snippets, то вам явно не жаль своего времени! При помощи этого плагина можно хорошо его сэкономить и создавать компоненты, используя уже готовые сниппеты кода. ヽ(͡◕ ͜ʖ ͡◕)ﾉ

Еще один пример:

6. Python

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

7. Path Intellisense

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

Path Intellisense автоматически заполнит для вас путь, чтобы вы смогли сконцентрироваться на более важных делах. ( ͡^ ͜ʖ ͡^)

8. NPM Intellisense

Если вы по достоинству оценили предыдущий плагин, и к тому же вы разработчик Node, то это расширение также не оставит вас равнодушным. Кто же откажется от автозавершения или подсказок в процессе импорта библиотек npm?

9. Markdownlint

Откройте наугад несколько проектов с открытым ПО на GitHub, и вы заметите у них одну общую черту — плохое стилевое оформление README.md. ( ͡ಠ ʖ̯ ͡ಠ)

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

Markdownlint — расширение Visual Studio Code, которое содержит библиотеку правил для соблюдения стандартов и согласованности файлов Markdown.

Советую, как можно быстрее установить его и настроить ваш Markdown 🙂

10. Markdown Preview Enhanced

Если мы с вами на одной волне, то вы, как и я, давно отказались от Microsoft Word и других ПО для создания текстовых документов. Для этой цели у нас есть Markdown. Установите данный плагин и увидите, как изменится ваш Markdown.

11. Auto Close Tag

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

12. Auto Rename Tag

Еще одно расширение в этом разделе — Auto Rename Tag, которое автоматически переименовывает закрывающиеся теги, если вам это необходимо. ( ͡

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

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

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

1.Prettier — инструмент для форматирования кода

Сначала я хотел внести Prettier в список расширений для продуктивности, но так как он связан со стилем, расскажу о нем здесь.

До сих пор существует противостояние, известное как “табуляция против пробелов” (и я вообще не понимаю тех, кто использует 8 пробелов), и вам, возможно, приходится преобразовывать одно в другое, но данное расширение возьмет на себя задачу добавления/удаления пробелов в коде.

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

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

2. Rainbow Brackets

Не такое уж полезное расширение (к сожалению), но ведь скобки разных цветов выглядят бесподобно. ( ͡° ͜ʖ ͡°)

В вашем распоряжении все цвета радуги для круглых, квадратных и фигурных скобок. Rainbow Brackets может пригодится программистам Lisp, Clojure, JavaScript и многим другим.

3. Snazzy Operator

Вот он мой любимчик, хотя вы можете подумать, что это одна из тем VS Code.

Snazzy Operator требует предварительной установки шрифта Operator Mono.

4. vscode-styled-components

И наконец, последний в списке — vscode-styled-components, удивительный плагин для выделения синтаксиса и автозавершения.

Между прочим, вы заметили одну деталь в первом скриншоте статьи? Если нет, то повторю его еще раз:

Неужели не заметили? Тогда даю подсказку — посмотрите на терминал:

Если вы из числа пользователей Linux или Mac, то для вас это не ново, но для всех моих друзей, работающих в Windows, это стало открытием, не так ли?

Главным образом я использую тему “agnoster” фреймворка Oh-My-Zsh на WSL. Более подробную информацию о них вы можете найти в Google.

Расширения VSCode, которые облегчат разработку на JavaScript и Vue

На сегодняшний день существует достаточное количество средств для разработки с поддержкой языка JavaScript и основанных на нем фреймворков. Вопрос выбора конкретного инструмента стоит вне этой статьи, тут же я постараюсь описать свой пользовательский опыт работы с Visual Studio Code и средствах, которые призваны облегчить жизнь JS разработчикам, в частности тем, кто использует Vue.

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

HTML & CSS

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

JavaScript

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

VSCode имеет поддержку работы с git из коробки, но всё же встроенных функций хватает не всегда. Ниже приведены расширения, которые сделают работу с git немного проще:

Рабочее окружение и процесс разработки

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

Оформление редактора

Так же может быть интересно

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

Топ-6 расширений VS Code для организации кода и процессов

Перевод статьи «Top 6 VS Code Extensions to Organise Your Code».

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

1. TODO Highlight

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

2. Todo Tree

Расширение Todo Tree собирает все ваши задачи, разбросанные по всему приложению, которым занимается ваша команда, в одно дерево в левой части рабочего пространства редактора. Благодаря этому вы сможете легко находить теги комментариев, такие как TODO и FIXME, и видеть, где они находятся в древовидной структуре.

3. Stepsize

Stepsize выходит за рамки простого подсвечивания TODO. Это расширение дает вам возможность:

4. Trello Viewer

Это расширение для любителей досок Trello. С его помощью вы сможете:

5. GitKraken Boards

Если вы хотите отслеживать прогресс ваших карточек, назначать задачи, связывать карточки с пул-реквестами GitHub — GitKraken Boards поможет вам в этом (и многом другом)!

6. Project Dashboard

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

Расширения VSCode, на которые стоит обратить внимание в 2022 году

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

1. Copilot

GitHub Copilot — ваш ИИ-напарник в программировании. Он по мере вашего ввода предлагает дополнение строк и целых функций.

В основе GitHub Copilot лежит ИИ-система OpenAI Codex, обученная на открытых текстах и миллиардах строк кода.

Copilot поддерживает разные языки программирования.

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

2. Trunk

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

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

3. Stepsize

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

Stepsize работает с разными issue-трекерами, такими как ira, Asana, Azure DevOps, Linear и др.

С этим расширением вы сможете:

От редакции Techrocks. Рекомендуем статью «10 расширений VS Code для работы с техническим долгом».

4. CodeTour

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

«Экскурсии» CodeTour представляют собой серии интерактивных шагов, каждый из которых связан с определенной директорией (файлом, строкой) и включает описание соответствующего кода.

5. Peacock

С помощью Peacock можно изменить цвет рабочего пространства VSCode и разных вкладок в редакторе. Это идеальное решение для тех, у кого бывает запущено несколько экземпляров VS Code, кто использует VS Live Share или функции редактора для удаленной работы. Разные цвета позволяют быстро определять нужное окно редактора.

Например, если вы работаете одновременно над фронтендом и бэекендом, разные цвета помогут вам различать используемые репозитории.

От редакции Techrocks. Рекомендуем статью «Лучшие расширения VS Code для удаленной работы».

6. Polacode

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

Polacode позволяет добавить в скриншот тень и отступы, закруглить углы и спрятать все лишнее. Благодаря этому ваши скриншоты будут выглядеть просто и профессионально.

От редакции Techrocks. Кстати о скриншотах: у нас есть статья «5 отличных инструментов для создания скриншотов кода».

7. Ponicode

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

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

8. Marquee

Расширяемая платформа для управления множеством окон VS Code. Расширение естественным образом интегрируется в ваш процесс разработки и сводит к минимуму проблему переключения контекста.

9. Vscode-spotify

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

Малоизвестные приемы работы в VS Code для повышения продуктивности

Перевод статьи «Here are some super secret VS Code hacks to boost your productivity».

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

Я собрал небольшую коллекцию советов, приемов и расширений для работы в Visual Studio Code, а для этой статьи выбрал из них самые редкие и при этом самые полезные для разработчика. Как мы знаем, экосистема JavaScript очень велика и по-прежнему растет. Поэтому я постараюсь быть как можно более непредубежденным.

Делаем VS Code красивым и дружелюбным

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

1. Material — тема и значки

Я считаю, что «материальная» тема больше всего напоминает письмо при помощи ручки и бумаги, только в редакторе (особенно если вы не используете контрастный вариант этой темы). Переход от встроенных инструментов к текстовому редактору происходит максимально гладко.

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

2. Zen Mode («дзен-режим») с центрированием

Вероятно, вы уже знакомы с Zen Mode View, также известным как Distraction Free View («неотвлекающий» режим). Те, кто раньше пользовался Sublime Text, наверняка его знают. В этом режиме с экрана удаляется все, кроме кода. Но знаете ли вы, что можно сделать так, чтобы код в этом режиме располагался по центру экрана? Это очень помогает сфокусироваться на коде.

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

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

Можете попробовать шрифт Fira Code — он красивый (а кроме того еще и опенсорсный). Вот как поменять шрифт в VSCode (после того как установили его):

«editor.fontFamily»: «Fira Code»,»editor.fontLigatures»: true

4. Rainbow Indent («радужный отступ»)

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

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

5. Настройка панели названия

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

Цвет меняется путем редактирования настроек панели названия (Title Bar) в настройках окружения (Workspace Settings) в каждом проекте, где вы хотите сменить цвет панели.

Более быстрый кодинг

Суть-то в том, чтобы завершить работу вовремя.

1. Окружение тегами (Tag Wrapping)

Если вы не знакомы с Emmet, вам, наверное, нравится печатать все собственноручно. Emmet позволяет вам вводить сокращенный код и получать соответствующие теги. Делается это путем выделения кода и ввода команды Wrap with Abbreviated (я для этого назначил специальное сочетание клавиш shift+alt+). Посмотрите на примере, как это происходит:

Допустим, вы хотите окружить тегами весь этот код, но в качестве отдельных сток. Для этого нужно использовать wrap with individual lines, а затем вставить * после сокращения, например, div*.

Если вас заинтересовал Emmet, возможно, вам будет интересна эта шпаргалка.

2. Балансировка внутрь и наружу

Этот совет взят с сайта https://vscodecandothat.com/, который я всячески рекомендую.

В VS Code можно выделять теги и их содержимое при помощи команд Emmet — balance inward (балансировка внутрь) и balance outward (балансировка наружу). Будет полезным назначить этим командам сочетания клавиш, например, Ctrl + Shift + стрелка вверх для Balance Outward и Ctrl + Shift + стрелка вниз для Balance Inward.

3. Turbo Console.log()

Иногда для отладки нужно часто выводить в консоль большое количество информации. Этот процесс можно значительно ускорить при помощи расширения Turbo Console Log. Оно автоматически вставляет строку с вызовом console.log сразу за выделенной переменной:

Также можно за один раз (при помощи команд Alt+Shift+u/ и Alt+Shift+c ) раскомментировать (или закомментировать) все логи, добавленные этим расширением. Более того, их все можно удалить при помощи команды Alt+Shift+d.

4. Live server

Прекрасное расширение, которое поможет вам запустить локальный сервер с функцией «живой» перезагрузки для статических и динамических страниц.

А при помощи VSCode LiveShare можно даже поделиться своим localhost.

5. Копирование и вставка с множественными курсорами

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

Обратите внимание на пример:

6. Хлебные крошки

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

Разное

Мелочи, способные всё изменить.

1. Code CLI

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

2. Polacode

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

Этот скрин был сделан при помощи расширения Polacode.

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

3. Quokka (JS/TS ScratchPad)

Quokka это «песочница» для прототипирования на JavaScript и TypeScript. Код запускается немедленно по мере ввода. При этом в редакторе вы видите различные результаты выполнения и console log-и.

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

5. WakaTime

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

Использование расширения Visual Studio Code

Обзор

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

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

Power Platform Tools добавляет возможность настраивать порталы с помощью VS Code и использовать встроенный язык Liquid IntelliSense для упрощения завершения кода, с подсказками и помощью при настройке интерфейса порталов с помощью VS Code. Используя расширение VS Code, вы также можете настраивать порталы через поддержку порталов для Microsoft Power Platform CLI.

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

Перед использованием расширения VS Code для порталов Power Apps необходимо:

Загрузить, установить и настроить Visual Studio Code. Дополнительные сведения: Загрузка Visual Studio Code

Настройте свою среду и систему для порталов Power Apps с поддержкой CI/CD с помощью интерфейса командной строки. Больше информации: Поддержка порталов для Microsoft Power Platform CLI (предварительная версия)

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

После установки Visual Studio Code необходимо установить расширение для подключаемого модуля порталов Power Apps для VS Code.

Для установки расширения VS Code:

Откройте Visual Studio Code.

Выберите (Расширения ) в левой области.

Выберите в правом верхнем углу панели расширений.

Найдите и выберите Power Platform Tools.

Выберите Установить.

Убедитесь, что расширение успешно установлено по сообщениям о состоянии.

Загрузите контент порталов

Для аутентификации в среде Microsoft Dataverse и чтобы загрузить контент порталов, обратитесь к учебнику Использование интерфейса командной строки Microsoft Power Platform с порталами — загрузка контента порталов.

Расширение Power Platform Tools автоматически позволяет использовать команды интерфейса командной строки Microsoft Power Platform из VS Code через встроенный терминал Visual Studio.

Поддержка фрагмента кода

При настройке загруженного контента с помощью VS Code теперь вы можете использовать IntelliSense для порталов Power Apps — теги Liquid.

Значки файла

Расширение VS Code для порталов автоматически определяет и отображает значки файлов и папок внутри загруженного содержимого порталов.

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

Для включения темы значков файлов, специфичных для порталов:

Откройте Visual Studio Code.

Перейдите Файл > Параметры > Тема значка файла

Выберите тему для значков порталов Power Apps.

Предварительная версия в реальном времени

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

Для предварительного просмотра выберите в правом верхнем углу, если HTML-файл открыт в режиме правки.

Область предварительного просмотра открывается с правой стороны редактируемой страницы.

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

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

Автозавершение

Возможность автозавершения в расширении VS Code показывает текущий редактируемый контекст и соответствующие элементы авторазрешения через IntelliSense.

Ограничения

Следующие ограничения в настоящее время применяются к Power Platform Tools для порталов:

Расширения VS Code для Python-разработчиков

Хочешь знать больше о Python?

Подпишись на наш канал о Python в Telegram!

Python — мощный язык программирования, используемый во многих приложениях. Его применяют и в веб-разработке, и в data science, и в компьютерном зрении, и в DevOps, и во многих других сферах. Разумеется, наличие подходящих инструментов помогает Python-разработчикам применять этот язык максимально эффективно и удобно для себя.

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

Языки программирования

В этом разделе перечислены расширения для автодополнения, проверки синтаксиса и т. п.

Python by Microsoft

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

Pylance

Расширение помогает писать более качественный код на Python и делать это быстрее. Предлагаемый функционал: Docstrings, предложение параметров, дополнение кода, автоимпорты, сообщения об ошибках и предупреждения по мере набора кода, режим проверки типов, семантическая подсветка и т.д.

Jupyter

Базовая поддержка тетрадей для ядер языка, поддерживаемых в Jupyter Notebooks.

Docker

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

Code Runner

Это расширение аналогично Python by Microsoft. Оно позволяет быстро и легко запускать сниппеты кода в редакторе. Пригодится для запуска, тестирования и отладки кода.

Сниппеты кода

Здесь собраны расширения, дающие возможность генерировать код сочетаниями клавиш.

Djaneiro

Djaneiro облегчает разработку проектов на Django благодаря генерации шаблонов Django, форм, моделей и функций прямо в вашем редакторе. Делается это при помощи аббревиатур.

Django

Это расширение предоставляет подсветку синтаксиса и сниппеты кода для Django-проектов.

Flask Snippets

Коллекции Flask-сниппетов, перенесенных из PyCharm, TextMate, SublimeText и других редакторов и IDE.

Kubernetes

Это расширение поможет devops-инженеру создавать приложения, которые запускаются в кластерах Kubernetes, и решать проблемы, связанные с такими приложениями.

Cloud Code

Расширение облегчает разработку кластеров Kubernetes, отладку подов и выполнение многих других задач.

AI-ассистенты

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

TabNine

TabNine — это AI-ассистент с открытым кодом. Он предлагает дополнение кода, основываясь на контексте и истории ваших предыдущих команд. Это расширение поддерживает не только Python, но также и Java, C#, Go и другие языки.

Github Copilot

AI-ассистент, помогающий программистам писать код быстрее. Это ваш напарник, предлагающий дополнение строк и даже целых функций по мере ввода. В основе GitHub Copilot лежит AI-система OpenAI Codex, обученная на публично доступных текстах и миллиардах строк кода.

Инструмент, аналогичный Github Copilot. Поддерживает все основные языки программирования: Python, Java, Go, PHP, C/C#/C++, JavaScript и т. д. В основе автодополнения кода от Kite лежат модели машинного обучения, обученные на 25 млн. файлов open-source.

Контроль версий

От редакции Techrocks: также предлагаем почитать статью «Самые лучшие расширения VS Code для работы с Git».

GitLens

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

Линтеры, инструменты форматирования, подсветка

Здесь вы найдете расширения для дополнительного анализа кода.

Pylint

Расширение, помогающее разработчикам находить ошибки в Python-файлах. Оно анализирует исходный код и ищет ошибки, например, синтаксические. Также Pylint следит за стилем кода, например, за длиной строк.

Python Indent

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

Indent rainbow

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

Trailing Spaces

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

Docstring

Auto Docstring

С помощью этого расширения вы сможете автоматически генерировать строки документации для скриптов на Python.

Markdown

Расширения, которые помогут вам писать и просматривать markdown-файлы.

Markdown All in One

Как заявлено в названии, это расширение предоставляет все необходимое для работы с файлами в разметке markdown: сочетания клавиш, автоматический предпросмотр и многое другое.

MarkdownLint

Расширение для линтинга и проверки стиля Markdown.

Markdown Preview Enhanced

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

Markdown PDF

Расширение для конвертации Markdown-файлов в pdf, html, png или jpeg-файлы.

Базы данных

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

Sqlite

Расширение для просмотра и создания запросов к базам данных SQLite.

MySQL

Инструмент для управления MySQL.

SQLTools

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

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

В этот раздел вошли расширения для написания и запуска тестов.

Python Test Explorer

Позволяет запускать тесты Python Unittest, Pytest или Testplan с пользовательским интерфейсом Test Explorer.

Code Coverage

Расширение помогает разработчикам измерять покрытие кода тестами. Оно подсвечивает строки кода, не покрытые тестами.

Итоги

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

Ненужные расширения для VS Code

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

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

1. Автоматическое переименование и закрытие тегов

Речь идёт о двух возможностях. Во-первых — это возможность одновременного переименования открывающих и закрывающих тегов. Во-вторых — возможность автоматического закрытия тегов.

Автоматическое переименование открывающего и закрывающего тегов

▍Расширения

▍Возможности VS Code

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

Для включения этой возможности надо добавить следующее в settings.json :

Пока поддерживаются только HTML-файлы, но в трекере проекта есть открытая задача, касающаяся поддержки JSX-файлов.

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

2. Синхронизация настроек

Теперь VS Code поддерживает синхронизацию настроек между разными компьютерами. Эта возможность доступна, начиная с предварительной версии VS Code 1.48 (июльский релиз 2020 года).

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

▍Расширение

▍Возможности VS Code

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

Для синхронизации можно пользоваться учётными записями Microsoft или GitHub, можно указывать то, что необходимо синхронизировать.

Выбор объектов, которые нужно синхронизировать

3. Управление импортом модулей

Управление импортом JavaScript- и TypeScript-модулей может представлять собой непростую задачу, особенно в том случае, если нужно реорганизовать проект или отрефакторить код. Разработчики стремятся, по возможности, это автоматизировать.

▍Расширения

▍Возможности VS Code

Кроме того, если вы хотите упорядочивать команды импорта при сохранении файлов, вам понадобится следующая настройка:

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

4. HTML- и CSS-сниппеты

Возможно, вы решите, что вам пригодилось бы следующее:

▍Расширения

▍Возможности VS Code

Добавление шаблонного HTML-кода в файл

Emmet поддерживает и сокращения, позволяющие вставлять в документы группы элементов. Их устройство напоминает CSS-селекторы.

Например, введём в HTML-файле такую конструкцию:

Это — лишь очень краткий рассказ о возможностях Emmet в сфере HTML. VS Code предлагает похожие возможности и для CSS. Среди этих возможностей мне больше всего нравится автоматическое добавление префиксов производителей браузеров. Подробности об Emmet вы можете найти в документации к этому набору инструментов. Кроме того, вам может пригодиться эта шпаргалка по Emmet.

Emmet поддерживает не только обычные HTML и CSS. Например, чтобы пользоваться Emmet при создании Vue-приложений и при написании JavaScript-кода, в settings.json нужно добавить следующее:

Если вы хотите включить поддержку Emmet для markdown, то вам следует знать об одной особенности (или, скорее, об ошибке). Она заключается в том, что для этого вам нужно, чтобы в emmet.excludeLanguages был бы записан пустой массив:

Обсуждение этого можно найти здесь.

5. Шаблонный текст

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

▍Расширение

▍Возможности VS Code

Ввод сокращения lorem

Это сокращение можно использовать не только при создании одного абзаца текста, но и, например, для генерирования нескольких блоков каких-то элементов. Скажем, конструкция p*2>lorem приведёт к созданию двух элементов

, заполненных шаблонным текстом:

6. Автоматическое удаление хвостовых пробелов

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

▍Расширения

▍Возможности VS Code

Итоги

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

Стремитесь ли вы всегда, когда это возможно, пользоваться стандартными возможностями VS Code, а не расширениями?

Как создать расширение Visual Studio Code

Visual Studio Code – это редактор кода от Microsoft, доступный для систем Windows, Linux и macOS. Для внедрения дополнительных функций он предлагает готовые расширения, которые вы можете установить через Visual Studio Code Marketplace. Но если вы не можете найти расширение, которое делает именно то, что вам нужно, вы можете создать необходимое расширение самостоятельно.

В этом руководстве вы узнаете, как создать свое первое расширение Visual Studio Code.

Требования

Для выполнения этого урока нужно:

Это руководство было проверено на версиях Node v14.4.0, npm v6.14.5, yo v3.1.1 и generator-code v1.2.16.

1: Установка инструментов

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

Чтобы начать разработку расширений VS Code, вам понадобятся два пакета npm:

Используйте встроенный терминал Visual Studio Code, чтобы при помощи npx запустить локальные копии yo и generator-code, а затем введите команду yo code для инициализации вашего нового проекта:

После этого Yeoman запустит генератор кода.

2: Создание расширения

Теперь вы готовы начать разработку вашего первого расширения. На вашем экране вы увидите сообщение:

Сейчас вам нужно будет ответить на несколько вопросов о проекте: указать, какое расширение вы создаете, а также выбрать между TypeScript и JavaScript. В этом уроке мы выберем JavaScript.

Затем вам будет предложено еще несколько вопросов. В этом мануале мы выбрали следующие ответы:

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

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

Мы вернемся к ним в ближайшее время.

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

В выделенной ниже строке мы регистрируем в VS Code нашу команду. Обратите внимание, что имя helloWorld совпадает с именем команды в package.json. Это не случайно. Пакет package.json определяет, какие команды доступны пользователю, но файл extension.js регистрирует код для этой команды.

В этом примере наша команда будет только отображать на экране пользователя сообщение «Hello World».

3: Отладка расширения

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

В этом файле проводится отладка расширения. Откройте вкладку debug в левой части экрана, а затем кликните на плей.

Это откроет новый (отладочный) экземпляр VS Code.

Открыв его, вы можете развернуть палитру команд (с помощью Command + Shift + P на Mac или Ctrl + Shift + P в Windows) и запустить Hello World.

Вы увидите всплывающее сообщение «Hello World» в правом нижнем углу.

4: Редактирование расширения

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

Теоретически это событие может быть любым (что определяется символом *). Если установить для события активации значение *, то ваше расширение будет загружено при запуске VS Code.

Примечание: Этого делать не нужно, это просто комментарий.

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

Сначала давайте обновим название нашей команды. Откройте extension.js и обновите имя команды с extension.helloworld на extension.createBoilerplate.

Соответствующим образом обновите package.json:

Теперь напишем наш функционал. Первое, что нужно сделать, это потребовать пару пакетов. Мы будем использовать модули fs (file system) и path. В файл extension.js поместите:

Также нам нужно получить путь к текущей папке. Внутри раздела command поместите следующий фрагмент:

Нам также нужно присвоить шаблонный HTML-код переменной в файле extension.js, чтобы он автоматически записывался в файл. Вот этот шаблонный HTML:

Теперь нужно вызвать функцию writeFile модуля файловой системы и передать ее в пути к папке и HTML-коде.

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

Вот как выглядит полный код extension.js:

Попробуйте выполнить отладку вашего нового расширения. Откройте палитру команд и запустите Create Boilerplate (помните, мы изменили имя).

После выполнения команды вы увидите только что созданный файл index.html и сообщение, которое уведомляет вас об этом:

Заключение

Чтобы узнать больше о том, какие API можно использовать и как именно их использовать, прочтите документацию по API от Visual Studio.

Лучшие расширения VS Code для удаленной работы

Чего хотят разработчики? Денег, свободного графика работы, пиццы? Конечно. Беспроблемной удаленной совместной работы? Еще бы! Программирование — это командный спорт, и без налаженной коммуникации на хорошие результаты не стоит и надеяться.

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

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

Live Share

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

Live Share можно дополнить другими расширениями. Например, Live Share Audio позволяет совершать звонки. При помощи Live Share Whiteboard вы сможете делать наброски на белой доске и видеть изменения, вносимые членами команды, в реальном времени.

Достоинства Live Share:

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

GitLive

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

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

Наконец, GitLive улучшает опыт работы с LiveShare: это расширение добавляет видеозвонки и возможность расшаривать экран. Кроме того, оно даже позволяет делиться кодом с коллегами, использующими другие IDE, например IntelliJ, WebStorm или PyCharm.

Достоинства GitLive:

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

GistPad

Гисты позволяют создавать сниппеты кода, заметки и списки задач. Причем всем этим можно делиться с коллегами. А расширение GistPad поможет делать это прямо из редактора VS Code.

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

Достоинства GistPad:

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

Todo Tree

Если вы при написании кода создаете много TODO и вам нужно как-то их отслеживать, это расширение — настоящий клад. Оно быстро обыскивает рабочее пространство в поисках тегов типа TODO и FIXME и отображает их в боковой панели (в виде дерева, что отражено в названии расширения).

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

Достоинства Todo Tree:

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

Codetour

Этот инструмент вам пригодится при приеме новичка в команду. Codetour (англ. «тур, экскурсия по коду») позволяет записывать и проигрывать путь по кодовой базе прямо в редакторе кода.

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

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

Достоинства Codetour:

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

Git Link

Простое и эффективное расширение, выполняющее всего одну задачу. Оно позволяет вам послать коллегам ссылку с выделенным кодом прямо из редактора. Просмотреть код по ссылке можно в GitHub. (Обратите внимание: вы можете послать ссылку только на изменения, которые вошли в коммит).

Достоинства Git Link:

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

Хорошая коммуникация — ключ к успешной и продуктивной работе в распределенной команде. Надеюсь, инструменты, описанные в этой статье, помогут вам улучшить опыт совместной удаленной работы.

От редакции Techrocks. Вам также могут быть интересны другие подборки расширений:

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

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

Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

1. REST Client

Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.

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

С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.

В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.

Работа с REST Client

2. CSS Peek

Если вы занимаетесь веб-разработкой, то CSS Peek — это расширение, которое обязательно должно присутствовать в вашем наборе инструментов. Данное расширение позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Для того чтобы увидеть соответствующий CSS-код, достаточно навести указатель мыши на имя класса элемента или на его ID.

Ниже показан процесс работы с CSS Peek.

Работа с CSS Peek

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

3. Beautify

Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.

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

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

4. Auto Rename Tag

Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.

Если вам нужно, чтобы после ввода скобки, завершающей открывающий тег, автоматически вводился бы закрывающий тег, взгляните на расширение Auto Close Tag. Если у вас есть оба эти расширения, это хорошо поможет вам в написании HTML-кода, сделав ваш труд эффективнее, а результаты вашей работы — единообразнее.

Работа с Auto Rename Tag

5. Quokka.js

Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.

Работа с Quokka.js

6. Night Owl

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

Night Owl — это одна из замечательных тем, используемых многими программистами. В описании к ней сказано, что она рассчитана на тех, кто засиживается за компьютером до поздней ночи.

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

7. JavaScript (ES6) code snippets

Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.

Какими расширениями для VS Code пользуетесь вы?

Как я расширение для Atom и VS Code создавал: личный опыт и исходники

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

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

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

Напоминаем: для всех читателей «Хабра» — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».

Расширение «большой курсор»

Когда вышел Atom, я программировал на Slim, Sass и CoffeeScript. Тогда я не знал других способов редактирования отступов, кроме как самого обычного — изменять каждый отступ по отдельности. Порой было сложно определить завершение блока, так что я решил изменить внешний вид курсора. Я хотел превратить его в нечто вроде линейки, которая позволяет точно все измерить. Вот пример:

Чтобы понять, как это сделать, я изучил инструменты разработчика Atom, выбрал элемент курсора и затем изменил его посредством CSS. Таким образом удалось получить нечто вроде proof of concept — я понял, что моя идея реализуема.

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

Это простое и рабочее расширение.

Что с ним случилось?

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

VS Code

Через пару лет я принял решение перейти на VS Code. Для удобства я использовал расширение, которое позволяло быстро изменять нужные параметры, вроде имен переменных. Но приходилось постоянно вводить команду для выполнения этих изменений. А привязывать их к каким-то кнопкам клавиатуры мне не хотелось, так что стал обдумывать варианты работы с алиасами в оболочке ZSH.

В ZSH много плагинов, плюс можно использовать короткие версии команд для их запуска. Пример — запуск плагина git checkout можно выполнить при помощи gco, а плагина rails server — командой rs.

Собственно, для команды вроде Change Case Snake Case мне можно было просто ввести первые буквы всех слов, то есть запускать все это помощи сокращения ccsc.

Написание расширения для VS Code

Итак, я начал изучать возможности для создания расширений. Я уже был немного знаком с некоторыми моментами, поскольку внес свои дополнения для Scry (языковой сервер для Crystal), поэтому изучал расширение Crystal для VS Code.

Так вот, оно создано при помощи генератора Yeoman. Выглядел он следующим образом:

Основа Typescript-расширения достаточно удобна. Настроить все можно при помощи tsconfig (что, правда, означает, что файлы Typescript могут частенько выдавать ошибку и не компилиться), а можно выбрать второй вариант — tslint.

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

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

Для этого вам не нужно получать доступ к DOM или представлениям. Здесь есть набор представлений, который вы можете использовать (одно из них — HTML-панель). Было и представление для palette box, так что я смог понять, как все это работает.

2. Фильтрация palette box

Здесь пришлось постараться, поскольку API для QuickPick не предлагает такой возможности. Но зато у него есть событие, которое можно перехватывать всякий раз, как пользователь начинает что-то печатать, я просто изменяю список опций. Работает такой вариант на удивление хорошо.

3. Получаем список доступных команд

Здесь тоже есть свои сложности, вы можете получить список других установленных расширений. Для каждого нужно получить доступ к его собственному package.json.

4. Выполнение команды

Ну а здесь все просто, обращаемся к API для вызова нужной команды.

В качестве вывода

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

Расширения VS Code для JavaScript-разработчиков

Хочешь проверить свои знания по JS?

Подпишись на наш канал с тестами по JS в Telegram!

Это наверняка не первая подборка такого рода, попавшаяся вам на глаза. И уж точно не последняя. Но эта — моя! Я начну со своих любимых расширений для работы с JavaScript, а затем перейду к помощникам в HTML/CSS.

JavaScript

Bracket Pair Colorizer

Самое первое расширение в моем списке — это настоящий клад! Оно расцвечивает пары скобок. Кажется, в этом нет ничего особенного. Но когда работаешь с глубоко вложенным кодом или огромным файлом, это настоящее спасение.

Жизнь без Bracket Pair Colorizer:

Жизнь с Bracket Pair Colorizer:

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

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

Simple React Snippets / Next.js Snippets

Написание стандартного повторяющегося кода отнимает уйму времени. Это раздражает. Simple React Snippets и Next.js Snippets облегчают «бойлерплейтную» боль.

Функциональные компоненты и хуки с Simple React Snippets:

Оба этих расширения содержат множество сниппетов, но у меня нет времени создавать столько гифок!

JavaScript (ES6) Code Snippets

Это расширение напоминает Simple React Snippets, но предназначено для работы с чистым JavaScript.

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

Также стоит упомянуть:

Template String Converter

HTML & CSS

VSCode и так достаточно хорош для работы с HTML и CSS.

Но есть и несколько расширений, способных улучшить работу с HTML и CSS в VS Code!

HTML Tag Wrapper

Оборачивание уже написанного кода в новый тег постоянно меня бесило. Но теперь есть решение! Выделить код, нажать Ctrl + i — и кошмару конец.

CSS Snippets

Да, еще сниппеты! Кому ж не хочется писать меньше кода?

Длина этого списка сниппетов сравнима разве что с «Игрой престолов».

Live Sass Compiler

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

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

Вот и все! Надеюсь, вам тоже понравится что-нибудь из моих любимых расширений!

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

…Даже простейшие инструменты могут давать людям возможность делать великие дела.
Биз Стоун, «Решайся! Заряд на создание великого от основателя Twitter»

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

Многие программисты используют в наши дни Visual Studio Code. Этот редактор кода поддерживает установку расширений. Существует столько подобных расширений, что можно говорить о том, что возможности настройки VS Code практически безграничны.

Но на Visual Studio Marketplace, на площадке, где публикуются расширения для VS Code, опубликовано просто невероятное количество расширений. А это значит, что программистам сложно находить именно то, что им действительно пригодится. Если некое расширение показалось кому-то полезным, то оно, вполне возможно, принесёт пользу и другим людям. Поэтому я расскажу здесь о 7 расширениях для VS Code, которые способны значительно облегчить работу программиста. Всё это — бесплатные расширения. Любой может свободно их загружать и использовать.

1. REST Client

Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них. Это расширение позволяет попрощаться с внешними приложениями, которые иначе пришлось бы использовать для выполнения запросов к серверам.

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

С его помощью очень просто и удобно создавать и отправлять запросы. При работе с ним используются чёткие синтаксические конструкции, облегчающие его применение в самых разных ситуациях. Например, для отправки простого GET-запроса достаточно одной строки кода, в которой имеется ключевое слово GET и присутствует URL.

В общем, рекомендую испытать это расширение всем, кому нужен функционал REST-клиента.

Работа с REST Client

2. CSS Peek

Если вы занимаетесь веб-разработкой, то CSS Peek — это расширение, которое обязательно должно присутствовать в вашем наборе инструментов. Данное расширение позволяет быстро просматривать CSS-правила, применяемые к различным HTML-элементам. Для того чтобы увидеть соответствующий CSS-код, достаточно навести указатель мыши на имя класса элемента или на его ID.

Ниже показан процесс работы с CSS Peek.

Работа с CSS Peek

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

3. Beautify

Если вам нравится чистый код, то вам, определённо, придётся по душе расширение Beautify. Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON.

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

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

4. Auto Rename Tag

Расширение Auto Rename Tag решает весьма простую задачу, но, несмотря на это, оно способно занять достойное место в наборе инструментов программиста. А именно, оно автоматизирует задачу переименования HTML-тегов. В частности, если переименовывают открывающий тег, меняется и закрывающий тег. То же самое происходит и при переименовании закрывающего тега.

Если вам нужно, чтобы после ввода скобки, завершающей открывающий тег, автоматически вводился бы закрывающий тег, взгляните на расширение Auto Close Tag. Если у вас есть оба эти расширения, это хорошо поможет вам в написании HTML-кода, сделав ваш труд эффективнее, а результаты вашей работы — единообразнее.

Работа с Auto Rename Tag

5. Quokka.js

Расширение Quokka.js — это нечто вроде «песочницы» для экспериментов с кодом, встроенной прямо в редактор. Она позволяет работать с файлами, выводя соответствующие подсказки непосредственно в коде. Эти подсказки появляются в процессе ввода текста программы, что очень удобно.

Работа с Quokka.js

6. Night Owl

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

Night Owl — это одна из замечательных тем, используемых многими программистами. В описании к ней сказано, что она рассчитана на тех, кто засиживается за компьютером до поздней ночи.

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

7. JavaScript (ES6) code snippets

Расширение JavaScript (ES6) code snippets, завершающее этот материал, предлагает разработчику набор сниппетов, которые позволяют быстро создавать современные JavaScript-конструкции.

Какими расширениями для VS Code пользуетесь вы?

Популярные расширения Visual Studio Code

Code Time

Code Time — это плагин с открытым исходным кодом, который предоставляет метрики прямо в редакторе кода.

После установки расширения будет предложено войти в панель управления. Если внутри редактора кода вы нажмете command + shift + P, откроется окно, в котором можно ввести Code Time, а затем выбрать между отображением данных в редакторе кода или в браузере.

Внутри браузера информация будет выглядеть так:

Внутри браузера красочнее:

Code Time полезен, если вам нужно точно знать или просто интересно, сколько времени вы тратите на написание кода.

One Dark Pro

One Dark Pro одна из самых популярных и часто загружаемых тем для Visual Studio Code.

В этом примере видно, что у нас есть значки для каталогов, таких как клиент и сервер, а также для файлов, таких как .eslintrc .gitignore и package.json.

One Dark Pro поддерживается в React, Angular, Redux и множестве различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редюсеров (Reducers), действий (Actions) и хранилищ (Store).

Bracket Pair Colorizer

Это расширение позволяет сопоставлять скобки с цветами. Это удобно, когда у вас есть глубоко вложенные объекты или функции, как показано здесь:

Color Highlight

Color Highlight показывает визуальное представление любого цветового кода. Например, если вы введете RGB, RGBa, шестнадцатеричный или любой другой цветовой код, можно увидеть цвет, как в этом примере:

Path Intellisense

Path Intellisense — это плагин, который автоматически завершает имена файлов.

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

ES7 React/Redux/GraphQL/React-Native фрагменты

Следующее расширение — ES7 React/Redux/GraphQL/React-Native фрагменты. Длинное название, но сэкономит вам много времени, особенно если вы используете его в React.

Это расширение предоставляет фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.

Прямо в редакторе кода можно нажать command + shift + P, а затем ES7 Snippet Search, вы увидите длинный список коротких команд, которые можно запустить, чтобы получить более длинные фрагменты кода.

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

GitLens — Git supercharged

GitLens расширяет возможности Git, встроенные в Visual Studio Code. Помогает с первого взгляда определить автора кода с помощью аннотаций Git-blame и code lens, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью команд сравнения и многое другое. Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите.

Разрабатываем расширения для VS Code на Kotlin/JS

Kotlin/JS – это технология, позволяющая транслировать код, написанный на Kotlin, в JavaScript. Мне не удалось найти информации о том, как написать своё расширение для Visual Studio Code, популярного редактора кода, используя Kotlin, поэтому я задался вопросом, а возможно ли это? Какие проблемы нас ждут?

TLDR: да, возможно

Disclaimer: это не гайдлайн по написанию расширений, а лишь туториал по подготовке инфраструктуры

Для разработки расширений на TypeScript представлены декларации типов в формате d.ts. Мы можем переиспользовать их в Kotlin/JS, благодаря инструменту Dukat. Инструмент генерирует из d.ts деклараций аналогичные на Kotlin.

Приступим к созданию проекта.

Создание проекта

Воспользуемся генератором проектов из Intellij IDEA, выбрав Kotlin – Node.JS application – Gradle Kotlin – IR Kotlin/JS Compiler. IR в данном контексте – это новый бекенд компилятора, который в скором времени станет бекендом по умолчанию.

Демонстрация создания проекта

Получим build.gradle.kts файл примерно следующего содержания

Нам понадобится экспортировать функции, что пока является экспериментальной фичей языка, поэтому добавим в блок kotlin следующий код, разрешающий использовать в коде аннотацию @JsExport :

Kotlin Gradle plugin, очевидно, не знает о том, что мы собираемся писать расширение для VS Code, поэтому добавим вручную необходимые записи в package.json, которые нужны для работы расширения. Для этого добавим в блок конфигурации js следующий код

Также добавим упомянутую выше зависимость на @types/vscode в блок dependencies :

К сожалению, для этой зависимости генерируется немного некорректный код, который не компилируется, поэтому находим соответствующий issue в Dukat и голосуем за него. А до момента, пока баг не исправят, обойдем проблему ручным исправлением сгенерированных файлов.

Создадим Kotlin/JS модуль vscode, перенесем сгенерированный код в него (выносить в отдельный модуль желательно для того, чтобы механизм dead code elimination смог корректно вырезать неиспользуемый код из итогового js-файла). Подправленный код, как и сам модуль, не привожу, заинтересованный читатель может посмотреть его в репозитории, ссылка на который будет в конце статьи.

Далее заменим декларацию зависимости @types/vscode зависимостью на новый модуль:

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

Задача будет брать готовый npm модуль и перекладывать его в директорию с расширениями VS Code

Код расширения

Удалим код, который нам сгенерировала IDEA, он нам не нужен. Создадим файл extension.kt в исходниках, и напишем код, аналогичный тому, который создаётся в туториале от Microsoft Your First Extension:

Отладка расширения

Какая серьёзная разработка без отладки?

Добавим в build.gradle.kts задачу, которая будет запускать VS Code в специальном режиме отладки, подхватывая наше расширение без необходимости установки:

Также создадим Run configuration в IDEA:

IDEA run configuration

Заключение

Благодарю за прочтение. У вас может возникнуть вопрос, а зачем, собственно, это всё нужно при наличии TypeScript? Например, вы любите Kotlin и хотите использовать библиотеки, написанные используя Kotlin Multiplatform или Kotlin/JS, тогда описанный путь сделает это для вас удобнее. Или вы такой же, как и я, больной на голову интересующийся чем-то новым инженер 😉

10 расширений VS Code для работы с техническим долгом

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

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

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

Рефакторинг и технический долг

1. Glean

Glean предоставляет инструменты рефакторинга для вашей кодовой базы на React. Он позволяет:

2. Stepsize

Stepsize — это средство отслеживания ошибок для исправной кодовой базы. Расширение дает разработчикам возможность отслеживать и определять приоритеты технического долга прямо в редакторе VS Code. Оно позволяет:

3. JavaScript Assistant

JavaScript Assistant поможет вам писать чистый и лаконичный код, отвечающий современным стандартам. Предлагает 48 автоматизированных процессов, полезных при рефакторинге и чистке кода на JavaScript и TypeScript.

4. Abracadabra, refactor this!

При помощи Abracadabra можно быстро и безопасно рефакторить код в VS Code.

VS Code поставляется с несколькими базовыми инструментами для рефакторинга. Abracadabra:

Теги «TODO» и комментарии

5. TODO Highlight

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

6. Todo Tree

Расширение Todo Tree собирает все задачи, разбросанные по всему приложению, в одно дерево в левой части рабочего пространства редактора. Вы можете быстро найти в своем рабочем пространстве теги, такие как TODO и FIXME, и просмотреть их в дереве.

7. Comment Anchors

Comment Anchors позволяет размещать ссылки-якоря в комментариях или строках для создания закладок в контексте вашего кода. Якоря можно использовать для отслеживания TODO, написания заметок, сворачивания разделов кода или для создания простой навигации, упрощающей навигацию по файлам.

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

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

8. New Relic CodeStream

New Relic CodeStream – это платформа для совместной разработки, которая интегрирует основные инструменты из VS Code. Она позволяет избежать переключения контекста и упростить обсуждение и проверку кода, разместив инструменты для совместной работы в своей среде IDE.

Установив New Relic CodeStream, вы сможете:

Автоматизация

9. SonarLint

SonarLint позволяет исправлять проблемы с кодом до того, как они возникнут. Это расширение выделяет ошибки и уязвимости безопасности при написании кода. Также оно выдает четкие инструкци по исправлению, чтобы вы могли внести правки еще до того, как код будет зафиксирован. В VS Code SonarLint поддерживает анализ кода на JavaScript, TypeScript, Python, Java, HTML и PHP.

10. Code Runner

Позволяет запускать фрагменты кода или файлы на различных языках, например, на C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go.

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

Продолжаем увлекательную историю с сниппетами в VS Code и переходим к второй статье

Эта статья будет охватывать следующее темы:

Итак, мы уже создали сниппет в первой части «Создание снипппета».

Пришло время сделать следующий шаг, давайте поделимся наши творением со всем миром. И как же мы поступим? На самом деле все это можно сделать всего лишь за три основных шага:

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

Ресурсы

Мы расскажем, как создать расширение с помощью шаблона Snippets, но вы также можете создать еще очень много других расширений, поэтому вот несколько ссылок, которые помогут вам узнать чуточку больше:

Scaffold расширяемого проекта

Для этого есть scaffolder, который позволяет создавать проект за секунду. Для установки scaffolder просто наберите:

Чтобы создать дополнительный проект, просто наберите:

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

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

Мы выбираем создание нового и поэтому просто нажимаем на return клавишу. Далее нужно будет дать нашему расширению имя. Именно это имя будет указываться в торговой площадке Visual Studio, поэтому давайте дадим ему достойное имя, например, вот так:

Следующим шагом становится печать издателя. Сейчас вы, наверное, думаете «Какой издатель, о чем он говорит, и что хочет от меня? Ну а пока придумайте имя для издателя, позже мы его создадим и зарегистрируем на торговой площадке Visual Studio, всему свое время 🙂

Наконец все готово!. Далее, вы должны увидеть файлы, которые создадутся для вашего расширения, например:

Расширяем анатомию проекта

Итак, теперь мы наконец то можем посмотреть, что за проект у нас получился в целом:

Наш проект состоит из следующих папок и файлов (начиная с самого верха):

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

Создаем наши сниппеты

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

Отлично, теперь у нас есть сниппет. Идем дальше!

Тестируем наши сниппеты

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

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

Ах, и сразу получаем ошибку, не правда ли хорошее начало? На самом деле эта ошибка оказалась весьма полезной, т.к она говорит нам о том, что пользователь этого расширения заслуживает лучшего, а именно хорошо сформулированного и продуманного файла README.me, который бы давал исчерпывающую информацию об этом расширении. Итак, давайте отправимся к файлу README.md и позаботимся о его содержимом.

Итак, как только мы грамотно оформим README файл, можем снова запустить package команду run:

Когда у нас есть такой файл, мы готовы установить расширение локально в нашей среде. Это позволит нам протестировать наше расширение, чтобы убедиться, что все работает как мы и задумывали. Чтобы установить его, мы должны открыть командное окно. Для этого перейдите в View => Command Palette. Затем начните вводить «VSIX». Должно появиться следующее:

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

Если вы видите у себя на мониторах, то же самое, что и здесь, это означает, что ваш сниппет работает так, как и было задумано и мы можем поставить себе твердую пятерку. Мы приближаемся к Visual Studio Marketplace и славе разработчиков;)

Публикуем сниппеты

Итак, настал тот момент, которого так долго мы все ждали. Пришло время опубликовать это расширение и увидеть свое имя в неоновом цвете на торговой площадке Visual Studio 🙂

Регистрация издателя

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

Нам нужно создать учетную запись с помощью ссылки Visual Studio Team Service link to VSTS. После того, как мы создали учетную запись здесь, нам нужно получить токен доступа.

Создание токена доступа

Токен доступа необходим, когда мы публикуем наше расширение, используя vsce в терминале. Чтобы создать токен доступа, нужно зайти на нашу VSTS страницу, нажать на профиль в правом верхнем углу и выбрать пункт меню «Security». Оказавшись там, нам нужно:

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

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

Обновить токен

Рано или поздно срок действия токена закончится. Когда это произойдет, восстановите свой токен и запустите его в терминале:

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

Публикуем

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

Это команда отправит наше расширение в Visual Studio Marketplace. Запустив команду в терминале, она должна показать что-то вроде этого:

Наслаждайтесь плодами своего труда

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

Вот оно, вы ввели имя вашего расширения, код Visual Studio показал его вам. Вы можете как родитель для вашего расширения и, конечно же, родители гордятся своими детьми. Давайте также посмотрим на страницу с подробностями, т.е зайдем в файл README:

Улучшить расширение

Есть две основные вещи, над которыми стоит поработать, чтобы улучшить восприятие вашего расширения людьми:

Добавление репозитория

Чтобы добавить репозиторий, создайте его на GitHub. Как только это будет сделано, давайте добавим его в наш файл package.json:

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

Добавление превью GIF

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

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

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

Выше приведено статическое изображение, поэтому в посте оно не будет отображаться как анимация, но работать будет по-настоящему.

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

Резюмируя

В итоге мы узнали следующее:

Иди и покажи сообществу, что ты можешь и какие проекты у тебя есть.. Хотите рассказать мне об этом? Просто отправьте твит на @chris_noring

Немного обо мне

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

Самые полезные расширения VS Code для повышения производительности

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

1. Relative Path

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

Просто нажмите Ctrl+Shift+H или, Cmd+Shift+H на (Mac) чтобы активировать его, и найдите файл, который хотите импортировать.

2. ES7 React/Redux/GraphQL/React-Native snippets

Это расширение необходимо, если вы разработчик React.js.

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

3. GraphQL

4. Prettier

Это расширение необходимо каждому разработчику, независимо от того, используете ли вы HTML, JavaScript, React или любую другую платформу или библиотеку.

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

5. Image Preview

Это расширение позволяет нам быстро увидеть предварительный просмотр любого изображения в файле CSS слева от URL-адреса изображения или при наведении курсора.

6. Prettify JSON

7. Subtle Match Brackets

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

8. vscode-styled-components

Если вы используете styled-components React, это расширение обеспечит подсветку синтаксиса для стилизованного кода компонента, что упрощает его написание и отладку.

9. Auto Rename Tag

Это расширение автоматически переименовывает конечный тег HTML при переименовании начального тега и наоборот.

10. Auto Close Tag

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

Начало разработки расширений в Visual Studio

Если вы никогда не написали расширение Visual Studio ранее, у вас, вероятно, есть некоторые вопросы. Мы перечислили некоторые из наиболее распространенных из них здесь. Если вы не видите нужные сведения, используйте кнопки обратной связи (полезна ли эта страница? в правом верхнем углу экрана), чтобы спросить, что вы хотите.

Эта статья относится к Visual Studio в Windows. Сведения о Visual Studio для Mac см. в статье «Расширение Visual Studio для Mac». Сведения о Visual Studio Code см. в разделе API расширения Visual Studio Code.

Какое программное обеспечение требуется для разработки расширений Visual Studio?

Для разработки расширений Visual Studio необходимо установить пакет SDK Visual Studio в дополнение к Visual Studio. Пакет SDK Для Visual Studio можно установить как часть обычной установки или установить его позже. Дополнительные сведения об установке пакета SDK Для Visual Studio см. в разделе «Установка пакета SDK Для Visual Studio».

Какие виды действий можно выполнять с расширениями Visual Studio?

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

Поддержка языков, которые не включены в Visual Studio, с поддержкой цветов синтаксиса, IntelliSense и компилятора и поддержки отладки

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

Конструкторы, относящиеся к домену, для таких сценариев, как проектирование данных или поддержка облака

Примеры расширений см. в Visual Studio Marketplace. Многие расширения имеют открытый исходный код, а Marketplace содержит ссылки на репозиторий GitHub.

Какие функции Visual Studio можно расширить?

Теоретически вы можете расширить только любую часть Visual Studio: меню, панели инструментов, команды, окна, решения, проекты, редакторы и т. д.

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

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

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

Расширения редактора и языковой службы: добавьте собственные настройки в IntelliSense, предоставляемые для языков Visual Studio, или создайте поддержку новых языков программирования. Вы можете создавать новые завершения инструкций, предложения и новые подсказки QuickInfo. С помощью лампочек можно добавлять предложения рефакторинга и исправления кода для поддержки новых языков программирования.

Какие шаблоны проектов предоставляются VSSDK?

Два основных типа расширений : VSPackage и расширения MEF. Как правило, расширения VSPackage используются для расширений, использующих или расширяющие команды, окна инструментов и проекты. Расширения MEF используются для расширения или настройки редактора Visual Studio.

Для расширений Visual C# и Visual Basic VSSDK предоставляет пустой шаблон проекта VSIX, который можно использовать вместе с новыми шаблонами элементов, которые создают команды меню, окна инструментов и расширения редактора. Этот шаблон также можно использовать для упаковки шаблонов проектов, фрагментов кода и других артефактов для распространения другим пользователям.

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

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

Как получить расширение, похожее на Visual Studio?

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

Где можно найти примеры кода VSSDK?

Каждая из ссылок, перечисленных в предыдущем разделе, содержит пошаговые пошаговые руководства, в которых показано, как реализовать определенные функции. Примеры VSSDK с открытым кодом также можно найти на сайте GitHub в Visual Studio Samples.

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

Вы можете установить расширение на другом компьютере или отправить его друзьям в виде VSIX-файла, который вы устанавливаете, дважды щелкнув его. Дополнительные сведения о пакетах VSIX можно узнать на веб-портале доставки расширений Visual Studio.

Вы также можете опубликовать расширение в Visual Studio Marketplace, что делает его видимым для большого количества клиентов Visual Studio. Пример упаковки расширения в Marketplace см. в пошаговом руководстве по публикации расширения Visual Studio. Дополнительные сведения о том, что нужно сделать для публикации в Marketplace, см. в разделе «Продукты и расширения» для Visual Studio.

Популярные расширения Visual Studio Code

Code Time

Code Time — это плагин с открытым исходным кодом, который предоставляет метрики прямо в редакторе кода.

После установки расширения будет предложено войти в панель управления.

Если внутри редактора кода вы нажмете command + shift + P, откроется окно, в котором можно ввести Code Time, а затем выбрать между отображением данных в редакторе кода или в браузере.

Внутри браузера информация будет выглядеть так:

Внутри браузера красочнее:

Code Time полезен, если вам нужно точно знать или просто интересно, сколько времени вы тратите на написание кода.

One Dark Pro

One Dark Pro одна из самых популярных и часто загружаемых тем для Visual Studio Code.

В этом примере видно, что у нас есть значки для каталогов, таких как клиент и сервер, а также для файлов, таких как .eslintrc .gitignore и package.json.

One Dark Pro поддерживается в React, Angular, Redux и множестве различных фреймворков и библиотек, предоставляя различные значки каталогов для компонентов, утилит, стилей, а также для редюсеров (Reducers), действий (Actions) и хранилищ (Store).

Bracket Pair Colorizer

Это расширение позволяет сопоставлять скобки с цветами.
Это удобно, когда у вас есть глубоко вложенные объекты или функции, как показано здесь:

Color Highlight

Color Highlight показывает визуальное представление любого цветового кода.

Например, если вы введете RGB, RGBa, шестнадцатеричный или любой другой цветовой код, можно увидеть цвет, как в этом примере:

Path Intellisense

Path Intellisense — это плагин, который автоматически завершает имена файлов.

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

ES7 React/Redux/GraphQL/React-Native фрагменты

Следующее расширение — ES7 React/Redux/GraphQL/React-Native фрагменты. Длинное название, но сэкономит вам много времени, особенно если вы используете его в React.

Это расширение предоставляет фрагменты JavaScript и React/Redux в ES7 с функциями плагина Babel для VS Code.

Прямо в редакторе кода можно нажать command + shift + P, а затем ES7 Snippet Search, вы увидите длинный список коротких команд, которые можно запустить, чтобы получить более длинные фрагменты кода.

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

Вы запускаете команды, набирая их в редакторе и нажимая ввод. Все просто!

GitLens — Git supercharged

GitLens расширяет возможности Git, встроенные в Visual Studio Code.

Помогает с первого взгляда определить автора кода с помощью аннотаций Git-blame и code lens, легко перемещаться и изучать репозитории Git, получать ценные сведения с помощью команд сравнения и многое другое.

Нажав на строку кода, вы увидите, кто его редактировал, когда его редактировали и в каком коммите. Полезная вещь!

Пакет создания документации для VS Code

Пакет создания документации (Docs Authoring Pack) представляет собой набор расширений VS Code, упрощающих использование языка разметки Markdown для написания статей на сайте docs.microsoft.com. Пакет доступен в VS Code Marketplace и содержит следующие расширения.

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

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

Использование расширения Docs Markdown

Создание главного файла перенаправления

Назначение сочетаний клавиш

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

«when»: «editorTextFocus && editorLangId == ‘markdown'»

Окончательное настраиваемое сочетание клавиш должно иметь следующий вид в keybindings.json:

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

Сохраните файл keybindings.json.

Дополнительные сведения о настраиваемых сочетаниях клавиш см. в документации по VS Code.

Отображение устаревшей панели инструментов «Gauntlet»

Прежние пользователи расширения с кодовым названием «Gauntlet» заметят, что при установленном расширении Docs Markdown панель инструментов разработки больше не отображается в нижней части окна VS Code. Панель занимала много места в строке состояния VS Code и не соответствовала рекомендациям по работе с расширением, поэтому она не поддерживается в новом расширении. Но при необходимости панель инструментов можно открыть, изменив файл settings.json в VS Code следующим образом.

Выберите Параметры пользователя, чтобы изменить параметры всех рабочих областей VS Code, или Параметры рабочей области, чтобы изменить параметры только текущей рабочей области.

Выберите Расширения>Конфигурация расширения Docs Markdown, а затем выберите Показывать панель инструментов прежних версий в нижней строке состояния.

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

Новые команды, добавленные в расширение, не будут доступны на панели инструментов.

Использование шаблонов Docs

С помощью расширения Docs Article Templates создатели в VS Code могут вытягивать шаблоны Markdown из централизованного хранилища и применять их к файлам. Шаблоны обеспечивают включение необходимых метаданных в статьи, соблюдение стандартов, касающихся содержимого, и т. д. В общедоступном репозитории GitHub управление шаблонами осуществляется по принципу управления файлами Markdown.

Применение шаблона в VS Code

Добавление вашего идентификатора GitHub и (или) псевдонима Майкрософт в параметры VS Code

Расширение Templates поддерживает три поля динамических метаданных: author, ms.author и ms.date. Это означает, что если автор шаблона использует эти поля в заголовке метаданных в шаблоне Markdown, они будут автоматически заполняться в файле, когда вы применяете шаблон:

Указание автора и/или ms.author

Чтобы сделать новый шаблон доступным в VS Code

Команда docs.microsoft.com просмотрит шаблон и выполнит слияние запроса на вытягивание, если он соответствует рекомендациям по стилю docs.microsoft.com. После слияния шаблон будет доступен всем пользователям расширения Docs Article Templates.

Демонстрация нескольких функций

Ниже приведен краткий видеоролик, демонстрирующий следующие возможности Docs Authoring Pack.

Дальнейшие действия

Изучите различные функции, доступные в Docs Authoring Pack — расширении Visual Studio Code.

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

VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.

1. Beautify

Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.

2. Better Comments

Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.

Использование Better Comments

3. Bookmarks

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

Закладки в коде

4. Bracket Pair Colorizer 2

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

Пары скобок выделены цветами

5. Format in Context Menus

Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.

Работа с Format in Context Menus

6. Git Graph

Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.

Работа с Git Graph

7. GitLens

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

Работа с GitLens

8. Indent Rainbow

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

9. Path Intellisense

Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.

Работа с Path Intellisense

10. Total Lines

Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.

А какими расширениями для VS Code пользуетесь вы?

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

Управление расширениями для Visual Studio

Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. К числу расширений относятся элементы управления, примеры, шаблоны, инструменты или другие компоненты, расширяющие возможности Visual Studio, например Live Share или Visual Studio IntelliCode.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace. Дополнительные сведения о поиске расширений см. в записи блога Где мои избранные расширения в Visual Studio 2022?.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.

Диалоговое окно «Управление расширениями»

Используйте диалоговое окно Управление расширениями для установки расширений Visual Studio и управления ими. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения>Управление расширениями. Или введите строку Расширения в поле поиска, а затем выберите Управление расширениями.

На левой панели расширения разделены на установленные, доступные в Visual Studio Marketplace (онлайн) и имеющие доступные обновления. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.

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

Установить расширения можно из Visual Studio Marketplace или из диалогового окна «Управление расширениями» в Visual Studio.

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

В диалоговом окне Расширения>Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)

Щелкните Скачать.

Запланирована установка расширения. Расширение будет установлено после закрытия всех экземпляров Visual Studio.

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

Установка без использования диалогового окна «Управление расширениями»

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения>Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.

Удаление или отключение расширения

Если требуется прекратить использование расширения, его можно отключить или удалить. Отключенное расширение сохранится, но не будет загружаться. Найдите расширение и щелкните Удалить или Отключить. Перезапустите Visual Studio, чтобы выгрузить отключенное расширение.

Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.

Расширения на уровне пользователя и администратора

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

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

Откройте страницу параметров расширений (Сервис>Параметры>Среда>Расширения).

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

Перезапустите Visual Studio.

Автоматическое обновление расширений

Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.

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

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения>Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

Чтобы отключить автоматическое обновление для конкретного расширения, снимите флажок Автоматически обновлять это расширение в области сведений о расширении в правой части диалогового окна Управление расширениями.

Уведомления об аварийном завершении работы или зависаниях

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

Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.

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

Выберите Отключить это расширение. Visual Studio отключает расширение и сообщает, нужно ли перезагрузить компьютер, чтобы отключение вступило в силу. Если потребуется, вы можете снова включить расширение в диалоговом окне Расширения>Управление расширениями.

Выберите Больше не показывать это сообщение.

Выберите Дополнительные сведения, чтобы перейти к этой странице.

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

Уведомление о зависании или аварийном завершении пользовательского интерфейса означает только то, что один из модулей конкретного расширения находился в стеке в тот момент, когда произошло аварийное завершение. Это не обязательно означает, что расширение стало причиной сбоя. Возможно, расширение вызвало внутренний код Visual Studio, который привел к аварийному завершению или зависанию пользовательского интерфейса. Но эти уведомления могут быть полезны, если расширение, приводящее к аварийному завершению или зависанию пользовательского интерфейса, не очень важно для вас. Отключив такое расширение, вы сможете избежать аналогичных проблем в будущем без ущерба для производительности.

Примеры

При установке примера из сети решение сохраняется в двух местоположениях:

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

Отдельный контрольный экземпляр сохраняется на компьютере.

Диалоговое окно «Управление расширениями>» можно использовать для выполнения следующих задач, связанных спримерами:

Отобразить список контрольных экземпляров установленных образцов.

Отключить или удалить контрольный экземпляр образца.

Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.

Установить отдельные примеры из сети.

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

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

5 расширений и тем для VS Code, которые способны изменить жизнь фронтенд-разработчика

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

SCSS IntelliSense

Создание переменных в SCSS — это просто и приятно. А как их запомнить? Вот с этим обычно возникают сложности.

Вот как выглядит работа с расширением SCSS IntelliSense.

Расширение SCSS IntelliSense в действии

Auto Rename Tag

Почему бы не призвать себе на помощь машину, которая помогла бы редактировать теги автоматически? Для того чтобы это сделать, достаточно воспользоваться расширением Auto Rename Tag. Оно, при редактировании открывающего тега, автоматически меняет и закрывающий. То же самое, с точностью до наоборот, происходит и в том случае, если меняют закрывающий тег.

Вот как работает Auto Rename Tag.

Работа с расширением Auto Rename Tag

Duplicate Action

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

Расширение Duplicate Action и изменения в контекстном меню файла

CodeStream

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

Многим программистам не нравится покидать свою IDE. Но для того чтобы объяснять что-то коллегам, и чтобы самим задавать вопросы, приходится выходить из привычной среды и пользоваться Trello, Slack, Asana, Bitbucket, Microsoft Teams. CodeStream поддерживает массу инструментов и IDE, что позволяет работать с проблемами и вопросами, не покидая привычную среду редактора кода. Многие, занимаясь работой, стремятся попасть в так называемое «состояние потока». Выход из редактора обычно выводит человека из этого состояния. Благодаря CodeStream вопросы, касающиеся кода, можно решать, не покидая привычной среды.

Обсуждение кода в CodeStream

Night Owl

Night Owl — это одна из лучших тем, когда-либо созданных для IDE. Я, вот уже три года, ежедневно ей пользуюсь. Ниже показан скриншот моего реального рабочего экрана. Название этой темы намекает на то, что она предназначена для тех, кто сидит за компьютером по ночам. Она, и правда, хорошо подходит для ночной работы, не давая глазам перенапрягаться, а мягкие синие тона, используемые в ней, помогают спокойно решать сложные задачи.

Бонус: тема Synthwave ‘84

Эта тема родом из вселенной киберпанка. Она хорошо сочетается с кожаным плащом, с Lamborghini Countach и с генератором дыма. Если вам всё это близко — включайте любимую Vaporwave-музыку и пишите свой прекрасный код до тех пор, пока ваше сознание не влилось в базу данных Нейроманта.

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

Тема Synthwave ‘84

Уважаемые читатели! Знаете какие-нибудь интересные расширения и темы для VS Code?

27 удивительных инструментов VS Code для современных JavaScript-разработчиков

Comments 20

Ну фиг знает, для себя сделал файл с инструкциями по первому запуску VS Code сразу после установки, вот кусочек по подключению Sync

1) нажимаем комбинацию клавиш [CTRL]+[SHIFT]+[P]
2) вводим в строке «sync»
3) выбираем пункт «Sync: Download Settings»
4) вводим в поле GitHub Personal Access Token: c41cace66136e8540a3…
5) вводим в поле Gist: 9cf6adc58836e88e598…

Раньше, насколько помню, эти данные надо было в settings.json пихать, теперь они сделали наконец-то визард

Еще вот немного удобств

Для тех кто пользуется шрифтами с лигатурами, Disable Ligatures — отключает лигатуры в месте курсора или на всей строке где стоит курсор

А еще для тех у кого много проектов необходим Project Manager

Индексация файлов проекта и построение взаимосвязей, а дальше пошли: Find Usages, Jump to Declarations, все это работает в VS Code со скрипом

Кстати VS Code разработчики пилят с прекрасной поддержкой TypeScript (собственно что сами придумали для того и пилят редактор), а обычный JavaScript в топку ))

Например никак не могу заставить переходить к определению по клику мышки на методе когда код вот такой:

Если кликнуть мышкой в html коде на методе, то не переходит к определению в js-файле, в шторме легко, а в VS Code это неимоверно бесит (( всё остальное поборол с грехом пополам

Чем больше фич вы используете в IDE, тем больше вас начинает бесить обычный редактор кода ))

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

Как я настроил VS Code

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

Раньше мне казалось, что у меня слишком много расширений, которыми я не пользуюсь с тех пор, как забросил некоторые фреймворки (например, Angular).

Необходимо было навести порядок в VS Code, поэтому я его переустановил.

VS Code основан на Electron, что позволяет ему быть кросс-платформенным приложением и работать на macOS, Windows и Linux. VS Code был создан при помощи Node.js, и он обладает полной поддержкой для JavaScript разработчиков.

Для меня VS Code — беспроигрышный вариант. Он более быстрый, по сравнению с редакторами (Atom) и IDE (Webstorm), которые я использовал раньше.

Первым делом я установил темы. Для различных целей у меня были следующие темы:

Настройка VS Code

Затем я добавил несколько вещей из прошлой конфигурации VS Code:

Расширения

Следующий шаг — заставить этот редактор работать, как по волшебству, с помощью хорошо поддерживаемых и бесплатных расширений:

С Prettier мне нравится использовать собственный набор настроек, указанный ниже.

Расширение Microsoft Edge DevTools для Visual Studio Code

Расширение Microsoft Edge DevTools для Visual Studio Code позволяет использовать браузер Microsoft Edge и средства разработчика непосредственно из Visual Studio Code. Visual Studio Code включает встроенную поддержку JavaScript, TypeScript и Node.js, поэтому это отличное средство для веб-разработчиков. Visual Studio Code — это упрощенный, но мощный редактор исходного кода, доступный для Windows, Linux и macOS.

Расширение позволяет выполнять следующие действия:

Установка расширения Microsoft Edge DevTools

Чтобы установить расширение Microsoft Edge DevTools из Visual Studio Code:

В Visual Studio Code перейдите к разделу «Расширения». Для этого можно нажать клавиши Ctrl ++ Shift«X Windows, Linux или X Command + Shift +macOS.

Найдите Marketplace расширения Средств Microsoft Edge для VS Code, выберите расширение и нажмите кнопку «Установить»:

Вы также можете скачать расширение Microsoft Edge DevTools из Visual Studio Marketplace.

Встроенный и динамический анализ проблем

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

Чтобы просмотреть все проблемы в файле, выберите » Просмотреть проблему»:

На вкладке « Проблемы» в нижней панели перечислены все проблемы в открытых файлах:

Динамическое обновление отчетов о проблемах

Проблемы оцениваются в реальном времени при редактировании кода. По мере ввода вы получаете отзывы о найденных проблемах и способах их устранения:

Режимы использования средств разработки Microsoft Edge в Visual Studio Code

Это расширение можно использовать в одном из трех режимов:

Запустите Microsoft Edge в новом окне и перейдите к веб-приложению.

Присоединение к работающему экземпляру Microsoft Edge.

Откройте новый экземпляр Microsoft Edge внутри Visual Studio Code.

Открытие экземпляра браузера в расширении

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

Щелкнув правой кнопкой мыши HTML-файл в обозревателе

В обозревателе Visual Studio Code щелкните правой кнопкой мыши HTML-файл, выберите команду «Открыть с edge», а затем выберите «Открыть браузер» или «Открыть браузер с помощью средств разработки»:

Нажав кнопку запуска экземпляра

Еще один способ открыть экземпляр браузера:

Открытие браузера в рамках сеанса отладки

Еще один способ открыть экземпляр браузера — открыть браузер в рамках сеанса отладки. См. раздел «Использование расширения с Visual Studio Code отладки ниже».

Расширение открывает новый браузер в качестве встроенного браузера в Visual Studio Code. Эта вкладка предварительного просмотра браузера может перемещаться в любом месте редактора. Эту вкладку можно использовать параллельно с исходным кодом или разделить области и предварительного просмотра браузера под кодом:

Открытие внешнего окна браузера (режим без заголовка)

Если вы хотите иметь окно внешнего браузера, можно изменить параметр по умолчанию. Выберите режим «Параметры > без заголовка «, а затем установите флажок, чтобы открыть браузер в режиме без заголовка:

режиме без заголовка» data-linktype=»relative-path»/>

Эмуляция устройства и состояния

На вкладке предварительного просмотра браузера Edge панель инструментов эмуляции в нижней части позволяет имитировать различные среды:

Раскрывающееся меню «Эмуляция устройств»

В раскрывающемся меню « Эмуляция устройств» можно выбрать несколько различных устройств. При выборе устройства размер окна просмотра изменится до правильных измерений и имитирует сенсорный интерфейс. Например, существует несколько эмулированных макетов iPhone:

Раскрывающиеся меню «Ширина и высота»

Щелкните раскрывающиеся меню «Ширина» и «Высота», чтобы изменить размеры окна просмотра:

Кнопка «Повернуть»

Нажмите кнопку «Повернуть » ( ), чтобы повернуть область просмотра.

Эмуляция кнопки «Функции мультимедиа CSS»

Чтобы эмулировать запросы мультимедиа CSS, нажмите кнопку Эмулировать функции мультимедиа CSS ( ). Эта кнопка позволяет проверить, как выглядит продукт в режиме печати. Вы можете переключаться между темным и светлым режимами и эмулировать принудительный цвет:

Кнопка «Эмулировать недостатки зрения»

Нажмите кнопку « Эмулировать недостатки зрения» ( кнопка «Эмулировать недостатки зрения»), чтобы попробовать работу текущего веб-проекта с различными недостатками визуальных элементов. Эта кнопка позволяет протестировать продукт в размытом режиме или с различными недостатками цвета:

Открытие исходных файлов из средства «Элементы»

Одной из функций средства « Элементы» является то, что он отображает исходный файл, который применил стили и обработчики событий к выбранному узлу в дереве DOM. Исходные файлы отображаются в виде ссылок на URL-адрес. Щелкнув ссылку на имя файла, вы откроете этот файл в Visual Studio Code редакторе:

Синхронизация динамических изменений из средства «Стили» с помощью зеркального редактирования CSS

Средство « Стили» в Microsoft Edge DevTools отлично подходит для отладки и настройки CSS. Одна из проблем заключается в том, что хотя эти изменения отображаются в браузере, они не отражаются в исходных файлах. Это означает, что в конце сеанса отладки CSS необходимо скопировать и вставить изменения в исходные файлы.

Редактирование зеркального отображения CSS — это функция расширения Microsoft Edge DevTools, которая работает над этой проблемой. Любые изменения, внесенные в инструмент «Стили», также изменяют файл в рабочей области. Зеркальное редактирование CSS включено по умолчанию в расширении.

Вы можете изменить любой селектор или создать новые селекторы в **** средстве «Стили», и все изменения будут автоматически отображены в правильном исходном CSS-файле. Расширение изменяет только скачанный файл; он не сохраняет изменения на жестком диске автоматически. Это мера безопасности, которая гарантирует, что вы случайно не перезапишет какой-либо код.

Пример зеркального отображения изменений из средства «Стили» в исходный CSS-файл

Изменение параметра CSS создало новую строку кода в правильном исходном CSS-файле:

Включение зеркального редактирования CSS

Чтобы включить и отключить зеркальное редактирование CSS:

На вкладке Edge DevTools перейдите к средству «Элементы «, а затем перейдите на панель «Стили «.

Или откройте меню команд, начните вводить зеркальное слово, а затем выберите microsoft Edge Tools: Toggle mirror editing on|off for CSS files in workspace:

Поддержка исходной карты

Зеркальное отображение CSS также поддерживает абстракции, такие как Sass или CSS-in-JS, при настройке проекта для создания исходных карт. У нас есть проблема отслеживания на GitHub и мы будем рады узнать, как это можно улучшить: редактирование зеркального отображения CSS с помощью исходных карт: известные проблемы и отзывы.

Интеграция сетевых средств

Средство « Сеть» позволяет отслеживать сетевой трафик и изменять сетевые условия приложения прямо внутри Visual Studio Code.

Используйте средство «Сеть «, чтобы:

Проанализируйте сетевой трафик и узнайте, почему некоторые ресурсы не загружены.

Моделирование различных сетевых условий, таких как отключение или медленное подключение.

Отключите любое кэширование, которое может привести к сложной отладке приложения.

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

Интеграция консоли

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

Вы можете просматривать сообщения журнала, получать доступ к объекту window и использовать удобные методы взаимодействия с МОДЕЛЬЮ DOM. Можно также отфильтровать консоль и задать динамические выражения.

Консоль параллельно с другими инструментами

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

Консоль во время выполнения и отладки

При запуске расширения из рабочего процесса запуска и отладки консоль отладки Visual Studio Code предоставляет большинство функций консоли DevTools внутри Visual Studio Code, но без параметров фильтрации и отображения более базовых результатов:

Интеграция инструментов приложений

Средство « Приложение» позволяет проверить различные части приложения.

Используйте средство «Приложение «, чтобы:

Проверьте различные параметры хранилища, такие как файлы cookie, LocalStorage, SessionStorage и IndexedDB.

Анализ кэша приложения.

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

Использование расширения с рабочим процессом Visual Studio Code отладки

Отладка JavaScript встроена в Visual Studio Code. Вы можете выполнять отладку в Chrome, Microsoft Edge или Node.js без установки других расширений. При отладке с помощью Microsoft Edge можно запустить Средства разработки Microsoft Edge из отладчика JavaScript.

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

Выберите «Edge». На панели инструментов отладки обратите внимание на кнопку «Проверить «:

Выберите «Проверить«, чтобы открыть средства разработчика Microsoft Edge в Visual Studio Code.

Когда вы впервые нажмете кнопку «Проверить», редактор предложит установить расширение Microsoft Edge Developer Tools for Visual Studio Code.

После установки расширения Microsoft Edge DevTools при выборе команды « Проверить» в Visual Studio Code:

Автоматическое открытие браузера и средств разработки при отладке в Visual Studio Code

Для отладки проекта может потребоваться изменить страницу по умолчанию, которая открывается в Microsoft Edge в Visual Studio Code. Чтобы изменить страницу по умолчанию на веб-сайт проекта:

В Visual Studio Code выберите «Новое окно > файла». Обратите внимание, что папка не открыта.

На панели действий выберите » Средства Microsoft Edge».

На панели «Инструменты Microsoft Edge: целевые объекты» щелкните ссылку «Открыть папку «.

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

При первом открытии папки необходимо убедиться, что вы доверяете авторам файлов в этой папке. Можно также установить флажок «Доверять авторам всех файлов в родительской папке»:

На панели «Инструменты Microsoft Edge: целевые объекты» теперь отображаются две кнопки: «Запустить экземпляр » и «Создать файл launch.json»:

Выберите «Создать файл launch.json «, чтобы launch.json создать объект в проекте.

Добавьте launch.json URL-адрес проекта. Если ОСТАВИТЬ URL-адрес пустым, отобразится страница по умолчанию.

См. также

Изменение параметров расширения

Вы можете настроить расширение Visual Studio Code под свои потребности.

В Visual Studio Code на панели действий выберите «Средства Microsoft Edge».

В разделе «Целевые объекты > средств Microsoft Edge» выберите «Дополнительные действия» (. ) справа от слова « Целевые объекты», а затем выберите «Открыть параметры».****

Если вы используете мышь, для доступа к дополнительным действиям (. ), выберите область **** «Целевые объекты» или наведите на нее указатель мыши:

Перезагрузка расширения после изменения параметров

Некоторые параметры имеют примечание о том, что чтение (требуется перезагрузка после изменения). Чтобы такой параметр вступает в силу:

В области «Целевые объекты > » инструментов Microsoft Edge нажмите кнопку «Запустить экземпляр«.**** Откроется Microsoft Edge, и отобразится вкладка «Edge DevTools «.

Связь с командой разработчиков Microsoft Edge DevTools

Отправьте свой отзыв, отправив вопрос в vscode-edge-devtools репозитории.

Бэкенд без ошибок: 6 расширений VS Code и Google Chrome для разработчиков серверной части

Расширения призваны облегчить работу разработчика, но многие бэкендеры не знают о них или попросту не хотят использовать. По мнению разработчика Алекса Омейера, таким образом специалисты лишают себя возможности оптимизировать рабочий процесс или повысить эффективность. Чтобы в очередной раз постараться переубедить коллег, он составил список из шести расширений для работы на бэкенде.

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

Расширения Google Chrome

Ниже представлен список из трех Chrome-расширений для бэкенд-разработчиков с альтернативами для каждого из них.

JSON Formatter

Пользователи: более 1 млн.

Расширение JSON Formatter преобразует необработанные данные JSON в читабельный древовидный объект.

Чтобы попробовать расширение, выполните следующий API-запрос к Facebook API в браузере.

Daily.dev

Пользователи: более 100 тыс.

Расширение для того, чтобы быть в курсе новостей разработчиков. Более того, Daily.dev — это агрегатор новостей, ориентированных на айтишников.

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

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

Octotree

Пользователи: более 400 тыс.

В платной версии много функций, таких как:

Расширения VS Code

Ниже представлен список из трех VS Code-расширений для бэкенд-разработчиков.

VS Code Remote Containers

Пользователи: более 5 млн.

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

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

Code Spell Checker

Пользователи: более 3 млн.

Path Intellisense

Пользователи: более 5 млн.

Расширение для бэкенд-разработчиков, чтобы избежать ошибок при импорте файлов. Оно автоматически заполняет путь импорта. Работает с большинством языков программирования, а также с HTML. В качестве сопоставления расширение использует ts.config.compilerOptions.baseUrl в конфигурации редактора.

Также можно установить пользовательские сопоставления, как показано в примере ниже.

Полезные расширения для Visual Studio Code

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

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

AutoCompleteTag — расширение, содержащее в себе 2 функциональности:

К сожалению, есть один минус для разработчиков на Typescript в TSX файлах — Generics тоже автозакрываются. Но для меня лучше лишний раз нажать Ctrl+Z, чем много лишних раз закрыть тэг самостоятельно

Better Comments — расширение, позволяющее писать более “дружественные” человеку комментарии — а именно, категоризировать сообщения в комментариях и выделять их цветом:

Bracket Pair Colorizer 2— Расширение, выделяющее одним цветом парные скобки, упрощает понимание кода. Скачать можно по ссылке https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Javascript Booster — расширение, позволяющее проводить мелкие быстрые рефакторинги в коде. Работает так же и в Typescript. Скачать: https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

Jest — расширение, которое автоматически в фоне запускает тесты, написанные на Jest и в случае падения тестов, сразу уведомляет во вкладке “проблем”. Скачать: https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

SCSS IntelliSense — плагин, добавляющий фичи вроде Go To Definition

TSLint — пока ещё актуальное расширение, помогающее увидеть стилистические ошибки в коде. в 2019 году разработка TSLint прекращается, и на данный момент происходит миграция на ESLint с плагином Typescript-ESLint. У нас в проектах еще используется TSLint, поэтому расширение всё еще полезно. Скачать можно по ссылке: https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin

Visual Studio IntelliCode — расширение, использующее искусственный интеллект для помощи при написании кода: при автодополнении выводит в верх списка самые вероятные для использования методы. Скачать можно по ссылке: https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

Заключение

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

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

4. Rainbow Indent

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

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

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

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

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

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

Другие хаки

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

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

Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже. Это было сделано в 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, вы можете сделать это:

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

VS Code — мой любимый редактор кода. Это — самый популярный из существующих редакторов, возможности которого можно расширять практически до бесконечности. И, что удивительно, разработала его компания Microsoft. Я полагаю, что ни один из других редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code. Одна из сильных сторон VS Code — это система расширений. Она позволяет создавать расширения буквально на все случаи жизни. Хочу рассказать вам о моём топ-10 расширений для VS Code.

1. Beautify

Расширение Beautify позволяет форматировать html-, js-, css-, JSON- и sass-код. Параметрами форматирования можно управлять. Это расширение является надстройкой над стандартной системой js-beautify и позволяет разработчику форматировать код именно так, как ему нужно.

2. Better Comments

Расширение Better Comments позволяет расширить возможности по работе с комментариями. В частности, оно позволяет делить комментарии на категории. Это могут быть уведомления, запросы, списки дел, примечания.

Использование Better Comments

3. Bookmarks

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

Закладки в коде

4. Bracket Pair Colorizer 2

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

Пары скобок выделены цветами

5. Format in Context Menus

Расширение Format in Context Menus позволяет форматировать файлы, выделяя их в боковой панели и вызывая команду контекстного меню. Это особенно удобно в тех случаях, когда имеется множество файлов, которые нужно отформатировать, но при этом в имеющемся окружении нет поддержки средств для форматирования и линтинга кода.

Работа с Format in Context Menus

6. Git Graph

Расширение Git Graph позволяет просматривать структуру репозитория и, пользуясь этой структурой, выполнять различные операции. Это расширение поддаётся тонкой настройкой и обладает множеством возможностей. Вероятно, для того, чтобы как следует его описать, понадобится целая отдельная статья.

Работа с Git Graph

7. GitLens

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

Работа с GitLens

8. Indent Rainbow

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

9. Path Intellisense

Расширение Path Intellisense оснащает редактор возможностями по автозавершению путей к файлам. Хотя VS Code поддерживает автозавершение путей и без расширений, эта возможность ограничена только HTML-, CSS- и JavaScript-файлами. Благодаря данному расширению автозавершением путей можно пользоваться при работе с любыми файлами и любыми языками.

Работа с Path Intellisense

10. Total Lines

Расширение Total Lines — это маленький удобный инструмент, который выводит в статус-баре сведения о количестве строк в открытом файле. Это — приятное дополнение к моей коллекции расширений.

А какими расширениями для VS Code пользуетесь вы?

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

Ненужные расширения для VS Code

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

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

1. Автоматическое переименование и закрытие тегов

Речь идёт о двух возможностях. Во-первых — это возможность одновременного переименования открывающих и закрывающих тегов. Во-вторых — возможность автоматического закрытия тегов.

Автоматическое переименование открывающего и закрывающего тегов

▍Расширения

▍Возможности VS Code

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

Для включения этой возможности надо добавить следующее в settings.json :

Пока поддерживаются только HTML-файлы, но в трекере проекта есть открытая задача, касающаяся поддержки JSX-файлов.

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

2. Синхронизация настроек

Теперь VS Code поддерживает синхронизацию настроек между разными компьютерами. Эта возможность доступна, начиная с предварительной версии VS Code 1.48 (июльский релиз 2020 года).

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

▍Расширение

▍Возможности VS Code

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

Для синхронизации можно пользоваться учётными записями Microsoft или GitHub, можно указывать то, что необходимо синхронизировать.

Выбор объектов, которые нужно синхронизировать

3. Управление импортом модулей

Управление импортом JavaScript- и TypeScript-модулей может представлять собой непростую задачу, особенно в том случае, если нужно реорганизовать проект или отрефакторить код. Разработчики стремятся, по возможности, это автоматизировать.

▍Расширения

▍Возможности VS Code

Кроме того, если вы хотите упорядочивать команды импорта при сохранении файлов, вам понадобится следующая настройка:

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

4. HTML- и CSS-сниппеты

Возможно, вы решите, что вам пригодилось бы следующее:

▍Расширения

▍Возможности VS Code

Добавление шаблонного HTML-кода в файл

Emmet поддерживает и сокращения, позволяющие вставлять в документы группы элементов. Их устройство напоминает CSS-селекторы.

Например, введём в HTML-файле такую конструкцию:

Это — лишь очень краткий рассказ о возможностях Emmet в сфере HTML. VS Code предлагает похожие возможности и для CSS. Среди этих возможностей мне больше всего нравится автоматическое добавление префиксов производителей браузеров. Подробности об Emmet вы можете найти в документации к этому набору инструментов. Кроме того, вам может пригодиться эта шпаргалка по Emmet.

Emmet поддерживает не только обычные HTML и CSS. Например, чтобы пользоваться Emmet при создании Vue-приложений и при написании JavaScript-кода, в settings.json нужно добавить следующее:

Если вы хотите включить поддержку Emmet для markdown, то вам следует знать об одной особенности (или, скорее, об ошибке). Она заключается в том, что для этого вам нужно, чтобы в emmet.excludeLanguages был бы записан пустой массив:

Обсуждение этого можно найти здесь.

5. Шаблонный текст

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

▍Расширение

▍Возможности VS Code

Ввод сокращения lorem

Это сокращение можно использовать не только при создании одного абзаца текста, но и, например, для генерирования нескольких блоков каких-то элементов. Скажем, конструкция p*2>lorem приведёт к созданию двух элементов

, заполненных шаблонным текстом:

6. Автоматическое удаление хвостовых пробелов

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

▍Расширения

▍Возможности VS Code

Итоги

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

Стремитесь ли вы всегда, когда это возможно, пользоваться стандартными возможностями VS Code, а не расширениями?

Выжать максимум: 7 лучших VS Code-расширений для увеличения производительности

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

«Купи мне истребитель». Сбор средств для Воздушных Сил ВСУ

1. Sourcery

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

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

На примере ниже Sourcery показывает, как можно упростить сложный оператор if-else :

Расширение поставляется с профессиональной версией. В ней больше функций, среди них, например, проверка дублирующихся разделов кода.

2. Stepsize

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

Ниже показано, как с помощью Stepsize добавить тикет в закладки:

3. Quokka.js

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

У инструмента есть расширенная версия, которая предлагает больше функций. Среди них:

4. Ponicode

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

5. StackFinder

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

Экономит время, потому нет необходимости выходить из редактора, открывать браузер и переходить на сайт Stack Overflow.

10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков

Комментарии 16

Вот некоторые расширения которые я использую в разработке на VueJS

Auto close tag — закрывает теги
Auto rename tag — переименовывает теги
Babel ES6/ES7 — добавляет подсветку синтаксиса к ES6/ES7
Beautify — причесывает код
Bracket Pair Colorizer — для разноцветной подсветки фигурных и обычных скобок в JS. Удобно чтобы не теряться.
eWam Plugin
Import Cost — показывает размер файлов импорта, удобно, чтобы знать, сколько таскаешь за собой.
Indent-rainbow — каждый уровень таба подсвечивает своим цветом, удобная штука, для питона в самый раз.
Paste and Indent — чтобы при вставке из буфера обмена, автоматически выравнивались отступы.
Path Intellisense
Sass от Robin Eentley
Sorting HTML and Jade attributes — сортирует атрибуты элементов HTML/PUG/Jade
vscode-svgviewer — просматривает svg файл картинкой, т.к. VSCode обычно его редактирует.
TODO-HIGHLIGHT — подсветка ключевых слов TODO:, FIXME
VSCode Great Icons — иконки для файлов
VSCode-spotify — Работает с плеером Spotify, внизу на статус панели появляется плеер. На винде не очень работает, умеет только отображать песню и нажимать паузу, а переключать песни может только на MacOS. В покупкой клавиатуры с медиа клавишами, надобность в этом расширении пропала (разве что посмотреть название песни).
Vue Peek — для Vuejs. Переходит по клику на компонент в шаблоне, на его файл.
Vue 2 Snippets
vue-beautify

Must-have плагины и несколько полезностей для С\С++ разработки в VS Code

Удивительно, но до сих пор на Хабре нет хорошей подборки плагинов для Visual Studio Code для тех, кто пишет на С/С++. Microsoft в своем блоге опубликовали только статью, совсем базового уровня с инструкцией по настройке. Но большинство читателей Хабра, тем более из разработчиков, обойдется без такой подробной инструкции. Есть только несколько подборок для веб-разработчиков, но не для С++.

Наверное это связано с тем, что большинство С++ разработчиков использует тяжеловесные IDE, в первую очередь конечно же Visual Studio.

Но в Linux и MacOS с полноценными IDE всё не так просто, да и тяжелая среда разработки не всегда нужна или просто не хочется ее использовать.

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

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

Немного истории

Первая IDE, которую я использовал начиная свой путь разработчиком была, уже историческая, Borland C++ 2.0. Потом я пересел на Visual Studio 6.0 и оставался (да и сейчас остаюсь) фанатом этой IDE. Но в какой-то момент возникла необходимость писать под Linux (это был, наверное, 2006 год). В Linux, первое время, я был шоке от отсутствия серьезных IDE — пробовал Eclipse, мучился и плевался. Не буду вдаваться в историю, но в итоге я разобрался с Make, CMake, научился быстро писать соответствующие файлы, потом были линкер скрипты, gdb, kdb и много всего интересного. В это время я полюбил и активно использовал vim на протяжении лет 5. После чего постепенно переключился на Sublime Text, затем на его вторую версию, а сейчас уже на третью.

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

А так как SDK у нас не только для Windows, но и для Linux и MacOS, то и код приходится писать в них. В прошлом году я попробовал VS Code, и он стал для меня хорошей альтернативой Sublime Text.

Если коротко их сравнить, то Sublime Text, на мой личный взгляд, даёт больше возможностей по настройке и по работе, но VS Code больше даёт из коробки. И если под рукой нет личной подборки расширений для Sublime Text или если вы вообще никогда этим редактором не пользовались, то Visual Studio Code —отличная штука.

Начну с нескольких очень полезных расширений. Их для С\С++ разработчика в VS Code не так много и главный из них это конечно:

C/C++ for Visual Studio Code

Ссылка на marketplace

Это основное расширения для поддержки С\С++ в VS Code, которое разрабатывается Microsoft. Подробное описание всего, что оно даёт есть на странице в маркете, я же здесь упомяну только самое главное (на мой взгляд конечно):

Надо отметить, что Microsoft большие молодцы и постоянно обновляют это расширение. Причем новые возможности этого расширения публикуются только в dev блоге от Microsoft и не очень заметны. Поэтому я решил рассказать тут о самых новых из них.

Глобальные настройки для IntelliSense

В мае 2018 в VS Code добавили возможность задать любые параметры для IntelliSense в пользовательском settings.json. Эти настройки автоматически применяются ко всем проектам.

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

Поддержка встроенного терминала при отладке

В декабре 2018 года Microsoft добавила возможность по отладке С\С++ приложений во встроенном терминале, вместо открытия отдельного окна с терминалом. Управляется эта возможность параметром externalConsole в launch.json.

Пока поддерживается только cppdbg и только на Linux и Windows, но в MacOS тоже обещали завезти в скором времени. Выглядит это так:

Комментарии для документирования

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

Пишем простой класс Box и добавляем комментарии в стандартном формате:

Комментарий ассоциируется с классами или функциями членам класса и показываются во всплывающих подсказках при наведении на соответствующий объект.

Выглядит это так:

Работа с контейнерами

В последнем обновлении от 6 февраля Microsoft добавила работу с С++ в Docker контейнерах. Теперь вы можете не только собирать код в контейнерах, но и отлаживать его внутри контейнеров. Подробности — в блоге Microsoft.

Сам я контейнерами по работе не пользуюсь — нет необходимости. Но наверняка это многим будет полезно, поэтому я и решил включить это в статью.

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

cquery

Ещё один достаточно глобальный плагин для С/С++/Objective-C разработчика в VS Code. Основная особенность — расширение было спроектировано и протестировано на очень больших проектах, например, на Chromium. Поэтому пригодится там, где стандартное расширение от Microsoft и его IntelliSense пасует (такое часто случает когда у вас больше 100Мб С++ исходников).

Список всех основных возможностей такой:

Расширение весьма полезное, но на github нет активности с ноября 2018 года. И судя по issue — Is this project dead? #867 проект действительно остановился в развитии. Знамя подхватил форк https://github.com/MaskRay/ccls, но я его пока не проверял, поэтому рекомендовать не могу. Скорее всего ccls со временем просто заменит cquery.

Easy C++ projects

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

Работает это так:

CMake Tools

Как очевидно из названия, расширение добавляет поддержку CMake. Как подсказали в комментариях, можно конечно все прописывать руками, но с расширением будет удобнее.
После установки надо будет сделать минимальную настройку. Выбрать toolchain:

После чего выбрать конфигурацию для сборки:

И все. Можно работать.
Расширение также умеет само генерировать для проектов простейшие CMake файлы.

Todo Tree

Расширений для создания TODO списков для VS Code несколько. Вы можете выбирать любое. Мне больше всего понравилось именно это. Единственный недостаток — оно требует https://github.com/BurntSushi/ripgrep, который не везде есть из коробки и ставится не очень удобно. В стандартных репозиториях Debian его пока нет.

Результат работы выглядит так:

GitLens

Как следует из названия расширения — оно улучшает работу с git. Надо отметить, что по-умолчанию в VS Code уже встроена некоторая поддержка git, но весьма ограниченная.

Основная фишка GitLens — показ прямо в редактируемой строке кто и в каком коммите менял её последний раз. Расширение также добавляет расширенный поиск по истории файла, поиск по коммитам, удобный вид для сравнения нескольких версий файла и многое другое. Для демонстрации работы я просто вставлю gif со страницы marketа, который наглядно показывает возможности расширения.

Git History

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

vscode-icons

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

Settings Sync

Ещё одно полезное расширение, назначение которого очевидно из названия.

Для синхронизации ваших настроек используется GitHub account token и Gist. Лично для меня — одно из самых полезных расширений, так как я использую и Windows, и Linux, и Mac.

Code Spell Checker

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

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

WakaTime

ссылка на marketplace
WakaTime — это сервис, который показывает красивую статистику\графики\метрики по вашему программированию. Штука исключительно эстетическая, но мне очень нравится. Расширение соответственно добавляет поддержку сервиса при работе в VSCode. Про сам сервис можно почитать тут.

Пример красивых графиков:

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

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

Несколько полезных настроек

По умолчанию VSCode отправляет телеметрию при падении, а также некоторые данные и информацию об ошибках в Microsoft. Если вас по каким-то причинам это не устраивает, то смело отключайте в настройках:

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

10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков

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

Существуют расширения для отладки и форматирования кода, расширения, облегчающие работу с различными платформами (вроде Heroku, GitHub, Docker, Azure) и технологиями. В Marketplace можно найти темы для редактора, линтеры, средства, облегчающие ввод повторяющихся фрагментов кода, и многое другое.

Автор материала, перевод которого мы публикуем сегодня, отобрал 10 лучших VS Code-расширений, предназначенных преимущественно для тех, кто занимается фронтенд-разработкой, то есть, работает с HTML, CSS, JavaScript и с различными веб-фреймворками.

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

Если раньше вы не работали с VS Code, но хотите попробовать этот редактор — загрузить его можно здесь. А вот, если интересно, материал, в котором продемонстрированы его возможности.

После загрузки и установки VS Code откройте панель расширений.

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

Поиск расширений для VS Code в Marketplace

Теперь поговорим о расширениях.

Live Server

Расширение Live Server

Это замечательное расширение предназначено для создания локального сервера, используемого в ходе разработки для размещения на нём статических и динамических страниц. После установки этого расширения на панели задач появится кнопка Go Live, которая позволяет запускать сервер. Нажатие этой кнопки в ходе редактирования HTML-страницы приведёт к тому, что эта страница будет открыта в браузере. Сервер поддерживает интерактивную перезагрузку страниц, которая производится после внесения изменений в код и сохранения соответствующих файлов.

Live Sass Compiler

Расширение Live Sass Compiler

Это расширение, в интерактивном режиме, компилирует SCSS-файлы в CSS-файлы. Делается это очень быстро. Предварительный просмотр результатов применения скомпилированных стилей в браузере можно запустить кнопкой Watch my sass в панели задач. Это расширение, как и только что рассмотренное, поддерживает интерактивную перезагрузку материалов.

Javascript (ES6) Code Snippets

Расширение Javascript (ES6) Code Snippets

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

Это — официальное расширение Node Package Manager (npm) для VS Code. Оно всемерно облегчает работу с файлом package.json. В частности, оно выводит предупреждения об отражённых в файле, но не установленных зависимостях, равно как и о тех, которые установлены, но в package.json не зарегистрированы. Оно помогает выявлять пакеты, версии которых не соответствуют правилам, заданным в package.json, и предоставляет в распоряжении разработчика удобные средства для запуска команд npm.

ESLint

Prettier

Это весьма популярное расширение может похвастаться почти четырьмя миллионами загрузок. Оно помогает форматировать JavaScript-код, что позволяет поддерживать единообразие кодовой базы и улучшает читабельность программ. В Marketplace есть похожее расширение, Beautify, тоже довольно популярное.

CSS Peek

Расширение CSS Peek

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

Angular 6 snippets

Расширение Angular 6 snippets

Это — официальное расширение, предлагающее разработчикам сниппеты для Angular 6. Соответствующий код следует руководству по стилю Angular, использование этого расширения ускоряет процесс разработки Angular-проектов, в частности, за счёт автодополнения кода. Оно поддерживает TypeScript, синтаксис сервис-воркеров, RxJS, ngRx и даже Angular Material. Если вы разрабатываете в VS Code Angular-приложения и ещё не пользуетесь этим расширением, то вам, определённо, стоит на него взглянуть.

Vetur

Это — официальное Vue.js-расширение для VS Code с впечатляющим количеством загрузок, которых у него более 5 миллионов. Оно предназначено для облегчения разработки Vue.js-приложений. Vetur умеет проверять код на наличие ошибок, поддерживает автодополнение и сниппеты.

Debugger for Chrome

Расширение Debugger for Chrome

Это — официальное расширение для VS Code, предназначенное для отладки JS-кода средствами Google Chrome. В настоящее время оно является одним из наиболее широко используемых VS Code-расширений.

Итоги

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

Если тема расширений для VS Code вам интересна — вот ещё один наш материал о них, ориентированный на JS-разработчиков. Публикуя тот материал, мы задавали читателям вопрос о том, какими расширениями они пользуются. Тогда оказалось, что это — Code Outline, Todo Tree и GitHub. Сегодня, уважаемые читатели, мы хотим задать вам тот же вопрос. Какие расширения для VS Code вам нравятся?

10 обязательных VS кодовых расширений для разработчиков JavaScript

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

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

VS Расширения кода по категориям

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

Расширения фрагмента

Когда вы впервые устанавливаете VS Code, он поставляется с несколькими встроенными фрагментами для JavaScript и Typescript. Фрагменты кода помогут вам быстро написать повторяющийся код. Тем не менее, вы можете обнаружить, что этого недостаточно. Вы можете легко создать свой собственный, или вы можете просто установить расширение, которое включает в себя множество новых полезных фрагментов.

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

Расширения подсветки синтаксиса

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

Linter Extensions

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

Однако программисты часто забывают, какой стиль кодирования им следует использовать. Чтобы обеспечить соблюдение правил, мы должны объявить стандарты. Вы можете создать свой собственный или просто использовать один из популярных стандартов стиля кодирования, например, Standard, Google или Airbnb. Вы можете настроить их, если есть определенное правило, которое вам не нравится.

Чтобы ваш код соответствовал вашему стандарту стиля кодирования, вам понадобится линтер. Вот самые популярные расширения линтера для кода Visual Studio:

Расширения узлов

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

Источник: импорт-стоимость

Форматирование расширений

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

К счастью, у нас есть расширения, которые могут сделать работу за нас:

Источник: vscode-javascript-booster

Расширения браузера

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

Источник: vscode-chrome-debug

Источник: vscode-chrome-debugvscode-live-server

Расширения рамок

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

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

Источник: узел-тдд

Удивительные расширения

Я просто помещаю следующую группу расширений VS Code в категорию «круто», потому что это лучше всего описывает их!

Источник: быстрый тип

Источник: codemetrics

Пакеты расширения

Резюме

Огромное количество качественных расширений VS Code делает его популярным выбором для разработчиков JavaScript. Никогда еще не было так легко написать эффективный код JavaScript. Такие расширения, как ESLint, помогают избежать распространенных ошибок, в то время как другие, такие как Debugger for Chrome, облегчают отладку кода. Расширения Node.js с их функциями IntelliSense помогают правильно импортировать модули, а доступность таких инструментов, как Live Server и клиент REST, снижает вашу зависимость от внешних инструментов для выполнения вашей работы. Все эти инструменты значительно упрощают процесс итерации.

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

7 расширений для VS Code, установив которые, вы не захотите выходить из редактора

Comments 64

Вы определитесь, пожалуйста, Auto Rename Tag (Auto Close Tag) — расширение для VS Code, установив которое, я не захочу выходить из редактора или ненужное расширение.

Можно через F2 переименовывать попарно, или через Ctrl+D если сразу несколько элементов.

расширение для VS Code, установив которое, я не захочу выходить из редактора или ненужное расширение

Расширение REST Client позволяет, прямо из VS Code, отправлять HTTP-запросы, и тут же просматривать ответы на них

Оно позволяет форматировать код. Beautify поддерживает JavaScript, HTML, CSS, Sass и JSON

ничего не имею против vscode, но в vim для такого даже расширения не нужны 🙂

Да что уж там) Лучше сразу на ассемблере писать, тогда и запросы не нужны 🙂

CSS Peak — классная штука. Но конфликтовал с Angular файлам, пришлось удалить. Не знаю, пофиксили уже или нет.

Beautify — слишком много настроек… Заменил на Prettier и счастлив.

Извините, если много спама к одному посту

О! А я наоборот, не могу перейти в WebStorm) Он манил меня некоторыми фичами, но UI/UX… Чувствую себя у штурвала космического корабля.

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

На самом деле у Web Storm есть только один большой плюс, все идет из коробки, не надо искать плагины. Есть всякие мелкие плюшки (навигация из шаблонов класс для Angular), которых нет в VSC, удобная работа с VCS (это на любителя конечно), Code Inspection отличный, рефакторинги (вот этого не хватает в VSC).

Я, конечно, не он, но тем не менее:

В целом, шторм ощущается именно как IDE — полноценная среда для разработки, в которой есть все, а чего нет — можно доставить плагином.
Я много раз пробовал в VSCode, но в конечном счете он как был, так и остался для меня редактором. Да, с плагинами можно подтянуть его за уши, но воткнув в него столько плагинов, чтобы он хоть как-то походил на IDE, приходишь к выводу что шторм не такой уж и медленный а UX не такой уж и ужасный. Это тот момент, который часто опускают любители VSCode.

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

Comments 70

Торбинс, Бэггингс, Сумникс, Сумкин … действительно, какая разница, это автор сделал такое странное имя, ему и пинки.
Перевод — это скорее пересказ той-же истории другим языком. Особенно когда это не технический текст, а более описательный. И выбор этого языка и конкретных слов — на переводчике.

У меня заголовок вызывает первые три пункта «Мозг, Руки, Электричество». При том, что внутри действительно полезные расширения названы, аналогами которых я пользуюсь в PyCharm и MSVS.
Но сама формулировка именно заголовка — «мда. » и печаль. И то, что она и у исходного автора такая же, мало что меняет.

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

Вот только JetBrains — платный

Разве там нет Community версии?

А ещё VSCode, за счет расширений, имеет поддержку сотен языков программирования

Разве там нет Community версии?

Либо я плохо искал, либо Community есть только для Idea (Java/Android)

Только что проверил — Community-версия есть как минимум у PyCharm. Из плагинов разве что нет цветных скобочек, и лично мне не хватает «зебры» на фоне для методов, но это решается в общем фолдингом.

Просто на фоне комбайна типа PyCharm, vsCode выглядит как та самая «маленькая тележка»…

PS: Думал что и у WebStorm и CLion есть communuty-версии, ан нет, оказывается. Странно даже.

Из плагинов разве что нет цветных скобочек

Rainbow Brackets, ещё и цвета можно настроить под себя через настройки цветов.

Про «Зебру» не понял, что за штука, как выглядит, чем полезна?

А, ну так оно для PyCharm тоже есть, называется так-же «Intent Rainbow»/
Только мне меньше понравилось, чем то, что в статье скрином приведено, в пайчаромовом слишком много цвета выходит. Возможно, нужно просто в настройках покопаться.

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

Есть в некоторых редакторах, но не в PyCharm.
Ещё полезна синхронизация разных view с разным фолдингом, но мой тикет на эту тему JB походу закрыли. То-ли не смог обьяснить, то-ли не захотели понять.

Просто визуально зебра всё же лучше. Человекам гораздо проще видеть глазами «цветные пятна», чем «тонкие полоски».

А синхронизированные виды с разным фолдингом, это когда у вас есть «структурный вид» со свёрнутым кодом и «детальный вид», и курсоры в них синхронизированы, так что когда вы идетё куда-то что-то смотреть в структуре — второй вид очень быстро прыгает на развёрнутый кусок и наоборот — когда вы ковыряетесь в методах, второй вид позволяет быстро понимать где вы вообще находитесь и что оно делает.

Еще есть программа EAP (Early Access Program), но она не всегда действует(

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

Немного об опыте: юзал VS Code в качестве основной IDE для Python примерно 1 — 1.5 года (до первой половины 2019, если не изменяет память), далее и по настоящее время — PyCharm.

А потом появилась лицензия на PyCharm. И вот тут то я понял, что все это время я занимался явно не тем. Поддержка языка — отличная. Всякие штуки типа раннеры тестов — идеально. Виртуальные окружения (venv) — вообще никаких проблем, всё просто автоматом работает, даже забываешь об этом иногда, а поначалу так вообще тупыми вопросами задавался (после опыта от vs code), типа — вот эта кнопочка для запуска теста, а она точно САМА ПОЙМЁТ что в проекте есть venv и сможет его активировать? И куча куча мелочей, которые перестали вообще вызывать вопросов. Просто запустил — просто работает.

Так что с VS Code не всё так однозначно.

В защиту VS Code могу сказать что — поддержка Angular/Typescript проектов — идеальная на том же уровне, на котором Python интегрирован в PyCharm, а это — отличные реально работающие рефакторинги по ts-коду, интеграция с шаблонами, с навигацией/автокомплитом между HTML ts, подсказки по html и что-то, и все время работы с PyCharm — работу с фронтовыми проектами на Angular/Typescript продолжаю вести на VS Code (но тут уже просто во-первых привычка во-вторых — ограниченные ресурсы личной тачки, по ощущениям VS Code более плавно себя ведёт.

Но есть один нюанс — в том же PyCharm который хоть и позиционируется как IDE для Python — по факту всё вот это вышеописанное про angular/ts и многое другое не описанное тут — подключается тоже плагинами, и в итоге можно в том же PyCharm спокойно пилить какой-нибудь nodejs проект на TS с Vue на фронте без единой строки питонячего кода, и не чувствовать при этом себя не в том месте.

Личный вывод для себя — теперь VS Code заняла у меня почетное место блокнота (потеснив старый добрый Nodepad++), благодаря более обширному кол-ву фич из коробки, благодаря тому что спокойно пережевала огромные файлы с логами (когда npp не смог). Однако до полноценной IDE она ещё не дотягивает (и сейчас иногда открываю питонячьи проекты на VS Code — ничего нового, то же самое дубовое поведение без намека на юзерфрендли и развитие).

MSVS тоже сильно проигрывает PyCharm в работе с питоном. Ну вот просто пайчарм настолько лучше практически во всём с питоном(да плюс ещё расширения, дающие и другие языки) — и всё тут. Другой вопрос, если надо подключиться к процессу и отлаживать пошагово питон-код — тут бесплатный вижуал справляется, а пайчарм нужен в Pro лицензии и донастройка требуется.

Ох, как же я вас понимаю.
У себя в команде хотел всех с PyCharm перекинуть на VSCode. Мы честно проработали почти полгода и я сам же сдался и поставил PyCharm. Теперь думаем Pro лицензии закупить, но придётся копить (под стартап не попадаем, потому что юр.лицо слишком давно сделали).
Из того что раздражало:

Правда были вещи в VSCode, которые успели понравиться:

Но в целом, работа на PyCharm выполняется быстрее и комфортнее. Цены бы ещё по коммунистичнее.

Именно о Ctrl+P / Ctrl+Shift+P я имел в виду, когда говорил о шорткатах. у PyCharm есть возможность сделать так же, но набор Action’s с одной стороны неполный (в разных Tool Window’ах присутствуют кнопки, до которых из actions, похоже, не достучаться, и с другой — вперемешку с кучей toggle’ов из настроек (хотя иногда это удобно, но чаще всего они просто мешаются в списке и дезориентируют, благо в окне настроек поиск работает отлично)

А в JetBrains придется ставить несколько отдельных приложений.

Это не так. Все отдельные приложения (ну может не все, но 90%) которые есть у JB доступны в виде плагинов в Intellij IDEA. Просто обновления до них доходят с небольшой задержкой (что в общем маловажно, если используете stable канал). Когда-то давно я для проектов на разных языках держал открытыми несколько разных редакторов, сейчас использую только IDEA и в зависимости от необходимости, включаю/выключаю разные языковые плагины.
Да, она всё ещё сильно заточена под Java, потому в меню могут быть некоторые пункты, которые работают только там (даже если поотключать Java-related плагины), но со временем перестаёшь их замечать.

Вот только JetBrains — платный, в отличии от VSCode

Я полагаю, что ни один из БЕСПЛАТНЫХ редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code.

И все равно неверно-очень сильно зависит от языка.
Поддержка джавы в бесплатной версии IDEA явно лучше чем в VS code. Или в том же полутрупе в виде нетбинса.
Для многих других языков ситуация аналогичная, есть та же очень мощная visual studio community, н хочу холиварить что лучше но «не может дать разработчику хотя бы половину того, что способен дать ему VS Code.» явно неверно будет.

Если что сам сижу на vscode и вполне доволен им, но утверждение явно спорное.

Раз сравниваем IDE, то только в VS Code есть дебаггер для Javascript в бесплатной версии (насколько в курсе). А с недавних пор в insiders-версии в дебаггере прикрутили ещё и профилирование

И кстати, новый дебаггер с профайлером уже можно установить как расширение на stable-версию: marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

А так конечно же вопрос личных предпочтений, и у JetBrains продукты вполне достойные

Я еще использую Code runner, очень удобная штука. Не надо лезть в терминал и запускать скрипт вручную.

Еще питоновское расширение от Майкрософт позволяет неплохо с Jupyter блокнотами работать.

И доступ по SSH очень удобная вещь 🙂

Я конечно понимаю, что вопрос не совсем в тему, но всё таки спрошу от лица трудящихся:
Почему была удалена недавняя статья о том, как попасть в Facebook?
Где видео по этой же теме на Вашем Youtube канале (которое было обещано через неделю после выхода статьи)?

Мне не хватало поделок типа Better Comments, надо было что-то серьезное, чтобы ссылки прямо в комментариях работали, и комментарии не устаревали, поэтому я запилил такое расширение:

Я последние два года, очень часто меняю инструменты, языки и специфику работы.
Qt, C++, C#, Python, UE4, cocos2d-x, godot, gdscript, lua и т.д.
И сколько раз пытался перейти на VSCode, столько же раз не мог с ним освоится. В ручную прописывать пути до инструментов, библиотек и хедеров.
В ручную постоянно прикручивать отладчики, анализаторы и прочее.
Плюс еще нужно читать монструозную документацию по VSCode, ибо все параметры в нем по сути, ты настраиваешь в json формате, в каких то конфигах. После настройки среды, ты забываешь про нее на пол год, а через пол года, надо все с начала настраивать, вспоминать, искать докуменацию. Короче на VSCode уходит не оправдано много времени, если ты не сидишь на одном стеке технологий и прыгаешь между стартапами, инди проектами и т.п.

А вот скилл, работать из блокнота — очень полезен. Когда нет времени развертывать сложную среду, что бы настроить 3 скрипта для Nakama Сервера, на Go

Для меня серьезным недостатком является слабая работа Go To Definition для JavaScript.

На последних версиях все еще не работает. Суть проблемы исходит из того, что в качестве сервиса анализа JavaScript используется сам tsc (сам транслятор typescript), и ему плохо дается анализ динамических конструкций.
Была идея вместо tsc прикрутить какой-нибудь другой анализатор, но это сулит кучу работы.

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

Я в N++ нафигацию по коду сделал с пом.: jN + ctags + http://script-coding.com/svcsvc.html
Не Бог весть что, но достаточно.

ПС. Некоторые плагины из статьи делаются в N++ через jN на коленке. Что-то типа «Path Intellisense» я делал пару месяцев назад.

Я недавно на VsCode перешёл из-за киллер фичи, а именно работы в нем прямо в браузере благодаря code-server. И это очень классно, потому что раньше приходилось монтировать из дев-машины папки, и работало это медленно. А сейчас можно работать с любого компьютера моментально переключаясь, без установки приложений.

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

Комментарии 70

Торбинс, Бэггингс, Сумникс, Сумкин … действительно, какая разница, это автор сделал такое странное имя, ему и пинки.
Перевод — это скорее пересказ той-же истории другим языком. Особенно когда это не технический текст, а более описательный. И выбор этого языка и конкретных слов — на переводчике.

У меня заголовок вызывает первые три пункта «Мозг, Руки, Электричество». При том, что внутри действительно полезные расширения названы, аналогами которых я пользуюсь в PyCharm и MSVS.
Но сама формулировка именно заголовка — «мда. » и печаль. И то, что она и у исходного автора такая же, мало что меняет.

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

Вот только JetBrains — платный

Разве там нет Community версии?

А ещё VSCode, за счет расширений, имеет поддержку сотен языков программирования

Разве там нет Community версии?

Либо я плохо искал, либо Community есть только для Idea (Java/Android)

Только что проверил — Community-версия есть как минимум у PyCharm. Из плагинов разве что нет цветных скобочек, и лично мне не хватает «зебры» на фоне для методов, но это решается в общем фолдингом.

Просто на фоне комбайна типа PyCharm, vsCode выглядит как та самая «маленькая тележка»…

PS: Думал что и у WebStorm и CLion есть communuty-версии, ан нет, оказывается. Странно даже.

Из плагинов разве что нет цветных скобочек

Rainbow Brackets, ещё и цвета можно настроить под себя через настройки цветов.

Про «Зебру» не понял, что за штука, как выглядит, чем полезна?

А, ну так оно для PyCharm тоже есть, называется так-же «Intent Rainbow»/
Только мне меньше понравилось, чем то, что в статье скрином приведено, в пайчаромовом слишком много цвета выходит. Возможно, нужно просто в настройках покопаться.

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

Есть в некоторых редакторах, но не в PyCharm.
Ещё полезна синхронизация разных view с разным фолдингом, но мой тикет на эту тему JB походу закрыли. То-ли не смог обьяснить, то-ли не захотели понять.

Просто визуально зебра всё же лучше. Человекам гораздо проще видеть глазами «цветные пятна», чем «тонкие полоски».

А синхронизированные виды с разным фолдингом, это когда у вас есть «структурный вид» со свёрнутым кодом и «детальный вид», и курсоры в них синхронизированы, так что когда вы идетё куда-то что-то смотреть в структуре — второй вид очень быстро прыгает на развёрнутый кусок и наоборот — когда вы ковыряетесь в методах, второй вид позволяет быстро понимать где вы вообще находитесь и что оно делает.

Еще есть программа EAP (Early Access Program), но она не всегда действует(

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

Немного об опыте: юзал VS Code в качестве основной IDE для Python примерно 1 — 1.5 года (до первой половины 2019, если не изменяет память), далее и по настоящее время — PyCharm.

А потом появилась лицензия на PyCharm. И вот тут то я понял, что все это время я занимался явно не тем. Поддержка языка — отличная. Всякие штуки типа раннеры тестов — идеально. Виртуальные окружения (venv) — вообще никаких проблем, всё просто автоматом работает, даже забываешь об этом иногда, а поначалу так вообще тупыми вопросами задавался (после опыта от vs code), типа — вот эта кнопочка для запуска теста, а она точно САМА ПОЙМЁТ что в проекте есть venv и сможет его активировать? И куча куча мелочей, которые перестали вообще вызывать вопросов. Просто запустил — просто работает.

Так что с VS Code не всё так однозначно.

В защиту VS Code могу сказать что — поддержка Angular/Typescript проектов — идеальная на том же уровне, на котором Python интегрирован в PyCharm, а это — отличные реально работающие рефакторинги по ts-коду, интеграция с шаблонами, с навигацией/автокомплитом между HTML ts, подсказки по html и что-то, и все время работы с PyCharm — работу с фронтовыми проектами на Angular/Typescript продолжаю вести на VS Code (но тут уже просто во-первых привычка во-вторых — ограниченные ресурсы личной тачки, по ощущениям VS Code более плавно себя ведёт.

Но есть один нюанс — в том же PyCharm который хоть и позиционируется как IDE для Python — по факту всё вот это вышеописанное про angular/ts и многое другое не описанное тут — подключается тоже плагинами, и в итоге можно в том же PyCharm спокойно пилить какой-нибудь nodejs проект на TS с Vue на фронте без единой строки питонячего кода, и не чувствовать при этом себя не в том месте.

Личный вывод для себя — теперь VS Code заняла у меня почетное место блокнота (потеснив старый добрый Nodepad++), благодаря более обширному кол-ву фич из коробки, благодаря тому что спокойно пережевала огромные файлы с логами (когда npp не смог). Однако до полноценной IDE она ещё не дотягивает (и сейчас иногда открываю питонячьи проекты на VS Code — ничего нового, то же самое дубовое поведение без намека на юзерфрендли и развитие).

MSVS тоже сильно проигрывает PyCharm в работе с питоном. Ну вот просто пайчарм настолько лучше практически во всём с питоном(да плюс ещё расширения, дающие и другие языки) — и всё тут. Другой вопрос, если надо подключиться к процессу и отлаживать пошагово питон-код — тут бесплатный вижуал справляется, а пайчарм нужен в Pro лицензии и донастройка требуется.

Ох, как же я вас понимаю.
У себя в команде хотел всех с PyCharm перекинуть на VSCode. Мы честно проработали почти полгода и я сам же сдался и поставил PyCharm. Теперь думаем Pro лицензии закупить, но придётся копить (под стартап не попадаем, потому что юр.лицо слишком давно сделали).
Из того что раздражало:

Правда были вещи в VSCode, которые успели понравиться:

Но в целом, работа на PyCharm выполняется быстрее и комфортнее. Цены бы ещё по коммунистичнее.

Именно о Ctrl+P / Ctrl+Shift+P я имел в виду, когда говорил о шорткатах. у PyCharm есть возможность сделать так же, но набор Action’s с одной стороны неполный (в разных Tool Window’ах присутствуют кнопки, до которых из actions, похоже, не достучаться, и с другой — вперемешку с кучей toggle’ов из настроек (хотя иногда это удобно, но чаще всего они просто мешаются в списке и дезориентируют, благо в окне настроек поиск работает отлично)

А в JetBrains придется ставить несколько отдельных приложений.

Это не так. Все отдельные приложения (ну может не все, но 90%) которые есть у JB доступны в виде плагинов в Intellij IDEA. Просто обновления до них доходят с небольшой задержкой (что в общем маловажно, если используете stable канал). Когда-то давно я для проектов на разных языках держал открытыми несколько разных редакторов, сейчас использую только IDEA и в зависимости от необходимости, включаю/выключаю разные языковые плагины.
Да, она всё ещё сильно заточена под Java, потому в меню могут быть некоторые пункты, которые работают только там (даже если поотключать Java-related плагины), но со временем перестаёшь их замечать.

Вот только JetBrains — платный, в отличии от VSCode

Я полагаю, что ни один из БЕСПЛАТНЫХ редакторов и ни одна из других IDE не может дать разработчику хотя бы половину того, что способен дать ему VS Code.

И все равно неверно-очень сильно зависит от языка.
Поддержка джавы в бесплатной версии IDEA явно лучше чем в VS code. Или в том же полутрупе в виде нетбинса.
Для многих других языков ситуация аналогичная, есть та же очень мощная visual studio community, н хочу холиварить что лучше но «не может дать разработчику хотя бы половину того, что способен дать ему VS Code.» явно неверно будет.

Если что сам сижу на vscode и вполне доволен им, но утверждение явно спорное.

Раз сравниваем IDE, то только в VS Code есть дебаггер для Javascript в бесплатной версии (насколько в курсе). А с недавних пор в insiders-версии в дебаггере прикрутили ещё и профилирование

И кстати, новый дебаггер с профайлером уже можно установить как расширение на stable-версию: marketplace.visualstudio.com/items?itemName=ms-vscode.js-debug-nightly

А так конечно же вопрос личных предпочтений, и у JetBrains продукты вполне достойные

Я еще использую Code runner, очень удобная штука. Не надо лезть в терминал и запускать скрипт вручную.

Еще питоновское расширение от Майкрософт позволяет неплохо с Jupyter блокнотами работать.

И доступ по SSH очень удобная вещь 🙂

Я конечно понимаю, что вопрос не совсем в тему, но всё таки спрошу от лица трудящихся:
Почему была удалена недавняя статья о том, как попасть в Facebook?
Где видео по этой же теме на Вашем Youtube канале (которое было обещано через неделю после выхода статьи)?

Мне не хватало поделок типа Better Comments, надо было что-то серьезное, чтобы ссылки прямо в комментариях работали, и комментарии не устаревали, поэтому я запилил такое расширение:

Я последние два года, очень часто меняю инструменты, языки и специфику работы.
Qt, C++, C#, Python, UE4, cocos2d-x, godot, gdscript, lua и т.д.
И сколько раз пытался перейти на VSCode, столько же раз не мог с ним освоится. В ручную прописывать пути до инструментов, библиотек и хедеров.
В ручную постоянно прикручивать отладчики, анализаторы и прочее.
Плюс еще нужно читать монструозную документацию по VSCode, ибо все параметры в нем по сути, ты настраиваешь в json формате, в каких то конфигах. После настройки среды, ты забываешь про нее на пол год, а через пол года, надо все с начала настраивать, вспоминать, искать докуменацию. Короче на VSCode уходит не оправдано много времени, если ты не сидишь на одном стеке технологий и прыгаешь между стартапами, инди проектами и т.п.

А вот скилл, работать из блокнота — очень полезен. Когда нет времени развертывать сложную среду, что бы настроить 3 скрипта для Nakama Сервера, на Go

Для меня серьезным недостатком является слабая работа Go To Definition для JavaScript.

На последних версиях все еще не работает. Суть проблемы исходит из того, что в качестве сервиса анализа JavaScript используется сам tsc (сам транслятор typescript), и ему плохо дается анализ динамических конструкций.
Была идея вместо tsc прикрутить какой-нибудь другой анализатор, но это сулит кучу работы.

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

Я в N++ нафигацию по коду сделал с пом.: jN + ctags + http://script-coding.com/svcsvc.html
Не Бог весть что, но достаточно.

ПС. Некоторые плагины из статьи делаются в N++ через jN на коленке. Что-то типа «Path Intellisense» я делал пару месяцев назад.

Я недавно на VsCode перешёл из-за киллер фичи, а именно работы в нем прямо в браузере благодаря code-server. И это очень классно, потому что раньше приходилось монтировать из дев-машины папки, и работало это медленно. А сейчас можно работать с любого компьютера моментально переключаясь, без установки приложений.