盘一盘那些提效/创意的 vscode 插件-技术圈

关注▲ W3Cschool▲ ，每天一篇文章，与你共同成长

作者丨晒兜斯

来源丨www.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"
  },
},
复制代码