visual studio code скриншот кода

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

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

visual studio code скриншот кода. frontend 4342425 1280 min. visual studio code скриншот кода фото. visual studio code скриншот кода-frontend 4342425 1280 min. картинка visual studio code скриншот кода. картинка frontend 4342425 1280 min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

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

Polacode

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

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532203209585 code min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532203209585 code min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532203209585 code min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

Установка

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532462422700 Screenshotfrom2018 07 2421 00 00 min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532462422700 Screenshotfrom2018 07 2421 00 00 min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532462422700 Screenshotfrom2018 07 2421 00 00 min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

Откройте 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:

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532351262492 greenshot 17 min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532351262492 greenshot 17 min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532351262492 greenshot 17 min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Установка

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

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

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532470371908 greenshot interface min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532470371908 greenshot interface min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532470371908 greenshot interface min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Достоинства

Недостатки

Если хотите заглянуть в исходный код 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-файла.

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532356495450 screenshot 16821 min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532356495450 screenshot 16821 min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532356495450 screenshot 16821 min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Достоинства

Недостатки

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

ShareX

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

Установка

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

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

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

visual studio code скриншот кода. s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532475332642 Screenshotfrom2018 07 2500 35 20 min. visual studio code скриншот кода фото. visual studio code скриншот кода-s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532475332642 Screenshotfrom2018 07 2500 35 20 min. картинка visual studio code скриншот кода. картинка s 5E5E71D4335C25DB9A05C148021647A657F5256B3117A20FC84B982E8A01691D 1532475332642 Screenshotfrom2018 07 2500 35 20 min. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Достоинства

Недостатки

Итоги

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

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

Источник

Как настроить Visual Studio Code для записи скринкаста

visual studio code скриншот кода. soc facebook red. visual studio code скриншот кода фото. visual studio code скриншот кода-soc facebook red. картинка visual studio code скриншот кода. картинка soc facebook red. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code». visual studio code скриншот кода. soc twitter red. visual studio code скриншот кода фото. visual studio code скриншот кода-soc twitter red. картинка visual studio code скриншот кода. картинка soc twitter red. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code». visual studio code скриншот кода. soc telegram red. visual studio code скриншот кода фото. visual studio code скриншот кода-soc telegram red. картинка visual studio code скриншот кода. картинка soc telegram red. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

На Egghead есть курс по записи скринкастов, с которым вам также стоит ознакомиться, если вы новичок в этом деле.

Настройки VSCode

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

Настройки рабочего пространства

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

Рекомендуемые базовые настройки для скринкастов:

На скриншоте показано, как задать размер с помощью этих настроек:

visual studio code скриншот кода. image2 4. visual studio code скриншот кода фото. visual studio code скриншот кода-image2 4. картинка visual studio code скриншот кода. картинка image2 4. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Если традиционно вы используете форматировщик кода Prettier, лучше его отключить: «editor.formatOnSave»: false

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

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

Команда editor.quickSuggestionsDelay»: 1500 при обычной скорости набора кода блокирует Intellisense и другие всплывающие подсказки. Иногда автор обращается к Emmet. И даже если зависнуть на 1.5 секунды, он выдаст подсказку.

Полностью отключить все всплывающие подсказки можно так:

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

Если вы обычно не включаете обтекание текстом, будет полезно добавить «editor.wordWrap»: «on» для своих уроков, чтобы строка не оказалась шире окна редактора.

Дополнительная очистка рабочего пространства

Единственное, что нельзя контролировать посредством settings.json — это то, что отображается в боковой панели. Но у вас появится такая возможность, если кликнуть по значку меню возле заголовка Explorer.

visual studio code скриншот кода. image1 1. visual studio code скриншот кода фото. visual studio code скриншот кода-image1 1. картинка visual studio code скриншот кода. картинка image1 1. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Меню возле заголовка 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.

visual studio code скриншот кода. pablo 11. visual studio code скриншот кода фото. visual studio code скриншот кода-pablo 11. картинка visual studio code скриншот кода. картинка pablo 11. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

To illustrate the problem I want to solve here, let’s highlight it with the following screenshot.

visual studio code скриншот кода. annotate screen2. visual studio code скриншот кода фото. visual studio code скриншот кода-annotate screen2. картинка visual studio code скриншот кода. картинка annotate screen2. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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.

visual studio code скриншот кода. settings json2. visual studio code скриншот кода фото. visual studio code скриншот кода-settings json2. картинка visual studio code скриншот кода. картинка settings json2. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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.

visual studio code скриншот кода. setting 1 1. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 1 1. картинка visual studio code скриншот кода. картинка setting 1 1. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

2. Remove the Lens

visual studio code скриншот кода. setting 2. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 2. картинка visual studio code скриншот кода. картинка setting 2. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

3. White Walkers Be Gone!

visual studio code скриншот кода. setting 3 2. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 3 2. картинка visual studio code скриншот кода. картинка setting 3 2. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

4. Lose the Highlight

visual studio code скриншот кода. setting 4. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 4. картинка visual studio code скриншот кода. картинка setting 4. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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:

visual studio code скриншот кода. setting 5. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 5. картинка visual studio code скриншот кода. картинка setting 5. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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:

visual studio code скриншот кода. setting 6. visual studio code скриншот кода фото. visual studio code скриншот кода-setting 6. картинка visual studio code скриншот кода. картинка setting 6. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

«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 скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Редактор VS Code может открыть для редактирования на экране до трех файлов одновременно, располагая их друг за другом справа. Открыть дополнительные редакторы можно различными способами:
Ctrl (Mac: Cmd) и кликнуть на файле в обозревателе
Ctrl+\ для того чтобы разделить активный текущий редактор на два
Open to the Side в контекстном меню файла в обозревателе

Совет: Вы можете переместить сайдбар слева на право с помощью меню View, Move Sidebar а так же включить его видимость с помощью клавиатуры (Ctrl+B).

Палитра команд

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

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Некоторые часто используемые команды:

Обозреватель

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

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Файлы, которые вы редактировали или открывали двойным щелчком в обозревателе, помещаются в верхнюю часть обозревателя и получают статус Working files:

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Автосохранение

По умолчанию, VS Code работает в режиме явного сохранения, которое вы можете выполнить, нажав на комбинацию Ctrl+S. Этот режим совместим с большинством инструментов следящих за статусом файлов (например bower). Можно включить и режим автоматического сохранения (Auto Save), нажав Ctrl+Shift+P и набрать auto.

Поиск

Нажимите Ctrl+Shift+F и введите интересующую вас фразу. Результаты поиска будут сгруппированы, в дополнение вы можете развернуть узел группы чтобы посмотреть множественные вхождения. В строке поиска поддерживаются регулярные выражения.

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Более детальный поиск может быть осуществлен с помощью команды Ctrl+Shift+J. Введите в дополнительные поля критерии поиска.

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Возможности редактора

Подсказки IntelliSence

Где бы вы не находились в вашем коде, нажав на Ctrl+Space будет выведено окно подсказки IntelliSence. При наборе кода редактор будет показывать его автоматически.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Подсказки параметров

Для перегруженных функций вы можете листать варианты реализации используя клавиши Up и Down.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

VS Code поддерживает аббревиатуры Emmet. Вы можете использовать их при редактировании файлов HTML, Razor, CSS, Less, Sass, XML или Jade. Основной перечень аббревиатур можно посмотреть по адресу http://docs.emmet.io/cheat-sheet/.

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Переход к определению символа

Нажав на F12 вы перейдете к определению символа. Если нажать Ctrl и провести курсором по символу вы увидите определение в дополнительном окне.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Переход к методу или переменной

Нажав на Ctrl+Shift+O вы откроете перечень методов в файле, в дополнение вы можете нажать двоеточие: и методы будут сгруппированы по типу. Нажав на Up и Down выберите нужный метод и курсор в редакторе перейдет на строку где находится выбранный метод.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Для языков C# и TypeScript вы можете использовать комбинацию Ctrl+T и набрать нужный метод или переменную, при этом будет осуществлен поиск по всем файлам в проекте.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

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

Если вам необходимо быстро посмотреть на определение символа или на референсы, для того чтобы вспомнить детали реализации или использования, можно использовать поиск или переход к определению символов, что не всегда удобно так как переключает контекст.
В этом случае можно воспользоваться командами Reference Search (Shift+F12) или Peek Definition (Alt+F12) и результаты поиска будут отображаться в инлайн окошке:
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Переименование методов и переменных

Нажав F2 вы можете изменить имя метода или переменной. Стандартная операция рефакторинга, но пока она поддерживается только для языков C# и TypeScript.

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Отладка

В VS Code входит отладчик. Его возможности пока ограничены, и работают не на всех платформах. Тем не менее, вы можете использовать отладчик для языков JavaScript и TypeScript на всех платформах, а для C# и F# на платформах OS X и Linux.

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Сохраните конфигурационный файл и выберите пункт Launch в меню, установите точку останова и нажмите F5 для старта отладки.
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Отладчик позволяет просматривать значения текущих переменных:
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Более подробно о возможностях отладчика можно почитать по адресу https://code.visualstudio.com/Docs/debugging в том числе о том как сконфигурировать Mono для отладки C# и F# кода на платформах OS X и Linux.

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

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

visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Совет: установите credential helper для того чтобы не получать постоянные запросы на ввод данных учетной записи https://help.github.com/articles/caching-your-github-password-in-git/

Конфликты

VS Code позволяет осуществлять слияния и разрешение конфликтов при работе с системой контроля версий:
visual studio code скриншот кода. image loader. visual studio code скриншот кода фото. visual studio code скриншот кода-image loader. картинка visual studio code скриншот кода. картинка image loader. Перевод статьи «6 Awesome Ways to Take A Screenshot of your Code».

Источник

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *