VSCode软件基本操作

最新推荐文章于 2025-06-30 14:05:15 发布

消失的上古文明

最新推荐文章于 2025-06-30 14:05:15 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： VSCODE 文章标签： VSCode 相关使用代码提示快速入门

本文链接：https://blog.youkuaiyun.com/qq_36353470/article/details/100124162

VSCODE 专栏收录该内容

1 篇文章

订阅专栏

VSCode使用教程

第十二节VSCode使用Element 4

第十三节使用VSCode开发HTML.. 4

第十四节使用VSCode开发CSS. 4

第十五节使用VSCode开发javascript 4

第十六节使用VSCode开发Java项目... 5

第十七节使用VSCode开发Node.js. 5

第十八节使用VSCode开发VUE.js. 5

第一节VS Code简介

vscode是微软公司开发的一款免费的、开源的、轻量级的、功能强大的、跨平台的代码编辅器。网址是：https://code.visualstudio.com/

vscode介绍视频：http://codingdict.com/video/1725

vscode下载安装：

vscode是一个跨平台的软件，根据你使用的平台下载相应的安装包即可，下载地址是：https://code.visualstudio.com/

第二节快捷键

Ctrl+B:编辑区域扩大

Ctrl+Shift+P:打开命令面板

Ctrl+,:打开设置

Ctrl+`;打开终端

Ctrl+P:文件导航

Shift+Alt+F:格式化代码

Alt+Shift+UP/DOWN:复制当前行代码到下一行或上一行

Ctrl+Shift+K:删除行

Alt+Up/Down:当前代码行上移或者是下移

第三节VSCode主题

VS Code主题

颜色主题，您可以修改VS Code的用户界面中的颜色，以满足您的偏好和工作环境。

选择颜色主题

1、菜单File>Preferences>Color Theme.（Code>Preferences>Color Theme on macos）.

2、快捷键 Ctrl+K，Ctrl+T

3、通过上下键预览。

4、回车确认使用主题。

从扩展市场下载主题

打开扩展视图，输入theme搜索颜色主题，进行安装。

还可以自定义主题打开settings.json配置文件，找到workbench.colorCustomizations 和editor.tokencolorCustomizations进行自定义。

第四节用户和工作区设置

VS Code为设置提供了两种不同的范围：

1、用户设置-全局应用于您打开的任何VS代码实例的设置。

2、工作区设置-存储在工作区内的设置，仅在打开工作区时应用。

打开设置

1、File>Preferences>Settings（On macOS-code>Preferences>settings）

2、快捷键：ctrl+，或者ctr1+shift+p，输入：open Settings

如何设置

1、可视化设置

2、打开json格式文件进行设置

注意：系统默认设置不能修改，只能在用户设置和工作区设置中进行修改。

第五节快捷键映射

如何你当前正在使用Eclipse、Vim、Sublime或者Atom等编辑器，你已经熟悉了这些编辑器的快捷键的使用，你想切换到VS Code还使用这些快捷键，这是有办法解决的，VS Code提供了快捷键映射。

打开快捷键映射

1、使用菜单：File>Preferences>Keymaps.（在MacOS上code>Preferences>Keymaps）

2、使用快捷键：Ctr1+KCtrl+M

3、安装快捷键映射扩展。

快捷键参考

菜单栏：Help>Keyboard Shortcut Reference检测快捷键冲突

打开快捷键：File>Preferences>Keyboard shortcuts 右键单击，选择显示相同的绑定

第六节VSCode基本代码编辑

快捷键

最常用快捷键列表如下：

快捷键意义

ctrl+shift+p打开命令面板

ctrl+b显示隐藏侧边栏

ctrL+p浏览文件

ctrl+shift+f查找

ctrl+N关闭文件

ctrl+/注释

shift+alt+a块注释

Shift+Alt+F格式化文档

Ctrl+K，Ctr1+F格式化选中

Ctr1+Shift+k删除行

选择多行

插入多个光标：

ctrl+click 或者ctrl+alt+Upor Doun

ctr1+d 选择相同的word

自动保存

File-Auto Save

退出VS Code

File-Exit 或者点击关闭窗口

第七节VSCode扩展

使用VS Code扩展

·浏览扩展

·安装扩展

·扩展详细

·过滤扩展

·排序扩展

·搜索扩展

·管理扩展（安装、卸载、启用、禁用）

·扩展分类（输入@category）

·更新扩展

第八节VSCode代码补全

JS代码补全：

forin:

for (const key in object) {

if (object.hasOwnProperty(key)) {

const element = object[key];

}

HTML代码补全：

table>tr*3>td*3:

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tablle>

第九节VSCode代码导航

快速文件导航

VS Code可以快速在文件之间进行导航

ctrl+p快速打开文件。

如果你在编辑器中同时打开了多个文件，可以同时按ctrl+tab进行导航.

跳转到文件定义处

F12可以跳转到文件定义的地方。也可以ctrl+alt+click。

ctr1+鼠标经过可以显示帮助信息。

ctrl+shift+o 跳转到Symbol（方法或者变量），如果文件很大，方法很多可以使用它。

Peek

Peek可以嵌入在当前页面进行浏览，这样很方便，可以右键单击选择Peek，或者快捷键 Shift+F12括号匹配

如果一个方法内容很多，并且有多个方法，想要匹配一下方法的括号，使用使用快捷键：ctrl+shift+\

第九节VSCode代码重构

第十节VSCode代码调试

第十一节VSCode继承终端

第十二节VSCode使用Emet

<!DOCTYPE html>

<head>

<title>Emmet的使用</title>

</head>

<body>

<h1>Emmet使用类似于CSS选择器的语法来描述元素在生成的树和元素中属性的位置。</h1>

<h2>可以使用元素的名字，如div或p以生成HTML标签。Emmet没有预定的可用标签。可以在编写任何单词并将其转换为标签</h2>

<h3>嵌套运算符</h3>

<li>子元素运算符></li>

<li>乘法运算符*</li>

<li>分组运算符</li>

</ul>

<h3>案例1--子元素运算符(div>ul>li)</h3>

</ul>

<h3>向上元素>(div+div>p>span+em^a:其中一个^代表向上移动一集以此类推)</h3>

<div>

<p>

</p>

</div>

<h3>乘法*运算符，可以定义元素输出的次数ul*3</h3>

<ul>乘法运算符</ul>

<h3>分组运算符();Emmets的超级用户使用括号内容对复杂缩写中的子树进行分组：div>(div>div>p)+span)</h3>

<div>

<div><a href="#">分组运算符</a></div>

</div>

<span>分组运算符</span>

</div>

<hr>

<h3>属性运算符</h3>

<h4>属性运算符用于修改输出元素的属性。例如，在HTML和XML中可以快速的为class和id生成对应的属性</h4>

<h5>div#div1+div#div2>p.container+a.name</h5>

<div id="div1">属性运算符</div>

<p class="container">属性运算符</p>

<a href="#" class="name">属性运算符</a>

</div2>

</body>

</html>

第十三节使用VSCode开发HTML

智能跟踪

基于Emmet插件

设置settings.json

//Configures if the built-in HTML language suggests Angular V1 tags and properties.

"html.suggest.angular1"：true，

//Configures if the built-in HTML language suggests Ionic tags，properties and values.

"html.suggest.ionic"：true，

//Configures if the built-in HTML language suggests HTML5 tags，properties and values.

"html.suggest.htm15"：true

颜色选择

安装Color Picker扩展

验证

设置settings.json

//configures if the built-in HTML language support validates embedded scripts.

"html.validate.scripts"：true，

// Configures if the built-in HTML language support validates embedded styles.

"html.validate.styles"：true

实时预览

安装Live Server扩展

常用扩展

·HTML Snippets

·HTML CSS Support

·IntelliSense for CSS class names in HTML

·HTMLHint