Резюме:Сериал, которого вы не знали.
- оригинал:Второе расширенное расширение VSCode для повышения эффективности разработки JavaScript!
- автор:Интерфейс Сяочжи
FundebugПерепечатано с разрешения, авторские права принадлежат оригинальному автору.
Как любитель, профессионал или даже разработчик, который программирует только раз в месяц, вы должны знать, что наличие интеллектуальных и гибких инструментов имеет решающее значение для любого, кто хочет максимально продуктивно проводить время на работе. Да, без лишних слов, это важнее. ввести плагины.
1. Material Theme & Icons
Это важная роль в тематике VS Code. Автор считает важные темы ближе всего к написанию ручкой и бумагой в редакторе (особенно при использовании неконтрастного варианта темы). От встроенных инструментов до текстового редактора ваш редактор выглядит почти плоским и бесшовным.
Представьте себе эпическую тему с эпическими иконками.Material Theme IconsОтлично подходит для замены значков VSCode по умолчанию. Разработанный большой каталог значков интегрирован с темой, чтобы сделать ее более красивой, что поможет вам легко находить свои файлы в проводнике.
2. Режим дзен или режим «Не беспокоить» (режим дзен) с расположением по центру
Для того, чтобы позволить большинству фермеров, работающих с кодексом,coding/docingВремя от времени появляются четкие идеи, и VSCode, который представляет интересы большинства производителей кода, также присоединился к «Режиму дзен». Этот режим можно включить, когда вы редактируете файлы на странице, эффект заключается в том, что ваше поле редактирования разворачивается на весь экран, а затем возникает эффект надвигающегося облака.
Открыть с помощью: Файл > Настройки > Настройки > Настройки пользователя > Workbench > Режим Zen
3. Шрифты с лигатурами
Стиль текста делает чтение легким и удобным, а вы можете использовать красивые лигатуры, чтобы редактор выглядел более дружелюбно.Вот 6 лучших шрифтов, поддерживающих лигатуры. (По материалам www.slant.co)
Можешь попробоватьFira Code, это потрясающе и с открытым исходным кодом. Импортируются следующиеFira CodeПосле того, как VSCode свернет метод для изменения этого шрифта.
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true
Для конкретного использования, пожалуйста, обратитесь к:
Измените шрифт в vscode и используйте Fira Code
4. Отступ-радуга
Стиль отступа, это расширение окрашивает отступ перед текстом, чередуя четыре разных цвета на каждом шаге.
Конечно, если вам нужно настроить свой любимый цвет, скопируйте и вставьте следующий фрагмент кода в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).
Настроить с помощью: Открыть с помощью: Файл > Настройки > Настройки > Настройки рабочей области
6. Tag Wrapping
если ты не знаешьEmmet, то вы можете быть тем, кто любит печатать.EmmetПозволяет писать сокращенный код и возвращать соответствующую разметку, на данный момент VSCode встроен, поэтому настройка не требуется.
Если вы хотите узнать больше об аббревиатурах Emmet, вы можете проверитьEmmet Cheatsheet
7. Внутренний и внешний баланс
Это предложение исходит отvscodecandothat.com/, автор настоятельно рекомендует его.
ты можешь использоватьbalance inwardиbalance outwardКоманда Emmet в VS Code выбирает весь тег. Полезно связать эти команды с сочетаниями клавиш, например.Ctrl + Shift + 向上箭头используется для балансировки наружу, в то время какCtrl + Shift +向下箭头Используется для внутреннего баланса.
Ошибки, которые могут существовать после развертывания кода, нельзя узнать в режиме реального времени.Чтобы решить эти ошибки впоследствии, много времени тратится на отладку логов.Кстати, всем рекомендую полезный инструмент мониторинга ошибок.Fundebug.
8. Turbo Console.log()
Никто не любит печатать очень длинные предложения вродеconsole.log(). Это очень раздражает, особенно когда вы просто хотите быстро что-то вывести, увидеть его значение и продолжить кодирование. Что, если бы я сказал вам, что вы можете регистрировать в консоли что угодно так же быстро, как Lucky Luke?
Это делается путем вызоваTurbo Console Logрасширение сделано. Он поддерживает регистрацию любой переменной в строке ниже и автоматически добавляет к ней префикс после структуры кода. Вы также можете раскомментировать/комментироватьalt+shift+u / alt+shift+cдля всех добавленных этим расширениемconsole.log().
Кроме того, вы также можете пройтиalt+shift+dудалить все:
9. Live server
Это отличное расширение, которое помогает вам развернуть локальный сервер разработки, обеспечивает динамическую перезагрузку статических и динамических страниц и имеет отличную поддержку ключевых функций, таких как HTTPS, CORS, настраиваемые адреса и порты локального хоста.
если сVSCode LiveShareПри совместном использовании он даже позволяет вам использовать локальный хост.
10. Копировать/вставить с несколькими курсорами
Эта функция оказалась очень полезной при редактировании нескольких строк кода путем добавления курсоров в разные строки. Вы можете копировать и вставлять эти выделения курсора, и они будут вставлены в том порядке, в котором они были скопированы.
Mac: opt+cmd+up or opt+cmd+down
Windows: ctrl+alt+up or ctrl+alt+down
Linux: alt+shift+up or alt+shift+down
11. Breadcrumbs(Панировочные сухари)
Над содержимым редактора теперь есть раздел под названиемBreadcrumbs, который показывает ваше текущее местоположение и позволяет быстро перемещаться между символами и файлами. Чтобы использовать эту функцию, используйтеView > Toggle Breadcrumbsкоманда или поbreadcrumbs.enabledНастройка включена. Чтобы взаимодействовать с ним, используйте команду Focus Breadcrumbs или нажмитеCtrl + Shift +.
12. Code CLI
VS Code имеет мощный интерфейс командной строки, позволяющий управлять запуском редактора. Вы можете открывать файлы, устанавливать расширения, менять язык отображения и выводить диагностическую информацию с помощью параметров командной строки.
Представьте, что вы проходитеgit clone <repo-url>Клонируйте удаленный репозиторий, который вы хотите заменить текущим экземпляром VS Code, который вы используете. по командеcode . -rсделает это, не выходя из интерфейса командной строки (Узнайте больше здесь).
12. Polacode
Вы часто будете видеть скриншоты кода с пользовательскими шрифтами и темами, как показано ниже. Это в VS Code сxрасширять
Я знаюCarbonТакже лучшая и более настраиваемая альтернатива. Тем не менее, Polacode позволяет вам оставаться в редакторе кода и использовать любые купленные вами проприетарные шрифты, которых нет в Carbon.
13. Quokka (JS/TS ScratchPad)
Quokka — это платформа быстрого прототипирования для JavaScript и TypeScript. Он запустит ваш код сразу же, как только вы его наберете, и отобразит различные результаты выполнения в редакторе кода.
Отличное расширение для Quokka, которое позволяет вам выводить каждый шаг без необходимости устанавливать точки останова в отладчике, когда вы готовитесь к техническому собеседованию. Это также поможет вам изучить функции таких библиотек, как Lodash или MomentJS, прежде чем их использовать, и даже может использоваться для асинхронных вызовов.
14. WakaTime
Если вы хотите ежедневно регистрировать время, затрачиваемое на программирование, WakaTime — это расширение, которое помогает записывать и хранить показатели и аналитику вашей деятельности по программированию.
оригинал:Here are some super secret VS Code hacks to boost your productivity
О Фундебаге
FundebugСосредоточьтесь на JavaScript, апплете WeChat, мини-игре WeChat, апплете Alipay, React Native, Node.js и мониторинге ошибок онлайн-приложений Java в режиме реального времени. С момента официального запуска Double Eleven в 2016 году Fundebug обработал в общей сложности более 1 миллиарда ошибок, а платными клиентами являются Google, 360, Kingsoft, People.com и многие другие бренды. приветствую всехБесплатная пробная версия!