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

常用插件

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 ，再按一次就是删除。标注的书签可以在编辑器左侧统一管理，如下图：