web前端开发必备的几款 vscode 插件及常用快捷键

最新推荐文章于 2024-07-09 09:41:25 发布

诗渊

最新推荐文章于 2024-07-09 09:41:25 发布

阅读量3.8k

点赞数 1

分类专栏：工具类文章标签： visual studio code

本文链接：https://blog.csdn.net/u014607184/article/details/108621041

版权

本文介绍了web前端开发中Visual Studio Code的15个必备插件，包括TODO Tree、Bookmarks、GitLens等，帮助开发者更好地管理和组织代码、提升开发效率。此外，还列举了常用的快捷键，如Ctrl+Shift+P、Ctrl+P等，以提高日常编码的工作效率。

摘要由CSDN通过智能技术生成

常用插件

1、TODO Tree

在这里插入图片描述

在开发或者是review代码时，经常会碰到一些待处理或者待优化的场景，这个插件能帮你组织和管理 TODO 注释, 你在代码中注释的带 TODO 的标签会统一在侧边栏显示出来，点击标签可以跳转到文件对应的位置。当然不限于 TODO 注释，可以自定义管理标签比如 FIXME 等。插件默认有 TODO、FIXME、BUG 三个标签，我们也可以在设置中定义自己想要的标签，目前我配置的效果如下：

在这里插入图片描述
对应的配置如下：

{
    "window.zoomLevel": -1,
    "todo-tree.tree.showScanModeButton": false,
    "todo-tree.general.tags": [
        "TODO",
        "BUG",
        "FIXME",
        "NOTE"
    ],
    "todo-tree.highlights.customHighlight": {
        "TODO": {
            "background": "#f90",
            "icon": "todo",
            "rulerColour": "#f90",
            "iconColour ": "#f90"
        },
        "BUG": {
            "icon": "bug",
            "background": "red",
            "rulerColour": "red",
            "iconColour": "red",
        },
        "FIXME": {
            "icon": "flame",
            "background": "yellow",
            "iconColour": "yellow",
        },
        "NOTE": {
            "background": "green",
            "icon": "note",
            "rulerColour": "green",
            "iconColour ": "green"
        }
    },
    "todo-tree.general.tagGroups": {
    
    },
    "todo-tree.highlights.defaultHighlight": {
    
    }
}

插件地址：https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree

2、Bookmarks

在这里插入图片描述

「Bookmarks」这个插件的功能就和它名字一样直接，没错它就是你的一个源码书签，当我们看大工程项目或源码的时候，往往需要在成千上万个源文件之间跳转，Bookmarks 能帮你方便地创建和管理书签，看到哪个位置想加个书签就按快捷键 Ctrl + Alt + K ，再按一次就是删除。标注的书签可以在编辑器左侧统一管理，如下图：

在这里插入图片描述
插件地址：https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks