vscode常用外掛

隮發表於2024-03-13
VSCode

vscode 常用外掛

  1. 部落格園 cnblogs 客戶端

  2. auto close tag （html自動閉合標籤）

  3. auto rename tag

  4. auto-header （自動新增頭部註釋）

  5. aws toolkit （可提供簡單的程式碼提示）

  6. Azure Repos (可以在vscode中開啟遠端倉庫，無需下載到本地)

  7. Better Comments（可修改註釋顏色）

  8. Chinese （Simplified）（簡體中文）

  9. Draw.io Integration （一個流程圖工具，可在vscode中做一些簡單的流程圖）

  10. Error Lens （對無效字元提示，如中文逗號等）

  11. Dev Containers

  12. Docker （容器話部署測試會用到）

  13. ESLint （es語法錯誤提示）

  14. ExtendScript Debugger （開發adobe的cep外掛時會用到，如AE/AI外掛）

  15. Git Graph （一個免費的git提交message和分支及合併情況的檢視工具）

  16. Git History （git提交記錄檢視，以及git常用操作）

  17. GitHub Repositories （github倉庫程式碼檢視）

  18. Import Cost （顯示匯入第三方包的體積大小）

  19. LeetCode （程式的靈魂）

  20. Live Server （快速將當前html放在node服務中，並使用預設瀏覽器開啟）

  21. Markdown All in One (.md檔案檢視預覽工具)

  22. Prettier - Code formatter（程式碼格式化工具）

  23. Pretty TypeScript Errors（使 TypeScript 錯誤更易讀和使用者友好）

  24. Remote Repositories

  25. Svg Preview （svg圖片預覽工具）

  26. Tailwind CSS IntelliSense（tailwind css class 提示工具）

  27. Todo Tree （標記工具）
    基本配置
    // todo-tree 標籤配置 標籤相容大小寫字母(很好的功能!!!)
    "todo-tree.regex.regex": "((%|#|//|<!--|\s*\*)\s*($TAGS)|\s*- \[ \])",
    "todo-tree.general.tags": [
    "todo", //新增自定義的標籤成員,將在下面實現它們的樣式
    "bug",
    "tag",
    "done",
    "mark",
    "test",
    "update"
    ],
    "todo-tree.regex.regexCaseSensitive": false,
    "todo-tree.highlights.defaultHighlight": { //如果相應變數沒賦值就會使用這裡的預設值
    "foreground": "black", //字型顏色
    "background": "yellow", //背景色
    "icon": "check", //標籤樣式 check 是一個對號的樣式
    "rulerColour": "yellow", //邊框顏色
    "type": "tag", //填充色型別 可在TODO TREE 細節頁面找到允許的值
    "iconColour": "yellow" //標籤顏色
    },
    "todo-tree.highlights.customHighlight": {

    //todo 		需要做的功能
"todo": {
    "icon": "alert",          //標籤樣式
    "background": "#c9c552",  //背景色
    "rulerColour": "#c9c552", //外框顏色
    "iconColour": "#c9c552",  //標籤顏色
},

//bug		必須要修復的BUG  
"bug": {
    "background": "#eb5c5c",
    "icon": "bug",
    "rulerColour": "#eb5c5c",
    "iconColour": "#eb5c5c",
},

//tag		標籤
"tag": {
    "background": "#38b2f4",
    "icon": "tag",
    "rulerColour": "#38b2f4",
    "iconColour": "#38b2f4",
    "rulerLane": "full"
},

//done		已完成
"done": {
    "background": "#5eec95",
    "icon": "check",
    "rulerColour": "#5eec95",
    "iconColour": "#5eec95",
},

//mark     	標記一下
"mark": {
    "background": "#f90",
    "icon": "note",
    "rulerColour": "#f90",
    "iconColour": "#f90",
},

//test		測試程式碼
"test": {
    "background": "#df7be6",
    "icon": "flame",
    "rulerColour": "#df7be6",
    "iconColour": "#df7be6",
},

//update  	最佳化升級點
"update": {
    "background": "#d65d8e",
    "icon": "versions",
    "rulerColour": "#d65d8e",
    "iconColour": "#d65d8e",
}

    },
    使用方法：
    https://blog.csdn.net/Ztt300/article/details/124474324
    檔案icon大全
    https://microsoft.github.io/vscode-codicons/dist/codicon.html

  28. vscode-icons （vscode 檔案及資料夾美化）

  29. vetur TypeScript performance workaround (vue外掛，暫未使用)

相關文章