网站空间免备案,site之后网站在首页说明说明,最简单的wordpress主题,医院网站可以自己做吗经常帮一些同学 One-on-One 地解决问题#xff0c;在看部分同学使用 VS Code 的时候#xff0c;有些蹩脚#xff0c;实际上一些有用的技巧能够提高我们的日常工作效率。NO.1一、重构代码VS Code 提供了一些快速重构代码的操作#xff0c;例如#xff1a;将一整段代码提取为… 经常帮一些同学 One-on-One 地解决问题在看部分同学使用 VS Code 的时候有些蹩脚实际上一些有用的技巧能够提高我们的日常工作效率。NO.1一、重构代码VS Code 提供了一些快速重构代码的操作例如将一整段代码提取为函数选择要提取的源代码片段然后单击做成槽中的灯泡查看可用的重构操作。代码片段可以被提取到一个新方法中或者在不同的范围内当前闭包、当前函数内、当前类中、当前文件内提取到一个新函数中。在提取重构期间VS Code 会引导为该函数进行命名。将表达式提取到常量为当前选定的表达式创建新的常量。移动到新的文件将指定的函数移动到新的文件VS Code 将自动命名并创建文件且在当前文件内引入新的文件。转换导出方式export const name 或者 export default。合并参数将函数的多个参数合并为单个对象参数参考 重构操作(https://code.visualstudio.com/docs/editor/refactoring)、JS/TS 重构操作(https://code.visualstudio.com/Docs/languages/typescript#_refactoring)NO.2二、自定义视图布局VS Code 的布局系统非常灵活可以在工作台上的活动栏、面板中移动视图。参考重新排列视图(https://code.visualstudio.com/updates/v1_45?refcodebldr#_dynamic-view-icons-and-titles)NO.3三、快速调试代码在 VS Code 内调试 JS/TS 代码非常简单只需要使用 Debug: Open Link 命令即可。这在调试前端或 Node 项目时非常有用这类型的项目通常会启动一个本地服务这时候只需要将本地服务地址填写到 Debug: Open Link 输入框中即可。参考Debug(https://code.visualstudio.com/docs/editor/debugging)NO.4四、查看和更新符号的引用查看符号的引用、快速修改引用的上下文例如快速预览某个函数在哪些地方被调用了及其调用时上下文还可以在预览视图中更新调用上下文的代码。重命名符号及其引用接着上面的例子如果想更新函数名以及所有调用怎么实现按 F2 键然后键入所需的新名称再按 Enter 键进行提交。符号的所有引用都将被重命名该操作还是跨文件的。参考Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)NO.5五、符号导航在查看一个长文件的时候代码定位会是非常痛苦的事情。一些开发者会使用 VS Code 的小地图但其实还有更便捷的方法可以使用 ⇧⌘O 快捷键唤起符号导航面板在当前编辑的文件中通过符号快速定位代码。在输入框中键入字符可以进行筛选在列表中通过箭头来进行上下导航。这种方式对于 Markdown 文件也非常友好可以通过标题来快速导航。参考Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)NO.6六、拆分编辑器当对内容特别多的文件进行编辑的时候经常需要在上下文中进行切换这时候可以通过拆分编辑器来使用两个编辑器更新同一个文件按下快捷键 ⌘\ 将活动编辑器拆分为两个。可以继续无尽地拆分编辑器通过拖拽编辑器组的方式排列编辑器视图。参考Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)NO.7七、重命名终端VS Code 提供了集成终端可以很方便地快速执行命令行任务。用得多了经常会打开多个终端这时候给终端命名可以提高终端定位的效率。参考Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)NO.8八、Git 操作VS Code 内置了 Git 源代码管理功能提供了一些便捷的 Git 操作方式。例如解决冲突VS Code 会识别合并冲突冲突的差异会被突出显示并且提供了内联的操作来解决冲突。暂存或撤销选择的代码行在编辑器内可以针对选择的行来撤销修改、暂存修改、撤销暂存。参考Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)NO.9九、搜索结果快照VS Code 提供了跨文件搜索功能搜索结果快照可以提供更多的搜索结果的信息例如代码所在行码、搜索关键字的上下文并且可以对搜索结果进行编辑和保存。参考Search Editors(https://code.visualstudio.com/updates/v143#search-editors)NO.10十、可视化搭建页面在 VS Code 中可以通过可视化搭建的方式生成 Web 页面这是通过安装 VS Code 的 Iceworks(https://marketplace.visualstudio.com/items?itemNameiceworks-team.iceworks) 插件实现的。安装插件后通过 ⇧⌘P 唤起命名面板在命令面板中输入『可视化搭建』即可唤起可视化搭建界面在界面内通过选择网页元素、进行拖拽布局、设置元素样式和属性来搭建页面最后点击『生成代码』就可以生成 React 代码。参考Iceworks 可视化搭建(https://ice.work/docs/iceworks/guide/visual-construction)推荐阅读我在阿里招前端我该怎么帮你文末有福利如何拿下阿里巴巴 P6 的前端 Offer如何准备阿里P6/P7前端面试--项目经历准备篇大厂面试官常问的亮点该如何做出如何从初级到专家(P4-P7)打破成长瓶颈和有效突破若川知乎问答2年前端经验做的项目没什么技术含量怎么办末尾你好我是若川江湖人称菜如若川历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)关注我的公众号若川视野回复pdf 领取前端优质书籍pdf我的博客地址https://lxchuan12.gitee.io 欢迎收藏觉得文章不错可以点个在看呀^_^另外欢迎留言交流小提醒若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮欢迎点击阅读
