как приблизить код в vs code
Как изменить размер шрифта окружения?
Есть ли способ изменить размер шрифта среды в Visual Studio Code? Такие вещи, как окно IntelliSense, панель отладки, имена файлов и т. Д.
Я знаю, как изменить размер шрифта редактора, но не могу понять, как изменить размер шрифта среды. Так что мне интересно, можете ли вы это как-то изменить.
17 ответов
Обновление для нашей версии VS Code 1.0:
Недавно введенная настройка window.zoomLevel позволяет навсегда сохранить уровень масштабирования! Он может иметь как отрицательные, так и положительные значения для увеличения или уменьшения.
Просто скопируйте «editor.fontSize»: 18 в свой setting.json редактора.
Попробуйте поиграть с комбинацией следующих пользовательских настроек:
выберите «пользовательские настройки»
добавить «editor.fontSize»: 14
Вы можете Увеличить и Уменьшить весь пользовательский интерфейс в меню «Просмотр».
Согласно журналу изменений версии 1.2, были добавлены новые команды для увеличения и уменьшения масштаба только шрифта, но всего пользовательского интерфейса.
Используйте следующие сочетания клавиш для замены действий глобального масштабирования по умолчанию:
У меня установлен на «editor.fontSize»: 12,
Сохраните файл, вы сразу увидите эффект.
Наслаждайтесь!
Простой подход к изменению размера шрифта в рабочей среде Visual Studio:
Здесь вы можете увидеть 3 вкладки:
Перейдите в Настройки пользователя и добавьте это:
Теперь просто сохраните и закройте файл.
В приведенном выше коде 16 представляет размер шрифта. Увеличение или уменьшение по вашему желанию.
(VS Code 1.33.1 в Windows 7)
Редактор масштабирования: CTRL + колесо мыши.
Смотрите ниже, как я это исправил.
Как предлагает @Edwin: нажатие Control + Shift + P и последующий ввод «настроек» позволит вам легко найти файл настроек пользователя или рабочего пространства.
Мой файл настроек находится здесь: «C: \ Users \ You_user \ AppData \ Roaming \ Code \ User \ settings.json»
Мой файл выглядит так:
В Visual Studio Code размер шрифта можно легко изменить на вкладке «Параметры».
Или вы также можете щелкнуть значок настроек в левой нижней части окна и выполнить поиск шрифта оттуда.
Мне потребовалось много времени, чтобы понять, что я случайно сделал, когда мое окно кода стало огромным:
На самом деле это вообще не ответ на заданный вопрос, но я думаю, что кто-то вроде меня окажется здесь из-за симптомов!
Повторяйте это, пока не добьетесь желаемого размера шрифта.
9 хитростей для работы с Visual Studio Code
Привет, Хабр! Сегодня мы отобрали 9 самых интересных лайфхаков для работы с Visual Studio Code. Среди них полезные сочетания клавиш и функциональные виджеты. Подробности под катом!
1. Интерактивная игровая площадка
В правом нижнем углу страницы Welcome есть ссылка на Interactive playground, где вы можете в интерактивном режиме опробовать возможности VS Code. Либо вы можете перейти туда через Help > Interactive Playground.
2. Переход к символу в файле
Сочетание клавиш: Ctrl+Shift+O
Вы можете сгруппировать символы по виду, добавив двоеточие, @:.
3. Перемещение строки вверх или вниз
Сочетание клавиш: Alt+Up или Alt+Down
4. Редактирование «Бок о бок»
Сочетание клавиш: Ctrl+\
При желании вы можете создавать новые группы редакторов и свободно перемещаться между ними.
5. Переключение между несколькими редакторами
Сочетание клавиш: Ctrl+1, Ctrl+2, Ctrl+3
6. Переход к началу/концу файла
Сочетание клавиш: Ctrl+Home и Ctrl+End
7. Переключение боковой панели
Сочетание клавиш: Ctrl+B
8. IntelliSense
Сочетание клавиш: Ctrl+Space
При помощи виджета «Подсказки» вы можете просматривать доступные методы, подсказки параметров, краткую документацию и т. д.
Как сбросить масштаб в Visual Studio 2010/2012/2013/2015/2017
Как сбросить «масштаб» в VS 2010/2012/2013/2015/2017 обратно в нормальное состояние?
CTRL+SCROLL WHEEL позволяет увеличить / уменьшить масштаб с помощью Visual Studio 2010/2012/2013/2015/2017, но я хотел бы вернуться к первоначальному 100%.
7 ответов
для этого в левом нижнем углу окна редактора есть окно выбора-выберите 100%;)
обратите внимание, что горизонтальная полоса прокрутки должна быть включена, чтобы увидеть уровень масштабирования.
Инструменты / Параметры / Текстовый Редактор / Все Языки / Полосы Прокрутки
в левом нижнем углу редактора кода есть элемент управления масштабированием. Вы можете выбрать 100% оттуда или ввести его вручную.
вы можете попробовать расширение VSCommands из галереи Visual Studio, Он добавляет несколько новых функций вокруг масштабирования в VS2010
на Visual Studio 2015/2017 (легко пропустить, если использовать темную тему):
Visual Studio 2017 имеет расширение «Reset Zoom» от Mads Kristensen и добавляет сочетание клавиш (Ctrl+0, Ctrl+0). https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ResetZoom
по умолчанию сочетание клавиш Ctrl+0, Ctrl+0, но может быть изменено, чтобы быть тем, что вам нравится.
У меня также есть R#, и ярлык по умолчанию не появился для меня, но вручную его применение сработало.
на Visual Studio Ultimate 2013, внизу-слева от экрана:
Если вы используете последнюю версию, вы также можете изменить размер содержимого в visual studio, выбрав
сделать вручную goto
и UserSetting файл будет открыт при изменении редактора.Для увеличения по умолчанию
Секретные хаки VS Code
Не имеет значения, новичок вы или профессионал, удобные инструменты программирования важны для любого человека, который хочет писать код продуктивно.
Я подготовил небольшую подборку полезных советов, хитростей и расширений для современного веб-разработчика.
Улучшаем внешний вид
1. Material Theme & Icons
Это прямо зверь в темах VS Code. Я думаю, что материальная тема наиболее близка к написанию ручкой на бумаге в редакторе (особенно при использовании неконтрастной темы). Ваш редактор выглядит практически гладко, переходя от встроенных инструментов к текстовому редактору.
Представьте себе эпическую тему в сочетании с эпическими иконами. Material Theme Icons — отличная альтернатива для замены значков VSCode по умолчанию. Большой каталог иконок плавно вписывается в тему, делая ее красивее. Это поможет легко найти файлы в проводнике.
2. Zen Mode с центрированием
Возможно, вы уже знаете режим просмотра Zen, также известный как Distraction Free View (для тех, кто знает Sublime Text), где всё (кроме кода) удаляется, чтобы ничего не отвлекало от редактора кода. Вы знали, что можете центрировать расположение для того, чтобы прочитать код, как если бы использовали PDF viewer? Это помогает сосредоточиться на функции или изучить чужой код.
Zen Mode: [View > Appearance > Toggle Zen Mode]
Center Layout: [View > Appearance > Toggle Centered Layout]
3. Шрифты с лигатурами
Стиль письма делает чтение легким и удобным. Вы можете сделать свой редактор лучше с помощью потрясающих шрифтов и лигатур. Вот 6 лучших шрифтов, которые поддерживают лигатуры.
Попробуйте использовать Fira Code. Он потрясающий и с открытым исходным кодом.
Так можно поменять шрифт в VSCode после его установки:
4. Rainbow Indent
Отступ со стилем. Это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета на каждом шаге.
Настройка отступа по умолчанию окрашивает отступ в соответствии со схемой радуги. Однако я настроил свой собственный, чтобы следовать различным оттенкам серого. Если вы хотите, чтобы ваш пример выглядел как этот, скопируйте и вставьте следующий фрагмент в свой settings.json
5. Настройка строки заголовка
Я узнал об этом приеме в одном из уроков React&GraphQL которые проводил Wes Bos. В основном он переключал цвета заголовков на разных проектах, чтобы легко распознавать их. Это полезно, если вы работаете с приложениями, которые могут иметь одинаковый код или имена файлов, например, мобильное приложение react-native и веб-приложение react.
Это делается путем редактирования настроек строки заголовка в настройках рабочего пространства для каждого проекта, в котором вы хотите использовать разные цвета.
Ускоряем написание кода
1. Оборачивание тегами
Если вы не знаете Emmet, то скорее всего, вам очень нравится печатать. Emmet позволяет набирать сокращенный код и получать соответствующие теги. Это делается путем выбора группы кода и ввода команды Wrap with Abbreviated, которую я связал с помощью shift+alt+.
Представьте, что вы хотите обернуть все это, но как отдельные строки. Вы бы использовали wrap с отдельными строками, а затем вставляли * после аббревиатуры e.g. div*
2. Balance Inwards and Outwards
Рекомендую посмотреть vscodecandothat.com
3. Turbo Console.log()
Никто не любит печатать длинные функции, такие как console.log(). Это реально раздражает, если вы хотите вывести что-то быстро, посмотреть значение и продолжить писать код.
Вы можете это сделать, используя расширение Turbo Console Log. Оно позволяет регистрировать любую переменную в строке ниже с автоматическим префиксом, следующим за структурой кода. Вы также можете раскомментировать/комментировать alt+shift+u/alt+shift+c всю консоль после добавления расширения.
4. Live server
Это потрясающее расширение, которое помогает запускать локальный сервер с функцией прямой перезагрузки для статических и динамических страниц. Он имеет отличную поддержку основных функций, таких как: HTTPS, CORS, настраиваемые адреса локального хоста и порт.
5. Копипаст с несколькими курсорами
Впервые я сказал “вау” во время использования VS Code, когда редактировал несколько строк, добавляя курсоры на разных строках. Вскоре я нашел очень хорошее применение этой функции. Вы можете копировать и вставлять содержимое, выбранное этими курсорами, и они будут вставлены точно в том порядке, в котором они были скопированы.
6. Breadcrumbs и outlines
The Outline View — это отдельный раздел в нижней части дерева проводника. При раскрытии отображается дерево имен текущего активного редактора.
The Outline View имеет различные режимы сортировки, опциональное отслеживание курсора. Он также включает в себя поле ввода, которое фильтрует имена при вводе. Ошибки и предупреждения также отображаются в представлении структуры, позволяя сразу увидеть место проблемы.
Другие хаки
Маленькие хитрости, которые меняют всё
VS Code имеет мощный интерфейс командной строки, который позволяет контролировать запуск редактора. Вы можете открывать файлы, устанавливать расширения, изменять язык отображения и выводить диагностику с помощью параметров командной строки (переключателей).
Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже. Это было сделано в VS Code с расширением Polar code.
Carbon — хорошая и более настраиваемая альтернатива. Однако Polacode позволяет оставаться в редакторе кода и использовать любой собственный шрифт.
3. Quokka (JS/TS ScratchPad)
Quokka — это площадка для быстрого создания прототипов для JavaScript и TypeScript. Он запускает код сразу по мере ввода и отображает различные результаты выполнения и журналы консоли в редакторе кода.
Отличный пример использования Quokka — когда вы готовитесь к техническим собеседованиям, вы можете выводить каждый шаг без необходимости устанавливать контрольные точки в отладчиках.
Он также может помочь вам изучить функции библиотеки, такие как Lodash или MomentJS, прежде чем вы перейдете к фактическому использованию.
4. WakaTime
Друзья думают, что вы тратите слишком много времени на программирование? WakaTime — это расширение, которое помогает записывать и хранить метрики и аналитику, касающиеся вашей активности. Скажите им, что 10 часов в день не слишком много.
Вы можете ставить цели, просматривать языки программирования, которые часто используете, вы даже можете сравнить себя с другими ниндзя в мире технологий.
5. VSCode Hacker Typer
Вы когда-нибудь печатали код перед толпой? Часто мы печатаем на автомате, параллельно разговариваем, из-за этого допускаем ошибки. Представьте себе предварительно набранный код, который появляется только тогда, когда вы имитируете набор текста, как в geektyper.
Jani Eväkallio принес в VS Code это расширение. Оно поможет записывать и воспроизводить макросы (код, написанный в вашем редакторе), делая вас более сосредоточенным при наборе текста для аудитории.
Я научился этому трюку благодаря посту на StackOverFlow. Это быстрый трюк для исключения таких папок, как node_modules или любых других, из дерева проводника, чтобы помочь сосредоточиться на главном. Лично я ненавижу открывать утомительную папку node_module в редакторе, поэтому решил скрыть ее.
Чтобы скрыть node_modules, вы можете сделать это:
Профессиональная работа в VS Code: 4 совета
VS Code — это, в наши дни, один из самых популярных редакторов кода. Продуманный подход к использованию этого редактора способен значительно повысить продуктивность программиста. В этом материале представлено несколько советов по профессиональному использованию VS Code. Хочется надеяться, что эти советы вам пригодятся.
1. Использование нескольких курсоров
Может случиться так, что программисту понадобится вводить один и тот же текст одновременно в нескольких местах.
Вот как выглядит то, что должно получиться, в редакторе.
Как решить эту задачу? Раньше я поступал так: вводил нечто вроде текста class=«odd» в одном месте, а потом копировал его в буфер обмена и вставлял везде, где он нужен. Правда, после того, как я узнал о возможности работать с несколькими курсорами в VS Code, я так делать перестал. Это значительно повысило эффективность моего труда.
В частности, речь идёт о следующем. Для добавления в текст нескольких курсоров нужно удерживать клавишу Alt на клавиатуре (в macOS — клавишу Option ) и щёлкать по тем местам, где должны появиться курсоры. После этого всё, что вводится с клавиатуры, будет одновременно появляться везде, где имеются курсоры.
Использование нескольких курсоров
Напомню, что речь идёт о следующих сочетаниях клавиш:
2. Переименование сущностей и команда Rename Symbol
Теперь давайте изучим ещё один простой приём.
При вводе кода или текста документа можно столкнуться с ошибкой в написании какого-нибудь слова. Или, может быть, нужно будет применить в коде новое соглашение об именовании сущностей. В подобных ситуациях возникает нужда в одновременной обработке множества строк.
Если вручную менять каждую строку, то у такого подхода будет пара недостатков:
Использование команды меню Rename Symbol
Это меню вызывается при выполнении щелчка правой кнопкой мыши по выделенному тексту. Другой способ вызова этой команды — нажать F2 после выделения текста, который надо отредактировать.
3. Перемещение выделенных строк вверх и вниз
Иногда нужно переместить какой-то программный код или обычный текст вверх или вниз в документе. Эту задачу можно решить так:
Перемещение текста вверх и вниз
Благодаря этому подходу можно быстро и легко менять порядок размещения текста.
4. Сниппеты
В ходе написания кода нам постоянно приходится вводить с клавиатуры одни и те же повторяющиеся конструкции.
Например, HTML5-файлы всегда содержат следующую базовую структуру документа:
А при написании for-циклов на JavaScript мы всегда вводим такие фрагменты кода:
Можно привести ещё очень много подобных примеров. Если бы приходилось вводить эти фрагменты кода вручную, поступая так всегда, когда они нужны, это было бы очень неэффективно.
К счастью, VS Code даёт в наше распоряжение настраиваемый механизм автодополнения ввода. Вот как это выглядит.
Автодополнение ввода
Поговорим о том, как настроить VS Code и обзавестись тем, что показано на предыдущем рисунке.
▍Создание конфигурационного файла
Команда меню User Snippets
После этого появится следующая панель.
Панель для работы со сниппетами
Здесь можно выбирать существующие конфигурационные файлы и редактировать их. Ещё тут можно создать новый конфигурационный файл. Мы собираемся поступить именно так.
Мы создадим локальный файл.
После выбора команды New Snippets file for ‘test’ система запросит имя файла.
Ввод имени нового файла
Конфигурационный файл мы создали, но пока он пуст.
Новый пустой конфигурационный файл
Я, чтобы вам было удобнее, записал весь вышеописанный процесс и представил его здесь в виде анимированного gif-файла.
Создание нового конфигурационного файла
▍Создание сниппетов
Конфигурационный файл хранит данные в формате JSON. Вот пример его содержимого.
Содержимое конфигурационного файла
Вот — то же самое, но уже в виде обычного текста:
Элемент «body»: […] содержит тот код, который редактор должен вставить в документ вместо введённого нами префикса. Так как этот код может состоять из множества строк, данное поле представлено массивом. Каждый элемент массива — это одна строка кода. Если «перевести» конструкцию, которую мы только что рассматривали, на язык обычного HTML-кода, то получится, что она равносильна следующему:
Теперь, когда в нашем распоряжении есть простой конфигурационный файл, давайте его протестируем.
Испытание конфигурационного файла
▍Область действия сниппетов
Ограничение области действия сниппета HTML-файлами
Испытаем нашу систему снова. Попробуем префикс html5 в HTML-файле и в JS-файле.
Испытание сниппета в HTML- и в JS-файле
В JS-файле, как видно, ввод html5 ни к чему особенному не приводит. А это — именно то, что нам нужно.
▍Курсор
Давайте снова испытаем автодополнение ввода, выполняемое на основе созданного нами файла. Присмотримся к нему. Нет ли в нём каких-нибудь изъянов?
Исследование автодополнения ввода
Настройка местоположения курсора
Курсор устанавливается в нужном месте
▍Пример
А теперь, чтобы закрепить то, что мы только что изучили, давайте рассмотрим новый пример.
Можете пока не смотреть на решение этой задачи. Попытайтесь решить её самостоятельно.
В общем-то, решение этой задачи может быть представлено таким конфигурационным файлом:
Использование сниппета fori
Сниппетами пользуются именно так. Я много рассказывал об этом, так как сниппеты — это одна из моих любимых возможностей VS Code. Я думаю, что она пригодится и вам. Раньше, когда я сталкивался с повторяющимися фрагментами кода, мне приходилось копировать их из файлов, в которых они уже были. Это — медленный процесс, чреватый ошибками. А теперь, благодаря возможности оформлять такие фрагменты кода в виде сниппетов, задача ввода повторяющихся фрагментов кода стала гораздо проще.
Какие возможности VS Code помогают вам в повседневной работе?