文章目录
-
- 翻译(英汉词典)
- [Auto Close Tag](#Auto Close Tag)
- [Auto Rename Tag](#Auto Rename Tag)
- [Better Comments](#Better Comments)
- [Bracket Pair Colorization Toggler](#Bracket Pair Colorization Toggler)
- [Chinese (Simplified) (简体中文)](#Chinese (Simplified) (简体中文))
- colorize
- [Highlight Matching Tag](#Highlight Matching Tag)
- [Image preview](#Image preview)
- [JAR Viewer](#JAR Viewer)
- [Live Server](#Live Server)
- [Markdown Preview Enhanced](#Markdown Preview Enhanced)
- [Material Icon Theme](#Material Icon Theme)
- [Material Theme](#Material Theme)
- [open in browser](#open in browser)
- [TODO Highlight](#TODO Highlight)
- [Error Lens](#Error Lens)
- [Git Graph](#Git Graph)
- GitLive
最近复习了一下前端,又打开了尘封已久的 VSCode,挑选了一些插件分享一下。胖友们有更好用的插件欢迎在评论区留言分享。👍
翻译(英汉词典)
![](https://file.jishuzhan.net/article/1752875008243273730/feb94dac5d35c86e6eb8c5424f0d10cd.webp)
- 在状态栏中显示选中词的释义,支持驼峰和下划线命名查询;
- 运行 "批量翻译标识符",批量翻译当前文件中被识别出的标识符,打开并列编辑器并显示翻译后内容。
点击状态栏显示更全信息。当选中单词时,详细信息包括词形变化;当选中驼峰或下划线命名时,详细信息包括所有单词的释义,但不包括各词的词形变化。
批量翻译识别出的命名:
![](https://file.jishuzhan.net/article/1752875008243273730/92234bdcf585e0d709c0fc9749a2c94f.webp)
查询单词:
![](https://file.jishuzhan.net/article/1752875008243273730/8ca3296fa09a2549244618b62cd56c55.webp)
查询驼峰命名:
![](https://file.jishuzhan.net/article/1752875008243273730/43a8a02013829278d9f61d0236654432.webp)
查询下划线命名:
![](https://file.jishuzhan.net/article/1752875008243273730/a85451be06820e9f25880ac6b1041d38.webp)
如果下划线命名是固定短语,则采用短语释义:
![](https://file.jishuzhan.net/article/1752875008243273730/56cf21e8d1816508e65b9ddb63f3d460.webp)
优先形容词+名词组合:
![](https://file.jishuzhan.net/article/1752875008243273730/dfe64a27498837e6c942ccb716c53217.webp)
查无结果:
![](https://file.jishuzhan.net/article/1752875008243273730/c5cd0e48741e8adc2e6b8cfc9eed48c3.webp)
悬停显示翻译结果:
![](https://file.jishuzhan.net/article/1752875008243273730/4ebb209d5177473f942d1b4bca7a8a91.webp)
配置项:
键名称 | 默认值 | 说明 |
---|---|---|
EnglishChineseDictionary.enableHover | false | 开启悬停显示翻译结果 |
Auto Close Tag
![](https://file.jishuzhan.net/article/1752875008243273730/31d6f1102f79204e23bce009d6dfdccc.webp)
自动添加 HTML/XML 关闭标签:
![](https://file.jishuzhan.net/article/1752875008243273730/bb59ffd194577f03a6ffabb529ee49ba.webp)
Auto Rename Tag
自动重命名成对的 HTML/XML 标记。
![](https://file.jishuzhan.net/article/1752875008243273730/2f4defb26f1163f7a5abcfc6299e4a60.webp)
Better Comments
![](https://file.jishuzhan.net/article/1752875008243273730/aba98795134778148bdd7cb46aa0dbf6.webp)
在代码中创建更人性化的注释。 有了这个扩展,将能够将您的注释分类为:
- 警报 (Alerts)
- 查询 (Queries)
- 待办事项 (TODOs)
- 突出(Highlights)
注释掉的代码也可以样式化,以明确代码不应该存在。
![](https://file.jishuzhan.net/article/1752875008243273730/2c199fad4a886dae0936b10b5c20ccd1.webp)
Bracket Pair Colorization Toggler
括号对着色。
![](https://file.jishuzhan.net/article/1752875008243273730/b3c712a2590a57f1183d4c0fa0068abd.webp)
Chinese (Simplified) (简体中文)
![](https://file.jishuzhan.net/article/1752875008243273730/3cf568db4a7538c4ec88d784d03e4421.webp)
colorize
![](https://file.jishuzhan.net/article/1752875008243273730/ae16e91ffde21d74f7ce0d19c7c85270.webp)
立即可视化 css 颜色在你的 css/sass/less/postcss/stylus/XML... 文件:
![](https://file.jishuzhan.net/article/1752875008243273730/b00c845589c0240db692084278195a25.webp)
Highlight Matching Tag
突出显示匹配的结束和开始标记。
![](https://file.jishuzhan.net/article/1752875008243273730/216f161707545e486630fc195712750d.webp)
Image preview
![](https://file.jishuzhan.net/article/1752875008243273730/a70a9312b5be95682eb1bb1781c05b07.webp)
在 gutter 和 hover 中显示图像预览:
![](https://file.jishuzhan.net/article/1752875008243273730/32b17df5b4bf0f051aaf7cc6c3fdcb14.webp)
JAR Viewer
![](https://file.jishuzhan.net/article/1752875008243273730/072f4c845fd53e8ffb2b93c614e8ae33.webp)
通过列出归档文件中绑定的所有类和文件来快速查看 JAR 文件:
![](https://file.jishuzhan.net/article/1752875008243273730/1b14fccc8f9f7bb02438d12dd411ba6c.webp)
Live Server
![](https://file.jishuzhan.net/article/1752875008243273730/e576d10174b5765d6a3bb0af9063a8a3.webp)
启动一个具有静态和动态页面实时重新加载功能的开发本地服务器:
![](https://file.jishuzhan.net/article/1752875008243273730/a48e5539300ed9f04430027c797bf6e5.webp)
如果你的工作空间中没有任何 htm文件,那么你必须遵循方法 4 和 5 来启动服务器:
-
打开一个项目,从状态栏点击 Go Live 来打开/关闭服务器。
-
右键单击资源管理器窗口中的 HTML 文件,然后单击 "使用实时服务器打开(Open with Live Server)"。
-
打开一个 HTML 文件,右键单击编辑器,然后单击 Open with Live Server。
-
按
alt+L
,alt+O
打开服务器,按alt+L
,alt+C
停止服务器。MAC 上,cmd+L
,cmd+O
和cmd+L
,cmd+C
。 -
按 F1 或
ctrl+shift+P
打开命令面板,输入Live Server: Open With Live Server
启动服务器或输入Live Server: Stop Live Server
停止服务器。
Markdown Preview Enhanced
![](https://file.jishuzhan.net/article/1752875008243273730/9fa311d711be17eddfcdb39c50196ddd.webp)
Markdown 预览增强移植到 vscode:
![](https://file.jishuzhan.net/article/1752875008243273730/585c9e1c6e6f810015733170304ad69b.webp)
Material Icon Theme
![](https://file.jishuzhan.net/article/1752875008243273730/219797931a10fef3d6cd64388eece799.webp)
Visual Studio 代码的材质设计图标:
File icons:⬇️
![](https://file.jishuzhan.net/article/1752875008243273730/e86242617c638c2a5c0eb78fe8a11c08.webp)
Folder icons:⬇️
![](https://file.jishuzhan.net/article/1752875008243273730/2b953237a0ce5a3aeec64a892189e9b8.webp)
可以使用命令调色板更改默认文件和文件夹图标的颜色:
![](https://file.jishuzhan.net/article/1752875008243273730/52e104e98a25dc9c5da30c8c40b42b50.webp)
或者通过用户设置:
json
"material-icon-theme.folders.color": "#ef5350",
"material-icon-theme.files.color": "#42a5f5",
可以使用命令面板更改文件夹图标的设计:
![](https://file.jishuzhan.net/article/1752875008243273730/115ba6d5a0bde6ac639b01e28147310d.webp)
或者通过用户设置:
json
"material-icon-theme.folders.theme": "specific"
Material Theme
![](https://file.jishuzhan.net/article/1752875008243273730/31a014784a3d20d09060ee5b41b8a9f1.webp)
现在 Visual Studio Code 最史诗般的主题:
![](https://file.jishuzhan.net/article/1752875008243273730/8b001d26f2749a1995cde32cba0cae48.webp)
open in browser
![](https://file.jishuzhan.net/article/1752875008243273730/b3e51c62b5bc99c600bbe8cb2360168e.webp)
允许您在默认浏览器或应用程序中打开当前文件:
![](https://file.jishuzhan.net/article/1752875008243273730/163709ddda72c042969d316e71aef996.webp)
快捷键:
key | command |
---|---|
Alt + B |
open in default browser |
Shift + Alt + B |
open in specified browser |
TODO Highlight
![](https://file.jishuzhan.net/article/1752875008243273730/62ef6dc48fe6dde6dbc773f671eb67df.webp)
TODO 突出:
![](https://file.jishuzhan.net/article/1752875008243273730/5004402bffa243a14c60af2bb1de4ea8.webp)
Error Lens
![](https://file.jishuzhan.net/article/1752875008243273730/14e2efc00b2b35aa933f3383e9596996.webp)
改进错误、警告和其他语言诊断的高亮显示:
![](https://file.jishuzhan.net/article/1752875008243273730/2fa45d75a0201d64c04f3ca6b6d14874.webp)
Git Graph
![](https://file.jishuzhan.net/article/1752875008243273730/e8fd33333695a073d836354076cf4bde.webp)
查看存储库的 Git 图,并从图中执行 Git 操作:
![](https://file.jishuzhan.net/article/1752875008243273730/2ba12137c783e3235214a4e4674e3007.webp)
GitLive
![](https://file.jishuzhan.net/article/1752875008243273730/49646d93a647317a637034be23f1da7c.webp)
在 VSCode 中添加了一个选项卡,您可以在其中查看您的合作伙伴,如果他们在线,他们正在处理什么问题和分支,甚至他们未提交的更改,所有这些都是实时更新的。
视频地址 :https://git.live/video
![](https://file.jishuzhan.net/article/1752875008243273730/f3dd082e5a5d5947e85df78b11160ff8.webp)