1.AI插件ChatGpt
示例
2. 代码截图插件CodeSnap
特征
- 快速保存代码的屏幕截图
- 将屏幕截图复制到剪贴板
- 显示行号
- 许多其他配置选项
用法：选中需要截取的代码块，然后右键点击 CodeSnap 即可 点击红框中得图标即可保存图片
配置项
参考设置
//codesnap代码截图配置
"codesnap.backgroundColor":"#f2f2f2", //截图代码容器边缘颜色
"codesnap.boxShadow": "5px 5px 60px 0px #888888", //阴影设置
"codesnap.containerPadding":"3em", //代码段容器边缘的填充
"codesnap.roundedCorners":true, //圆角配置用于配置边缘内部代码块边缘是否是圆角或方形角
"codesnap.showWindowControls":true, //显示或隐藏OSX样式窗囗按钮的布尔值。
"codesnap.showWindowTitle":false, // 显示或隐藏窗囗标题栏上的文件夹或文件名。
"codesnap.showLineNumbers":true, // 显示或隐藏行号的布尔值
"codesnap.realLineNumbers":false, // 从文件的实际行号开始的布尔值，而不是1
"codesnap.transparentBackground":false, // 用于在拍摄屏幕快照时使用透明背景
"codesnap.target":"container" // 是否要显示外部的边缘容器
3.CSS颜色高亮插件Color Highlight
安装插件后项目中使用的颜色编码会以当前颜色展示，较为明显
4.查看CSS样式插件CSS Peek
查看当前类名的样式
使用方法：ctrl+鼠标单击类名
能够查看全局中当前类名的样式，默认展示当前页的样式，在右侧可以切换文件进行查看。
5.css文档查看Tailwind Documentation
Tailwind CSS其实是一个css框架
扩展程序可以快速访问官方的 Tailwind CSS 文档。该扩展程序使开发者可以直接在 VSCode 编辑器内部访问 Tailwind CSS 文档，无需打开浏览器或离开编辑器。
-
打开方式:
- Mac:
cmd + ctrl + t - Windows:
ctrl + alt + t
- Mac:
6.查看git提交插件Git History
- 使用方式:
- 右键点击文件查看文件的提交记录
- 在文件右键点击可以查看当前文件的提交记录或当前行的提交记录
7. 快速打印插件javascript console utils
选择:
- 选中变量
- Cmd+Shift+L / Ctrl+Shift+L
删除console.logs:
- Cmd+Shift+D / Ctrl+Shift+D
- 这将删除当前文档中的所有console.log语句
8. 检查单词拼写是否错误插件Live Server
在单词输入错误时会有波浪线提示
9. 备注颜色插件Better Comments
安装插件后在setting.json中进行配置
"better-comments.tags": [
{
"tag": "!",
"color": "#FF2D00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "?",
"color": "#3498DB",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "//",
"color": "#474747",
"strikethrough": true,
"backgroundColor": "transparent"
},
{
"tag": "todo",
"color": "#FF8C00",
"strikethrough": false,
"backgroundColor": "transparent"
},
{
"tag": "*",
"color": "#98C379",
"strikethrough": false,
"backgroundColor": "transparent"
}
]
效果图
10. 书签插件 Bookmarks
操作快捷键
Ctrl+alt+K 创建或消除书签
ctrl+alt+j 跳转到前一个书签
ctrl+alt+l 跳转到后一个书签
或者按F1键输入bookmarks查看所有书签操作
11. git提交可视化插件Git Graph
安装后可以查看git提交的相关操作
