文章目录
- 一、vscode 简介
- 二、vscode 下载
- 三、VSCode 中文简体安装包插件安装
- 3.1 简体中文
- 四、VSCode主题风格以及文件图标插件安装
- 4.1 主题风格
- 4.2 文件图标
- 五、VSCode编辑器直接打开默认浏览与Live Server开启本地服务器
- 5.1 打开默认浏览
- 5.2 开启本地服务器
- 六、VSCode自动修改标签对名称插件安装
- 6.1 Auto Rename Tag
- 6.2 carbon-now-sh
- 七、代码格式化规范化插件，让代码变得更加美观
- 7.1 prettier代码化
- 八、VSCode相关设置
- 8.1 字体设置
- 九、VSCode的Emmet语法与详解
一、vscode 简介
- Visual Studio Code 简称 VSCode，来自微软公司。
- 优点：内置功能非常丰富，插件全且安装简单、轻量、有MAC版本。
二、vscode 下载
- 官方网站：https://code.visualstudio.com/ 下载最新版本的VS Code
三、VSCode 中文简体安装包插件安装
3.1 简体中文
Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code
四、VSCode主题风格以及文件图标插件安装
4.1 主题风格
管理->颜色主题
选择颜色主题（按上下箭头键预览）
4.2 文件图标
管理->文件图标主题选择文件图标主题（按向上/向下键预览）
五、VSCode编辑器直接打开默认浏览与Live Server开启本地服务器
5.1 打开默认浏览
- 安装
open in browser 右键
5.2 开启本地服务器
- 安装
Live Server 右键
六、VSCode自动修改标签对名称插件安装
6.1 Auto Rename Tag
- 插件名称：Auto Rename Tag
- 作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改
6.2 carbon-now-sh
- 插件名称：carbon-now-sh
- 作用：在实际开发中遇到技术问题或者做部分代码片段分享，可以使用该插件将代码生成一张图片
- 使用方法：
- 在VSCode中，选中需要生成图片的代码
- 打开命令托盘：Windows : Ctrl + Shift + p，Mac : cmd + Shift + p
- 输入 Carbon，回车
七、代码格式化规范化插件，让代码变得更加美观
7.1 prettier代码化
- 插件名称：prettier
- 作用：代码化美化代码
- Ctrl + s 保存会自动格式化
八、VSCode相关设置
8.1 字体设置
- 管理 -> 设置
- 字体大小：20
- 字体系列：JetBrains Mono
注：
在 VSCode 中 “控制字体系列” 添加字体名称（优先级：从左到右）
同时还要在对应的电脑操作系统中安装字体才能生效
- 在 VSCode 中推荐使用
JetBrains Mono编程专用字体 - JetBrains 公司最新出了一个字体 JetBrains Mono，据称是
专为改善看代码体验而生
<1> 下载字体
JetBrains Mono 官方下载地址：https://www.jetbrains.com/lp/mono/
点击 Download font 下载
九、VSCode的Emmet语法与详解
- Emmet语法参考：https://docs.emmet.io/cheat-sheet/
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
