我常用的精品插件之VScode插件分享
日常工作中,我们会借助各种工具来辅助我们高效地完成工作,而这些工具里边的插件,就是我们提高效率的一个有力支撑,这里记录我使用过程中遇到的好用插件,做一个汇总集合整理,一方面分享给大家,另一方面也是记录给自己。
# 1,Project Manager
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:该插件能够方便地管理放在本地目录中的项目,并且现在 v12.4.0 还支持不同 tag 对项目进行分组,非常方便。
使用说明:通过一张截图说明使用方式:
- 点击 1 可以对想要呈现在边栏的项目列表进行定义,里边的配置都比较简单,不再赘述。
- 点击 2 可以在当前窗口打开该项目。
- 点击 3 可以在新的窗口打开该项目。
# 2,Comment Translate
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:该插件可以自动识别代码中的注释或者单词,然后进行翻译,VScode 中最好用的翻译插件,没有之一。
使用说明:安装之后即可使用,默认使用的是 google 翻译,不过翻译接口会有限流,最新 v1.5.0 版本支持切换百度或者 Bing 翻译。
# 3,Bracket Pair Colorizer
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:该插件能够自动给括号对儿着色显示,是 json,Jenkinsfile 文件编写的神器。
使用说明:安装之后即可使用。
# 4,Guides
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:该插件与上一个插件相辅相成,上个插件以横向高亮括号对,这个插件以纵向高亮。
使用说明:安装之后即可使用。
# 5,Material Icon Theme
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:文件以及文件夹自动添加 icon,类似的很多,这个最好看。
使用说明:安装之后即可使用。
# 6,One Dark Pro
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:御用主题,别无他爱。
使用说明:安装之后即可使用。
# 7,Trailing Spaces
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:空格自动检查,对一些约束配置文件空格的场景,是一大神器。
使用说明:安装之后即可使用。
# 8,Git Graph
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:展示项目的 Git graph,很不错。
使用说明:安装之后即可使用。
# 9,Auto Close Tag
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:自动补全 html 关闭标签。
使用说明:安装之后即可使用。
# 10,Ansible
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:编写 ansible 剧本时,自动语法检查。
使用说明:安装之后即可使用。
# 11,JenkinsFile Support
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:jenkinsfile 代码片段补全,以及关键字补全,日常维护 Jenkinsfile 必须。
使用说明:安装之后即可使用。
# 12,Jenkins Pipeline Linter Connector
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:Jenkinsfile 语法检测,非常方便。
使用说明:安装之后即可使用。
配置
- 第一步是配置用户连接 Jenkins 的 token。
- 第二步是校验的接口。
- 第三步是用户名。
使用
# 13,Docker
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:dockerfile 语法高亮,管理本地 docker 服务。
使用说明:安装之后即可使用。
# 14,Path intellisense
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:导入本地包时智能路径提示
使用说明:安装之后即可使用。
# 15,Markdown All in One
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:markdown 语法的支持,我一般预览来用了,书写的话,当然还是 Typora 最舒服了。
使用说明:安装之后即可使用。
# 16,Mermaid Markdown Syntax Highlighting
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:编写一些流程图时可方便预览。
使用说明:安装之后即可使用。
# 17,Debugger for Chrome
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:便于前端学习时单文件的调试。
使用说明:安装之后即可使用,配置方式参考网上文档。
# 18,小霸王
安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
功能说明:小霸王是一款基于 vscode 的 nes 游戏插件,能让你在紧张的开发之余在 vscode 里发松身心。通过劳逸结合,提升开发效率。
使用说明:安装之后即可使用。
# 19,Better Comments
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够高亮不同注释的一款插件。
- 使用说明:安装之后即可使用。
# 20,Highlight Matching Tag
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款通过下划线标识 html 中标签对儿的插件。
- 使用说明:安装之后即可使用。
# 21,Image preview
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够能够预览项目中引用的图片的插件。
- 使用说明:安装之后即可使用。
# 22,AZ AL Dev Tools/AL Code Outline
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够展示整个文件代码内的方法以及变量的插件。
- 使用说明:安装之后即可使用。
# 23,open in browser
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够在 vscode 将 html 文件在浏览器打开的插件。
- 使用说明:安装之后即可使用。
# 24,CSS Peek
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够通过点击 css 类名迅速定位到样式的定义插件。
- 使用说明:安装之后即可使用。
# 25,Open
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款能够在 vscode 中通过右键让文件使用系统默认应用打开的插件,比如 md 文件可以使用自定义的 Typora 打开。
- 使用说明:安装之后即可使用。
# 26,indent-rainbow
- 官方地址:点我 (opens new window)
- 安装方式:在 Vscode 扩展商店当中直接搜索即可安装。
- 功能说明:这是一款可以有竖向高亮色的插件。
- 使用说明:安装之后即可使用。
未完待续。。。
![微信](https://t.eryajf.net/imgs/2023/01/834f12107ebc432a.png)
![支付宝](https://t.eryajf.net/imgs/2023/01/fc21022aadd292ca.png)
- 01
- 学习周刊-总第175期-2024年第36周09-05
- 02
- 魔方复原-记录个人理解的教程09-01