VS Code的下载安装,及其简单使用

简介: VS Code的下载安装,及其简单使用

前言

俗话说的好,工欲善其事必先利其器,所以在前端语言当中,我们需要使用VS Code。

Visual Studio Code(简称:VS Code)是Microsoft于2015年4月发布的一款代码编辑器。

       ✨本博客主要教会新手们如何安装VS Code  以及 前端插件的安装

一.下载

  点击官方网站:https://code.visualstudio.com/   选择对应的版本,进行下载

二.安装

第一步,双击下载好的VS Code安装包。

第二步,选择 同意此协议  

第三步,选择安装目录

第四步,创建快捷方式

第五步,选择附加任务

第六步,点击安装

到此,我们稍微等待一会,便安装成功了,在桌面上就会显示出VS Code的快捷方式了。

三.VS Code的插件安装

     VS Code提供了很多丰富的插件功能,可以根据你的需求,安装对应的插件从而提高开发效率

而博主是为了前端开发,而下载的 VS Code。因此以 前端常用插件 为例

插件名称         解析
Chinese (Simplified) LanguagePack    VS Code的中文简体语言包,将VS Code的内容变成中文
Code Spell Checker            拼写检测器,当你拼写错误时,会自动提醒你
HTML Css Support         拼写样式表时,会自动补全功能
JavaScript (ES6) code snippets         支持ES6语法提示
Mithril Emmet         代码快速编写工具
Path Intellisense         路径自动补全
Vue 3 Snippets         代码格式化和代码提示
VueHelper         代码提示
Auto Close Tag         自动闭合
Auto Rename Tag        自动命名
Beautify 格式化代码,可美化JS、JSON、CSS、Sass、HTML
Bracket Pair Colorizer 为各种结对的括号提供了颜色高亮
open in browser 把编辑的HTML文件等用浏览器打开
Vetur Vue代码高亮显示
IntelliJ IDEA Keybindings 在VSCode使用IDEA的快捷键

安装方式都是一样的,因此在这,我们讲解2种安装情况

💖插件正常安装

例:安装Chinese (Simplified) LanguagePack  插件

第一步,打开VS Code 选择 扩展 输入需要下载的插件名

第二步,选择安装,并等待安装成功。

💖插件安装异常

安装异常,是指插件已经弃用,后续不会再进行维护。

而被弃用的原因有2种

  1. 该插件有了更新版本。
  2. 该插件内置于 VS Code,需要进行设置使用

注:虽然插件已经弃用,但功能还在,只是不会被维护了。因此我们依然可以安装使用。

例如:安装beautify插件 虽然已被弃用,但是依然可以安装使用


四.VS Code的配置

       VS Code的配置是指 修改字体、背景样式等偏好设置

例如:修改背景颜色


 五.VS Code的基本使用

由于VS Code功能强大,可以使用多个编程语言,所以在这里我们使用HTML前端语言展示

第一步:打开VS Code,选择文件夹,可以选择已有的代码文件,也可以选择空白的文件夹 。

第二步:点击新建文件,记住后缀要正确,然后往文件当中输入代码

第三步:保存代码,编译程序

编译结果:


总结

       VS Code十分强大,可以编译众多语言,但是是需要使用插件的。而博主使用VS Code是为了接下来的Javawed中了解前端的知识。


       谢谢各位观看,希望对你们有帮助!祝各位财源滚滚,鸿运当头!


                                                                                                       ---------懒惰的tq02

目录
相关文章
|
5月前
|
搜索推荐 C++ 开发者
VSCode安装使用教程,保姆级!
本文介绍了Visual Studio Code(VS Code)的安装和基本使用,包括从官网下载安装包,按照步骤在Windows系统上安装,以及设置个性化主题。此外,还强调了安装插件以增强功能,例如安装简体中文插件,并展示了如何搜索和安装插件。VS Code作为一个免费、开源的轻量级编辑器,其丰富的扩展性和高效性使其成为开发者工具的首选。
|
3月前
|
TensorFlow 算法框架/工具 Python
【Mac 系统】解决VSCode用Conda成功安装TensorFlow但程序报错显示红色波浪线Unable to import ‘tensorflow‘ pylint(import-error)
本文解决在Mac系统上使用VSCode时遇到的TensorFlow无法导入问题,原因是Python解析器未正确设置为Conda环境下的版本。通过在VSCode左下角选择正确的Python解析器,即可解决import TensorFlow时报错和显示红色波浪线的问题。
143 9
|
3月前
|
存储 Java 开发工具
【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件,下载及清理)
【Azure Developer】VS Code运行Java 版Azure Storage SDK操作Blob (新建Container, 上传Blob文件,下载及清理)
|
3月前
|
C++
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
安装VS Code报错:您选定的驱动器或UNC共享不存在或不能访问。请选择其他位置。
|
4月前
|
JavaScript IDE 开发工具
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
vue3【2024版】开发环境搭建(含官网和nvm下载切换最新版node,修改node下载源,创建项目,启动项目,安装vscode插件Vue - Official)
278 3
|
4月前
|
JavaScript 安全
下载安装 vscode(含汉化、插件的推荐和安装)
下载安装 vscode(含汉化、插件的推荐和安装)
73 0
下载安装 vscode(含汉化、插件的推荐和安装)
|
4月前
|
JavaScript 前端开发 关系型数据库
入职必会-开发环境搭建28-VSCode下载和安装
Visual Studio Code(简称 VS Code)是由微软开发的免费开源代码编辑器,支持几乎所有主流操作系统,包括 Windows、macOS 和 Linux。它具有丰富的功能和扩展性,适用于各种编程语言和应用场景。
|
5月前
cocos creator+vscode安装及配置介绍
cocos creator+vscode安装及配置介绍
206 0
|
6月前
|
Ubuntu Linux C语言
Ubuntu下安装vscode,并解决终端打不开vscode的问题
Ubuntu下安装vscode,并解决终端打不开vscode的问题
|
3月前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
228 1