изменение шрифтов
Область применения:Visual Studio Visual Studio для Mac 
Visual Studio Code
Вы можете изменить шрифт, стиль и размер шрифта для окон Spy ++.
Изменение параметров шрифта
- В меню Вид выберите пункт Шрифт.
- Выберите шрифт, стиль и размер шрифта.
- Нажмите кнопку ОК. Если вы нажмете Сохранить шрифт по умолчанию, все будущие окна Spy++ будут использовать этот шрифт.
См. также
- Использование Spy++
- Представления Spy++
- Справочник по Spy++
Малоизвестные приемы работы в 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, наверняка его знают. В этом режиме с экрана удаляется все, кроме кода. Но знаете ли вы, что можно сделать так, чтобы код в этом режиме располагался по центру экрана? Это очень помогает сфокусироваться на коде.
Zen Mode: [View > Appearance > Toggle Zen Mode] Center Layout: [View > Appearance > Toggle Centered Layout]
3. Шрифты с лигатурами
Стиль написания кода может сделать чтение легким и удобным. Вы можете улучшить внешний вид вашего кода при помощи красивых шрифтов, а также лигатур. Вот 6 лучших шрифтов, поддерживающих лигатуры (согласно www.slant.co).
Можете попробовать шрифт Fira Code — он красивый (а кроме того еще и опенсорсный). Вот как поменять шрифт в VSCode (после того как установили его):
«editor.fontFamily»: «Fira Code»,»editor.fontLigatures»: true
4. Rainbow Indent («радужный отступ»)
Делайте стильные отступы. Это расширение расцвечивает отступы четырьмя разными цветами на каждом шаге.
Дефолтная настройка предполагает использование разных цветов радуги. Я сделал собственную схему с оттенками серого. Если хотите получить результат, как в приведенном примере, вставьте этот отрывок в ваш файл settings.json:
"indentRainbow.colors": [ "rgba(16,16,16,0.1)", "rgba(16,16,16,0.2)", "rgba(16,16,16,0.3)", "rgba(16,16,16,0.4)", "rgba(16,16,16,0.5)", "rgba(16,16,16,0.6)", "rgba(16,16,16,0.7)", "rgba(16,16,16,0.8)", "rgba(16,16,16,0.9)", "rgba(16,16,16,1.0)" ],
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. Балансировка внутрь и наружу
Этот совет взят с сайта https://vscodecandothat.com/, который я всячески рекомендую.
В 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
Это расширение помогает записывать и сохранять показатели и аналитику, касающиеся вашей программистской активности. Вы можете устанавливать себе цели, просматривать, какие языки программирования вы используете чаще всего, а также сравнивать свои результаты с чужими.
Как установить шрифт с лигатурами для программирования в Visual Studio Code
Лигатуры — это символы представляющие собой объединение двух или трёх символов. С ними от просмотра и написания кода можно получить больше эстетического удовольствия. Шрифт содержащий лигатуры называется Fira Code. В карусели я рассказываю, как установить его в VSCode, но этот шрифт также подойдёт и для других редакторов кода.
#программирование #vscode #средстваразработчика #кодинг #инструментыразработчика #dev #development
Нравится igoravdasev и ещё 43
44
1
Сохранить
2.5K
Андрей Рик ︎| IT-гений
Ваш надёжный программист и дизайнер
Я разрабатываю ИТ-решения, помогающие бизнесу увеличить прибыль!
Создаю сайты любой сложности “под ключ”
Обновлю ваш сайт, сделаю современным и продающим
Исправляю ошибки других программистов
Создаю мобильные приложения любой сложности “под ключ”
Создаю продукты автоматизирующие бизнес-процессы
Создаю парсеры конкурентов
Создаю проекты автоматической бизнес-аналитики и инфографики
Проектирую и структурирую информационные системы
Рисую дизайн сайтов, приложений, презентаций
Работаю удалённо по договору
Я знаю, что вам нужны звонки, клиенты, продажи, а не просто сайт. Успех Вашего проекта — моя цель!
Весь внешний вид и функционал в процессе работы обсуждается и утверждается с Вами. Таким образом Вы точно получаете именно то, что Вы хотели, а не “кота в мешке”.
Мне интересно спроектировать Ваш проект таким образом, чтобы он был лучше и удобнее проектов Ваших конкурентов. Делать иначе смысла не вижу.
Я работаю не за копейки но качественно, раз и навсегда. Ничего переделывать, как часто приходится за неопытными фрилансерами, не нужно будет. Настроен на дальнейшее сотрудничество, поэтому ответственен за качество.
За проект берусь только если уверен, что выполню качественно и в срок.
Предоставляю гарантию на все мои работы. Если будет обнаружен баг возникший по моей вине — он будет устранён бесплатно
Всегда на связи, не пропадаю
Лучшие VS Code расширения / ТОП-10 крутых плагинов для Visual Studio
Visual Studio Code – программа с удобным интерфейсом и множеством функций. Каждый пользователь может добавить функционал при помощи расширений. В статье мы рассмотрим ТОП-10 крутых плагинов.
VS code Icons
Начнем мы подборку с плагина, что является «must have» плагином для любого разработчика и не важно на каком языке вы пишите. За счет плагина VS code Icons все ваши файлы, в том числе папки, будут обладать иконками в зависимости от кода что прописан внутри них.
Этот плагин добавляет крутую визуализацию внутрь ваших проектов и помогает вам быстрее ориентироваться среди сотен различных файлов и папок.
Также рекомендуем посмотреть на расширение Material Icon Theme. Он также позволяет добавить стильные иконки к вашим папкам и файлам.
Prettier
Следующий на очереди плагин Prettier. Он позволяет в автоматическом формате форматировать ваш код с соблюдением всех отступов, пробелов и табов. Другими словами, за счет Prettier ваш код становиться красивым и верным каждый раз когда вы сохраняете файл.
Для работы вам нужно его установить и зайти в настройки. Откройте их в формате кода JSON. В настройки допишите строку «editor.formatOnSave» со значением true. Далее перезапустить всю программу. В таком случае при сохранении файлов они у вас будут форматироваться.
Это максимально удобный плагин, является одним из наиболее популярных плагинов в VS code.
Live Server
Live Server предоставляет возможность любому запустить локальный сервер для своего проекта. Для запуска сервера вам достаточно установить расширение, а далее внутри нужного файла нажмите правой кнопкой мыши и выберите опцию «Open with Live Server».
Большим плюсом сервера является его автоматическая перезагрузка. Вы можете писать код, сохранять файл, а сервер обновиться автоматически в соответсвии с кодом внутри файла.
Bracket Pair Colorizer
Еще один максимально удобный плагин – Bracket Pair Colorizer. Он добавляет подсветку для фигурных скобок и тем самым позволяет вам быстро ориентироваться среди них.
Данный плагин максимально удобен для всех языков программирования, возможно, лишь за исключением Python, Golang и тому подобных языков, где нет фигурных скобок.
Indent Rainbow
Нельзя пройти мимо расширения под названием Indent Rainbow. За счет расширения вы получаете цветовое оформление для отступов внутри проекта.
Каждый отступ выделяется своим цветом и вы никогда не запутаетесь в коде. Этот плагин отлично использовать в связке с прошлым плагином.
GitLens
GitLens – прекрасное расширение для работы c Git. Данное расширение предоставляет вам полную информацию относительно репозитория вашего проекта, а также всех комитов и комментариев что были внесены и оставлены.
При помощи GitLens вы в удобной форме можете наблюдать какие участки кода были добавлены в проект и при этом какие комментарии были оставлены при добавлении того или иного участка кода. Прекрасный плагин для визуализации Git.
Peacock
Цветовая гамма кажется чем-то простым, но все же ей стоит уделять время. Если цвета в редакторе вам нравятся, то вам значительно проще будет даваться написание кода.
За счет плагина Peacock вы можете устанавливать глобальную цветовую гамму для редактора. Вы можете поменять не только цвет текста и цвет заднего фона, но также сможете изменить боковую панель в Visual Studio code.
Faker
Думаю вам часто приходилось выдумывать имена, адреса или прочую информацию лишь с целью чтобы протестировать участок кода в вашем проекте.
Более вам такое делать не придется, так как при помощи плагина Faker вы можете создать фейковую информацию и сразу же подставить её внутрь некой переменной.
Lorem ipsum
Помимо подстановки фейковых данных часто необходимо подставить текст. Для этого можно использовать плагин Lorem ipsum, что подставляет текст рыбу или другими словами текст заглушку.
Better Comments
И конечно же, как мы можем обойтись без комментариев. Сами по себе комментарии обычно невзрачны и их не всегда удобно читать. При помощи плагина Better Comments вы можете создать действительно более хорошие комментарии.
Данный плагин позволяет оформить комментарии в разные цветовые решения, тем самым вы можете более четко выделять важные и не важные участки комментария
Видео на тему
Ниже предлагаем просмотреть соответствующее видео по данной тематике:
Больше интересных новостей
Рационально ли запускать коммерческий сайт на WordPress сегодня?
Как создать портфолио веб-дизайнеру?
Какие вопросы задают на собеседованиях: Tesla, Apple, Google?
Способен ли Kotlin заменить Java в разработке для Android?
Комментарии (1)
HALID 16 февраля 2023 в 12:45