安装 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 的下载安装及插件的安装就完成了。

相关推荐
徐小夕@趣谈前端3 小时前
拒绝重复造轮子?我们偏偏花365天,用Vue3写了款AI协同的Word编辑器
人工智能·编辑器·word
风一样的航哥3 小时前
标题:从卡顿到流畅:深度剖析 Word 2013 与 Word 2021 处理高清图片文档的性能鸿沟
编辑器
冬奇Lab7 小时前
一天一个开源项目(第14篇):CC Workflow Studio - 可视化AI工作流编辑器,让AI自动化更简单
人工智能·开源·编辑器
开源技术7 小时前
Python GeoPandas基础知识:地图、投影和空间连接
开发语言·ide·python
暴走十八步9 小时前
PHP+vscode开启调试debug
开发语言·vscode·php
承渊政道9 小时前
Linux系统学习【Linux基础开发工具】
linux·运维·笔记·学习·centos·编辑器
you-_ling9 小时前
IO编程相关知识
c语言·vscode
学嵌入式的小杨同学18 小时前
【Linux 封神之路】信号编程全解析:从信号基础到 MP3 播放器实战(含核心 API 与避坑指南)
java·linux·c语言·开发语言·vscode·vim·ux
寻梦csdn21 小时前
pycharm+miniconda兼容问题
ide·python·pycharm·conda
徐小夕@趣谈前端1 天前
Web文档的“Office时刻“:jitword共建版2.0发布!让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6