给大伙儿盘一盘，那些提效/创意的 vscode 插件-技术圈

作者：晒兜斯

原文：https://juejin.im/post/6870428510041833480

在前端开发中，vscode 是最常用的编辑器，而 vscode 有着各种实用插件，有些可以帮助我们提升效率，有些可以让我们的工作过程变得更加快乐。

今天我们就来介绍一下这些好用的插件吧~

提效类插件

代码神器 - Power Mode

首先，介绍的第一款插件是 Power Mode，它可以让你的编程过程变得更加快乐（如下图）。

除了上面那种效果外，这个插件还有其他的几种效果，都是不错的。接下来我们来学习一下如何使用吧！

首先我们在 vscode 插件栏搜索 Power Mode（如下图）。

然后我们点击安装，安装后我们按下键盘组合键 Ctrl + Shift + P，然后输入 setting，打开 JSON 配置文件（如下图）

在最后添加下面三行配置：

"powermode.enabled": true, // 开启 Power Mode
"powermode.shakeIntensity": 0, // 关闭抖动（喜欢的也可以选择不关闭）
"powermode.presets": "particles", // 特效预设，还有 "fireworks", "flames", "magic", "clippy", "simple-rift", "exploding-rift"

好了，可以开始你的 “特效编程之旅” 了！

高亮标识 - Todo Tree

我们在平时的业务开发中，代码文件越写越多，单文件越来越长。在修改代码时，总是需要频繁在文件中寻找想要的内容，或者在文件中上下滚动来寻找目标代码，然后进行修改。

这里可以推荐一个插件来帮助提高效率，那就是 Todo Tree，我们在应用商店搜索进行安装后，我们只需要添加 // TODO: 这样的注释代码，我们就可以在 Todo Tree 中快速定位到这行注释（如下图）。

我们还可以通过下面的设置（setting.json），自定义颜色与高亮代码，然后我们就可以迅速定义关键方法的位置啦（如下图）。

  'todo-tree.highlights.customHighlight': {
    'API': {//关键词
      'background': 'green',//背景颜色
      'icon': 'issue-closed',//icon
      'rulerColour': 'green',//文字颜色
      'iconColour': 'green'    // icon颜色
    }, 'METHOD': {
      'foreground': 'black',
      'background': 'yellow',
      'icon': 'issue-closed',
      'rulerColour': 'yellow',
      'iconColour': 'yellow'
    }
  }