Главная » Хабрахабр » [Перевод — recovery mode ] Секретные хаки VS Code

[Перевод — recovery mode ] Секретные хаки VS Code

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

image

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

Улучшаем внешний вид

1. Material Theme & Icons

Я думаю, что материальная тема наиболее близка к написанию ручкой на бумаге в редакторе (особенно при использовании неконтрастной темы). Это прямо зверь в темах VS Code. Ваш редактор выглядит практически гладко, переходя от встроенных инструментов к текстовому редактору.

Material Theme Icons — отличная альтернатива для замены значков VSCode по умолчанию. Представьте себе эпическую тему в сочетании с эпическими иконами. Это поможет легко найти файлы в проводнике. Большой каталог иконок плавно вписывается в тему, делая ее красивее.

Zen Mode с центрированием image
2.

Вы знали, что можете центрировать расположение для того, чтобы прочитать код, как если бы использовали PDF viewer? Возможно, вы уже знаете режим просмотра Zen, также известный как Distraction Free View (для тех, кто знает Sublime Text), где всё (кроме кода) удаляется, чтобы ничего не отвлекало от редактора кода. Это помогает сосредоточиться на функции или изучить чужой код.

Zen Mode: [View > Appearance > Toggle Zen Mode]

Center Layout: [View > Appearance > Toggle Centered Layout]

image

Шрифты с лигатурами 3.

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

image

Он потрясающий и с открытым исходным кодом. Попробуйте использовать Fira Code.

Так можно поменять шрифт в VSCode после его установки:

"editor.fontFamily": "Fira Code", "editor.fontLigatures": true

image

Rainbow Indent 4.

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

image

Однако я настроил свой собственный, чтобы следовать различным оттенкам серого. Настройка отступа по умолчанию окрашивает отступ в соответствии со схемой радуги. Если вы хотите, чтобы ваш пример выглядел как этот, скопируйте и вставьте следующий фрагмент в свой 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.

image

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

Ускоряем написание кода

1. Оборачивание тегами

Emmet позволяет набирать сокращенный код и получать соответствующие теги. Если вы не знаете Emmet, то скорее всего, вам очень нравится печатать. Это делается путем выбора группы кода и ввода команды Wrap with Abbreviated, которую я связал с помощью shift+alt+.

Посмотрите.

image

Вы бы использовали wrap с отдельными строками, а затем вставляли * после аббревиатуры e.g. Представьте, что вы хотите обернуть все это, но как отдельные строки. div*

Balance Inwards and Outwards 2.

Рекомендую посмотреть vscodecandothat.com

Вы можете выбрать целый тег в VS Code, используя команды balance inward и balance outward.Полезно связывать эти команды с сочетаниями клавиш, например, Ctrl+Shift+Up Arrow для Balance Outward и Ctrl+Shift+Down Arrow для Balance Inward.

image

Turbo Console.log() 3.

Это реально раздражает, если вы хотите вывести что-то быстро, посмотреть значение и продолжить писать код. Никто не любит печатать длинные функции, такие как console.log().

Оно позволяет регистрировать любую переменную в строке ниже с автоматическим префиксом, следующим за структурой кода. Вы можете это сделать, используя расширение Turbo Console Log. Вы также можете раскомментировать/комментировать alt+shift+u/alt+shift+c всю консоль после добавления расширения.

image

Live server 4.

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

Скачать можно здесь.

image

Копипаст с несколькими курсорами 5.

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

image

Breadcrumbs и outlines 6.

Чтобы начать использовать Breadcrumbs, включите его с помощью команды View > Toggle Breadcrumbs или с помощью параметра breadcrumbs.enabled. Breadcrumbs (хлебные крошки) показывает текущее местоположение и позволяет быстро перемещаться между именами и файлами.

При раскрытии отображается дерево имен текущего активного редактора. The Outline View — это отдельный раздел в нижней части дерева проводника.

Он также включает в себя поле ввода, которое фильтрует имена при вводе. The Outline View имеет различные режимы сортировки, опциональное отслеживание курсора. Ошибки и предупреждения также отображаются в представлении структуры, позволяя сразу увидеть место проблемы.

image

Другие хаки

Маленькие хитрости, которые меняют всё

Code CLI 1.

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

image

code. Представьте, что у вас есть только git clone <repo-url> репозиторий и вы хотите заменить текущий экземпляр VS кода, который вы используете. -r сделает это без необходимости покидать интерфейс CLI.

Polacode 2.

Это было сделано в VS Code с расширением Polar code. Вы часто сталкиваетесь с привлекательными скриншотами кода с пользовательскими шрифтами и темами, как показано ниже.

image

Однако Polacode позволяет оставаться в редакторе кода и использовать любой собственный шрифт. Carbon — хорошая и более настраиваемая альтернатива.

Quokka (JS/TS ScratchPad) 3.

Он запускает код сразу по мере ввода и отображает различные результаты выполнения и журналы консоли в редакторе кода. Quokka — это площадка для быстрого создания прототипов для JavaScript и TypeScript.

image

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

Он также может помочь вам изучить функции библиотеки, такие как Lodash или MomentJS, прежде чем вы перейдете к фактическому использованию.

WakaTime 4.

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

image

image

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

VSCode Hacker Typer 5.

Часто мы печатаем на автомате, параллельно разговариваем, из-за этого допускаем ошибки. Вы когда-нибудь печатали код перед толпой? Представьте себе предварительно набранный код, который появляется только тогда, когда вы имитируете набор текста, как в geektyper.

Оно поможет записывать и воспроизводить макросы (код, написанный в вашем редакторе), делая вас более сосредоточенным при наборе текста для аудитории. Jani Eväkallio принес в VS Code это расширение.

Exclude folders 6.

Это быстрый трюк для исключения таких папок, как node_modules или любых других, из дерева проводника, чтобы помочь сосредоточиться на главном. Я научился этому трюку благодаря посту на StackOverFlow. Лично я ненавижу открывать утомительную папку node_module в редакторе, поэтому решил скрыть ее.

Чтобы скрыть node_modules, вы можете сделать это:

  1. Перейдите в File> Preferences > Settings (или в Mac Code> Preferences> Settings)
  2. Найдите files.exclude в настройках
  3. Выберите добавить шаблон и введите **/node_modules
  4. Вуаля! node_modules исчезли из дерева проводника

Это были мои хаки, как писать код еще лучше. Делитесь своими в комментариях.


Оставить комментарий

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

*

x

Ещё Hi-Tech Интересное!

WebAssembly в продакшне и «минное поле» Smart TV: интервью с Андреем Нагих

Разработка приложений под Smart TV — тоже «нетипичный JavaScript», когда все слышали о чём-то, но немногие лично пробовали. Интерес к WebAssembly велик, но пока что нечасто встретишь людей, использующих эту технологию в рабочем проекте. TV, а в последние месяцы так ...

[Перевод] Ethereum планирует стать на 99% экономичней

Криптовалюта скоро сядет на энергетическую диету, чтобы конкурировать с более эффективными блокчейнами На фоне ажиотажа вокруг Биткоина его «младший брат» Ethereum отошел в тень. Но проект с рыночной капитализацией около 10 млрд долларов вряд ли можно считать незаметным. И объемы ...