Все дерево расширение быстро ищет в вашей рабочей области теги комментариев, такие как ВСЕ а также ИСПРАВИТЬ МЕНЯи отображает их в виде дерева на панели действий. Представление можно перетащить из панели действий в панель проводника (или в любое другое место, которое вы предпочитаете).


📌 Итак, давайте сначала скачать и включить его из расширений.

Дерево задач dev.to/koustav


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

📌 Перейти к Управлять Опция в VS Code

Управление кодом VS


📌 Теперь нажмите на настройки

Настройки VS Code dev.to/koustav

Откроется файл настроек.


📌 Теперь нам нужно открыть settings.json Файл. Нажмите на кнопку в правом верхнем углу.

settings.json devto-koustav


📌 Теперь вы можете вставить туда приведенный ниже код и внести в него свои пользовательские изменения!

{
  "todo-tree.highlights.defaultHighlight": {
    "icon": "alert",
    "type": "text-and-comment",
    "foreground": "black",
    "background": "white",
    "opacity": 50,
    "iconColour": "blue",
    "gutterIcon": true
  },
  "todo-tree.highlights.customHighlight": {
    "TODO": {
      "icon": "checkbox",
      "foreground": "black",
      "background": "yellow",
      "iconColour": "yellow"
    },
    "NOTE": {
      "icon": "note",
      "foreground": "white",
      "background": "cornflowerblue",
      "iconColour": "cornflowerblue"
    },
    "USEFUL": {
      "icon": "verified",
      "foreground": "black",
      "background": "mediumaquamarine",
      "iconColour": "mediumaquamarine"
    },
    "COMMENT": {
      "icon": "comment",
      "foreground": "white",
      "background": "gray",
      "iconColour": "white"
    },
    "LEARN": {
      "icon": "bookmark",
      "foreground": "white",
      "background": "hotpink",
      "iconColour": "hotpink"
    },
    "FIXME": {
      "icon": "tools",
      "foreground": "crimson",
      "background": "burlywood",
      "iconColour": "burlywood"
    },
    "RECHECK": {
      "icon": "codescan",
      "foreground": "white",
      "background": "chocolate",
      "iconColour": "chocolate"
    },
    "INCOMPLETE": {
      "icon": "alert",
      "foreground": "white",
      "background": "mediumvioletred",
      "iconColour": "mediumvioletred"
    },
    "BUG": {
      "icon": "bug",
      "foreground": "white",
      "background": "crimson",
      "iconColour": "crimson"
    },
    "SEE NOTES": {
      "icon": "note",
      "foreground": "white",
      "background": "teal",
      "iconColour": "teal"
    },
    "POST": {
      "icon": "share",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    },
    "[ ]": {
      "icon": "check",
      "foreground": "black",
      "background": "white",
      "iconColour": "yellow"
    },
    "[x]": {
      "icon": "check",
      "foreground": "white",
      "background": "green",
      "iconColour": "green"
    }
  },
  "todo-tree.general.tags": [
    "BUG",
    "SEE NOTES",
    "HACK",
    "FIXME",
    "RECHECK",
    "INCOMPLETE",
    "TODO",
    "NOTE",
    "POST",
    "USEFUL",
    "LEARN",
    "COMMENT",
    "[ ]",
    "[x]"
  ],
  "todo-tree.regex.regex": "(//|#|<!--|;|/\\*|^|^\\s*(-|\\d+.))\\s*($TAGS).*(\\n\\s*//\\s{2,}.*)*"
}
Войти в полноэкранный режим

Выйти из полноэкранного режима

📌 Вот конечный результат-

Подсветка дерева задач Комментарии


📌 Каждый комментарий является объектом в этом json файл. Структура объекта —

Todo Tree dev-to-koustav


📌 Вы можете добавить больше объектов на основе этой структуры и включить имя объекта в

Todo Tree dev-to-koustav

Несколько вещей, которые нужно знать перед редактированием конфигурации

  • icon — используется для установки другого значка в дереве. Должен быть действительным октикон.

октиконы

  • iconColour — используется для установки цвета иконки в дереве. Если не указано, он попытается использовать цвет переднего плана или цвет фона.
  • gutterIcon — установите значение true, чтобы отображать значок в поле редактора.
  • Foreground а также background-color можно указать с помощью имен цветов HTML/CSS (например, "Salmon"), шестнадцатеричные значения RGB (например, "#80FF00"), значения стиля CSS RGB (например, "rgb(255,128,0)")
  • fontWeight, fontStyle, textDecoration — можно использовать для стилизации выделения со стандартными значениями CSS.

И мы-

Готово Мем


Поделитесь 💚 с теми, кому это может быть полезно
❤️ Удачного кодирования!
Следите за новостями!