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插件,暂未使用)