VS Code的下载安装，及其简单使用

ゝ一世哀愁。 2024-04-20 14:27 88阅读 0赞

**目录**

前言

一.下载

二.安装

三.VS Code的插件安装

?插件正常安装

?插件安装异常

四.VS Code的配置

五.VS Code的基本使用

总结

--------------------

> ?个人主页：[tq02的博客\_CSDN博客-C语言,Java领域博主][tq02_CSDN_-C_Java]  
> ? 本文由 tq02 原创，首发于 CSDN?  
> ? 本章讲解内容：vsCode的下载及其基本使用
> 
> ?欢迎各位→**点赞**? + **收藏**⭐ + **评论**?+**关注**✨
> 
> ![4425333663f14fee98ad4984b670f862.png][]
> 
> --------------------
> 
> 往期专栏：?[JavaSE ][JavaSE] ? [C语言][C]

## 前言 ##

> 俗话说的好，工欲善其事必先利其器，所以在前端语言当中，我们需要使用VS Code。
> 
> Visual Studio Code(简称：VS Code)是Microsoft于2015年4月发布的一款代码编辑器。
> 
> ✨本博客主要教会新手们如何安装VS Code 以及 前端插件的安装✨

## 一.下载 ##

**点击官方网站：[https://code.visualstudio.com/][https_code.visualstudio.com]** 选择对应的版本，进行下载

![dd9103355f77481a8a9c0d4a587b87e3.png][]

## 二.安装 ##

**第一步，双击下载好的VS Code安装包。**

![41416470425342cb9a7037b16553e4cb.png][]

**第二步，选择 同意此协议**

![2e0ec3ceb4d747eeb67edb3b46746bb9.png][]

**第三步，选择安装目录**

![50b168bbe7304703bec8b7302f320b86.png][]

**第四步，创建快捷方式**

![1ca51fae61134646bc2d3843a1ecfde8.png][]

**第五步，选择附加任务**

![0e4ce94534864b3fb113ce985f9d38c4.png][]

**第六步，点击安装**

![c7fd3553a0bb465db18254c76a606915.png][]

到此，我们稍微等待一会，便安装成功了，在桌面上就会显示出VS Code的快捷方式了。

## 三.VS Code的插件安装 ##

VS Code提供了很多丰富的插件功能，可以根据你的需求，安装对应的插件从而提高开发效率

而博主是为了前端开发，而下载的 VS Code。因此以 前端常用插件 为例

<table style="width:700px;"> 
 <tbody> 
  <tr> 
   <td style="width:236px;">插件名称</td> 
   <td style="width:263px;">&nbsp; &nbsp; &nbsp; &nbsp; 解析</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Chinese (Simplified) LanguagePack&nbsp; &nbsp;</td> 
   <td style="width:263px;">VS Code的中文简体语言包，将VS Code的内容变成中文</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Code Spell Checker&nbsp; &nbsp;</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拼写检测器，当你拼写错误时，会自动提醒你</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">HTML Css Support</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;拼写样式表时，会自动补全功能</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">JavaScript (ES6) code snippets</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;支持ES6语法提示</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Mithril Emmet</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代码快速编写工具</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Path Intellisense</td> 
   <td style="width:263px;">&nbsp; &nbsp; &nbsp; &nbsp; 路径自动补全</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Vue 3 Snippets</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代码格式化和代码提示</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">VueHelper</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代码提示</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Auto Close Tag</td> 
   <td style="width:263px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;自动闭合</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Auto Rename Tag</td> 
   <td style="width:263px;">&nbsp; &nbsp; &nbsp; &nbsp;自动命名</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Beautify</td> 
   <td style="width:263px;">格式化代码，可美化JS、JSON、CSS、Sass、HTML</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Bracket Pair Colorizer</td> 
   <td style="width:263px;">为各种结对的括号提供了颜色高亮</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">open in browser</td> 
   <td style="width:263px;">把编辑的HTML文件等用浏览器打开</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">Vetur</td> 
   <td style="width:263px;">Vue代码高亮显示</td> 
  </tr> 
  <tr> 
   <td style="width:236px;">IntelliJ IDEA Keybindings</td> 
   <td style="width:263px;">在VSCode使用IDEA的快捷键</td> 
  </tr> 
 </tbody> 
</table>

安装方式都是一样的，因此在这，我们讲解2种安装情况

### ?插件正常安装 ###

例：安装Chinese (Simplified) LanguagePack 插件

**第一步**，打开VS Code 选择 **扩展** 输入需要下载的**插件名**

![fd1a46e2d01b49dea273698008ce07ce.png][]

**第二步**，选择安装，并等待安装成功。

![4bd0a03a8fec4fde8d48da8a3c7533c2.png][]

![1fa35cd7b7ed44c287fbb053d6d7e928.png][]

### ?插件安装异常 ###

> 安装异常，是指插件已经弃用，后续不会再进行维护。
> 
> 而被弃用的原因有**2种**：
> 
> 1.  该插件有了更新版本。
> 2.  该插件内置于 VS Code，需要进行设置使用

注：虽然插件已经弃用，但功能还在，只是不会被维护了。因此我们依然可以安装使用。

例如：安装beautify插件 虽然已被弃用，但是依然可以安装使用

![ab9e978983f44ab7b90b78486d90f2d3.png][]

--------------------

## 四.VS Code的配置 ##

VS Code的配置是指 修改字体、背景样式等偏好设置

例如：修改背景颜色

![75a82c26da014253b578edc2eea7d38b.png][]

--------------------

## 五.VS Code的基本使用 ##

> 由于VS Code功能强大，可以使用多个编程语言，所以在这里我们使用HTML前端语言展示

**第一步**：打开VS Code，选择文件夹，可以选择已有的代码文件，也可以选择空白的文件夹 。

![62827cfdc56349cebdc1315bc4f1cc02.png][]

**第二步**：点击新建文件，记住后缀要正确，然后往文件当中输入代码

![fab6e2414a1f42e19135bfad3ccb92fc.png][]

**第三步：**保存代码，编译程序

![d199f8d2716247b2987337cb05d45a6a.png][]

编译结果：

![6cfe0a4862794405b753266fb413a655.png][]

--------------------

## 总结 ##

VS Code十分强大，可以编译众多语言，但是是需要使用插件的。而博主使用VS Code是为了接下来的Javawed中了解前端的知识。

谢谢各位观看，希望对你们有帮助！祝各位财源滚滚，鸿运当头！

\---------懒惰的tq02

[tq02_CSDN_-C_Java]: https://blog.csdn.net/m0_74097410?spm=1010.2135.3001.5343
[4425333663f14fee98ad4984b670f862.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/2b1c728466bd4e489e02fb74a25650c8.png
[JavaSE]: https://blog.csdn.net/m0_74097410/category_12252271.html?spm=1001.2014.3001.5482
[C]: https://blog.csdn.net/m0_74097410/category_12256398.html
[https_code.visualstudio.com]: https://code.visualstudio.com/
[dd9103355f77481a8a9c0d4a587b87e3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/28c4e1281b2f4e559aea77690855d7e3.png
[41416470425342cb9a7037b16553e4cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/f2c0f5844c2142d186505b549860ee87.png
[2e0ec3ceb4d747eeb67edb3b46746bb9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/69626b97eabd4862beb888c1420fe033.png
[50b168bbe7304703bec8b7302f320b86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/96d8f2971a5848f69188ff7020af07ef.png
[1ca51fae61134646bc2d3843a1ecfde8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/ef82c5f7768a4329935bbe079d7dbc6d.png
[0e4ce94534864b3fb113ce985f9d38c4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/745489b333f1408aacc1c37585d97c03.png
[c7fd3553a0bb465db18254c76a606915.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/fe8f5eb34c0443718bd70e7380f918c7.png
[fd1a46e2d01b49dea273698008ce07ce.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/e36d3271e3d8412ba809905f2bc6d14e.png
[4bd0a03a8fec4fde8d48da8a3c7533c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/084d5ae15ccd44f196c58913a0debe1f.png
[1fa35cd7b7ed44c287fbb053d6d7e928.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/a92a71f0050e49d6be39b80b2aa1a863.png
[ab9e978983f44ab7b90b78486d90f2d3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/588a625ea121420ebd41267d52a1b788.png
[75a82c26da014253b578edc2eea7d38b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/9c0c055680cf4008bcc895f7479285eb.png
[62827cfdc56349cebdc1315bc4f1cc02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/d5f57fd1e1d24242a00046bbe047d5e7.png
[fab6e2414a1f42e19135bfad3ccb92fc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/5ac64bcd7bb04b978e391466a90d6e94.png
[d199f8d2716247b2987337cb05d45a6a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/8698d7a6a75a42f5aaaa4d30a6762d13.png
[6cfe0a4862794405b753266fb413a655.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/20/3d239c2a9a694ca39352af3c6e34c448.png