Обсудите эти эффективные/креативные плагины vscode

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

Сегодня мы представим эти полезные плагины~

плагин

Артефакт кода — расширенный режим

Во-первых, первый представленный плагин:Power Mode, это может сделать ваш процесс программирования намного приятнее (на фото ниже).

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

Сначала мыvscodeПанель поиска плагиновPower Mode(Как показано ниже).

Затем нажимаем установить, после установки нажимаем комбинацию клавишCtrl + Shift + P, Затем введитеsetting,ОткрытьJSONФайл конфигурации (как показано ниже)

В конце добавьте следующие три строки конфигурации:

"powermode.enabled": true, // 开启 Power Mode
"powermode.shakeIntensity": 0, // 关闭抖动（喜欢的也可以选择不关闭）
"powermode.presets": "particles", // 特效预设，还有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"

Что ж, вы можете начать свое «путешествие по программированию спецэффектов»!

Выделите логотип — дерево задач

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

Вот плагин, который может быть рекомендован, чтобы помочь повысить эффективность, то естьTodo Tree, после того, как мы ищем в магазине приложений для установки, нам просто нужно добавить// TODO:Такой аннотированный код мы можемTodo TreeБыстро найдите эту строку комментариев (как показано ниже).

Мы также можем передать следующие настройки (setting.json), настройте цвет и выделите код, а затем мы сможем быстро определить расположение ключевого метода (как показано ниже).

"todo-tree.highlights.customHighlight": {
  "API": { // 关键词
    "background": "green", // 背景颜色
    "icon": "issue-closed", // icon
    "rulerColour": "green", // 文字颜色
    "iconColour": "green" // icon 颜色
  },
  "METHOD": {
    "foreground": "black",
    "background": "yellow",
    "icon": "issue-closed",
    "rulerColour": "yellow",
    "iconColour": "yellow"
  },
},

Быстро найти кронштейны - кронштейн Пара Colorizer

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

Bracket Pair ColorizerЭто может помочь вам быстро определить положение и тип скобок, чтобы вы могли быстро их найти! (Как показано ниже)

Проверка орфографии - Проверка орфографии кода

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

мы можем использоватьCode Spell CheckerПлагин выполняет проверку правописания. После установки плагина мы также можемsetting.jsonФайл, указанный в обнаружении, например, я включилVueПроверка правописания файла (на фото ниже).

Управление git

vscode имеет многоGi1tПлагин администратора, который поможет вам управлятьGitсклад.

Git History

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

Мы также можем просмотреть указанную версию указанного файла (как показано ниже)

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

Git Graph

Git GraphМожет помочь вам лучше проанализировать взаимосвязь между ветвями (как показано ниже)

Git Emoji

Git EmojiМожет лучше помогать командам формировать спецификации коммитов, используяEmojiЭто выражение обобщено представлено, наряду с некоторым текстовым описанием, станет приятным рекордом коммит (см. Ниже).

GitLens

GitLensЭто может помочь вам быстро сравнить различия в коде разных ветвей (как показано ниже).

интермедия

Рисование блок-схем в vscode — draw.io

Установитьdraw.ioПосле этого создайте новыйhelloworld.drawio, Ты сможешьvscodeНарисуйте блок-схему внутри (как показано ниже)!

Это хорошо для рисования простых блок-схем.vscodeПолный стек инженер.

Радужный пердеж - Радужный пердеж

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

После завершения установки нажмите комбинацию клавишCtrl + Shift + P,войтиEnable Rainbow FartИ нажмите Enter, после чего откроется новая страница для воспроизведения голоса (как показано ниже).

В это время создайте новый файл и начните вводить код, например, написаниеforзациклить или написатьfunction, будут сюрпризы~

Суммировать

Хорошо, на этот разvscodeПлагин анализа здесь! Если у вас есть полезные плагины, вы также можете поделиться ими в области сообщений~

Следующее уведомление:

Обсудите те веб-сайты, которые улучшают производительность/креативность

Последняя вещь

Если вы видели это, я надеюсь, что вы поставите лайк и пойдете ~

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

Если вы считаете эту статью полезной, пожалуйста, помогитеgithubзагоратьсяstarБудьте воодушевлены!