vscode 常用插件
-
博客园 cnblogs 客户端
-
auto close tag （html自动闭合标签）
-
auto rename tag
-
auto-header （自动添加头部注释）
-
aws toolkit （可提供简单的代码提示）
-
Azure Repos (可以在vscode中打开远程仓库，无需下载到本地)
-
Better Comments（可修改注释颜色）
-
Chinese （Simplified）（简体中文）
-
Draw.io Integration （一个流程图工具，可在vscode中做一些简单的流程图）
-
Error Lens （对无效字符提示，如中文逗号等）
-
Dev Containers
-
Docker （容器话部署测试会用到）
-
ESLint （es语法错误提示）
-
ExtendScript Debugger （开发adobe的cep插件时会用到，如AE/AI插件）
-
Git Graph （一个免费的git提交message和分支及合并情况的查看工具）
-
Git History （git提交记录查看，以及git常用操作）
-
GitHub Repositories （github仓库代码查看）
-
Import Cost （显示导入第三方包的体积大小）
-
LeetCode （程序的灵魂）
-
Live Server （快速将当前html放在node服务中，并使用默认浏览器打开）
-
Markdown All in One (.md文件查看预览工具)
-
Prettier - Code formatter（代码格式化工具）
-
Pretty TypeScript Errors（使 TypeScript 错误更易读和用户友好）
-
Remote Repositories
-
Svg Preview （svg图片预览工具）
-
Tailwind CSS IntelliSense（tailwind css class 提示工具）
-
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 -
vscode-icons （vscode 文件及文件夹美化）
-
vetur TypeScript performance workaround (vue插件，暂未使用)