---
# System prepended metadata

title: Todo Tree 使用規範
tags: [設計規範書]

---

# Todo Tree 使用規範
## 註解類別

這些TODO註解，在確認完成後須移除掉，不重要的訊息註解不需要加入到Todo Tree 中，僅一般正常註解
**只需要加入一次就好，不要使用如下包裹住的方式** 例如:
```
<!-- NOTE: 2024/01/29 xxxx Start-->
 <!-- NOTE: 2024/01/29 xxxx End-->
```
* "TEMP" :
暫時間的修改，後續有可能改回來的
例如:暫時保留
* "NOTE"
添加說明，或留言訊息
例如:尚未設定連結、
* "TAG" 
標籤快速搜尋用
* "[?]" 
需要詢問不解用
* "TODO"
待做事項
* "FIXME"
發現錯誤處，需進行修正
---

# TODO TREE 安裝
![1](https://hackmd.io/_uploads/Hkzv5bX36.png)


### 效果：
![2](https://hackmd.io/_uploads/Hk_Dq-mnp.png)


### 顏色模式　：

- foreground 前景色
- background 被景色
- opacity 背景透明度
- iconColour ICON顏色
- gutterIcon 是否在編輯器溝槽中顯示ICON

---

### icon 圖示  ：

1. [codicon | The icon font for Visual Studio Code (microsoft.github.io)](https://microsoft.github.io/vscode-codicons/dist/codicon.html)
2. [Octicons | Primer](https://primer.style/foundations/icons)

---

### type　高亮模式：

- tag 只有標籤本身會被高亮
    
![3](https://hackmd.io/_uploads/BJ5Rq-XnT.png)

    
- text 標籤與其後面文案 高亮
    
![4](https://hackmd.io/_uploads/By30qbQna.png)

    
- tag-and-commtent 高亮標籤與前面的註解符號
    
![5](https://hackmd.io/_uploads/SyJyjZQnT.png)

    
- line 高亮一整行
    
![6](https://hackmd.io/_uploads/BJbJs-7h6.png)

    
- whole-line 高亮註解所在的一整行(後面不管有沒有內容)

![7](https://hackmd.io/_uploads/rk4JiW7na.png)


- none 不高亮
---
## 設定檔
### Setting.JSON  :

ctrl + shift + p >open user settings.json (使用者) 進入
&& > open workspace Settings (工作區)

```json
{
    "explorer.confirmDragAndDrop": false,
    "security.workspace.trust.untrustedFiles": "open",
    "bracketPairColorizer.depreciation-notice": false,
    "liveServer.settings.donotShowInfoMsg": true,
    "emmet.triggerExpansionOnTab": true,
    "[javascript]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[vue]": {
        "editor.defaultFormatter": "Vue.volar"
    },
    "liveSassCompile.settings.formats": [
		{
			"format": "expanded",
			"extensionName": ".css",
			"savePath": "~/../css",
			"savePathReplacementPairs": null
		}
    ],
    "explorer.confirmDelete": false,
    "[scss]": {
        "editor.defaultFormatter": "MikeBovenlander.formate"
    },
    "[json]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "[css]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "workbench.editor.showTabs": "multiple",
    "workbench.editor.enablePreview": false,
    "editor.tabSize": 2,
    "gutterpreview.imagePreviewMaxHeight": 100,
    "gutterpreview.imagePreviewMaxWidth": 100,
    "gutterpreview.paths": {

    },
    "gutterpreview.showImagePreviewOnGutter": false,
// 以下複製貼上
    "todo-tree.highlights.customHighlight": {
        "TODO":{ //待作清單
            "foreground": "#FFEB38",
            "type":"line"
        },
        "BUG": {
            "icon": "bug",
            "foreground": "#F56C6C",
            "type": "line"
        },
        "HACK":{
            "icon": "versions",
            "foreground": "#E040FB",
            "type":"line"
          },
          "FIXME": {
            "icon": "flame",
            "foreground": "#E91E63",
            "type":"line"
          },
          "XXX":{
            "icon": "unverified",
            "foreground": "#E91E63",
            "type":"line"
          },
        "TEMP": { // 暫時保留
            "icon": "cloud",
            "foreground": "#3ad4ff",
            "type":"line"

        },
        "NOTE": { // 添加說明，或留訊息
            "icon": "note",
            "foreground": "#6df22a",
            "type":"line"
        },
        "TAG": { // 標籤快速搜尋
            "icon": "tag",
            "foreground": "#00ff4c",
            "type":"line"
        },
        "[?]": { // 需要詢問不解的
            "icon": "question",
            "foreground": "#ffb300",
            "type":"line"
        }
    },
    "todo-tree.highlights.defaultHighlight": {

    },
    "todo-tree.general.tags": [
        "BUG",
        "HACK",
        "FIXME",
        "TODO",
        "XXX",
        "[ ]",
        "[x]",
        "TEMP",
        "NOTE",
        "TAG",
        "[?]"
    ],
    "todo-tree.general.tagGroups": {

    },
}
```