10 个你可能还不知道 VS Code 使用技巧
经常帮一些同学 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?ref=codebldr#_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?itemName=iceworks-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 欢迎收藏
觉得文章不错,可以点个
在看
呀^_^另外欢迎留言
交流~
小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间
【源码精选】
按钮,欢迎点击阅读
10 个你可能还不知道 VS Code 使用技巧相关推荐
- 这25条极简Python代码,你还不知道
作者 | 小F 来源 | 法纳斯特 头图 | 下载于视觉中国 自从我用Python编写第一行代码以来,就被它的简单性.出色的可读性和特别流行的一行代码所吸引. 下面,我将给大家介绍一些Python一行 ...
- 仅使用python基本语法、即不使用任何模块、编写_微博可以设置“仅半年内可见”!你竟然还不知道???...
原标题:微博可以设置"仅半年内可见"!你竟然还不知道??? 主编乱弹妞:两枚少女心爆棚的"女汉子",爱吃会耍又可爱,卖得了萌,犯得了二,自诩追得上陈伟霆,嫁得了 ...
- 会mysql不会sql_不是吧,不会有人还不知道MySQL中具实用的SQL语句
原标题:不是吧,不会有人还不知道MySQL中具实用的SQL语句 目录 实用的SQL 1.插入或替换 2.插入或更新 3.插入或忽略 4.SQL中的if-else判断语句 5.指定数据快照或备份 6.写 ...
- ae 能在linux上运行吗,玩了这么久Linux,这些使用技巧你可能还不知道!
玩了这么久Linux,这些使用技巧你可能还不知道! 上周与大家分享了30个Linux使用技巧,但是还不够!今天又总结了一些,在学习Linux的路上希望能帮到你. 上篇:30个必知的Linux命令技巧, ...
- 圭尔夫大学计算机科学硕士,圭尔夫大学到底有多高大上?你可能还不知道
原标题:圭尔夫大学到底有多高大上?你可能还不知道 圭尔夫大学是加拿大一所规模中等却有着全面教育的综合性公立大学.圭尔夫大学提供超过90个主修科(majors),13个荣誉学位及63个海外遥距课程.根据 ...
- 工作这么多年还不知道如何对MySQL进行性能压测?这也太Low了吧
大家好,我是冰河~~ 今天给大家带来一篇关于MySQL的技术文,这也是我对MySQL使用UUID做主键与int数字做主键做的性能压测. 之前,总有小伙伴问我:为何使用UUID做MySQL的主键,MyS ...
- 【十个】工资是职场最大的陷阱,可怕的是很多人还不知道……
工资是职场最大的陷阱,可怕的是很多人还不知道-- 2018-03-08 为什么你的薪资一直不上不下?揭开职场薪资的十大秘密. 壹 陷阱:工资是职场最大的陷阱 实质:工资不是年薪不是月薪,而是时薪 朋 ...
- 什么你还不知道招聘信息,小唐来教你——最新2021爬取拉勾网招聘信息(一)
文章目录 前言 一.准备我们的库 二.分析分析 三. 代码 四.数据展示 小唐的心路历程 上一篇:没有啦! 下一篇:什么你还不知道招聘信息,小唐来教你--最新2021爬取拉勾网招聘信息(二) 前言 有 ...
- 【建站系列教程】4、还不知道SEO你就OUT了
[建站系列教程]4.还不知道SEO你就OUT了[进阶] SEO的使用背景 SEO到底是什么?SEO会对网站做哪些操作? 对于程序员来说,代码优化方向的SEO能做哪些? 最后,我们才说SEO的原理 写在 ...
最新文章
- SSH连接服务器报错(WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED)的解决方案
- python列表索引超出范围 等于啥_python - IndexError:列表分配索引超出范围,Python
- codeforces 1060 A
- php生成 sku_高并发下,php与redis实现的抢购、秒杀功能
- 非常详细Redis数据库入门教程
- 指纹识别 python_Python实现指纹识别你见过没?
- 敏捷开发般若敏捷系列之三:什么是敏捷(下)(无住,不住于空,破空执,非法,非非法)...
- 介绍一下Win11单独设置耳机音量的方法
- 微吼林彦廷:当直播成为一门显学
- 老九课堂c语言百度云,老九学堂C语言
- MATLAB将数据写入obj文件
- SpringMVC接受参数
- JavaWeb jQuery
- 【Python】文件操作(创建 | 读写 | 保存 | 文件名)
- 利用html创建新闻页面
- “月赚8000的上海出租司机”后来的发展
- c语言模拟计算机程序阶乘,C语言程序设计——快速入门与提高CAP-中国大学mooc-题库零氪...
- 微信 mac 版 3.* beta 可以查看朋友圈了
- c语言中鱼贯指针的编程题,泡面吧 IT宅男如何打造编程教学网站
- 电脑桌面摄像头怎么添加到计算机,笔记本电脑连接摄像头步骤_笔记本电脑怎么连接摄像头-win7之家...
热门文章
- c++和java哪个难_2020 年 11 月编程语言排行榜,Python 超越 Java ?
- 再见安卓 鸿蒙,安卓系统:鸿蒙系统,正式再见
- Spring AOP 面向切面编程
- CSS 设计指南(第3版) 初读笔记
- Silverlight中使用MIRIA进行触屏编程
- arm-2014.05 编译三星内核错误 “not support ARM mode ‘smc 0’ ”
- oracle 在数据库打开状态下进行备份时_下面描述不正确的是,Oracle数据库DBA面试题50道及答案_经典...
- bootstrap.yml与application.properties区别?
- Vscode如何新建html文件
- Java技术:为什么不推荐使用BeanUtils属性转换工具