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、选择安装的位置
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、选择开始菜单文件夹
你想在哪里放置程序的快捷方式,默认即可
5、选择附加任务
提示:
- 将以下四项都勾选上,桌面快捷方式需要就添加即可
- 添加到 PATH:添加到系统环境变量中,勾选后,即可在命令行中使用
code .
即可打开 Vscode
6、准备安装
7、正在安装
8、安装完成
9、安装完成后,第一次打开 VSCode
VSCode 常见插件安装
1、简体中文语言包
插件名称:Chinese 中文(简体)语言包
- 作用:将 VSCode 操作界面转换为中文,对英语不好的朋友,非常友好
安装完成,重启 VScode 即可
查看中文操作界面
2、编辑器主题选择、设置
建议浅色系对眼睛友好
管理 -> 颜色主题 -> 选择自己喜欢的主题即可
提示
- 选择自己喜欢的主题
- Quiet Light
查看代码效果
浅色 + (默认浅色)
3、vscode-icons 显示代码图标
插件名称:Material Icon
Theme 作用:显示 Vscode 文件、文件夹的图标
在 VScode 扩展插件中搜索 “Material Icon Theme” 即可安装
4、open in brower 通过编辑器直接打开默认浏览器
插件名称:open in brower
- 作用:该插件可通过编辑器打开默认浏览器显示代码效果
5、Live Server 开启本地服务器
插件名称:Live Server
- 作用:通过插件可以开启本地服务
- 优点:一边编写代码一边保存,即实时刷新预览,大大提升开发测试效率
点击查看完整版视频讲解
6、Auto Rename Tag 自动修改标签对名称
插件名称:Auto Rename Tag
- 作用:修改标签,自动帮你完成头部和尾部闭合标签的同步修改
7、carbon-now-sh 将代码生成一张图片
插件名称:carbon-now-sh
- 作用:可提升逼格的插件,在实际开发中遇到技术问题或者做部分代码片段分享,可以使用该插件将代码生成一张图片
- 使用方法:
- 在 VSCode 中,选中需要生成图片的代码
- 打开命令托盘:Windows:Ctrl + Shift + P,Mac:Cmd + Shift + P
- 输入 Carbon,回车
8、prettier 格式化代码
插件名称:prettier
- 作用:格式化美化代码
- Ctrl + s 保存会自动格式化
相关设置
1、字体设置
管理 -> 设置
- 字体大小: 20
- 字体系列:
JetBrains Mono
注
在 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
下载
3、在电脑中安装字体
安装
- 下载后解压,进到
ttf 文件夹下
,会有一堆文件,全选后安装- 所有的字体都叫 JetBrains Mono,全选安装的目的是为了响应各种特殊字体(比如斜体、意大利体、粗体、如果不需要这些花里胡哨的只需安装 Regular.ttf)
4、 在 VSCode 中启用查看字体
如需要 Consolas 字体:如下
windows 下 VScode 使用 Consolas 下载地址
Consolas字体免费下载和在线预览-字体天下
5、光标设置,平滑插入动画
6、关闭代码缩略图,不占用新资源
7、Ctrl + 鼠标滚轮缩放字体大小
如果能用 Ctrl + 鼠标滚轮缩放字号,会非常方便
- 我们需要进行相关的配置,在 管理 -> 设置 -> 搜索:输入 "滚动" 即可看到
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
相关文章:

VSCode 安装使用教程 环境安装配置 保姆级教程
一个好用的 IDE 不仅能提升我们的开发效率,还能让我们保持愉悦的心情,这样才是非常 Nice 的状态 ^_^ 那么,什么是 IDE 呢 ? what IDE(Integrated Development Environment,集成开发环境)是含代码…...

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

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

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

solid works草图绘制与设置零件特征的使用说明
(1)草图绘制 • 草图块 在 FeatureManager 设计树中,您可以隐藏和显示草图的单个块。您还可以查看块是欠定义 (-)、过定义 () 还是完全定义。 要隐藏和显示草图的单个块,请在 FeatureManager 设计树中右键单击草图块,…...

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

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

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

实时车辆行人多目标检测与跟踪系统(含UI界面,Python代码)
算法架构: 目标检测:yolov5 目标跟踪:OCSort其中, Yolov5 带有详细的训练步骤,可以根据训练文档,训练自己的数据集,及其方便。 另外后续 目标检测会添加 yolov7 、yolox,目标跟踪会…...

谷歌AI机器人Bard发布强大更新,支持插件功能并增强事实核查;全面整理高质量的人工智能、机器学习、大数据等技术资料
🦉 AI新闻 🚀 谷歌AI机器人Bard发布强大更新,支持插件功能并增强事实核查 摘要:谷歌的人工智能聊天机器人Bard发布了一项重大更新,增加了对谷歌应用的插件支持,包括 Gmail、Docs、Drive 等,并…...

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

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

【libuv】与uvgrtrp的_SSIZE_T_定义不同
libuv的 #if !defined(_SSIZE_T_) && !defined(_SSIZE_T_DEFINED) typedef intptr_t ssize_t;...

安卓ROM定制 修改必备常识-----初步了解system系统分区文件夹的基本含义 【二】
安卓修改rom 固件 修改GSI 移植rom 必备常识 lib--**so文件基本解析 一起来了解system目录相应文件的用途吧。(rom版本不同里面的app也会不一样) 简单打开img格式后缀文件 给大家说下最简单的方法提取img里面的文件,对于后缀img格式的文件可…...

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

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

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

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

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

计算周包材,日包材用来发送给外围系统
文章目录 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…...

R语言柱状图直方图 histogram
柱状图简介 柱状图也叫直方图,是展示连续性数值的分布状况。在x轴上将连续型数值分为一定数量的组,y轴显示对应值的频数。 R基本的柱状图 hist 我们用R自带的Orange数据来画图。 > head(Orange)Tree age circumference(圆周长) 1 1 118 …...

Linux磁盘管理:最佳实践
🌷🍁 博主猫头虎(🐅🐾)带您 Go to New World✨🍁 🦄 博客首页——🐅🐾猫头虎的博客🎐 🐳 《面试题大全专栏》 🦕 文章图文…...

uni-app:通过三目运算动态增加样式效果(class)
效果 代码 第一条:当变量line的值等于abc时,class就等于yes,反之class等于no(显然等于abc,执行yes,前景色为红色) 第一条:当变量line1的值等于abc时,class就等于yes,反之class等于noÿ…...

API安全
1 API的简介 API代表应用程序编程接口,它由一组允许软件组件进行通信的定义和协议组成。作为软件系统之间的中介,API使软件应用程序或服务能够共享数据和功能。但是API不仅仅提供连接基础,它还管理软件应用程序如何被允许进行通信和交互。API控制程序之间交换请求的类型、请…...

手写一个翻页功能
最近在对接海康摄像头,需要写一个翻页得功能,于是乎就想到了手写,然后就记录一下。在vue项目里写的 <img:src"require()"alt""click"onNext(delete)"/><img:src"require()"alt""…...

element show-overflow-tooltip 复制
el-table-column的show-overflow-tooltip弹出的提示无法复制,官方也暂时不准备解决,可以自己模拟一个 <el-table-column label"支付单号" width"100"><template #default"{ row }"><el-tooltip :content&…...

【C语言】指针的进阶(三)—— 模拟实现qsort函数以及指针和数组的笔试题解析
目录 1、模拟实现qsort函数 1.1、qsort函数的回顾 1.2、模拟实现qsort函数 2、指针和数组笔试题解析 2.1、一维数组 2.2、字符数组 1、模拟实现qsort函数 1.1、qsort函数的回顾 要模拟实现qsort函数,就要了解清楚qsort函数的参数以及使用方式。 我们先回顾一…...

Python 图像处理库PIL ImageOps笔记
# 返回一个指定大小的裁剪过的图像。该图像被裁剪到指定的宽高比和尺寸。 # 变量size是要求的输出尺寸,以像素为单位,是一个(宽,高)元组 # bleed:允许用户去掉图像的边界(图像四个边界ÿ…...

全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一新枝——2023学生开学季辉少许
全球南方《乡村振兴战略下传统村落文化旅游设计》许少辉八一新枝——2023学生开学季辉少许...

【C语言】指针的进阶(一)
目录 前言 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 3.3 数组指针的使用 4. 数组参数、指针参数 4.1 一维数组传参 4.2 二维数组传参 4.3 一级指针传参 4.4 二级指针传参 5. 函数指针 前言 指针在C语言中可谓是有着举足轻重的…...