安装 Visual Studio Code 及其插件用于前端开发

安装 Visual Studio Code

Visual Studio Code(下文统一称为 VS Code)是一款轻量级、免费的代码编辑器,能够在 macOS、Linux 和 Windows 系统上运行,需要自行在 VS Code 的官网https://code.visualstudio.com/下载符合自己系统的 VS Code。VS Code 是具有丰富特性的编辑器,其特性包括支持数百种语言,内置支持 git 及许多其它源码管理服务商,不离开编辑器的情况下对代码进行调试,运行自动化测试并查看测试覆盖率已验证代码,使用容器、远程机器或 WSL 作为开发环境。除此之外,VS Code 还具有顶级的扩展,启用更多语言、主题、调试器、命令等功能。

在下载 VS Code 之后,对代码编辑器 VS Code 进行安装,具体的操作如下所示。

  1. 安装 VS Code,首先找到 VS Code 文件的下载路径,本文的 VS Code 软件包存放在目录H:\solftware\exe备份文件下,软件版本为VSCodeUserSetup-x64-1.96.2.exe

  2. 双击文件VSCodeUserSetup-x64-1.96.2.exe,弹出如下界面,选择"我同意此协议(A)",然后点击下一步,具体操作步骤如下所示。

  3. 然后勾选下图所示的三个选项,接着点击下一步。具体操作步骤如下所示。

  4. 点击"安装"按钮,对代码编辑器 VS Code 进行安装。具体操作步骤如下所示。

    至此,代码编辑器 VS Code 安装完成。

  5. 本文主要使用 VS Code 代码编辑器编写前端代码,在安装完成代码编辑器 VS Code 之后,需要安装如下所示的插件,以下插件用于后台管理系统的前端开发,具体操作如下所示。

    • Vue Language features(Volar),在搜索框内输入你要安装的扩展插件,找到对应的插件并点击"确定"按钮安装产检,安装成功后一定要启用插件,才能生效。具体操作如下所示。

    • 安装简体中文插件:Chinese (Simplified) (简体中文) Language Pack f,按照插件安装示例操作安装插件并启用,插件控制台显示如下所示的图标。

    • vue-helper,按照插件安装示例操作安装插件并启用,插件控制台显示如下所示的图标。

    • Vetur,按照插件安装示例操作安装插件并启用,插件控制台显示如下所示的图标。

    • Live-Server,按照插件安装示例操作安装插件并启用,插件控制台显示如下所示的图标。

至此,VS Code 的下载安装及插件的安装就完成了。

相关推荐
猪在黑魔纹里7 小时前
解决VSCode无法高亮、解析numpy中的部分接口(如pi、deg2rad)
ide·vscode·python·numpy
辣椒酱.7 小时前
vscode报错------控制台
vscode·编辑器
让梦想疯狂8 小时前
Visual Studio 自动格式化代码
ide·visual studio
code bean8 小时前
【CMake 】[第九篇] 解决 CMake + Visual Studio 中文乱码问题完整指南
ide·visual studio
AllinGold8 小时前
反重力Antigravity配置
ide
欢喜躲在眉梢里9 小时前
基于 openFuyao 社区的无硬件 UB 开发实战指南
运维·数据库·人工智能·vscode·ai·开发工具·go开发
自己的九又四分之三站台9 小时前
Manium:现代化的数学动画创作引擎(Manim 的可视化编辑器方向项目)
编辑器
粤M温同学10 小时前
VsCode快速打出console.log()方法设置
vscode·编辑器
阿关@10 小时前
Vscode中Python无法将pip/pytest”项识别为 cmdlet、函数、脚本文件或可运行程序的名称
vscode·python·pip
忘带键盘了11 小时前
eclipse配置
java·ide·eclipse