visual studio code скриншот кода
5 отличных инструментов для создания скриншотов кода
Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».
Рано или поздно у каждого разработчика возникает необходимость сделать снимок кода — своего или чужого. Причин для этого может быть много, например, чтобы приложить в качестве иллюстрации в статье, попросить помощи на форуме, похвастаться в Twitter или даже чтобы добавить в коллекцию хороших примеров кода, к которым, возможно, захотите вернуться позже. В любом случае, пользу скриншотов в работе трудно переоценить, поскольку все мы ими пользуемся.
В этой статье мы собрали пять отличных инструментов, с помощью которых можно делать скриншоты кода.
Polacode
Polacode это расширение Visual Studio Code, позволяющее создавать уникальные скриншоты, которыми можно делиться с другими людьми. Polacode сохраняет вашу существующую тему и шрифты, отображая их на прекрасных скринах. Вот полюбуйтесь:
На примере этого скриншота видно, что Polacode эффективно добавляет тень и отступы, а также закругляет углы скриншота. Кроме того, он скрывает такие вещи как полосы прокрутки и маркеры сворачивания кода.
Установка
Как сделать скриншот
Откройте VS Code, в меню выберите View, затем кликните по палитре команд. В строке ввода наберите Polacode и выберите его из выпадающего меню. Polacode откроется у правого края редактора.
Выделите и скопируйте код, скриншот которого вы хотели бы сделать. Кликните кнопку screenshot внизу блока. Вам будет предложено указать путь для сохранения снимка. Выберите путь и сохраните свой только что созданный скриншот.
Преимущества
Недостатки
Carbon
Carbon это бесплатная open source библиотека. С ее помощью вы сможете создавать прекрасные снимки вашего кода и легко делиться ими. Carbon позволяет вам выбирать тему оформления скриншота и предпочитаемый язык программирования (и соответственно разные варианты подсветки синтаксиса), делиться снимками в Twitter, а также настраивать такие вещи как стиль окна, цвет фона, шрифт и т. д.
Установка
Устанавливать Carbon на свой сайт не нужно. Просто зайдите на сайт carbon.now.sh, вставьте свой код и заберите скриншот!
Как сделать скриншот
Чтобы сделать скриншот при помощи Carbon, скопируйте нужный код в своей IDE или редакторе кода и вставьте его в окно на сайте. Затем кликните кнопку Export в правом верхнем углу.
Достоинства
Недостатки
Если интересуетесь, можете зайти посмотреть репозиторий Carbon на Github. Там есть плагины для различных редакторов и IDE. Чтобы ими воспользоваться, просто следуйте шагам, описанным в документации.
Greenshot
Greenshot это программа для создания скриншотов, которой могут пользоваться не только разработчики, но и менеджеры проектов, тестировщики и технические писатели. При помощи Greenshot пользователи могут делать снимки и редактировать полученные изображения, используя встроенный редактор. Также стоит отметить возможность размывать часть изображения, делая его нечитаемым. Ключевые особенности Greenshot:
Установка
Как сделать скриншот
После установки программы кликните на значке Greenshot в правом нижнем углу экрана. Выберите, какого рода скриншот вам нужен:
Достоинства
Недостатки
Если хотите заглянуть в исходный код 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-файла.
Достоинства
Недостатки
Исходный код Code Screenshots можно посмотреть в репозитории на GitHub.
ShareX
Приложение, созданное для пользователей Windows. С его помощью можно делать снимки экрана, в том числе скриншоты больших отрывков кода (с прокруткой), благодаря чему устраняется необходимость дробить снимки. Приложение также имеет инструмент для редактирования. ShareX можно использовать в качестве расширения для браузера. Исходный код можно посмотреть на Github.
Установка
Чтобы установить ShareX, перейдите на сайт проекта, скачайте файл установки и следуйте инструкциям инсталляции.
Как сделать скриншот
После установки запустите приложение и найдите в меню пункт Capture. Выберите из доступных подпунктов нужный вариант снимка. Если вам нужно сохранять сделанные скриншоты, не забудьте перейти в меню к After image tasks и отметить опцию «Save image to file».
Достоинства
Недостатки
Итоги
Существенный плюс представленных здесь вариантов создания скриншотов это их бесплатность. Стоит попробовать каждый, чтобы решить, какой подходит вам больше всего.
Возможно, мы пропустили еще какие-нибудь хорошие программы для создания скриншотов. Если знаете такие, — вэлкам в комментарии! По возможности также указывайте достоинства и недостатки предлагаемых вариантов.
Как настроить Visual Studio Code для записи скринкаста
На Egghead есть курс по записи скринкастов, с которым вам также стоит ознакомиться, если вы новичок в этом деле.
Настройки VSCode
Настройка VSCode включает несколько аспектов. Для упрощения задачи автор рекомендует создать базовый проект, который можно повторно использовать, поскольку будут создаваться настройки рабочего пространства, в том числе и отключение некоторых расширений.
Настройки рабочего пространства
В процессе настройки для записи скринкаста необходимо убедиться, что участники видят ваши действия на экране.
Рекомендуемые базовые настройки для скринкастов:
На скриншоте показано, как задать размер с помощью этих настроек:
Если традиционно вы используете форматировщик кода Prettier, лучше его отключить: «editor.formatOnSave»: false
Затем удаляем номера строк, чтобы уменьшить беспорядок. Если нужно выделить строку или фрагмент кода, можно навести на них курсор или временно подсветить.
Во время обычного кодинга Intellisense может упростить вам жизнь, но во время урока он сильно отвлекает. Существует несколько способов спрятать всплывающие подсказки.
Команда editor.quickSuggestionsDelay»: 1500 при обычной скорости набора кода блокирует Intellisense и другие всплывающие подсказки. Иногда автор обращается к Emmet. И даже если зависнуть на 1.5 секунды, он выдаст подсказку.
Полностью отключить все всплывающие подсказки можно так:
Последние три настройки помогут навести порядок в рабочем пространстве. Если названия вам не знакомы, activityBar — это боковое меню иконок, а statusBar — панель сообщений, которая по умолчанию отображается внизу VSCode.
Если вы обычно не включаете обтекание текстом, будет полезно добавить «editor.wordWrap»: «on» для своих уроков, чтобы строка не оказалась шире окна редактора.
Дополнительная очистка рабочего пространства
Единственное, что нельзя контролировать посредством settings.json — это то, что отображается в боковой панели. Но у вас появится такая возможность, если кликнуть по значку меню возле заголовка Explorer.
Меню возле заголовка Explorer
И хоть боковую панель в своих настройках также нельзя спрятать, будет полезно привязать ее к горячей клавише, чтобы быстро перетаскивать по ходу урока. Или можно спрятать ее с помощью меню под View > Appearance > Show Side Bar (кликните, чтобы перетащить).
Рекомендуемое расширение : Explorer Exclude
Всегда есть лишние или конфиденциальные файлы, которые не хочется показывать во время сессий.
Настройки навязчивых расширений
Существуют другие расширения, загромождающие рабочее пространство. Например, GitLens и stylelint.
Чтобы их убрать, выберите нужное расширение и затем в выпадающем списке возле Disable выберите Workspace.
Настройки экрана: подготовка к записи
После настройки редактора переходим к подготовке экрана к записи скринкаста. Во-первых, задайте разрешение экрана 16×9. Egghead рекомендует расширение 1280×720 или 1920×1080.
Если вы работаете на Mac, прийдется найти необходимую утилиту. Автор использует SwitchResX (однократная покупка).
Далее откройте редактор в полноэкранном режиме. Если вам также нужен браузер, выделите для него необходимый минимум пространства.
Что касается терминала, Стефани Эклз выводит его на передний план, только если нужно что-то объяснить. Она просто перетаскивает его вверх до половины экрана, чтобы переключить фокус с кода.
Запомните: фишка скринкастинга в том, что можно исправлять свои ошибки! Еще можно редактировать переходы, если нужно переключаться между рабочими областями для сверки справочного кода и записей (если вы обычно используете только экран ноутбука).
6 Awesome Ways to Screenshot Your Code
After some digging, here are six awesome ways to take screenshots of your code. Let’s look in!
Polacode
is a Visual Studio Code extension that lets you create unique and sharable screenshots of your code. While using Polacode, it retains your existing theme and fonts and renders them for an awesome layout. Check this out:
In the screenshot above, Polacode effectively handles the shadow, padding and rounded corner of my Mac OS’s screenshot and hides stuff like color decorators, folding markers, and scrollbars.
Installation
Take A Screenshot
Open VS Code, on the menu select View then click on Command Palette. In the input box, enter Polacode and select from the drop-down menu. Polacode will be opened to the side of the editor.
Highlight and copy the code you would like to make a screenshot of. Click on the screenshot button below the box. You will be asked for a path to save. Choose a path and save your newly created screenshot.
CodeSnap
is similar to Polacode since it is also a VS Code extension. If you have problems with Polacode working, give CodeSnap a try.
CodeSnap works similar to Polacode since you activate it from the command palette. The only difference is that you highlight the text you want CodeSnap to use. Once you highlight some code, CodeSnap adds it to the screenshot panel.
Carbon
is a free and open source library to create and share awesome images of your source code. Options available when using Carbon include the ability to change your color theme, the ability to select your preferred programming language, the ability to share a tweet of your code’s screenshot and customize stuff like image syntax, window style, background color, color theme and more.
Installation
There is absolutely no need to install Carbon on your PC, just visit its website here
, paste your code and screenshot away!
Take a Screenshot
To take a screenshot with Carbon, copy the code you want a screenshot of from your IDE or text editor, paste in Carbon’s text area
and click on the Save Image button.
You can check out Carbon’s Github repository here
. It has plugins for various editors and IDE’s. Just follow the outlined steps in the documentation. Should you want to use Carbon with either PhpStorm
or any other JetBrains IDE, simply select the code and select Open in carbon.now.sh from the context menu that you open by right-clicking the selected text.
Greenshot
is a screenshot software tool that can be used not only by developers but also by project managers, testers, and technical writers. With Greenshot, users can screenshot an image and edit it using a built-in image editor or render a part of the image unreadable by blurring it. Key features of Greenshot include:
Installation
To install Greenshot, Windows users can navigate through Greenshot’s website and download it for free here
Take a Screenshot
After you’ve installed Greenshot, navigate to the lower right-hand corner of your desktop and click on the Greenshot icon. Choose the kind of screenshot you would like to take:
If you would like to tinker with Greenshot’s source code, you could check it out on Github
Code Screenshots
Code Screenshots is a JetBrains
plugin which is used to take screenshots of code on Jetbrains IDEs. It’s compatible with IntelliJ IDEA, PhpStorm, WebStorm, PyCharm, RubyMine, AppCode, CLion, GoLand, DataGrip, Rider, MPS and Android Studio.
Installation
To install Code Screenshots, download the plugin from the Jetbrains website here
and follow the installation process.
Take a Screenshot
How does it work? Select the code you want to make a screenshot of and press a hot-key (Ctrl+Alt+Shift+A by default) to make a screenshot of it. You could configure the hotkey settings to what suits you as well, navigate to Settings|Keymap to do this. After taking a screenshot, a “Save as Image” action is available which lets you save the screenshot as a PNG file.
Visual Studio Code: 6 settings to light up your code screenshots.
Use VS Code? Take screenshots of your code often? Here’s a simple tip that will help you get clean, crisp screenshots of your code every time.
To illustrate the problem I want to solve here, let’s highlight it with the following screenshot.
This is my typical setup in VSCode when I’m writing code. As you can see, I’ve tailored the editor using the power of VS Code Settings for my own needs. However, when I want to grab a screenshot of my code there is way too much scaffolding in the way. I will solve the following issues in this article by tweaking my VS Code settings.
Why VS Code? Recently I published my first course on edX, Writing Professional Code. In this course I talk about source control, how to make your code more readable, unit testing and more. My editor of choice was Visual Studio Code, primarily because it is cross-platform and free. Yes, I work for Microsoft but I did feel VS Code was the right tool for the job at hand. There’s so much to love about VS Code and perhaps someday I’ll pen my own love letter about it. Ben Halpern wrote a great post recently on why he switched to Visual Studio Code and that should give you some independent insight into this editor choice.
Did you know?
Visual Studio Code has very powerful settings, customization and extensibility features that really help you make the editing experience suit your individual needs. In terms of settings, everything that you can modify is available to you in a simple settings.json file. Here’s a glimpse of my settings.json on my machine.
You get to this file in VS Code with Ctrl+, or ⌘, on macOS (note the comma is part of the command!). As you can see, defaults and rich comments are supplied for every setting. With every monthly refresh from the VS Code team, available settings are tweaked to make sure developers get the most out of these customizations. In the top right of the preceding screenshot, we see that settings can be scoped to your workspace or to you, the user. So, my typical settings that are available as soon as I open VS Code are my User Settings. The settings that I change just for the current open workspace are called my Workspace Settings.
I’m going to take advantage of the Workspace Settings in this article because the changes I make to settings in order to clean up my editor and take a nice screenshot are temporary setting changes for the open workspace.
So, now that we know where settings live, let’s tweak them to show how they impact what we see.
1. Honey, I Grew the Font!
The first issue I want to tackle is that the default font size I use for coding is not easy on the eye when viewed as part of a screenshot. As the first screenshot earlier shows, the font is too small to read. Zoom level is controlled by the setting window.zoomlevel. I set it in workspace settings to «window.zoomLevel»: 2
This gives me the following improvement in font size.
2. Remove the Lens
3. White Walkers Be Gone!
4. Lose the Highlight
5. Indent Guides? Computer says, Nah!
Indent guides (item 5 in the first screenshot) help me keep tidy. Now, full disclosure, I’ve never left them off for long periods and watched my code crumble to a mess and I doubt that will happen. Editors are too sophisticated to let me screw up badly and I’ve perfected a style at this point such that I can see quickly when I am producing smelly code and structure. However, I don’t mind the indent guides being on, except when making screenshots and screencasts. So, with the magic of «editor.renderIndentGuides»: false I get to the following happy place:
6. Column, dismissed!
Instead of wrapping my code automatically after a certain width, I enable a column marker at column 80 and just keep an eye on my code to make sure I don’t go wild and flow past that width too much. 80 is historical and arbitrary at this point but it does mean most of my code fits neatly into blog posts without too much horizontal scrolling. When demonstrating code and showing screenshots, I don’t think that marker adds value and may, in fact, disctract. I, therefore, remove it when taking screenshots with the setting «editor.rulers»: [] which removes all ruler definitions (empty array). That gives me the final clean state as follows:
«But wait Andrew», I hear you say, «what about item 7 in your first screenshot»?
Good question, my friend. Item 7 is showing line numbers. Line numbers are great when describing code, for example, in code reviews. I also use them in screenshots and screencasts. They are tucked neatly over to the left of all the action and comes in handy. So, I’m leaving these enabled. Besides, I promised you six settings changes, and six is what you get 🙂
Finita La Musica
And there you have it, six settings that are easy to set in VS Code when you want to start taking nice screenshots of your code without the noise of some of your daily scaffolding. Here they all are grouped together so you can more easily copy and paste.
I hope you found this tip useful and would love to hear about settings tweaks or other efficiencies you use in your VS Code setup.
Until the next time, here’s an animation of all the changes mentioned in this article happening in front of your eyes 🙂
Visual Studio Code – редактор кода для Linux, OS X и Windows
За свою долгую историю существования Microsoft выпустил немало инструментов разработки. Но так уж сложилось что на слуху у всех только лишь Visual Studio – большая и мощная IDE «комбайн» предназначенная для всего и вся. Развивается этот продукт уже более двух десятков лет и вобрал в себя самые разные функции. Многим этот инструментарий нравится и иногда даже задавали вопрос – будет ли перенесен Visual Studio на другие платформы. На что чаще всего получали ответ нет. Наверное, понятно почему, в целом такое портирование будет дорогим и неоправданно сложным, уж очень много всего в этой IDE завязано на Windows.
И вот, этой весной для многих неожиданностью было то что Microsoft представил новый продукт под названием Visual Studio Code, да еще и работающий сразу на трех платформах, Linux, OS X и Windows. Не замахиваясь на все функции полноценной IDE, внутри Microsoft решили переосмыслить подход, по которому строится основной инструментарий программиста и начали с самого главного – редактора кода. Visual Studio Code это именно редактор, но при этом обладающий функциями IDE, полагающийся на расширения.
Уже сейчас вы можете использовать Visual Studio Code для создания веб-проектов ASP.NET 5 или Node.js (в чем-то даже удобнее чем в «взрослой» Visual Studio), использовать различные языки, такие как JavaScript, TypeScript, C#, работать с пакетными менеджерами npm, скаффолдингом yeoman и даже осуществлять отладку. Плюсом ко всему будет отличный «интеллисенс», поддержка сниппетов кода, рефакторинг, навигация, многооконность, поддержка git и многое другое.
Установка Visual Studio Code
Mac OS X
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте в
Linux
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала добавьте на него ссылку
Windows
Совет: если вы хотите чтобы Visual Studio Code стартовал из терминала сделайте logon/logoff, соответствующие пути к файлу прописываются в переменной PATH самим установщиком
Дополнительные инструменты
Без инструментария Visual Studio Code годится разве что для простого редактирования файлов, для полноценной работы понадобится сопутствующий инструментарий, который зависит от ваших целей и задач:
Начало работы
Чтобы попробовать в деле VS Code, проще всего создать веб-проект Node. Для этого установите Node на свой компьютер (ссылка выше) и выполните следующие команды:
В текущем каталоге будет создан проект, который можно будет открыть в Visual Studio Code. Для того чтобы проверить, что все работает как надо, выполните команду npm start и запустите браузер по адресу http://localhost:3000.
После всех этих действий просто запустите VS Code в папке с проектом
Если вы хотите попробовать возможности VS Code на примере ASP.NET 5 то можете воспользоваться инструкцией по адресу https://code.visualstudio.com/Docs/ASPnet5.
Базовые возможности Visual Studio Code
Как и многие редакторы кода, VS Code использует распространенную схему расположения основных элементов – слева обозреватель файлов, справа редактор кода. В дополнение к этому есть специфичные элементы, обеспечивающие навигацию и выполнение специальных команд.
Файлы, папки, и проекты
Расположение основных элементов
VS Code обладает интуитивно понятной и простой схемой расположения основных элементов. Интерфейс разделен на четыре основных блока, это:
Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
Ctrl+\ для того чтобы разделить активный текущий редактор на два
Open to the Side в контекстном меню файла в обозревателе
Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).
Палитра команд
Самым главным инструментом взаимодействия с редактором в VS Code является палитра команд. Вызвать ее можно через клавиатуру, нажав на комбинацию Ctrl+Shift+P. Множество команд перечисленных в палитре тоже привязаны к клавишам.
Введите в строку команды знак вопроса? и тогда вы получите перечень команд которые работают в текущем контексте:
Некоторые часто используемые команды:
Обозреватель
Обозреватель предназначен для открытия и управления файлами находящимися в папке вашего проекта. Вы можете осуществлять множество привычных операций по созданию, изменению имени, удалению файлов и папок, и их перемещению.
Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:
Автосохранение
По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.
Поиск
Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.
Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.
Возможности редактора
Подсказки IntelliSence
Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.
Подсказки параметров
Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.
Сниппеты кода
VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.
Переход к определению символа
Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.
Переход к методу или переменной
Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.
Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.
Просмотр определения символа
Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:
Переименование методов и переменных
Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.
Отладка
В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.
Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.
Отладчик позволяет просматривать значения текущих переменных:
Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.
Контроль версий
VS Code интегрирован с системой контроля версий git, и поддерживает большинство команд. В версии 0.5 был зафиксирован ряд ошибок связанных с интеграцией. Поддерживаются локальные и удаленные репозитарии.
Совет: установите credential helper для того чтобы не получать постоянные запросы на ввод данных учетной записи https://help.github.com/articles/caching-your-github-password-in-git/
Конфликты
VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий: