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

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

那么，什么是 IDE 呢？

what

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

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

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

下边我们开始玩转 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、vscode-icons 显示代码图标

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

5、Live Server 开启本地服务器

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

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

8、prettier 格式化代码

VSCode 下载、安装

官网下载

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

下载最新版本的 VSCode 即可

提示：

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

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

Window 版 VScode 安装流程

1、下载 Vscode 安装文件

提示：

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

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

3、选择安装的位置

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

4、选择开始菜单文件夹

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

5、选择附加任务

提示：

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

6、准备安装

7、正在安装

8、安装完成

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-1

5、Live Server 开启本地服务器

插件名称：Live Server

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

20-1

20-2

点击查看完整版视频讲解

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

插件名称：Auto Rename Tag

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

21-1

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

插件名称：carbon-now-sh

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

24-0

24-1

8、prettier 格式化代码

插件名称：prettier

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

25-1

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

相关阅读:
Apache Hudi初探(五)(与flink的结合)--Flink 中hudi clean操作
【Mindspore】ResizeArea涉及的infershape问题
【上海大学计算机组成原理实验报告】四、指令系统实验
PHP代码审计DVWA[CSP Bypass]
autoware之轮式里程计计算
开源实时数仓 Apache Doris 毕业了，未来如何走得更远？
【通信原理】揭开傅里叶级数与傅里叶变换的神秘面纱
二.数据的机器级表示及运算
山东省专精特新|山东省“专精特新”条件|专业申报认定补贴
xlua源码分析（二）lua Call C#的无wrap实现

原文地址：https://blog.csdn.net/weixin_46474921/article/details/132841711

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

VSCode 下载、安装