VSCode中的重构操作

10,213 阅读3分钟

一直用vscode开发,最近读了重构一书,这次就给不喜欢看操作文档的同学分享vscode编辑器中的快速重构小技巧,主体是引用的vscode官方文档:code.visualstudio.com/Docs/langua…
vscode对于ts/js的重构功能还是比较初级,不如idea对java的支持,不过我相信,随着时间流逝,vscode的功能也会越来越强大

重命名

《重构》一书中 代码中的坏味道章节 第一个讲的就是迷之命名

重命名这个比较简单,但是其实变量/属性或者方法的名字可读性非常重要,起一个好的名字,这是提高重构水平的第一步。

具体操作

选中某个变量/属性或者方法后,按 F2 即可重命名当前页面中所有用该名字的地方,改完然后按Enter。

值得注意的是,如果要更改的属性来源是import取回来的属性,那么会自动的给import的属性取别名

引用 references

查看引用

无论是类,接口,方法,属性和导出对象,我们都可以方便的查看/转到它的引用

CodeLens - 引用计数

CodeLens显示类,接口,方法,属性和导出对象的内联引用计数,可以在用户设置文件中通过"typescript.referencesCodeLens.enabled": true进行设置来启用此功能。

如果单击引用计数,可以快速浏览引用列表

提取(Extract)为方法/函数

将选定的语句或表达式提取到文件中的新函数。

提取为常量

将选定的表达式提取为文件中的新常量。

将类型提取为接口或类型别名

将选定的复杂类型提取为接口或类型别名。

移至新文件

将文件顶级范围内的一个或多个类,函数,常量或接口移至新文件。从所选内容推断出新文件的名字。

在ES6解构导入和命名空间导入之间转换

在命名的导入(import { Name } from './foo')和命名空间导入(import * as foo from './foo')之间转换。

在默认导出(ES6)和命名导出(commonjs规范)之间转换

使用进行转换并使用export default命名导出(export const Foo = ...)

生成get和set访问器

通过为其生成getter和setter来封装选定的类属性。

将参数转换为非结构化对象

重写一个函数,该函数需要很长的参数列表才能使用单个参数对象。

其他小技巧

快捷键

如果觉得小灯泡麻烦,可以直接选中内容按command+。 可以出现一样的效果,操作起来更快速

另外官方文档还提供了一些改键的方案,这里不一一列举了

快速删除未使用的所有声明

如果有多个未被使用的导入,提示中会出现全部删除选项

一些代码简化

vscode会自动建议一些常见的代码简化,此时也会出现小灯泡,例如Promise.then会提示换用async和await等等,这里不多提了。

后话

以上技巧可以提高生产力,重构的具体思想推荐学习重构一书,多在实践中运用总结