VScode的安装和配置

最新推荐文章于 2024-05-17 17:17:32 发布

尽是他乡之

最新推荐文章于 2024-05-17 17:17:32 发布

阅读量393

点赞数

文章标签： vscode ide 编辑器

本文链接：https://blog.csdn.net/weixin_51540282/article/details/127359449

版权

VScode的安装和配置

1. 下载和安装

下载地址：Download Visual Studio Code - Mac, Linux, Windows

在这里插入图片描述

2. 安装插件

Chinese (中文简体插件)
设置>颜色主题（可以自己定义想要的主题）
设置>文件图标主题>安装其他主题

Material Icon Theme（插件，为文件图标）
Auto Rename Tag (标签自动修改，保持头标签和结束标签一样)
carbon-now-sh (将代码生成一张图片)

CTRL + shift +P 调出命令托盘

输入 Carbon ，回车
Prettier - Code formatter (格式化代码)

设置>搜索save>勾选

在这里插入图片描述

使用：在文件里面右键，使用格式化文档，选中Prettier - Code formatter

JetBrainsMono字体下载

JetBrains Mono: A free and open source typeface for developers | JetBrains: Developer Tools for Professionals and Teams

下载之后安装字体：

解压>打开ttf文件夹>全选右击>安装

配置字体

设置>常用设置

在这里插入图片描述

光标丝滑

设置>文本编辑器>控制是否启用平滑插入动画
搜索滚动

用滚轮控制字体大小

3. 快捷键

注释：ctrl+/

移动行：alt + up/down

控制台：ctrl + ~

多行编辑：ctrl + alt + up/down

4. Emmet语法

1带有层级结构的：ul>li
2 
3     <ul>
4         <li></li>
5     </ul>

1 代码在同级的：ul+li
2 
3     <ul></ul>
4     <li></li>

1 在上级的：ul>li^bq(这个可以多个^一起写)
2 
3     <ul>
4         <li></li>
5     </ul>
6     <blockquote></blockquote>

1 乘号批量复制：ul>li*3
2     
3     <ul>
4         <li></li>
5         <li></li>
6         <li></li>
7     </ul>

1 创建带有指定class样式的标签：div.box
2 
3     <div class="box"></div>

1 创建带有指定id样式的标签：div#box
2 
3     <div id="box"></div>

 1 自定义属性内容：ul>li>a[href='#']
 2 
 3     <ul>
 4         <li>
 5             <a href="#"></a>
 6         </li>
 7     </ul>

1 文本内容填充：a{首页}
2     
3     <a href="">首页</a>

 1 $符号自增
 2 
 3     ul>li.$*3
 4     <ul>
 5         <li class="1"></li>
 6         <li class="2"></li>
 7         <li class="3"></li>
 8     </ul>
 9     
10     ul>li{第$$条项目}*3
11     <ul>
12         <li>第01条项目</li>
13         <li>第02条项目</li>
14         <li>第03条项目</li>
15     </ul>