这些你可能不知道的vscode小技巧,可帮你提高开发效率!

本篇文章给大家分享一下你可能不知道的vscode小技巧,它能够让你写代码效率更高,可以帮你提高开发效率,快来收藏吧!

这些你可能不知道的vscode小技巧,可帮你提高开发效率!

vscode 是我们写代码常用的编辑器,它的功能很多,但其实我们有很多功能都没用到,这篇文章就是想梳理下那些可能你不知道的但是却对效率提高很有帮助的一些技巧。【推荐学习:《vscode教程》】

包括:

一键执行 npm scripts一键 diff、预览在新页面搜索git 视图显示目录树在新编辑器打开文件编辑时快速删除、复制、移动行全局搜索文件、跳转到某行快速切换大小写

一键执行 npm scripts

执行 npm scripts 需要在命令行?那是你没用过 vscode 自带的这个功能。

1.png

vscode 会扫描所有的 npm scripts,然后列出来,直接点击 run 就会打开 terminal 来跑,而且高版本 vscode 还可以直接 debug 来跑。

根本不需要自己输入 npm run xxx。

在侧栏打开文件

当打开文件的时候,默认会在当前编辑器打开,如果想新开一个编辑器打开呢?这时候可以按住 option 再点击文件,就会新开一个编辑器打开文件了。

2.png

因为默认 vscode 都是在当前编辑器打开新文件,如果不知道按住 option 点击可以新开编辑器,还是挺麻烦的事情。

更强大的搜索

搜索这个面板有个按钮可能很多同学都没注意到过,点击之后会打开搜索页面来搜索,可以预览的搜索结果更丰富,行数更多。

3.png

比如我搜索一个 @babel/core:

4.png

看,是不是比在左侧那个小框里显示的更多。

5.png

对比一下就可以看出来,还是在右边搜索结果更清晰一些,因为会显示多行。

文件 diff 显示目录信息

当我们改了多个文件的时候,会列在 source control 面板的列表里,有多个同名文件的时候特别不直观。

6.png

这时候其实可以切换成 tree view 的,显示目录树。

7.png

当有多个同名文件的时候,这样会清晰的多:

8.png

编辑器一键预览 markdown

markdown 需要安装插件么?不需要,vscode 本身就内置了这个功能。

9.png

右上角有个预览按钮,点击就会打开 markdown 预览界面,按住 option 再点击,则是同个窗口打开预览。

预览之后再点击 show source 按钮就会回去

10.png

编辑区一键 diff

快速切换 diff 和文件编辑视图

当改了文件内容的时候,可以点击编辑区右上角的按钮,直接打开 diff,可能很多同学都没注意到这些按钮,但其实是很有用的。

11.png

再次点击就可以回到文件编辑状态

12.png

看功能描述 open changes、open files,很明显就是用于 diff 视图和文件编辑视图的切换。

diff 视图快速在 diff 之间跳转

当文件内容特别多,比如好几千行的时候,要找 diff 还是比较麻烦的。其实根本不用自己去找,还容易漏,vscode 编辑器提供了上下按钮,可以直接跳到上一个 diff、下一个 diff

小门道AI 小门道AI

小门道AI是一个提供AI服务的网站

小门道AI 117 查看详情 小门道AI

13.png

一键预览、一键 diff,这些都是能提高效率的功能。

快速搜索功能入口

知道 vscode 有某个功能但是不知道入口在哪?直接用 help下面的搜索框,搜索结果会直接标出来在哪个菜单下有什么按钮。

14.png

编辑快捷键

编辑器最主要的功能还是编辑,但其实有很多 vscode 的请打编辑功能大家可能没有过,我来罗列一下。

行上下移动/复制

如果把一行内容上移下移怎么做?

15.png

手动剪切粘贴的效率太低了,不如试下 option + 上/下 的快捷键,快速把一行内容上下移动。

移动的时候想复制呢?再按住 shift 就行了。

16.png

快速删除行

我们知道了如何快速复制行,那快速删除行呢?

按 command + shift + k 就好了。

如果删除多行,那么先选中,再按 command + shift + k。

多光标同时编辑

同时修改多个地方的内容?按住 option 点击要修改的地方就可以了。

17.png

如果是上下行的同一位置呢?那就 option + command + 上/下,这样就是添加多行的同一位置的光标。

18.png

comand + shift + p 相关

这可能是大家都知道的一个快捷键,输入框中会有一个 > 代表后面是命令,但还有一些大家可能不知道。

19.png

比如直接 command + p,不按 shift,这时候就是搜索文件。

20.png

比如直接按 ctrl + g,或者在输入框输入冒号就代表后面是跳转的行号,可以快速跳到某一行

21.png

当然搜索文件的时候也可以加冒号和行号,快速跳到该文件的那一行。

22.png

快速切换大小写

还有一个小功能,有个内置的 upppercase、lowercase 的切换功能,可以快速切换选中内容的大小写。

23.png

24.png

总结

本文梳理了 vscode 中那些可以提效的一些功能,大家可能没有注意到过。

一键 diff、预览在新页面搜索git 视图显示目录树一键执行 npm scripts在新编辑器打开文件编辑时快速删除、复制、移动行全局搜索文件、跳转到某行快速切换大小写

熟悉了这些功能的使用,相信会给我们日常开发提升一些效率,学习下每天写代码的工具的使用技巧还是挺有意义的。

更多编程相关知识,请访问:编程视频!!

以上就是这些你可能不知道的vscode小技巧,可帮你提高开发效率!的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/502712.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月8日 21:05:16
下一篇 2025年11月8日 21:06:06

相关推荐

  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • 为什么在 React 组件中无法获得 Tailwind CSS 语法提示?

    为什么在 React 组件中无法获得 Tailwind CSS 语法提示? 你在 VSCode 中编写 HTML 文件时,可以正常获取 Tailwind CSS 语法提示。但当你尝试在 React 组件中编写 Tailwind CSS 时,这些提示却消失不见了。这是什么原因造成的? 解决方案 要解决…

    2025年12月24日
    000
  • 如何在 VSCode 中为 React 组件启用 Tailwind CSS 提示?

    在 vscode 中为 react 组件启用 tailwind css 提示 如果你在使用 vscode 编写 react 组件时,发现 tailwind css 提示无法正常显示,这里有一个解决方法: 安装 tailwind css intellisense 插件 这是实现代码提示的关键,确保你已…

    2025年12月24日
    200
  • Vue3 中如何将页面上的 PX 单位转换为 REM?

    vue3 下如何实现某个页面 px 自适应到 rem? 在 vue3 中,您可以在某个页面中使用 px 转 rem 的自适应功能,以免影响其他项目 ui 框架。以下是实现方法: 使用 jquery 获取页面宽度,并将其作为基准值。例如,使用 375 作为基准,您可以在页面 mounted 生命周期函…

    2025年12月24日
    000
  • 如何实现 Vue 3 项目中特定页面自适应,避免影响全局 UI 框架?

    自适应页面 px 到 rem 插件探索 在 vue 3 项目中,开发者有时需要让某个特定页面具有自适应大小,即根据不同分辨率自动调整 px 到 rem 的转换。然而,传统的 px-to-rem 插件可能会影响整个项目的 ui 框架。 为了解决这个问题,这里提供了一种利用 javascript 和 v…

    2025年12月24日
    000
  • Vue 3 页面如何实现 px to rem 自适应?

    如何在 vue 3 页面中实现 px to rem 自适应? 在 vue 项目中,有时需要让特定的页面进行 px to rem 自适应,以实现自动缩放。以下是一个可用的解决方案: 使用 javascript 获取页面宽度,并以 375px 作为基准值。例如: let appwidth = $(‘#a…

    2025年12月24日
    400
  • CSS 砌体 Catness

    css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3,也称为 css masonry 布局。 theo 制作了一段视频,介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。 所有这些让我很高兴尝试 css 砌体! webkit…

    好文分享 2025年12月24日
    000
  • 如何解决VSCode中折叠部分的代码复制问题?

    Vscode中折叠代码的复制方法 当Vscode中的代码过多时,可以将其折叠起来以方便查看和编辑。不过,有时用户可能会发现折叠后复制代码时只复制了显示的部分,而折叠部分没有被复制。以下是如何解决此问题的方法: 使用快捷键Ctrl+C直接复制 当代码折叠时,直接使用Ctrl+C快捷键复制即可复制所有代…

    2025年12月24日
    000
  • 如何复制折叠的代码?

    Visual Studio Code 中如何复制折叠的代码? Visual Studio Code (vscode) 中,当遇到过长的代码时,为了提高可读性和简洁性,开发人员会经常使用折叠功能将代码折叠起来。然而,在折叠代码后,直接按住 Ctrl + C 复制代码时,只会复制展开的部分,而折叠的部分…

    2025年12月24日
    000
  • 如何在 VSCode 复制折叠的代码?

    如何复制折叠的 VSCode 代码 使用 VSCode 时,代码过长可能会造成不便。在折叠代码后,发现无法正常复制折叠的部分,令人感到烦恼。本文将介绍一种解决方案,帮助你轻松复制折叠的 VSCode 代码。 问题:如何复制折叠起来的 VSCode 代码? 当你折叠代码后,直接选中复制只会复制未折叠的…

    2025年12月24日
    000
  • CSS 太棒了!

    我正在学习什么 css 赋予了页面活力。多年来,css 变得越来越强大,并且已经开始用于制作以前需要 javascript 的动画。本周我一直在研究它的一些更高级的属性。 媒体查询 媒体查询几乎已经成为新时代设备的必需品。随着智能手机的出现,通过手机消费媒体的人比任何其他设备都多。因此,网站必须在移…

    2025年12月24日
    000
  • 试验 Tailwind CSS:快速指南

    tailwind css 是一个实用性优先的 css 框架,因其灵活性和易用性而在 web 开发人员中广受欢迎。 tailwind css 在 npm 上的每周下载量超过 950 万次(2024 年 8 月 5 日),显然它是 web 开发社区的最爱。在这篇博文中,我们将探讨如何在不设置本地开发环境…

    2025年12月24日
    000
  • VSCode如何使用HTML插件_高效开发环境配置【技巧】

    VSCode中HTML开发需配置五项功能:一、启用内置HTML语言支持;二、配置Emmet实现快捷展开;三、安装Live Server插件实现自动刷新预览;四、启用Auto Rename Tag同步修改成对标签;五、配置Prettier实现HTML格式自动化。 如果您在VSCode中编写HTML文件…

    2025年12月23日
    000
  • 怎么在vscode中运行html_vscode运行html文件步骤【教程】

    使用Live Server插件可实现实时预览,安装后右键HTML文件选择Open with Live Server即可在浏览器中自动打开并实时刷新页面。 如果您在使用 VSCode 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速预览和运行 HTML 文件。以下是具体的操作步骤: …

    2025年12月23日
    000
  • 怎么进入html5编辑_用VSCode/记事本打开.html文件即可进入HTML5编辑【进入】

    最直接编辑HTML5文件的方式是用文本编辑器打开.html文件:一、VSCode右键打开或拖拽加载;二、记事本右键打开并设UTF-8编码;三、VSCode命令面板快速搜索打开。 如果您希望对HTML5文件进行编辑,最直接的方式是使用文本编辑器打开已有的.html文件。以下是具体操作步骤: 一、使用V…

    2025年12月23日
    000
  • vscode设置html5环境_插件配置与代码片段设置【教程】

    若VS Code中HTML文件缺乏语法高亮、智能补全及HTML5结构快速生成,需安装Auto Close Tag、Auto Rename Tag、CSS class IntelliSense和HTML Boilerplate插件,启用Emmet并配置html关联与格式化设置。 如果您在 Visual…

    2025年12月23日
    000
  • 怎么在vscode运行html_vscode运行html步骤【指南】

    答案:在VSCode中运行HTML需安装Live Server扩展。1. 创建并保存HTML文件;2. 安装Ritwick Dey开发的Live Server插件;3. 右键选择“Open with Live Server”即可在浏览器中实时预览,修改后自动刷新。 在 VSCode 中运行 HTML…

    2025年12月23日
    000
  • vscode怎么编译运行html_vscode编译运行html步骤【指南】

    使用Live Server插件可实时预览HTML页面,安装后右键选择Open with Live Server即可在浏览器中查看并支持热重载。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法查看页面效果,可能是因为缺少正确的运行环境或配置。以下是几种在 VSCode…

    2025年12月23日
    000
  • vscode怎么运行html代码框架_vscode运行html框架方法【教程】

    使用Live Server插件可快速预览HTML,安装后右键选择“Open with Live Server”即可在浏览器中实时查看页面效果。 如果您在使用 Visual Studio Code 编辑 HTML 文件,但无法直接查看页面效果,可以通过多种方式快速运行并预览 HTML 代码。以下是几种…

    2025年12月23日
    000
  • vscode运行html慢怎么办_解vscode运行html慢问题【技巧】

    使用Live Server插件启动本地服务器预览HTML,禁用非必要扩展以释放资源,优化大体积静态文件引入方式,清除浏览器缓存并切换至高性能浏览器,调整VSCode自动保存与文件监听设置,可显著提升加载速度。 如果您在使用VSCode运行HTML文件时发现加载或预览速度较慢,可能是由于插件配置、浏览…

    2025年12月23日
    000

发表回复

登录后才能评论
关注微信