VSCode安装及使用

christinnadong

已于 2024-12-04 05:33:36 修改

阅读量476

点赞数 7

文章标签： vscode ide 编辑器

于 2024-11-29 06:38:08 首次发布

本文链接：https://blog.youkuaiyun.com/christinnadong/article/details/144125455

版权

下载与安装

下载

网址：https://code.visualstudio.com/

安装

1、同意协议

2、选择安装位置

3、直接下一步即可

4、勾选【创建桌面快捷方式】

5、安装

6、安装完成

插件安装

浏览器插件

1、点击Extensions

2、搜索open

3、选择【open in browser】，点击【install】安装

4、配置好后，在编辑页面，单机鼠标右键，弹出菜单中会出现【Open In Default Browser】，在默认浏览器打开选项

汉化插件

1、点击 Extensions

2、搜索 chinese

3、点击 install

配置

文件自动保存

1、【管理】-【设置】

2、【常用设置】-【

使用

创建文件 / 文件夹

1、点击【Explorer】

2、点击【Open Folder】

3、选择一个文件夹作为目录

4、新建文件或新建文件夹

新建文件夹，直接输入文件夹名称即可创建新的文件夹

新建文件，需要输入文件名及后缀

快速生成html骨架

1、英文状态下的 !

2、按Tab键或 Enter键，会自动创建HTML骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

常用快捷键

修改快捷键

快捷键可以通过【设置】-【键盘快捷方式】进行修改

添加删除注释

添加 / 删除注释：Ctrl + /

复制与粘贴

快速复制当前行：Ctrl + C

粘贴：Ctrl + V

多个光标编辑

同时选中下一个相同的内容：Ctrl + D

1、选中想要编辑的内容或光标在内容上

2、Ctrl + D，会在下一个相同内容后面也出现光标

添加多个光标进行编辑：alt + 鼠标点击

1、按住 alt 键

2、在想要添加光标的地方依次点击

3、可以同时对多个地方的文本进行编辑

4、松开 alt 键，在任意地方点击，可以取消多个光标

格式化文档

格式化文档：Shift + Alt + I

1、会将代码格式化对齐

2、如果没有效果

2.1、点击【管理】-【键盘快捷方式】

2.2、搜索：格式化

2.3、点击【更改绑定键】-按下【Alt + Shift + I】即可

自动换行

自动换行 / 取消自动换行：Alt + Z

1、如果在vscode中一行内容无法显示完全的时候，会出现滚动条

2、按下alt + z，无法显示的内容会根据页面大小自动换行

Emmet语法

作用：通过简写语法，快速生成代码

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li{li标签}	<ul><li>li标签</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>