目录
演示下高效写代码
第一鞭:掌握快捷键自定义
打开快捷面板
认识默认键盘快捷键(JSON)
打开快捷键的keybindings.json文件
自定义快捷键
第二鞭:定位篇
定位行
首页 开发工具 VSCode (动图演示)VSCode中怎么高效写代码?技巧分享

(动图演示)VSCode中怎么高效写代码?技巧分享

Nov 23, 2021 pm 06:36 PM
vscode

本篇文章通过动图给大家展示一下在VSCode中怎么高效写代码,希望对需要的朋友有所帮助!

(动图演示)VSCode中怎么高效写代码?技巧分享

【推荐学习:《vscode入门教程》】

演示下高效写代码

有些代码是重复写过的,还需要继续重复写吗?
答案是 ,因为只要 cv 就行了,那有什么方法比 cv 更优雅、更高效、更快(mō)捷(yú)的技巧吗?
答案是是有的,那就是本人自创的快捷十三鞭
下面演示我搞架构之前是怎么写 高(mō)频(yú) 业务代码的 :

  • 我要触发点击事件,创建个提交的函数,而在业务中,这个提交的函数是很 高频 出现的

  • 在这个函数中实用一些通用的函数库,再回到头部写上头文件(导入函数的包),然后再回来这个函数中继续编写未完成的逻辑
    演示.gif

第一鞭:掌握快捷键自定义

第一鞭尤其重要,因为他是整个快捷键的最基础的知识,是最重要的 轴心骨,如果看一遍不懂,那就再看一遍
掌握快捷键自定义,它能够丰富你的操作习惯,避免 快捷键冲突保持各个快捷的操作习惯
因为visual studio code的快捷键是快速 可移植 的,你不用换电脑、换系统后担心一次又一次设置了设置快捷键

打开快捷面板

cmd+k cmd+s 可以快速打开快捷面板
Kapture 2021-05-19 at 23.48.06.gif
或者呼出控制面板(ctrl+shift+p)输入键盘 | keyboard找到
image.png

认识默认键盘快捷键(JSON)

为什么要知道默认的键盘快捷键?
因为好用你知道未修改前的键盘映射、键盘默认的快捷键是什么
image.png
它长这个样子,是一个JSON文件

image.png

打开快捷键的keybindings.json文件

vscode json文件.gif
按照动图打开存储用户快捷方式json文件 keybindings.json,只要修改过快捷键就会有以下的格式

{
  "key": "cmd+k cmd+s",
  "command": "workbench.action.openGlobalKeybindings"
   "when": "editorHasCompletionItemProvider && textInputFocus && !editorReadonly"
}
登录后复制

这个文件是用户自定义的JSON文件,是映射格式

  • key 快捷键
  • command vscode的快捷键命令
  • when 命令生效的条件

keybindings.json文件 是一个json文件,你修改过的快捷键就在这里存储起来了,换机的时候,你可以把这个文件的内容复制另一台机上去,就可以很nice~~
毕竟笔者就是这么干的
image.png在这里插入图片描述

自定义快捷键

只需要快捷键的命令command默认快捷键 再或者直接输入该 快捷键中文的模糊词 就可以可以查询快捷键的映射和修改该快捷键
文章用到的快捷键方式,作者都会提供如下格式的代码片段,方便去查询

{
  "key": "cmd+k cmd+a",
  "command": "workbench.action.openDefaultKeybindingsFile"
}
登录后复制

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qo5Z56PF-1621655509407)(https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7b054961f614a63aee6f7dda082ec05~tplv-k3u1fbpfcp-watermark.image)]

第二鞭:定位篇

定位是快速写代码的核心操作,因为这个是日常编码高频率操作,高达90%以上,必须全部掌握下来,很实用 。
定位设计到代码块的精准定位,定位到类的定义、定位到应用、实现、快速查看、上一次之前的历史修改、设置某处的标签,然后快速找(vim直呼内行)到等等。

定位行

{ 
"key": "ctrl+g",               
"command": "workbench.action.gotoLine" 
},
登录后复制

场景示例:在浏览器找到你的文件在100行报错,找到原因后,定位在100行去修改代码

定位行.gif

更多关于VSCode的相关知识,请访问:vscode教程!!

以上是(动图演示)VSCode中怎么高效写代码?技巧分享的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1674
14
CakePHP 教程
1429
52
Laravel 教程
1333
25
PHP教程
1278
29
C# 教程
1257
24
vscode怎么定义头文件 vscode怎么定义头文件 Apr 15, 2025 pm 09:09 PM

如何使用 Visual Studio Code 定义头文件?创建头文件并使用 .h 或 .hpp 后缀命名在头文件中声明符号(例如类、函数、变量)使用 #include 指令在源文件中包含头文件编译程序,头文件将被包含并使声明的符号可用

vscode需要什么电脑配置 vscode需要什么电脑配置 Apr 15, 2025 pm 09:48 PM

VS Code 系统要求:操作系统:Windows 10 及以上、macOS 10.12 及以上、Linux 发行版处理器:最低 1.6 GHz,推荐 2.0 GHz 及以上内存:最低 512 MB,推荐 4 GB 及以上存储空间:最低 250 MB,推荐 1 GB 及以上其他要求:稳定网络连接,Xorg/Wayland(Linux)

vscode在哪写代码 vscode在哪写代码 Apr 15, 2025 pm 09:54 PM

在 Visual Studio Code(VSCode)中编写代码简单易行,只需安装 VSCode、创建项目、选择语言、创建文件、编写代码、保存并运行即可。VSCode 的优点包括跨平台、免费开源、强大功能、扩展丰富,以及轻量快速。

vscode中文注释变成问号怎么解决 vscode中文注释变成问号怎么解决 Apr 15, 2025 pm 11:36 PM

解决 Visual Studio Code 中中文注释变为问号的方法:检查文件编码,确保为“UTF-8 without BOM”。更改字体为支持中文字符的字体,如“宋体”或“微软雅黑”。重新安装字体。启用 Unicode 支持。升级 VSCode,重启计算机,重新创建源文件。

vscode终端使用教程 vscode终端使用教程 Apr 15, 2025 pm 10:09 PM

vscode 内置终端是一个开发工具,允许在编辑器内运行命令和脚本,以简化开发流程。如何使用 vscode 终端:通过快捷键 (Ctrl/Cmd ) 打开终端。输入命令或运行脚本。使用热键 (如 Ctrl L 清除终端)。更改工作目录 (如 cd 命令)。高级功能包括调试模式、代码片段自动补全和交互式命令历史。

vscode上一步下一步快捷键 vscode上一步下一步快捷键 Apr 15, 2025 pm 10:51 PM

VS Code 一步/下一步快捷键的使用方法:一步(向后):Windows/Linux:Ctrl ←;macOS:Cmd ←下一步(向前):Windows/Linux:Ctrl →;macOS:Cmd →

vscode终端常用命令 vscode终端常用命令 Apr 15, 2025 pm 10:06 PM

VS Code 终端常用命令包括:清除终端屏幕(clear)列出当前目录文件(ls)更改当前工作目录(cd)打印当前工作目录路径(pwd)创建新目录(mkdir)删除空目录(rmdir)创建新文件(touch)删除文件或目录(rm)复制文件或目录(cp)移动或重命名文件或目录(mv)显示文件内容(cat)查看文件内容并滚动(less)查看文件内容只能向下滚动(more)显示文件前几行(head)

vscode终端命令不能用 vscode终端命令不能用 Apr 15, 2025 pm 10:03 PM

VS Code 终端命令无法使用的原因及解决办法:未安装必要的工具(Windows:WSL;macOS:Xcode 命令行工具)路径配置错误(添加可执行文件到 PATH 环境变量中)权限问题(以管理员身份运行 VS Code)防火墙或代理限制(检查设置,解除限制)终端设置不正确(启用使用外部终端)VS Code 安装损坏(重新安装或更新)终端配置不兼容(尝试不同的终端类型或命令)特定环境变量缺失(设置必要的环境变量)

See all articles