【前端开发工具】VS Code安装和使用

一、前言

本文介绍一下在前端vue项目中，VS Code的安装和配置。

• 什么是VS Code？

  Visual Studio Code（以下简称VS Code）是微软提供的一个轻量且强大的跨平台开源代码编辑器（IDE），支持Windows，OS
  X和Linux。内置JavaScript、TypeScript和Node.js支持，而且拥有丰富的插件生态系统，可通过安装插件来支持
  C++，C＃，Java，Python，PHP，Go等其他语言。

• 官网地址：

  https://code.visualstudio.com/

二、下载

环境要求：windows11、vscode1.90.1

首先，下载VS Code安装包。安装包已分享到百度网盘中，为了避免安装的版本跟本文中介绍的版本不一致，推荐使用百度网盘下载。

百度网盘下载链接：https://pan.baidu.com/s/1Nns0N3pPPBDppVrqdaIelA?pwd=67ut
提取码：67ut

官网下载地址：https://code.visualstudio.com/Download

三、安装

下载并解压缩完成后，点击开始安装。（PS：按照步骤一步一步安装即可）

之后，选择安装路径，点击下一步；

之后，使用默认，点击下一步；

之后，勾选“创建桌面快捷方式”，点击下一步；

之后，点击安装；

之后，显示安装进度条；

之后，点击完成，完成安装；

至此，VS Code安装完成。

四、配置

安装完成后，再安装一些插件；

点击扩展按钮，去应用商店，查找插件并进行安装；

之后，安装如图的插件；

至此，项目需要的插件安装完成了。

五、使用

插件安装后，下面开始使用；

5.1 导入项目

首先，打开文件》打开文件夹，导入工程项目。

导入后，在资源管理器中，可以查看导入的项目代码；

5.2 本地运行项目

项目导入后，开始本地运行项目；
首先，打开终端》新建终端；

之后，输入“npm install” 命令，安装项目的依赖包；

提示错误信息，权限不够。之后，以管理员身份，打开系统命令行窗口；

进入项目目录下，输入“npm install” 命令，安装项目的依赖包；

项目依赖包安装完成后，再返回到VS Code的终端界面，输入"npm run dev"，运行前端工程；

5.3 修改界面文案，验证效果

前端工程本地运行成功后，下面开始进行代码调试。

首先，修改界面文案信息，比如“岗位编码”修改为“岗位编码测试”；

之后，在浏览器中验证查看界面文案是否修改成功；

5.4 添加日志打印

之后，介绍如何在代码中打印输出日志信息。
首先，在需要打印日志的JS代码中添加“console.log()”，输出查询条件日志信息；

之后，在浏览器中，输出查询条件，点击查询；

之后，浏览器开发者工具的控制台，可以查看日志信息；

5.5 代码调试

之后，介绍如何添加断点，调试代码。

首先，在浏览器开发者工具的源代码中，添加断点。之后，当代码执行到断点处，右键选中变量，查看变量值。

5.6 代码提交到Git仓库

之后，介绍代码编写完成后，如何提交到Git代码仓库；
首先，点击源代码管理按钮，查看需要提交的代码文件；确认之后，点击提交；

之后，填写代码提交备注，点击提交；

之后，点击同步更改，把代码同步到Git仓库中；

六、总结

以上介绍了在前端VUE项目中，VS Code的安装和使用。希望对大家有帮助，谢谢关注。

如果您对文章中内容有疑问，欢迎在评论区进行留言，我会尽量抽时间给您回复。如果文章对您有帮助，欢迎点赞、收藏。您的点赞，是对我最大的支持和鼓励，谢谢 :-）