首页 技术设计 工具 vscode

# Turbo Console Log

一键生成有意义的 console.log 消息，支持多语言、多光标操作，提供可定制的日志类型和输出格式，提高调试效率。

快捷键

ctrl+alt+l

# GlassIt-VSC

GlassIt-VSC 是一个毛玻璃插件，它为 VS Code 添加 透明度 效果，让编辑器的背景变得半透明，从而更加美观和个性化。

安装完成之后点击插件的设置按钮，即可设置透明度，数值越小越透明，范围实在0-255，然后就实现窗口透明效果了。

快捷键

ctrl+alt+c 透明度变低
ctrl+alt+z 透明度提高

这个插件特别适合 单屏 用户， 不用关闭VS Code ，即可看到页面的修改效果。当然也可以 摸鱼 啊，一遍敲代码，一遍刷视频，美滋滋。

# Power Mode

Power Mode 可以在代码编辑时添加一些视觉效果，比如闪电、火焰、爆炸等效果，使代码编辑变得更加有趣和生动。

它会让你成为全组最靓的仔，他会让你写代码时充满力量，这是一款神奇的插件，每一个有梦想的程序员都应该拥有它。

具体安装配置可参考：VsCode 插件 -- Power Mode

# Code Runner

Code Runner 提供了在 VS Code 中 运行代码 的功能。该插件支持多种编程语言，包括但不限于 JavaScript, Python, Java, C++, C#, PHP, Ruby, Go 等。借助 Code Runner，您可以在编辑器中直接运行代码块或整个文件， 查看输出结果 ，而 无需离开 VS Code 。

Code Runner 提供了一种高效、方便的方式来运行和测试代码，而无需离开 VS Code。

# Git Graph

Git Graph 可以在编辑器中显示 Git 仓库的提交历史和分支结构的图形化可视化 。通过 Git Graph 插件，您可以 更直观地查看代码提交历史、分支合并情况、分支间的关系等 ，帮助您 更好地理解和管理代码版本控制 。

安装完之后，就可以点击编辑器底部 gitGraph 按钮，查看 git 提交历史。

Git Graph 适用于任何使用 Git 作为版本控制的项目，无论你是单人开发者还是团队协作。这个扩展特别适合于：

  • 需要快速理解代码历史的开发者。
  • 经常处理分支和合并请求的团队。
  • 希望通过图形化方式查看和管理 Git 仓库的初学者。
  • 需要进行代码审查的项目。

# Code Spell Checker

Code Spell Checker 用于检查代码中的拼写错误并进行拼写检查。通过该插件，您可以在编辑器中 实时检测代码中的拼写错误，并及时进行修正，提高代码的质量和可读性 。

通过 Code Spell Checker 插件，您可以更轻松地发现和纠正代码中的拼写错误，提高代码的质量和可读性。这对于编写规范、减少因拼写错误引起的 Bug 非常有帮助。请注意，该插件只检查代码中的拼写错误，对于语法错误需要借助其他代码检查工具或调试器来进行排查和修复。

# LeetCode

LeetCode 可以帮助您在编辑器中 直接刷 LeetCode 上的算法题 ，并进行调试和测试。通过该插件，您可以更方便地刷题、调试代码、查看题目描述和示例测试用例，提高算法学习和编程能力。

通过 LeetCode 插件，您可以在 Visual Studio Code 中方便地刷算法题目，提升编程能力和解题技巧。这对于算法学习、面试准备等都非常有帮助。同时，LeetCode 插件也提供了一些辅助功能，如查看题目示例、讨论解题思路等，方便您更好地学习和进步。请注意，为了使用 LeetCode 插件，您需要有一个 LeetCode 账号并登录到插件中。

# Project Manager

Project Manager 可以帮助您 轻松管理和快速切换项目 。通过该插件，您可以在编辑器中 方便地创建、打开、删除项目，并快速切换不同的项目 ，提高工作效率和组织项目的便利性。

该插件可以帮助我们方便的管理多个项目，支持快速的在多个项目间切换工程，如果你在日常开发中需要进行多项目的管理那用它就对了。

以下是安装和使用 Project Manager 插件的步骤：

  1. 打开 Visual Studio Code 编辑器。
  2. 点击左侧的扩展图标（Extensions）或者使用快捷键 Ctrl+Shift+X 打开扩展侧边栏。
  3. 在搜索框中输入 "Project Manager" 并按下 Enter 键。
  4. 在搜索结果中找到 Project Manager 插件，并点击安装按钮进行安装。
  5. 安装完成后，点击插件旁边的启用按钮，启用该插件。
  6. 在编辑器中打开一个项目文件夹，并单击编辑器底部状态栏的项目管理器图标（一个文件夹和笑脸的图标）。
  7. 在项目管理器中，您可以添加当前项目到项目列表中，也可以创建新项目或者打开已存在的项目。
  8. 点击 "+" 按钮添加项目，输入项目名称和路径，即可将该项目添加到项目列表中。
  9. 在项目列表中，您可以看到所有添加的项目，点击项目名称即可打开该项目。
  10. 您还可以对项目进行重命名、删除等操作，方便管理和快速切换不同项目。

通过 Project Manager 插件，您可以更方便地管理和快速切换不同项目，避免频繁在文件系统中查找和打开项目，提高工作效率和组织项目的便利性。这对于同时处理多个项目、经常切换项目的开发者非常有用。请注意，Project Manager 插件提供了一些基本的项目管理和切换功能，但并不代表完全的项目管理功能，您可能仍然需要使用其他工具或方法来管理复杂的项目结构。

# TODO Highlight

TODO Highlight 可以帮助开发者在编辑器中 突出显示代码中的 TODO、FIXME、NOTE 等注释，方便快速定位和管理待办事项 。通过该插件，您可以更好地跟踪代码中的注释、标记重要信息、提醒自己或团队成员需要处理的任务，提高代码阅读和维护的效率。

# TODO Tree

​ VSCode 的 TODO Tree 插件可以方便地管理项目中的 TODO 等关键字信息。
TODO Tree 的优点：

  • 可视化管理：提供树状结构，方便查看和管理项目中的 TODO 事项。
  • 自定义关键字：支持自定义关键字高亮，适应不同团队的需求。
  • 跨文件搜索：能够快速在整个项目中搜索并显示待办事项。
  • 便捷性：安装和配置简单，易于上手。

在 settings.json 中配置 TODO Tree。

{
    "todo-tree.highlights.customHighlight": {
        "todo": {
            "icon": "bug",
            "type": "line",
            "iconColour": "#5520e5"
        },
        "bug": {
            "icon": "bug",
            "type": "line",
            "iconColour": "#e52021"
        },
        "暂无接口": {
            "icon": "info",
            "type": "line",
            "iconColour": "#e4b21d"
        }
    },
    "todo-tree.general.tags": [
        "bug",
        "todo",
        "暂无接口"
    ],
    "todo-tree.highlights.enabled": false,
    "todo-tree.tree.showCountsInTree": true,
    "todo-tree.regex.regexCaseSensitive": false,
    "todo-tree.general.revealBehaviour": "end of todo",
}

# Notes

Notes 插件用于帮助我们通过 VS Code 来 创建Markdown格式的笔记文件，并方便的对这些文件进行管理 。

Notes可以很方便的工作中实现文档和代码切换(同时)工作，也方便追溯。

# Echarts Enhanced Completion

这是一个用于编辑 echarts 的配置项时进行补全提示的 vscode 的扩展。安装并启用插件后，在你需要用作 echarts 配置项的对象的上一行添加一行注释： /** @type EChartsOption */ (输入 echartsoption 可以使用代码片段)，用于定义该对象为配置项对象。现在，在配置项对象中按下 Enter 键时，插件会显示你可能需要的配置项的列表，并且提示中有对该配置项的详细说明。

# draw.io

Draw.io Integration 是一个在 Visual Studio Code 中集成 Draw.io 的插件，它允许你在 VSCode 中直接编辑和预览 Draw.io 图表。以下是该插件的一些主要功能和特点

  1. 在 VSCode 中编辑图表：你可以在 VSCode 中直接编辑 Draw.io 图表，无需离开编辑器即可进行图表的创建、编辑和调整。
  2. 实时预览：插件提供了实时预览功能，可以在编辑 Draw.io 图表时立即预览图表的效果，使得调整和修改更加直观。
  3. 支持多种图表类型：插件支持 Draw.io 中的多种图表类型，包括流程图、组织结构图、UML 图、网络图等，满足不同场景下的需求。
  4. 保存和导出：你可以将编辑完成的图表保存到本地或者导出为图片或者 XML 文件，方便分享和使用。
  5. 与其他插件集成：插件与其他常用的 VSCode 插件集成良好，例如 Git 插件、Markdown 插件等，可以更加方便地在项目中使用 Draw.io 图表。

# 驼峰翻译助手

纠结怎么取变量？中文一键翻译转换成常用大小驼峰等格式。

# change-case

Change-case 插件提供了一种简单的方法来将单词或变量名更改为各种情况，包括驼峰命名（camelCase）、下划线命名（snake_case）、标题命名（TitleCase）等多种格式。

# Codelf

变量命名神器，搜索 Github、Bitbucket、Google Code、Codeplex、Sourceforge、Fedora Project、GitLab 中的项目以查找实际使用的变量名称。

# Surround

用于在代码块周围添加包装代码片段。该插件支持语言标识符、多选区操作、完全可自定义、自定义包装代码片段，并为每个包装代码片段单独分配快捷键。

# Duplicate Action

一键复制并创建文件或文件夹，提高了开发过程中的文件操作效率。

# CSS Peek

它允许开发者直接从 HTML 文档中快速跳转到匹配的 CSS 样式定义，并提供预览功能，从而大大提高 CSS 样式的查找和编辑效率。

# Regex Previewer

可以实时预览正则表达式匹配结果，并适用于多种前端框架和语言，同时提供快捷键操作、全局和多行选项等便捷功能，以提升开发效率。

# Markdown All in One

用于提供 Markdown 编辑的全方位支持，包括实时预览、语法提示、目录生成、表格生成等多种功能。

# Colorize

Colorize 会给颜色代码增加一个当前匹配代码颜色的背景。它通过 CSS 变量、预处理器变量、hsl/hsla 颜色、跨浏览器颜色、exa、rgb、rgba 和 argb 的彩色背景将 CSS 颜色可视化，帮助开发者快速区分颜色。

# Image preview

通过此插件，当鼠标悬浮在图片的链接上时，可以实时预览该图片，除此之外，还可以看到图片的大小和分辨率。

# CSS Peek

它允许开发者直接从 HTML 文档中快速跳转到匹配的 CSS 样式定义，并提供预览功能，从而大大提高 CSS 样式的查找和编辑效率。