当前位置： 首页 > news >正文

VSCode 安装使用教程 环境安装配置 保姆级教程

news 2025/10/27 20:53:11

一个好用的 IDE 不仅能提升我们的开发效率，还能让我们保持愉悦的心情，这样才是非常 Nice 的状态 ^_^

那么，什么是 IDE 呢 ？

what

  • IDE（Integrated Development Environment，集成开发环境）是含代码编辑器、关键词高亮、智能感应、智能纠错、格式美化、版本管理等功能于一身的 "高级代码编辑器"
  • 每个 IT 工程师都要有自己顺手的 IDE，它是我们的武器
  • 要理解无论使用什么 IDE 编写出来的代码，本质上都是 "白底黑字" 的，都是 "纯文字" 的

 目前，前端开发主流的 IDE 有以下 5 个

IDE 名称公司是否免费功能强大度
Visual Studio Code微软是强大（推荐）
Sublime个人开发者是（需要注册）适中
AtomGitHub是适中
WebStormJetBrains否非常强大
HBuilderDCloud是非常强大

下边我们开始玩转 VSCode

正式开始

  • Visual Studio Code 简称 VSCode ，2015 年由微软公司发布。
  • 可用于 Windows，macOS 和 Linux。它具有对 JavaScript，TypeScript 和 Node.js 的内置支持，并具有丰富的其他语言（例如 C++，C＃，Java，Python，PHP，Go）

  • 优点：内置功能非常丰富、插件全且安装简单、轻量、有 MAC 版本

目录

VSCode 下载、安装

Window 版 VScode 安装流程

1、下载 Vscode 安装文件

2、下载完成单击运行，然后我们开始进行安装

3、选择安装的位置

4、选择开始菜单文件夹

5、选择附加任务

6、准备安装

7、正在安装

8、安装完成

9、安装完成后，第一次打开 VSCode

VSCode 常见插件安装

1、简体中文语言包

2、编辑器主题选择、设置

3、vscode-icons 显示代码图标

4、open in brower 通过编辑器直接打开默认浏览器

5、Live Server 开启本地服务器

6、Auto Rename Tag 自动修改标签对名称

7、carbon-now-sh 将代码生成一张图片

8、prettier 格式化代码

相关设置

1、字体设置

2、 下载字体

3、在电脑中安装字体

4、 在 VSCode 中启用查看字体

5、光标设置，平滑插入动画

6、关闭代码缩略图，不占用新资源

7、Ctrl + 鼠标滚轮缩放字体大小

VSCode 快捷键

1、Window 版快捷键

2、Mac 版快捷键

Emmet 语法

VSCode 下载、安装

官网下载

在官方网站：https://code.visualstudio.com/ (opens new window)

下载最新版本的 VSCode 即可

提示：

蓝色按钮会自动识别电脑操作系统，到适合的版本，只需要点击下载即可

也可以按照以下方式手动下载适配自己电脑的版本~~~~~~~

Window 版 VScode 安装流程

1、下载 Vscode 安装文件

 

提示：

点击上面的下载之后，它会跳转至一个新页面

2、下载完成单击运行，然后我们开始进行安装

3、选择安装的位置

安装目录文件所在，可选择、可默认，这里我设置的是：D:\Software\Microsoft VS Code

4、选择开始菜单文件夹

你想在哪里放置程序的快捷方式，默认即可

2

5、选择附加任务

提示：

  • 将以下四项都勾选上，桌面快捷方式需要就添加即可
  • 添加到 PATH：添加到系统环境变量中，勾选后，即可在命令行中使用 code . 即可打开 Vscode

6、准备安装

7、正在安装

8、安装完成

6

9、安装完成后，第一次打开 VSCode

VSCode 常见插件安装

1、简体中文语言包

插件名称：Chinese 中文（简体）语言包

  • 作用：将 VSCode 操作界面转换为中文，对英语不好的朋友，非常友好

 

安装完成，重启 VScode 即可

查看中文操作界面

2、编辑器主题选择、设置

建议浅色系对眼睛友好

管理 -> 颜色主题 -> 选择自己喜欢的主题即可

提示

  • 选择自己喜欢的主题
  • Quiet Light

查看代码效果

浅色 + （默认浅色）

13-1

3、vscode-icons 显示代码图标

插件名称：Material Icon

  • Theme 作用：显示 Vscode 文件、文件夹的图标

  • 在 VScode 扩展插件中搜索 “Material Icon Theme” 即可安装

 

4、open in brower 通过编辑器直接打开默认浏览器

插件名称：open in brower

  • 作用：该插件可通过编辑器打开默认浏览器显示代码效果

18

18-1

5、Live Server 开启本地服务器

插件名称：Live Server

  • 作用：通过插件可以开启本地服务
  • 优点：一边编写代码一边保存，即实时刷新预览，大大提升开发测试效率

20

20-1

20-2

点击查看完整版视频讲解

6、Auto Rename Tag 自动修改标签对名称

插件名称：Auto Rename Tag

  • 作用：修改标签，自动帮你完成头部和尾部闭合标签的同步修改

21

21-1

7、carbon-now-sh 将代码生成一张图片

插件名称：carbon-now-sh

  • 作用：可提升逼格的插件，在实际开发中遇到技术问题或者做部分代码片段分享，可以使用该插件将代码生成一张图片
  • 使用方法：
    • 在 VSCode 中，选中需要生成图片的代码
    • 打开命令托盘：Windows：Ctrl + Shift + P，Mac：Cmd + Shift + P
    • 输入 Carbon，回车

24

24-0

24-1

8、prettier 格式化代码

插件名称：prettier

  • 作用：格式化美化代码
  • Ctrl + s 保存会自动格式化

25

25-1

相关设置

1、字体设置

管理 -> 设置

  • 字体大小： 20
  • 字体系列：JetBrains Mono

14

注

在 VSCode 中 "控制字体系列" 添加字体名称 （优先级：从左至右）

同时还要在对应的电脑操作系统中安装字体才能生效

   JetBrains Mono字体的下载安装教程参考链接：
在Visual Studio Code中安装JetBrains Mono字体_Siobhan. 明鑫的博客-CSDN博客

  • 在 VSCode 中推荐使用 JetBrains Mono 编程专用字体
  • JetBrains 公司最新出了一个字体 JetBrains Mono，据称是专为改善看代码体验而生

2、 下载字体

TIP

JetBrains Mono 官方下载地址 ：https://www.jetbrains.com/lp/mono/(opens new window)

点击 Download font 下载

image-20220210152358765

3、在电脑中安装字体

安装

  • 下载后解压，进到ttf 文件夹下，会有一堆文件，全选后安装
  • 所有的字体都叫 JetBrains Mono，全选安装的目的是为了响应各种特殊字体（比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf）

14-1

4、 在 VSCode 中启用查看字体

14-2

如需要 Consolas 字体：如下

windows 下 VScode 使用 Consolas 下载地址

Consolas字体免费下载和在线预览-字体天下

5、光标设置，平滑插入动画

6、关闭代码缩略图，不占用新资源

16

7、Ctrl + 鼠标滚轮缩放字体大小

如果能用 Ctrl + 鼠标滚轮缩放字号，会非常方便

  • 我们需要进行相关的配置，在 管理 -> 设置 -> 搜索：输入 "滚动" 即可看到

19

VSCode 快捷键

1、Window 版快捷键

常用快捷键

  • 注释:
    • 单行注释：ctrl + k ctrl + c 或 ctrl + /
    • 取消单行注释：ctrl + k ctrl + u（按下 ctrl 不放，再按 k+u）
    • 多行注释：alt + shift + A
    • 多行注释 : /**/
  • 移动行：alt + up/down
  • 显示/隐藏左侧目录栏 ctrl + b
  • 复制当前行：shift + alt + up/down
  • 删除当前行：shift + ctrl + k
  • 控制台终端显示与隐藏：ctrl + ~
  • 查找文件/安装 vscode 插件地址：ctrl + p
  • 代码格式化：shift + alt + f
  • 新建一个窗口：ctrl + shift + n
  • 多行编辑：Ctrl + Alt + up/down

2、Mac 版快捷键

Mac

  • Command + X 剪切（未选中文本的情况下，剪切光标所在行）
  • Command + C 复制（未选中文本的情况下，复制光标所在行）
  • Option + Up 向上移动行
  • Option + Down 向下移动行
  • Option + Shift + Up 向上复制行
  • Option + Shift + Down 向下复制行
  • Command + Shift + K 删除行
  • Command + Enter 下一行插入
  • Command + Shift + Enter 上一行插入
  • Command + Shift + \ 跳转到匹配的括号
  • Command + [ 减少缩进
  • Command + 1 增加缩进
  • Home 跳转至行首
  • End 跳转到行尾

作为优秀的开发者，熟练的用好快捷键也是非常重要的技能之一

Emmet 语法

TIP

  • 作为大厂资深的前端工程师们，都会熟练的使用 Emmet 语法
  • 在实际开发中可以大大的提升开发效率
  • Emmet 官方文档：Cheat Sheet

image-20220210224331858

相关文章：

VSCode 安装使用教程 环境安装配置 保姆级教程

一个好用的 IDE 不仅能提升我们的开发效率，还能让我们保持愉悦的心情，这样才是非常 Nice 的状态 ^_^ 那么，什么是 IDE 呢 ？ what IDE（Integrated Development Environment，集成开发环境）是含代码…...

编程日记 2023/9/20 20:31:29

c盘中temp可以删除吗？appdata\local\temp可以删除吗？

http://www.win10d.com/jiaocheng/22594.html C盘AppData文件夹是一个系统文件夹，里面存储着临时文件，各种应用的自定义设置，快速启动文件等。近期有用户发现appdata\local\temp占用了大量的空间，那么该文件可以删除吗&#xff1f…...

编程日记 2023/9/20 20:30:28

Java手写聚类算法

Java手写聚类算法 1. 算法思维导图 以下是聚类算法的实现原理的思维导图，使用Mermanid代码表示： #mermaid-svg-AK9EgYRS38PkRJI4 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-AK9EgYRS38…...

编程日记 2023/9/20 20:27:24

解密Java多线程中的锁机制：CAS与Synchronized的工作原理及优化策略

目录 CAS什么是CASCAS的应用ABA问题异常举例 Synchronized 原理基本特征加锁过程偏向锁轻量级锁重量级锁 其他优化操作锁消除锁粗化 CAS 什么是CAS CAS: 全称Compare and swap，字面意思:”比较并交换“，CAS涉及如下操作： 假设内存中的原数据…...

编程日记 2023/9/20 20:26:23

solid works草图绘制与设置零件特征的使用说明

（1）草图绘制 • 草图块 在 FeatureManager 设计树中，您可以隐藏和显示草图的单个块。您还可以查看块是欠定义 (-)、过定义 () 还是完全定义。 要隐藏和显示草图的单个块，请在 FeatureManager 设计树中右键单击草图块，…...

编程日记 2023/9/20 20:24:21

vue3使用router.push()页面跳转后，该页面不刷新问题

文章目录 原因分析最优解决 原因分析 这是一个常见问题，当使用push的时候，会向history栈添加一个新记录，这个时候，再添加一个完全相同的路由时，就不会再次刷新了 最优解决 在页面跳转时加上params参数时间 router.…...

编程日记 2023/9/20 20:23:20

如何理解数字工厂管理系统的本质

随着科技的飞速发展和数字化转型的推动，数字工厂管理系统逐渐成为工业4.0时代的重要工具。数字工厂系统旨在整合和优化工厂运营的各个环节，通过实时数据分析和处理，提升生产效率，降低成本，并增强企业的整体竞争力。为了…...

编程日记 2023/9/20 20:19:16

笔记1.3 数据交换

如何实现数据通过网络核心从源主机到达目的主机？ 数据交换 交换网络： 动态转接动态分配传输资源 数据交换类型： （1）电路交换 （2）报文交换 （3）分组交换 电路交换的特…...

编程日记 2023/9/20 20:18:15

实时车辆行人多目标检测与跟踪系统（含UI界面，Python代码）

算法架构： 目标检测：yolov5 目标跟踪：OCSort其中， Yolov5 带有详细的训练步骤，可以根据训练文档，训练自己的数据集，及其方便。 另外后续 目标检测会添加 yolov7 、yolox，目标跟踪会…...

编程日记 2023/9/20 20:17:13

谷歌AI机器人Bard发布强大更新，支持插件功能并增强事实核查；全面整理高质量的人工智能、机器学习、大数据等技术资料

🦉 AI新闻 🚀 谷歌AI机器人Bard发布强大更新，支持插件功能并增强事实核查 摘要：谷歌的人工智能聊天机器人Bard发布了一项重大更新，增加了对谷歌应用的插件支持，包括 Gmail、Docs、Drive 等，并…...

编程日记 2023/9/20 20:16:13

NI SCXI-1125 数字量控制模块

NI SCXI-1125 是 NI（National Instruments）生产的数字量控制模块，通常用于工业自动化和控制系统中，以进行数字输入和输出控制。以下是该模块的一些主要产品特点： 数字量输入：SCXI-1125 模块通常具有多个数字…...

编程日记 2023/9/20 20:15:12

链表oj题1(Leetcode)——移除链表元素，反转链表，链表的中间节点，

链表OJ 一，移除链表元素1.1分析1.2代码 二，找到链表的中间节点2.1分析2.2代码 三，反转链表3.1分析3.2代码 四，找到链表中倒数第k个节点4.1分析4.2代码 一，移除链表元素 移除链表元素 1.1分析 这里的删除要分成两种…...

编程日记 2023/9/20 20:11:08

【libuv】与uvgrtrp的_SSIZE_T_定义不同

libuv的 #if !defined(_SSIZE_T_) && !defined(_SSIZE_T_DEFINED) typedef intptr_t ssize_t;...

编程日记 2023/9/20 20:09:06

安卓ROM定制 修改必备常识-----初步了解system系统分区文件夹的基本含义 【二】

安卓修改rom 固件 修改GSI 移植rom 必备常识 lib--**so文件基本解析 一起来了解system目录相应文件的用途吧。（rom版本不同里面的app也会不一样） 简单打开img格式后缀文件 给大家说下最简单的方法提取img里面的文件，对于后缀img格式的文件可…...

编程日记 2023/9/20 20:08:06

GPT会统治人类吗

一 前言 花了大概两天时间看完《这就是ChatGPT》，触动还是挺大的，让我静下来，认真地想一想，是否真正理解了ChatGPT，又能给我们以什么样的启发。 二 思考 在工作和生活中，使用ChatGPT或文心一言，…...

编程日记 2023/9/20 20:07:05

win系统环境搭建（六）——Windows安装nginx

windows环境搭建专栏🔗点击跳转 win系统环境搭建（六）——Windows安装nginx 本系列windows环境搭建开始讲解如何给win系统搭建环境，本人所用系统是腾讯云服务器的Windows Server 2022，你可以理解成就是你用的windows10…...

编程日记 2023/9/20 19:59:53

Java中使用BigDecimal类相除保留两位小数

问题 遇到2个数相除，需要保留2位小数的结果。 解决 BigDecimal sum ...; BigDecimal yearValue ...;MathContext mathContext new MathContext(2, RoundingMode.DOWN); yearValue.divide(sum, mathContext);...

编程日记 2023/9/20 19:57:51

激光雷达在ADAS测试中的应用与方案

在科技高速发展的今天，汽车智能化已是必然的趋势，且自动驾驶汽车的研究也在世界范围内进行得如火如荼。而在ADAS测试与开发中，激光雷达以其高性能和高精度占据着非常重要的地位，它是ADAS测试与开发中不可缺少的组成。 一 激光雷达…...

编程日记 2023/9/20 19:56:50

malloc与free

目录 前提须知： malloc： 大意： 头文件： 申请空间： 判断是否申请成功： 使用空间： 结果： 整体代码： malloc申请的空间怎么回收呢? 注意事项： free:…...

编程日记 2023/9/20 19:55:49

计算周包材，日包材用来发送给外围系统

文章目录 1 Introduction2 code 1 Introduction In this example We get data from BOM and RESB . and calculate it . 2 code TYPES: BEGIN OF TY_ZPPT_0015_W,AUFNR TYPE ZPPT_0015-AUFNR,ZXH TYPE ZPPT_0015-ZXH,ZZJHID TYPE ZPPT_0015-ZZJHID,ZRJHID TYPE Z…...

编程日记 2023/9/20 19:52:46

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

编程新知 2025/8/4 2:45:15

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角，以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向，距离坐标原点x个像素;第二个是y坐标，表示当前位置为垂直方向，距离坐标原点y个像素。 坐标体系-像素 …...

编程新知 2025/9/12 0:24:07

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2025/10/23 11:51:37

Python ROS2【机器人中间件框架】 简介

销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...

编程新知 2025/8/17 7:11:57

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数（函数作为参数、返回值） 三、匿名函数与闭包1. 匿名函数（Lambda函…...

编程新知 2025/9/12 8:21:45

安全突围：重塑内生安全体系：齐向东在2025年BCS大会的演讲

文章目录 前言第一部分：体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分：体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

编程新知 2025/10/26 13:12:06

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下： avformat_open_input 精简后的代码如下： int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/10/21 21:50:36

高防服务器价格高原因分析

高防服务器的价格较高，主要是由于其特殊的防御机制、硬件配置、运营维护等多方面的综合成本。以下从技术、资源和服务三个维度详细解析高防服务器昂贵的原因： 一、硬件与技术投入 大带宽需求 DDoS攻击通过占用大量带宽资源瘫痪目标服务器，因此…...

编程新知 2025/10/17 8:25:51

机器学习的数学基础：线性模型

线性模型 线性模型的基本形式为： f ( x ) ω T x b f\left(\boldsymbol{x}\right)\boldsymbol{\omega}^\text{T}\boldsymbol{x}b f(x)ωTxb 回归问题 利用最小二乘法，得到 ω \boldsymbol{\omega} ω和 b b b的参数估计$ \boldsymbol{\hat{\omega}}…...

编程新知 2025/10/2 9:07:50

相关类相关的可视化图像总结

目录 一、散点图 二、气泡图 三、相关图 四、热力图 五、二维密度图 六、多模态二维密度图 七、雷达图 八、桑基图 九、总结 一、散点图 特点 通过点的位置展示两个连续变量之间的关系，可直观判断线性相关、非线性相关或无相关关系，点的分布密…...

编程新知 2025/10/27 19:35:33