VSCode的下载安装前期准备

今天弄了台新电脑，顺便装了个VSCode，随手记录一下安装和使用过程。

一、下载VSCode

官网下载地址：

code.visualstudio.comhttps://link.juejin.cn/?target=https%3A%2F%2Fcode.visualstudio.com%2F

根据电脑配置下载自己适合自己电脑的安装包。

点击下载就在后台下载了，比较方便。

二、安装

（1）双击下载的安装程序，进入交互式安装界面。

（2）基本上一直下一步。选择安装路径，最好不要默认路径放在C盘，可以放在D盘或者其他盘，如D:\Program Files (x86)，当然也可以默认路径直接安装。

3、安装完成后，桌面会有一个VSCode图标

双击打开，就可以进入VSCode了。刚安装打开，它是下面这样的。

三、安装插件

（1）设置中文环境，安装中文字体包

点击install，就下载好了（联网情况下），后面要下载中文字体包可以在这里卸载。安装完后需要重启后生效。

如果遇到安装后打开还是英文的。可以按照以下配置修改语言设置。

快捷键

Ctrl+Shift+P

或者

F1

打开全局命令面板，找到Configure Display Language。

选择简体中文。然后重启。

（2）安装运行代码的插件，在浏览器中打开。插件库搜索open in browser。安装。

点击进入到选择语言，选择中文

（3）安装 Live Server。当你右键点击 HTML 文件并选择 “

Open with Live Server

” 时，它会启动一个本地服务器并在默认浏览器中打开该 HTML 文件。每次保存文件时，它都会自动刷新页面，使你能够立即查看更改的效果。插件库搜索Live Server。

（4）安装完上面几个插件，基本上就可以了。当然还有很多很多方便我们写代码的插件，我也跟着去下载了几个哈哈。

change-case

包括驼峰命名（camelCase）、下划线命名（snake_case）、标题命名（TitleCase）等多种格式。

CSS Peek

直接从HTML文档中快速跳转到匹配的CSS样式定义，并提供预览功能，从而大大提高CSS样式的查找和编辑效率

代码美化

Highlight Matching Tag

用于实时高亮显示匹配的标签对，方便用户在 HTML 或 XML 代码中快速找到配对的标签。它可以在点击一个标签时，自动显示配对的标签，并通过下划线或其他样式来指示它们之间的对应关系。

Better Align

用于代码的上下对齐

插件有很多，可以方便我们代码的编写，当然，良好的编码习惯是必不可少的，才是最重要的。

参考：

【开发必备】推荐几个非常好用的前端VsCode插件，快来看看你都用过哪些？_前端开发vscdoe插件推荐-CSDN博客

2024 最新最全 VS Code 插件推荐！_vscode插件-CSDN博客

四、打开文件夹和创建一个html

点击打开文件夹，项目，后面的html，css，js等文件可以在这个文件夹下创建。