安装VS code

ゞ浴缸里的玫瑰 2024-03-30 10:31 66阅读 0赞

### 五 安装VS Code ###

Visual Studio Code，简称VS Code，是一种简化且高效的代码编辑器，同时支持诸如调试，任务执行和版本管理之类的开发操作。它的目标是提供一种快速的编码编译调试工具。
    
    优势：
    支持多种语言的编写，前后端都可以用
    插件多
    跨平台
    启动速度快
    免费
    ....

#### 1.下载路径 ####

https://code.visualstudio.com/

![在这里插入图片描述][5bda5ba451d24e3282fe0dedb89483ac.png_pic_center]

#### 2.安装步骤 ####

![在这里插入图片描述][f8613d9be73e47a38417f42e2c2911ca.png_pic_center]

![在这里插入图片描述][dd347084f2d4437d8e0d6663ed6f344f.png_pic_center]

![在这里插入图片描述][a29f1fe92f084df4b4576595ae735852.png_pic_center]

**安装后界面如下：**

![在这里插入图片描述][8f5c9f4c6f3a4d078b498a577aa94d5e.png_pic_center]

#### 3.配置 ####

##### 3.1 安装中文简体VSCode插件 #####

![在这里插入图片描述][ab806425f98a45fa8006f0d7834c9cbe.png_pic_center]

![在这里插入图片描述][ed3551829acb400c977ab816393d2ef6.png_pic_center]

![在这里插入图片描述][87f202000f0d49dea8ab9d410a280fa1.png_pic_center]

##### 3.2安装Vetur插件 #####

Vetur支持.vue文件的语法高亮显示，除了支持template模板以外，还支持大多数主流的前端开发脚本和插件，比如Sass和TypeScript

![在这里插入图片描述][9369368e1cd841cd96825fb444e8ad5f.png_pic_center]

安装前：

![在这里插入图片描述][0a8a3b3f298043be9d8e98c7cc9c593d.png_pic_center]

安装后：

![在这里插入图片描述][d0aeb72fe07442de893d1fff00a64615.png_pic_center]

##### 3.3 安装vue vscode snippets #####

vue语法提示，加强vue的便捷写法

![在这里插入图片描述][ff087320c37d437e809e202941509ae5.png_pic_center]

##### 3.4 安装Auto Close Tag #####

自动闭合标签

![在这里插入图片描述][b7712da2f0f1454ba3981942e7c154ff.png_pic_center]

##### 3.5 安装 Bracket Pair Colorizer #####

对括号进行着色，方便区分

![在这里插入图片描述][37d4a640acc4414184381b2cc0a228cc.png_pic_center]

##### 3.6 安装 Copy Relative Path #####

用于复制文件的完整路径和相对路径

![在这里插入图片描述][902437fcad0f43beb093f01599313dc8.png_pic_center]

安装后：

![在这里插入图片描述][aefe846926e943f3bf320f61a50d5046.png_pic_center]

##### 3.7 安装Path Intellisense #####

路径自动感知，在配置文件中配置`@`后我们就可以很方便快捷的引用各种文件了

![在这里插入图片描述][02f6414d55294f629a0b5bcfe5323b16.png_pic_center]

安装后：

![在这里插入图片描述][b25de469912c49a7b48c4200bec63ea0.png_pic_center]

##### 3.8 安装Vue Peek #####

用于Vue快速查看组件定义以及组件跳转

![在这里插入图片描述][7df730840df441fcaf0b2ae1da998433.png_pic_center]

安装后：

![在这里插入图片描述][3de714a8c2544eb3a9429248f27b703b.png_pic_center]

##### 3.9 安装vscode-element-helper #####

针对 Element 标签的属性以及方法进行区分，并且提供自动补全提示。

![在这里插入图片描述][b695984b808d4f989892e556013cc2f9.png_pic_center]

[5bda5ba451d24e3282fe0dedb89483ac.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1cd2d147b9ae47308794c6575f620977.png
[f8613d9be73e47a38417f42e2c2911ca.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c8aca7a1ce224fa3bc0fbd6cf48d0edd.png
[dd347084f2d4437d8e0d6663ed6f344f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/50215541a2d542558cc600f08e5d7d45.png
[a29f1fe92f084df4b4576595ae735852.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47321ab78a4e4972b6d358fda72d6687.png
[8f5c9f4c6f3a4d078b498a577aa94d5e.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c0ecea182902442b99307efea464525f.png
[ab806425f98a45fa8006f0d7834c9cbe.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cf8f175a7e6a411cb3ae54f4bea65a77.png
[ed3551829acb400c977ab816393d2ef6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/cea17ad551024bfba931b5b9d9d5dea4.png
[87f202000f0d49dea8ab9d410a280fa1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/674111f0374349dfbd151c753befe5d2.png
[9369368e1cd841cd96825fb444e8ad5f.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/59a4a0fe9a7d484fbaaa39bd554ed5d0.png
[0a8a3b3f298043be9d8e98c7cc9c593d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6f90c28f988f420c828d9f35c233b71b.png
[d0aeb72fe07442de893d1fff00a64615.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/2ac479b8f91741369b41c9e285aad561.png
[ff087320c37d437e809e202941509ae5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/0cb8e17cce264f998188812e064ae1ca.png
[b7712da2f0f1454ba3981942e7c154ff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/47c8206cc8064ffd9a5f5acd02cfad3e.png
[37d4a640acc4414184381b2cc0a228cc.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/6adcd648ceb94892ae714e9776163e15.png
[902437fcad0f43beb093f01599313dc8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/c322f92b3b4442bbad7aa3543e4bea4f.png
[aefe846926e943f3bf320f61a50d5046.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/fbd84f2c18f94d519d6b94132c646ca5.png
[02f6414d55294f629a0b5bcfe5323b16.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/1a34e06abb9647afb0174a94752179fd.png
[b25de469912c49a7b48c4200bec63ea0.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e271bb5c2a944c5bab62b8100825e4b6.png
[7df730840df441fcaf0b2ae1da998433.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/5e3b87c79cc940d18dadc2dd1a0f4e85.png
[3de714a8c2544eb3a9429248f27b703b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e5bf62ff2295476c96eeb7676cb6fc18.png
[b695984b808d4f989892e556013cc2f9.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/49feb98ef7ec416e96de5204d8c415c9.png