vscode使用技巧

内容清单

前言

一、下载安装vscode

二、操作使用技巧

三、好用的vscode插件

四、vscode常用快捷键

五、主题

六、设置

七、辅助工具

前言

vscode是一款非常好用、炫酷的软件，越来越多的人选择它。

对于前端开发人员来说，vscode可以作为主力开发工具，这款软件就是为前端同学量身定做的，”开盖即食“。

对于其他语言方向的开发人员，可以将其作为代码编辑器来使用，纵享丝滑。

对于只是写文档写作的同学，vscode也可以作为markdown写作工具。

如果你不属于上面的任何一种，你也可以把vscode当作文本编辑器来使用。

总的来说vscode是一款嘎嘎牛的软件，传说中的六边形战士！

下面我将分享一些vscode的使用技巧

一、下载安装vscode

windows系统看这篇

VSCode下载安装（保姆级--一步到胃）-CSDN博客

mac系统看这篇

【开发环境】Mac 安装 Visual Studio Code ① ( VSCode 简介 | 下载

二、操作使用技巧

1、快速生成html框架

在新建好的html文件中输入 感叹号！，按下enter键即可自动生成框架

或者输入html：5，按下tab键，即可生成html框架

框架如下

2、并排编辑

当我们出现要同时修改html文件和css文件或者其他文件等多个文件同时修改的情况，我们可以用并排编辑使多个文件同时显示，方便我们修改。

如图所示，选择想要的布局之后，将左侧资源管理器的文件拖到想要的位置就可以实现啦！拖动各区域之间的边界线还可以调整各分区的大小。

成功之后是这样

3、鼠标操作

• 在当前行的位置，鼠标三击，可以选中当前行或者当前标签所有内容

• 用鼠标单击文件的行号，可以选中当前行

• 在某个行号的位置点击，上下拖动鼠标，可以选中多行

4、Emmet语法

Emmet是一个Web开发工具，用于加快HTML和CSS代码的编写速度。使用Emmet能够通过简短的表达式生成HTML或CSS代码片段。另外，截至2022年，主流的编辑器工具如Visual Studio Code、WebStorm都已经集成了Emmet工具，无需手动安装即可使用。

这里我搜罗到了一篇简单明了的博客，连接放在下面了

Emmet语法总结-CSDN博客

三、好用的vscode插件

vscode安装完成后，根据具体需求，可以安装一些插件来使你的开发进行的更加顺利

Auto Rename Tagmmet

自动重命名成对的HTML标记，修改开始标签，结束标签会同步修改。

ESLint

用于 JavaScript/TypeScript 代码的语法检查和格式化。

Live Server

为 HTML、CSS 和 JavaScript 提供实时预览和自动刷新，在浏览器中实时预览静态网页的插件。

image preview

预览代码中图片的作用，鼠标移上去就会有小窗展示图片。

Code Spell Checker

检查代码中单词拼写是否正确，当单词不正常的时候，就会在下方出现波浪线进行提示，还可以自定义词典，忽略某个单词的检查等。

会了吧

打开源码可以自动分析所有包含的英语单词，并显示解释结果，先学单词再看代码

四、vscode常用快捷键

vscode用的熟练与否，首先就是看你是否会使用快捷键，以下表格列出的是一些常用的快捷键！

Mac快捷键

Win快捷键

作用

Cmd+Shift+P

Ctrl+Shift+P，F1

显示命令面板

Cmd+B

Ctrl+B

显示/隐藏侧边栏

Cmd+1、2

Ctrl+1、2

聚焦到第1、第2个编辑器

Cmd++、Cmd+-

Ctrl++、Ctrl+-

将工作区放大/缩小（包括代码字体、左侧导航栏）

Cmd+Shift+N

Ctrl+Shift+N

重新开一个软件的窗口

Cmd+\

Ctrl+\

拆分多个编辑器

Cmd+`

无

在同一个软件的多个工作区之间切换

Cmd+Option+左右方向键

Ctrl+Pagedown/Pageup

在已经打开的多个文件之间进行切换

方向键

方向键

在单个字符之间移动光标

Option+左右方向键

Ctrl+左右方向键

在单词之间移动光标

Option+Alt+左右方向键

Alt+Shift+左右方向键

左右扩大/缩小选中的范围

Cmd+Enter

Ctrl+Enter

在当前行的下方新增一行，然后跳至改行，即使光标不在行位，也能快速向下插入一行

Cmd+Shift+Enter

Ctrl+Shift+Enter

在当前行的上方新增一行，然后跳至改行，即使光标不在行位，也能快速向下插入一行

Option+↑

Alt+↑

将代码向上移动

Option+↓

Alt+↓

将代码向下移动

Option+Shift+↑

Alt+Shift+↑

将代码向上复制一行

Option+Shift+↓

Alt+Shift+↓

将代码向下复制一行

Option+Backspace

Ctrl+Backspace

删除光标之前的一个单词

Cmd+Shift+K

Ctrl+Shift+K

删除整行

Cmd+Backspace

删除光标之前的整行内容

Option+鼠标连续点击任意位置

Alt+鼠标连续点击任意位置

在任意位置，同时出现多个光标

Cmd+D

Ctrl+D

将光标放在某个单词的位置，或者先选中某个单词，然后反复按下Cmd+D键，即可将下一个相同的词逐一加入选择

Cmd+Shift+L

Ctrl+Shift+L

将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标

Option+Shift+I

Alt+Shift+I

选中一堆文本后，按下快捷键，即可在每一行的末尾都出现一个光标

Cmd+Option+上下键

Ctrl+Alt+上下键

在连续的多列上，同时出现多个光标

Option+Shift+鼠标拖动

Alt+Shift+鼠标拖动

按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标

Cmd+/

Ctrl+/

添加单行注释

Option+Shift+F

Alt+Shift+F

代码格式化

F2

F2

以重构的方式进行重姓名

Cmd+Shift+F

Ctrl+Shift+F

全局搜索代码

Cmd+G

F3

在当前文件中搜索代码，光标仍停留在编辑器里

ctrl+shift+鼠标竖直拖动

如果行数相同，可以实现把内容分行填入，如果内容只有一行，则多行复制填入

上面提到的是比较重要的一些快捷键，除了以上快捷键之外，vscode内还可以自定义快捷键

在设置中搜索键盘快捷方式，就可以查看和修改所有的快捷键表了。

五、主题

下面这篇博客收录了19个vscode主题，可供参考。

2024年最受欢迎的 19 个 VS Code 主题排行榜_vscode主题推荐-CSDN博客

六、设置

1、中文模式

翻译成中文更方便我们使用vscode

具体操作：

ctrl+shift+p打开命令窗口找到Configure Display Language点击，找到中文。

2、VScode自动格式化

不仅可以通过下载插件来实现自动格式化，vscode自带格式化选项。

具体操作：

在设置里搜索格式化，勾选该选项

3、自动保存

该设置可以实现代码有变化时自动保存，非常的方便。

具体操作：

搜索栏搜索：Auto Save

然后选择afterDelay

再选择设置100毫秒自动保存

ps：1000毫秒=1秒 100毫秒=0.1秒 。设置为0.1秒，差不多相当于敲完就可以“实时”保存了，也可根据自己的需要酌情修改。

4、自动换行

有时代码很长，长度超过了窗口大小，非常不方便查看，设置自动换行就可以自动识别代码是否超过了窗口长度，超过就自动换行。

具体操作：

打开设置窗口

输入Word Warp就会出现和字符数量有关的限制,

将Editor:Word Wrap”一项设置为on就可以自动换行了

5、字体大小设置

具体操作：

设置里面，找到字体，在font-size里设置字体大小

七、辅助工具

Fitten Code是一款强大的人工智能编程助手，可以极大地简化编码过程，提高开发效率。它的智能补全能力和上下文感知能力，使得开发者能够更快地编写代码，避免了重复性劳动。工具只是辅助作用，他仍然具有局限性，大家要理性判断，不要过度依赖。