搜索
首页开发工具VSCodevscode小白快速入门教程(最全)

本文主要介绍vscode在工作中常用的快捷键及插件,目标在于提高工作效率

vscode小白快速入门教程(最全)

本文的快捷键是基于mac的,windows下的快捷键放在括号里 Cmd+Shift+P(win Ctrl+Shift+P)

零、快速入门

有经验的可以跳过快速入门或者大致浏览一遍。【推荐学习:vscode教程编程视频

1. 命令面板

命令面板是vscode快捷键的主要交互界面,可以使用f1或者Cmd+Shift+P(win Ctrl+Shift+P)打开。

在命令面板中你可以输入命令进行搜索(中英文都可以),然后执行。

命名面板中可以执行各种命令,包括编辑器自带的功能和插件提供的功能。

所以一定要记住它的快捷键Cmd+Shift+P

vscode-1.jpg

2. 界面介绍

刚上手使用vscode时,建议要先把它当做一个文件编辑器(可以打字然后保存),等到有了一定经验再去熟悉那些快捷键

先来熟悉一下界面及快捷命令(不用记)

vscode-2.jpg

3. 在命令行中使用vscode

如果你是 Windows用户,安装并重启系统后,你就可以在命令行中使用 code 或者 code-insiders了,如果你希望立刻而不是等待重启后使用,可以将 VS Code 的安装目录添加到系统环境变量 PATH中

如果你是mac用户,安装后打开命名面板Cmd+Shift+P,搜索shell命令,点击在PAth中安装code命令,然后重启终端就ok了

vscode-3.jpg

最基础的使用就是使用code命令打开文件或文件夹

code 文件夹地址,vscode 就会在新窗口中打开该文件夹

如果你希望在已经打开的窗口打开文件,可以使用-r参数

vscode-1.gif

vscode命令还有其他功能,比如文件比较,打开文件跳转到指定的行和列,如有需要自行百度:bowing_woman:

注意:

在继续看文章之前记住记住打开命令面板的快捷键Cmd+shift+P(win下是Ctrl+shift+p)

一、代码编辑

windows下的快捷键放在括号里

光标的移动

基础

移动到行首 Cmd+左方向键 (win Home)

移动到行尾 Cmd+右方向键 (win End)

移动到文档的开头和末尾 Cmd+上下方向键 (win Ctrl+Home/End)

在花括号{}左边右边之间跳转 Cmd+Shift+ (win Ctrl+Shift+)

进阶

回到上一个光标的位置,Cmd+U(win Ctrl+U) 非常有用,有时候vue文件,你改了html,需要去下面改js,改完js又需要回去,这时候Cmd+U直接回

在不同的文件之间回到上一个光标的位置 Control+- (win 没测试,不知道),你改了a文件,改了b文件之后想回到a文件继续编辑,mac使用controls+-

文本选择

你只需要多按一个shift键就可以在光标移动的时候选中文本

选中单词 Cmd+D 下面要讲的多光标也会讲到Cmd+D

对于代码块的选择没有快捷键,可以使用cmd+shift+p打开命令面板,输入选择括号所有内容,待会说下如何添加快捷键

vscode-2.gif

删除

你可以选中了代码之后再删除,再按Backpack(是backpack吗)或者delete删除,但是那样做太low了

所以,最Geek的删除方式是Cmd+Shift+K (win Ctrl+Shift+K),想删多少删多少,当前你可以使用ctrl+x剪切,效果一样的

vscode-3.gif

代码移动

Option+上下方向键(win Alt+上下)

vscode-4.gif

代码移动的同时按住shift就可以实现代码复制 Option+Shift+上下

vscode-4.gif

添加注释

注释有两种形式,单行注释和块注释(在js中,单行注释//,块注释/**/)

单行注释 Cmd+/ (win Ctrl +/)

块注释 Option+Shift+A

注意:不同语言使用的注释不同

二、代码格式

代码格式化

对整个文档进行格式化:Option+Shift+F (win Alt+Shift+F),vscode会根据你使用的语言,使用不同的插件进行格式化,记得要下载相应格式化的插件

对选中代码进行格式化: Cmd+K Cmk+F win(Ctrl+K Ctrl+F)

代码缩进

真个文档进行缩进调节,使用Cmd+Shift+P打开命令面板,输入缩进,然后选择相应的命令

选中代码缩进调节:Cmd+] Cmd+[ 分别是减小和增加缩进(win 下不知道,自行百度)

三、一些小技巧

调整字符的大小写,选中,然后在命令面板输入转化为大写或者转化为小写

vscode-5.gif

合并代码行,多行代码合并为一行,Cmd+J(win下未绑定)

vscode-6.gif

行排序,将代码行按照字母顺序进行排序,无快捷键,调出命令面板,输入按升序排序或者按降序排序

vscode-7.gif

四、多光标特性

使用鼠标:

按住Option(win Alt),然后用鼠标点,鼠标点在哪里哪里就会出现一个光标

注意:有的mac电脑上是按住Cmd,然后用鼠标点才可以

vscode-8.gif

快捷命令

Cmd+D (win Ctrl+D) 第一次按下时,它会选中光标附近的单词;第二次按下时,它会找到这个单词第二次出现的位置,创建一个新的光标,并且选中它。(注:cmd-k cmd-d 跳过当前的选择)

vscode-9.gif

Option+Shift+i (win Alt+Shift+i) 首先你要选中多行代码,然后按Option+Shift+i,这样做的结果是:每一行后面都会多出来一个光标

vscode-10.gif

撤销多光标

使用Esc 撤销多光标

鼠标点一下撤销

五、快速跳转(文件、行、符号)

快速打开文件

Cmd+P (win Ctrl+P)输入你要打开的文件名,回车打开

vscode-11.gif

这里有个小技巧,选中你要打开的文件后,按Cmd+Enter,就会在一个新的编辑器窗口打开(窗口管理,见下文)

vscode-12.gif

在tab不同的文件间切换,cmd+shift+[]

行跳转

加入浏览器报了个错,错误在53行,如何快速跳转到53行

Ctrl+g 输入行号

vscode-13.gif

如果你想跳转到某个文件的某一行,你只需要先按下 “Cmd + P”,输入文件名,然后在这之后加上 “:”和指定行号即可。

vscode-14.gif

符号跳转

符号可以是文件名、函数名,可以是css的类名

Cmd+Shift+O(win Ctrl+Shift+o) 输入你要跳转的符号,回车进行跳转

win下输入Ctrl+T,可以在不同文件的符号间进行搜索跳转

vscode-15.gif

定义(definition)和实现(implementation)处

f12跳到函数的定义处

Cmd+f12(win Ctrl+f12)跳转到函数的实现处

vscode-16.gif

引用跳转

很多时候,除了要知道一个函数或者类的定义和实现以外,你可能还希望知道它们被谁引用了,以及在哪里被引用了。这时你只需要将光标移动到函数或者类上面,然后按下 Shift + F12,VS Code 就会打开一个引用列表和一个内嵌的编辑器。在这个引用列表里,你选中某个引用,VS Code 就会把这个引用附近的代码展示在这个内嵌的编辑器里。

vscode-17.gif

六、代码重构

当我们想修改一个函数或者变量的名字时候,我们只需把光标放到函数或者变量名上,然后按下 F2,这样这个函数或者变量出现的地方就都会被修改。

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

以上是vscode小白快速入门教程(最全)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
vscode如何运行js代码vscode如何运行js代码Apr 16, 2025 am 07:33 AM

如何在 VSCode 中运行 JS 代码?创建.js文件并编写代码;安装 Node.js 和 npm;安装Debugger for Chrome;打开调试控制台;选择Chrome;添加调试配置;设置调试脚本;运行代码;调试代码(可选)。

vscode如何自动排版vscode如何自动排版Apr 16, 2025 am 07:30 AM

通过使用快捷键或配置设置,可以在 Visual Studio Code 中实现代码自动排版:快捷键排版:Windows/Linux:Ctrl K, Ctrl F;macOS:Cmd K, Cmd F配置设置排版:搜索并启用“editor.formatOnType”,每次键入字符时自动排版当前行高级排版选项:自定义排版规则(例如,缩进大小、行长),并选择所需的排版器(例如,Prettier、ESLint)

vscode的注释如何改颜色vscode的注释如何改颜色Apr 16, 2025 am 07:27 AM

可以通过更改VSCode中的“注释颜色”设置来更改注释的颜色,具体步骤如下:打开“设置”窗口。搜索“注释颜色”设置。双击“注释颜色”设置或选择“编辑值”。选择您想要的颜色。单击“确定”保存更改。

vscode如何设置编码格式vscode如何设置编码格式Apr 16, 2025 am 07:24 AM

可在 Visual Studio Code 中配置编码格式,具体步骤如下:点击“文件”菜单。转到“首选项”。导航到“设置”。搜索“编码”。配置“文件编码”。选择编码格式。保存设置。验证设置以确保已正确设置编码格式。

vscode如何编译运行代码vscode如何编译运行代码Apr 16, 2025 am 07:21 AM

在 Visual Studio Code (VSCode) 中编译和运行代码需要以下步骤:安装编译器和运行时(如 Python 解释器);在 VSCode 创建项目,选择语言模板;编辑代码,确保语法正确;通过内置终端或外部编译器编译代码;通过内置终端或调试器运行代码。

vscode如何调整背景颜色vscode如何调整背景颜色Apr 16, 2025 am 07:18 AM

VSCode 背景颜色可通过以下步骤调整:打开设置面板并搜索“主题”,选择带背景颜色的预定义主题。预览更改,满意后点击“保存”应用。可通过添加“workbench.colorCustomizations”属性并输入十六进制颜色代码,自定义背景颜色。

vscode如何连接svnvscode如何连接svnApr 16, 2025 am 07:15 AM

如何使用 VSCode 连接 SVN?安装 Subversion 和 VSCode 插件。配置 VSCode 设置,指定 Subversion 可执行文件路径和身份验证方法。在 VSCode 资源管理器中右键单击项目文件夹,选择 "SVN > 检出..."。输入存储库 URL,并根据需要输入凭据。单击 "检出" 以将项目从存储库检出到计算机。

vscode如何设置全局搜索vscode如何设置全局搜索Apr 16, 2025 am 07:12 AM

在 Visual Studio Code 中设置全局搜索:打开“设置”并搜索“全局搜索”。配置设置,包括包含/排除文件夹、文件排除模式、结果限制和最大文件大小。按 Ctrl Shift F(Windows/Linux)或 Cmd Shift F(macOS)进行全局搜索。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

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

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。