Не работает polacode vs code

5 отличных инструментов для создания скриншотов кода

Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

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

Polacode

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

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

Установка

• Откройте Visual Studio Code.
• В меню перейдите в расширения (View > Extensions).
• В строке ввода наберите Polacode и кликните Install.

Как сделать скриншот

Откройте VS Code, в меню выберите View, затем кликните по палитре команд. В строке ввода наберите Polacode и выберите его из выпадающего меню. Polacode откроется у правого края редактора.

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

Преимущества

• Делает легковесные скриншоты (до 7kb).
• Легок в установке (если вы используете Visual Studio Code).
• Сохраняет на скриншотах тему вашего редактора кода.

Недостатки

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

Carbon

Carbon это бесплатная open source библиотека. С ее помощью вы сможете создавать прекрасные снимки вашего кода и легко делиться ими. Carbon позволяет вам выбирать тему оформления скриншота и предпочитаемый язык программирования (и соответственно разные варианты подсветки синтаксиса), делиться снимками в Twitter, а также настраивать такие вещи как стиль окна, цвет фона, шрифт и т. д.

Установка

Устанавливать Carbon на свой сайт не нужно. Просто зайдите на сайт carbon.now.sh, вставьте свой код и заберите скриншот!

Как сделать скриншот

Чтобы сделать скриншот при помощи Carbon, скопируйте нужный код в своей IDE или редакторе кода и вставьте его в окно на сайте. Затем кликните кнопку Export в правом верхнем углу.

Достоинства

• Понятный, дружественный к пользователю интерфейс.
• Делает суперлегкие скриншоты.
• Можно менять шрифты, размер шрифта и цветовую тему.
• Автоматически определяет язык программирования и применяет соответствующую подсветку синтаксиса.
• Генерирует изображения в SVG и PNG.

Недостатки

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

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

Greenshot

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

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

Установка

Чтобы установить Greenshot, пользователи Windows могут зайти на сайт Greenshot и скачать его бесплатно. Что касается пользователей Mac, они могут установить Greenshot через iTunes за $1.99.

Как сделать скриншот

После установки программы кликните на значке Greenshot в правом нижнем углу экрана. Выберите, какого рода скриншот вам нужен:

Достоинства

• Довольно прост в использовании.
• Имеет много опций для создания скриншотов.

Недостатки

• Для пользователей Mac программа не бесплатна.
• Для пользователей Linux и сходных дистрибутивов программа и вовсе недоступна.

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

Code Screenshots

Code Screenshots это плагин JetBrains, используемый для снимков кода в IDE Jetbrains. Он совместим с IntelliJ IDEA, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, GoLand, DataGrip, Rider, MPS и Android Studio.

Установка

Чтобы установить Code Screenshots, скачайте плагин с сайта Jetbrains и следуйте процедуре инсталляции.

Как сделать скриншот

Как работает этот плагин? Выделите код, снимок которого вам нужен, и нажмите горячие клавиши (по умолчанию это Ctrl+Alt+Shift+A), чтобы сделать скриншот. Сочетание клавиш можно изменить на более подходящее, для этого нужно перейти в Settings|Keymap. После того как снимок сделан, становится доступным действие «Save as Image» и вы можете сохранить свой скрин в виде PNG-файла.

Достоинства

• Супербыстрый и простой в использовании.
• Плагин отличается легковесностью (около 47kb).

Недостатки

• Совместим только с IDE Jetbrains.

Исходный код Code Screenshots можно посмотреть в репозитории на GitHub.

ShareX

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

Установка

Чтобы установить ShareX, перейдите на сайт проекта, скачайте файл установки и следуйте инструкциям инсталляции.

Как сделать скриншот

После установки запустите приложение и найдите в меню пункт Capture. Выберите из доступных подпунктов нужный вариант снимка. Если вам нужно сохранять сделанные скриншоты, не забудьте перейти в меню к After image tasks и отметить опцию «Save image to file».

Достоинства

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

Недостатки

• Приложением могут воспользоваться только пользователи Windows.

Итоги

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

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

Источник

Секретные хаки 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

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

3. Turbo Console.log()

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

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

4. Live server

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

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

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

6. Breadcrumbs и outlines

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

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

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

Другие хаки

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

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

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

Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже. Это было сделано в 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, вы можете сделать это:

Источник