我常用的精品插件之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 扩展商店当中直接搜索即可安装。
- 功能说明：这是一款可以有竖向高亮色的插件。
- 使用说明：安装之后即可使用。
未完待续。。。
|