Visual studio режим zen

Обновлено: 07.01.2025

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.
- Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
- Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
- Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
- Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
- Комментирование строки ( CTRL + / ).
Команды выше работают и для нескольких строк.
- Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
- Выделение строки ( CTRL + I ).
- Выделение слова ( CTRL + D ).
- Множественный курсор. ( ALT + CLICK ).
Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.

Перевод статьи «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. Шрифты с лигатурами

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

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. Балансировка внутрь и наружу

В 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

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

WakaTime
Горячие клавиши — добро, польза и экономия времени. Давайте разберёмся, как с их помощью чуть упростить себе жизнь в Visual Studio Code.

Быстро добавить комментарий

Обычно чтобы добавить комментарий, нужно перейти в начало строки и дописать туда два слеша. Это медленно. Быстрее нажать в любом месте строки Ctrl + /, и строка закомментируется, если она ещё не. А если уже да, то комментарий исчезнет.

Перейти к строке под номером

Windows — Ctrl + G

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

Поменять строку местами с соседними

Alt и стрелки меняют текущую строку местами с соседними.

Дублировать строку

Windows — Shift + Alt + ↓ / ↑

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

Перейти к парной скобке

Windows — Ctrl + Shift + \

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

Переименовать переменную

Писали, писали, а старший разработчик пришёл и сказал, что ваши переменные a , b и c — дурной тон. Чтобы не выискивать их по всему документу и не менять руками, есть F2.

Отформатировать документ

Windows — Shift + Alt + F

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

Перейти к объявлению переменной

Иногда вообще непонятно, откуда взялась переменная, какая у неё область видимости, и где она объявлена. F12 перенесёт нас к объявлению выделенной переменной, функции или метода. Если объявление в другом файле — всё равно перенесёт.

Включить/выключить перенос слов

Windows — Alt + Z

Вкусовщина. Если строки кода или текст не вмещается в редактор по ширине, включите перенос.

Включить дзен-режим

Windows — Ctrl + K Z

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

На интерактивных курсах все клавиши станут горячими

Потому что оторваться вообще не получается. 11 глав бесплатно, и −30% на подписку в первую неделю обучения.

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

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

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

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

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

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

1. Сниппеты

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

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

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

Применение сниппетов также может помочь вам освоить новый фреймворк или библиотеку.

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

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

Intellisense — это просто модное название автодополнения. Тем не менее работает оно гораздо продуманнее стандартного.

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

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

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

Для тех, кто приступает к работе с VS Code на базе знания Java или C++, эта возможность не станет новшеством. Я применяла нечто подобное, когда работала с Eclipse. Что же касается проектов в JavaScript — эта возможность, наряду с удобным перемещением между связанными элементами кода, существенно ускоряет процесс.

3. Встроенный терминал

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

Открыть терминал можно, нажав ctrl + ` .

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

Для открытия еще одного терминала нажмите shift + ctrl + ` .

4. Просмотр ссылок и обновление имен

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

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

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

5. Форматирование и контроль технического долга

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

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

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

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

6. Горячие клавиши

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

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

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

Их список вы можете посмотреть, нажав ctrl + k + s .

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

Здесь вы найдете расширения для перенастройки встроенных горячих клавиш в Visual Studio Code.

7. Режим дзен

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

Существует несколько различных вариантов это сделать. Для начала нужно заглянуть в раздел горячих клавиш.

В моем случае по умолчанию установлена команда ctrl + z и k . То есть сначала я нажимаю ctrl + z , а потом k , а не все три вместе.

8. Git

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

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

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

9. Дебаггер

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

Процесс дебаггинга подразумевает гораздо больше, чем просто проверку посредством консоли разработчика в Chrome. К примеру, вы предполагаете в каком месте могла возникнуть проблема: в определенной строке, функции или методе.

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

Все, что для этого нужно ,— это перейти в дебаггер через значок жучка в левой нижней части и запустить приложение кнопкой play.

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

По умолчанию VSC запускает дебаггер на основе Node.js, но вы также можете запустить его на базе самого Chrome. В обычном режиме у вас нет возможности приостанавливать выполнение вашего приложения, но с помощью дебаггера вы с легкостью сможете это сделать, назначив точки прерывания.

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

10. Live Share

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

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

Заключение

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

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

Читайте также: