一直用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等等,这里不多提了。
后话
以上技巧可以提高生产力,重构的具体思想推荐学习重构一书,多在实践中运用总结