提高编程效率的几个 VS Code 插件

210 阅读3分钟

HTML 标签自动更名

如果你要将 html 标签做更改,如<p>sentences goes here</p>改成<span>words goes here</span>,在不少代码编辑器,你在修改 <span> 的时候,末尾的 </span> 都能自动帮你更名,但是很不幸,VS Code 无法办到。

这时候可以借助 Auto Rename Tag 这个插件,除了 html 文件,也支持前端几大框架的模板文件。

Todo List

在日常的工作中,可能我们会同时处理多件事情。如何快速地来回切换,这时候就需要 Todo List 了。如下几个通用的注释,可以帮助很好地标记后续的工作:

  • TODO:待办事项,备忘录,工作进展;
  • FIXME:需要修复的bug;
  • XXX:虽然实现了功能,但是实现的方法有待商榷,希望将来能改进;
  • HACK:标识兼容代码。

按定义我们可以用 FIXME、XXX 标记区分 bug、坏味道,用 Todo 来标记需求。

// TODO 下个迭代要实现增删改查功能const isArray = true;
// FIXME 这里的 if 条件永远是 true
if (isArray) { return [];}
​
// XXX 可以用策略模式改写
if (...) { ... }
else if (...){ ... }
else if (...){ ... }
else if (...){ ... }
​
const isIE = () => {return !!window.ActiveXObject || 'ActiveXObject' in window }
// HACK 兼容 IE
if (isIE()) {...}

既然是通用的注释,那也可以用插件去管理这些内容。在这里推荐 Todo Tree。

安装之后,左侧菜单会出现一个树的按钮,点击能看到项目中所有的Todo标识。点击单条记录,能精确跳转到相对应的代码行

截屏2022-07-24 下午12.49.33.png

错误提示增强

大部分项目已经有了 Eslint,但是它的错误提示是这样的:

截屏2022-07-24 下午12.54.34.png

每次都需要将鼠标放在出错的代码上,稍作停留,才会出现详细的报错信息。有时候蜜汁自信,改完 bug 直接 commit 上代码库,才发现漏改了。

如果,你装了 Error Lens,错误信息会直接出现在出错的代码行,如此醒目。妈妈再也不用担你漏改代码了。

:Users:chendezhi:Library:Application Support:typora-user-images:截屏2022-07-24 下午1.22.24.png

当然这也有个不好的地方,如果你打开了老旧代码,有可能满屏都是报错信息,看着就让人恼火。不过稍安勿躁,很有可能是格式错误造成的,选中代码,右键格式化,或按住 tab/ shift + tab 改改即可。

参数提示增强

Parameter Hints, 与 Error Lens 相似,将 javascript / typescript 的 popover 提示直接显示在相对应的代码块中,更直接。

image.png

上图的 NProgress.configure 和 router.beforeEach 参数提示

代码整理

在代码整理的时候,常常需要规范代码的写法。比如,有的地方用了 剪头函数,有的地方写普通函数。这个时候也可以使用 JavaScript Booster 来完成。

截屏2022-07-24 下午2.08.25.png

安装之后,在你想做修改的地方,会出现一个灯泡提醒。

这个组件支持如下转换:

  • const 与 let 转换
  • 分离定义与初始化
  • 分离多个定义
  • If 条件合并、拆分
  • if 与三元运算符转换
  • 模板字符串与字符串的转换
  • 去除多余空格

比较遗憾的是,这个组件只有对 React 支持,还给 React 写了不少方法。在 Vue 文件中似乎无法出现提示。

画图

draw-io 非常强大的画图工具,相信大家都用过。现在的 process on 等等似乎都是从这个开源工具来做的优化。在 VSCode 中可以安装 Draw.io Integration 既可以实现 drawio 文件的编辑。

安装完成后,新建一个后缀名为 .drawio 的文件,点击打开,就是熟悉的编辑界面了。

capture_20220730121341250.bmp

从此告别 process on。