最近在开发基于vue技术的前后端分离项目,前端开发需要安装Visual Studio Code开发工具,具体安装过程记录如下:

下载安装软件

首先到官网下载需要的安装软件:VSCode官网地址
进入官网后进入官网页面如下:
VSCode官网直接点击左侧的Download for Windows后会进入下面页面,同时会默认下载User版本
VSCode下载1点击右上角的Download会进入:
VSCode下载2根据需要下载不同的版本即可,在这里有User版本和System版本,两者的区别主要是:User版本只适用于当前用户下使用,如果换着其他用户就无法使用VSCode了,System版本适用于所有用户使用,这里选择了System 64版本的软件下载。
软件下载后是这样的:
VSCode软件
软件下载好后,接下来就是安装了。。。

安装软件

双击软件后直接点击运行进入安装状态
安装步骤一选择我接受协议,直接点击下一步
安装步骤二这么默认安装在C盘,建议安装在其他盘下,点击下一步
安装步骤三直接点击下一步
安装步骤四为了方便找到安装的VSCode软件,这里勾选创建桌面快捷方式,自动将VSCode添加到环境变量,这里默认勾选了添加到PATH,点击下一步
安装步骤五这里不需要修改什么,直接点击安装即可
安装步骤六系统安装中,等系统自动安装完成
安装步骤七到这里VSCode的安装结束,点击完成即可。
桌面图标
安装完成后桌面会多出上面的图标
VSCode桌面运行VSCode后,进入开发界面,开发前段项目还需要安装一些必须的软件和便于开发常用的插件
VSCode安装插件开发中常用的插件有:
Vetur:语法高亮、智能感知、Emmet等,包含格式化功能,Alt+Shift+F(格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需同时按着)
EsLint:语法纠错
Auto Close Tag:自动闭合HTML/XML标签
Auto Rename Tag:自动完成另一侧标签的同步修改
JavaScript(ES6)code snippets:ES6语法智能提示以及快速输入,除了js外还支持.ts/.jsx/.html/.vue,省去了配置其支持各种包含js代码文件的时间
HTML CSS Support:让html标签上写class智能提示当前项目所支持的样式
HTML Snippets:html快速自动补全
Open in browser:浏览器快速打开
Live Server:以内嵌服务器方式打开
Chiness(Simplified)Language Pack for:习惯中文开发的话,可以安装中文插件包

Logo

前往低代码交流专区

更多推荐