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标识。点击单条记录,能精确跳转到相对应的代码行
错误提示增强
大部分项目已经有了 Eslint,但是它的错误提示是这样的:
每次都需要将鼠标放在出错的代码上,稍作停留,才会出现详细的报错信息。有时候蜜汁自信,改完 bug 直接 commit 上代码库,才发现漏改了。
如果,你装了 Error Lens,错误信息会直接出现在出错的代码行,如此醒目。妈妈再也不用担你漏改代码了。
当然这也有个不好的地方,如果你打开了老旧代码,有可能满屏都是报错信息,看着就让人恼火。不过稍安勿躁,很有可能是格式错误造成的,选中代码,右键格式化,或按住 tab/ shift + tab 改改即可。
参数提示增强
Parameter Hints, 与 Error Lens 相似,将 javascript / typescript 的 popover 提示直接显示在相对应的代码块中,更直接。
上图的 NProgress.configure 和 router.beforeEach 参数提示
代码整理
在代码整理的时候,常常需要规范代码的写法。比如,有的地方用了 剪头函数,有的地方写普通函数。这个时候也可以使用 JavaScript Booster 来完成。
安装之后,在你想做修改的地方,会出现一个灯泡提醒。
这个组件支持如下转换:
- const 与 let 转换
- 分离定义与初始化
- 分离多个定义
- If 条件合并、拆分
- if 与三元运算符转换
- 模板字符串与字符串的转换
- 去除多余空格
比较遗憾的是,这个组件只有对 React 支持,还给 React 写了不少方法。在 Vue 文件中似乎无法出现提示。
画图
draw-io 非常强大的画图工具,相信大家都用过。现在的 process on 等等似乎都是从这个开源工具来做的优化。在 VSCode 中可以安装 Draw.io Integration 既可以实现 drawio 文件的编辑。
安装完成后,新建一个后缀名为 .drawio 的文件,点击打开,就是熟悉的编辑界面了。
从此告别 process on。