VSCode安装配置使用教程(最新版超详细保姆级含插件)一文就够了

前言

Visual Studio Code 是一个轻量级功能强大的源代码编辑器,支持语法高亮、代码自动补全(又称 IntelliSense)、代码重构、查看定义功能,并且内置了命令行工具和 Git 版本控制系统。适用于 Windows、macOS 和 Linux。它内置了对 JavaScript、TypeScript 和 Node.js 的支持,并为其他语言和运行时(如 C++、C#、Java、Python、PHP、Go、.NET)提供了丰富的扩展生态系统。为了不影响读者的沉浸式阅读学习,如需使用目录请在左侧使用即可。

VSCode的下载

通过前言我们已经大致了解到了VSCode的强大之处,现在开始步入正题。


进入VSCode官方的下载页,根据系统需求选择相对应的下载地址。

官方下载页面--->:VSCode官方下载页面链接,选择自己系统对应的下载链接。

78e88029a7ff47be939bf535be6d5140.png

 对于Windows下载标绿文本的解释

文本文本解释

User Installer

默认安装在当前计算机帐户目录,如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。vscode默认提供的为User Installer
System Installer安装在非用户目录,例如C盘根目录,任何帐户都可以使用。

关于具体下载哪个版本我进行了大量的调研,发现网络上大部分的教程都是选择的VSCode默认提供的User Installer版本。但是对于我们实际和真正的开发,以及我们对于系统文件的管理难易度上来讲我更推荐System Installer版本,它可以自定义安装路径,使其我们后期对于它的管理十分方便。

VSCode的安装

此处我选择了System Installer版本,原因无它,因为它可以自定义安装路径,使其我们后期对于它的管理十分方便,我也十分建议你选择此版本安装。

同意协议

选择同意协议,点击下一步

9dbdc38a071a4c09b52c929507a31c0a.png

 选择安装位置

选择安装位置,单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可

注意:为了后期的稳定性,切勿使用中文路径。

31225e22e1794a458e0d74a59589b0ac.png

 选择开始菜单文件夹

如需修改,请点击浏览进行设置,无需修改直接单击下一步即可

caedf66e969040e49cb1519266074ae3.png

 选择附加任务

按需选择自己需要的附加任务,这里我推荐将其他中的所有选项都勾选上,对于创建桌面方式则按需选择是否勾选,我这里因为不需要所以就不勾选了。

设置完毕最后单击下一步

注意:添加到PATH一定要勾选,很重要。

77c6c02138d240dc9254c7ab294b6b74.png

 准备安装

确认自己前面设置的是否有误,无误则点击安装即可

d4287143e51f4887a93b08844ade9236.png

安装完成

如果你看到如下界面,那么恭喜你,你的VSCode安装完成。

3df882115ee6445d9236c3ca22bf87f7.png

VSCode基础配置

VSCode界面简介

VS Code 采用通用的用户界面和左侧的资源管理器布局,显示您可以访问的所有文件和文件夹,右侧的编辑器显示您打开的文件的内容。

cdf60147c0ab421a85f5ca1440ce7beb.png

 关于对上图界面的区域解释:

区块颜色区块名称区块作用
红色活动栏位于最左侧,可让您在视图之间切换,并为您提供额外的特定于上下文的指标,例如启用 Git 时传出更改的数量。
绿色侧栏包含不同的视图,例如资源管理器,可在您处理项目时为您提供帮助。
粉色     状态栏有关已打开项目和您编辑的文件的信息。
紫色面板您可以在编辑器区域下方显示不同的面板,用于输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。
白色     编辑区编辑文件的主要区域。您可以垂直和水平并排打开任意数量的编辑器。
黄色     菜单栏进行VSCode的各项操作

VSCode设置中文界面

因为我们此时安装的VSCode还是英文界面,对于英语不是那么好的小伙伴不是十分友好,所以我们此时需要安装一个插件来对VSCode进行中文化处理。

活动栏简单介绍作用

4e333afda7384d0594403b5fed3f6e78.png

编辑器打开的文件

d62a5aa48cc04e3a85379a733a922a58.png

全局搜索

02348a018e124324bd3986ed07e7c8fc.png

Git管理

9e7e1e8a07fe46d98f7962418bbdb4ff.png

Debug

353d63150a154abe8e34537b670c52df.png

插件安装

1c67369cabf049e3b6dff2c889261e1f.png

用户登录

1605fb594f754519b3049dd3f89517fa.png

VSCode设置

经过如上对VSCode界面基本的了解,我们在活动栏区域找到插件安装这个选项,单击它,在搜索框中搜索Chinese 选择第一个即可,选择Install进行安装。

57264e177e9a4ec99e9891428d5a94c2.png

 安装完毕,右下角会弹出如下提示框,单击Restart重启VSCode即可完成。

69995462abaa489eb5fcb58b55599c52.png

 VSCode个性化设置

我们找到设置,选择颜色主题

2cab0db75cf04dd8899eac966947eee4.png

会弹出如下框选,此时我们根据自己的喜好选择即可,如果你觉得没有,还可以选择浏览其他颜色主题进行预览选择。

314646ffc61845a3b75207e47ac34b20.png

其余文件图标主题和产品图标主题的个性化设置同理。

VSCode常用设置

打开活动栏的VSCode设置,我们在常用设置,设置字体大小,字体,是否自动保存等常用的设置项目,此处按需选择设置即可。

be084f06cecc414a8fba007affd3c8c7.png

 对于其他的设置也是同理,按需选择设置

对于常用设置这一项,我的个人建议是将Files:AutoSave选项的off更改为onFocusChange选项(当编辑器失去焦点时,会自动保存具有更改的编辑器)

4b7bcca7c0294a68bdc9737d57196aec.png



VSCode常用快捷键

为了大家更为方便的使用快捷键,我再次列了一个表格进行规整化说明。

常规快捷键

快捷键 说明
Ctrl+Shift+P, F1显示命令选项板
Ctrl+P快速打开,转到文件…
Ctrl+Shift+N新建窗口/实例
Ctrl+Shift+W关闭窗口/实例
Ctrl+用户设置
Ctrl+K Ctrl+S键盘快捷键

基本编辑快捷键

快捷键说明
Ctrl+X剪切线(空选区)。
Ctrl+C复制行(空选择)。
Alt+↑/↓向上/向下移动行。
Shift+Alt+↓/↑复制行向上/向下。
Ctrl+Shift+K删除行。
Ctrl+Enter在下面插入行。
Ctrl+Shift+Enter在上面插入行。
Ctrl+Shift+\跳转到匹配的括号。
Ctrl+]/[缩进/凸出行。
Home/End转到行的开始/结束。
Ctrl+Home转到文件开头。
Ctrl+End转到文件末尾。
Ctrl+↑/↓向上/向下滚动行。
Alt+PgUp/PgDn上/下滚动页面。
Ctrl+Shift+[折叠(折叠)区域。
Ctrl+Shift+]展开(展开)区域。
Ctrl+K Ctrl+[折叠(折叠)所有子区域。
Ctrl+K Ctrl+]展开(展开)所有子区域。
Ctrl+K Ctrl+0折叠(折叠)所有区域。
Ctrl+K Ctrl+J展开(展开)所有区域。
Ctrl+K Ctrl+C添加行注释。
Ctrl+K Ctrl+U删除行注释。
Ctrl+/切换行注释。
Shift+Alt+切换块注释。

Alt+Z

切换自动换行

 导航

快捷键说明
Ctrl+T显示所有符号。
Ctrl+G转到行...。
Ctrl+P转到文件...。
Ctrl+Shift+O转到符号...。
Ctrl+Shift+M显示问题面板。
F8转到下一个错误或警告。
Shift+F8转到上一个错误或警告。
Ctrl+Shift+Tab导航编辑器组历史记录。

Alt+←/→

后退/前进
Ctrl+M切换选项卡移动焦点


插件推荐

主题/外观美化区

Material Icon Theme:

635e33c369aa4cd59e398fb23f184635.png

它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面,而且在暗黑模式下使用效果更佳。

Material Theme:

ea86312ce62649959bc0a2ba03b4a0f8.png

可以说是与Material Icon Theme师从一脉了

彩虹括号插件最新版VSCode已内置,无需安装,如需其他请使用Rainbow Brackets:

9f5b83edb9a4409386041797b446371e.png

 vscode的彩虹括号扩展。

Highlight Matching Tag:

58985e4479044fb6a02a8a3fd295edf9.png

这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使VSCode有一些基本的标签匹配,它也只是——基本的。这个扩展将尝试匹配标签的任何地方:从标签属性,字符串内部,任何文件,同时也提供了广泛的样式选项,自定义标签如何突出显示。


Git相关插件

GitHub Pull Requests and Issues:

6b9e0a6b60e94f9d99e4b465ef5c8310.png

允许您在 Visual Studio Code 中检查和管理 GitHub 拉取请求和问题。

Git History:

0fb3285b859542589d10b771c3fc51f4.png

查看Git日志,提交文件历史,比较分支或提交 

GitLens — Git supercharged:

e2d5d3634fe54830a5be5cd2107df2f1.png

通过Git Under注解和CodeLens使你可以直截了当的显示代码作者,无缝导航和探索Git存储库,通过丰富的可视化和强大的比较命令获得有价值的见解等

Git Graph:

5b18d19823ea451f8aeb2edb11857a96.png

 查看存储库的Git Graph,并从该图轻松执行Git操作


Markdown语法插件

 Markdown All in One :

d709d20564924ccea9f1286e400d9725.png

 Markdown All in One 是 VSCode 热门的 Markdown 插件,可以在左边书写,右边即时预览。下图替大家展示了常用的快捷键,以供查阅。

Key    Command
Ctrl + B    粗体
Ctrl + I    斜体
Alt + S   删除线
Ctrl + Shift + ]  标题(uplevel)
Ctrl + Shift + [ 标题(downlevel)
Ctrl + M 切换数学环境
Alt + C 选中/取消选中任务列表项

Markdown Preview Enhanced:

d41333c61b2245e6b417d6e6cb8f0b54.png

 Markdown预览增强,自动滚动同步、数学排版、PlantUML、pandoc、PDF 导出、代码块、演示文稿编写器等。

Markdown Preview Enhanced常用快捷键:

快捷键说明
cmd-k v 或 ctrl-k v打开预览到侧面
cmd-shift-v 或 ctrl-shift-v打开预览
ctrl-shift-s同步预览/同步源
shift-enter运行代码块
ctrl-shift-enter运行所有代码块
cmd-= 或 cmd-shift-=预览放大
cmd-- 或 cmd-shift-_预览缩小
cmd-0预览重置缩放
Esc键切换侧边栏目录

学习\摸鱼

LeetCode:

bc432d11c0ae4fad9a9c3439cf04b49b.png

解决 VS Code 中的 LeetCode 问题

daily anime:

99f40c267b85438da608d6f271cfe22e.png

VSCode追番摸鱼看剧必备,以下展示使用命令行使用此插件方法

ctrl+shift+p  打开命令面板
命令行输入anime 打开番剧页面
命令行输入hitokoto

 可随机展示一条句子

小霸王:

39172ae8978e4b23807cff1804d6da4a.png

上班玩游戏必备!摸鱼之王必备!

超越鼓励师:

24366638c0744b0184de43031cca4217.png

 梦里的超越将在你枯燥乏味的编辑器中鼓励你。


前端插件

Better Comments:

32683e2d1d97422aab8c93cd086222c1.png

帮助在代码中创建更人性化的注释,有了这个扩展,你就可以把你的注释分类为:警报、查询、待办事项、突出。注释掉的代码也可以设置样式,以明确代码不应该出现在那里,你想要的任何其他评论样式都可以在设置中指定,不同注释可以显示不同的效果。

 ESLint:

dc0ffcde9252407392c4b5d29a11dd16.png

 集成ESLint JavaScript到VS Code,一个适用于前端的规范提示插件。

 vetur:

f67e8147760642fe8c48f476fa1c1422.png

 此插件可谓是前端必备,vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。

Vue VScode Snippets:

6a2b0c8234034fc387b883de907035ce.png

构建代码片段的缩写节约开发时间

JavaScript (ES6) code snippets

32102699d47c45abb10adb94e9290bf8.png

ES6语法中的JavaScript代码片段

ES7+ React/Redux/React-Native snippets:

5385a2aa836f44f38bb83a0cba6cdfec.png

 扩展React, React- native和Redux在JS/TS与ES7+语法

Image preview:

6c0b903e8c71470c85d9701cab92b73c.png

显示图像预览在槽和悬停,图片是否正确引入的显示工具,在链接处按ctrl,鼠标悬浮即可使用,确定是否正确找到路径下的图片。

Auto Rename Tag:

8bb3dc6d4f924fd3abcacbd03b8c89bc.png

 自动重命名成对的HTML/XML标记,与Visual Studio IDE相同。

HTML CSS Support:

35a11fce8eec4bc7ac9539b02cee6684.png

HTML的CSS智能感知,支持链接和嵌入式样式表、支持模板继承、支持其他样式表、支持其他HTML之类的语言、根据需要验证CSS选择器。

使用方法:通过Ctrl + space查看id和class属性建议列表。


如果您认真阅读至此,您现在已经掌握了VSCode的安装与配置,且随着您认真练习使用次数的增加,您对此软件的掌握我相信不止于此,如果您对此软件或其他有进阶的要求,请移步至我的博客进行其余的修炼计划。

感谢您认真观看完毕此文章,如果此文章对您有帮助的话,还请您点赞收藏评论,这对我有很大的帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/821433.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Open3D 体素滤波(30)

Open3D 体素滤波(30) 一、算法介绍二、算法实现1.代码2.效果一、算法介绍 体素滤波(Voxel Grid Filtering)是一种常用的点云滤波算法,用于对点云数据进行下采样(降低数据密度)以及去除噪声。该算法将点云数据划分为规则的体素网格,然后在每个体素中选择一个代表性点作为…

17.牛客---栈的压入弹出(Java版)

题目链接: https://www.nowcoder.com/practice/d77d11405cc7470d82554cb392585106?tpId13&tqId11174&ru/exam/oj 题解: 代码: 测试: 注意 判断栈是否为空必须在前!不然会空指针异常

用于可观察性的 Elastic AI 助手摆脱了 Kibana!

作者:Jeff Vestal 通过 Elastic AI Assistant for Observability API 将 AI 支持的可观察性引入你的日常工具。 注意:下面描述的 API 目前正在开发中,并且没有文档记录,因此不受支持。请将其视为展望性博客。不能保证功能会发布。…

【C++】每日一题 290 单词规律

给定一种规律 pattern 和一个字符串 s &#xff0c;判断 s 是否遵循相同的规律。 这里的 遵循 指完全匹配&#xff0c;例如&#xff0c; pattern 里的每个字母和字符串 s 中的每个非空单词之间存在着双向连接的对应规律。 #include <string> #include <unordered_ma…

【多模态检索】Coarse-to-Fine Visual Representation

快手文本视频多模态检索论文 论文&#xff1a;Towards Efficient and Effective Text-to-Video Retrieval with Coarse-to-Fine Visual Representation Learning 链接&#xff1a;https://arxiv.org/abs/2401.00701 摘要 近些年&#xff0c;基于CLIP的text-to-video检索方法…

openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理

文章目录 一、问题描述二、调研过程1、变更实例名称2、查看grafana中的监控数据3、libvirt服务中的xml文件4、现有的监控数据流转架构 总结 一、问题描述 openstack修改实例名称但是gnocchi监控数据中实例名称没有变更的问题处理。 通过修改实例名称的功能修改了实例名称&…

Foundation框架-16-文件处理(一)

本章和下一章节主要描述下Foundation框架处理文件的一些API类。 NSFileManager管理目录和文件 文件操作的所有工作基础全是由NSFileManager提供的&#xff0c;它提供了很多实用方法&#xff0c;基本使用方法如下&#xff1a; 主要功能 创建一个新文件。从现有文件中读取数据…

自动化测试常见的三大问题及解决方案

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

tensorflow list_files需要注意的点

tensorflow 读取tfrecord的时候 list_files几乎是避不开的函数&#xff0c;在tensorflow的官方文档中写了&#xff0c;list_files 支持正则表达式。 但是这里面有个比较坑的点&#xff1a;我们点开list_files的源码&#xff0c;会发现调用了gen_io_ops.matching_files。这个是t…

【Entity Framework】你必须要了解EF中数据查询之数据加载

【Entity Framework】你必须要了解EF中数据查询之数据加载 文章目录 【Entity Framework】你必须要了解EF中数据查询之数据加载一、概述二、预先加载2.1 包含多个层级2.2 经过筛选的包含 三、显示加载3.1查询关联实体 四、延时加载4.1 不使用代理进行延迟加载 一、概述 Entity…

如何在Python中实现文件读写操作? —— Python文件操作全指南:读写文件的最佳实践

在Python中&#xff0c;读写文件是常见的操作之一。本文将为您提供一些最佳实践&#xff0c;以帮助您在Python中进行文件操作。 打开文件 在Python中&#xff0c;可以使用open()函数打开文件。该函数接受两个参数&#xff1a;文件路径和打开模式。打开模式有许多选项&#xf…

平板拖把头建模

没找到合适的配件&#xff0c;只能自己做了。 difference(){union(){cylinder(11.5,10,10,$fn365);translate([-10,0,0])cube([20,16,11.5]);rotate([0,90,0])translate([-11.5/2,16-3-2,-18])cylinder(2088,3,3,$fn365);}translate([0,0,-1])cylinder(13,2.5,2.5,$fn365); }

飞腾UEFI电源控制选择代码解析

飞腾UEFI电源控制选择代码解析 CPLD 处理方式EC 处理方式注:本文以飞腾UEFI edk-code-4.2.0版本进行说明,如果有朋友需要借鉴,请使用该版本代码。 以D2000打工工具为例,下图打包工具中有选择主板电源管理方式,这里可以选择CPLD、EC、和SE,其中SE代表为X100控制上下电时序…

arm中模/数转换器工作原理以及I2C工作原理

ADC介绍 什么是ADC ADC就是模拟到数字转换器(Analog-to-Digital Converter)的缩写。 它是一种电子设备或模块,S3C2440内部拥有一个ADC外设。用于将连续变化的模拟信号转换为离散的数字信号,以便数字系统(如微处理器、微控制器等)能够对其进行处理和分析。 模拟信号:一…

用Gold-yolo模块改进yolov8模型

gold-yolo论文&#xff1a; https://arxiv.org/pdf/2309.11331.pdf gold-yolo代码&#xff1a; https://github.com/huawei-noah/Efficient-Computing/tree/master/Detection/Gold-YOLO 一 gold模块简介 Gold-Yolo是华为诺亚方舟实验室2023年发布的工作&#xff0c;主要优化检…

护网行动 | 蓝队应急响应流程概述

了解蓝队应急响应的流程 应急响应通常是指为了应对各种意外事件发生前所做的准备&#xff0c;以及在意外事件发生后所采取的措施。 网络安全应急响应是指对已经发生或可能发送的安全事件进行监控、分析、协调、处理、保护资产安全。 网络安全应急响应主要是为了让人们对网络安全…

新拉取的解决方案,dotnet build初始化后重新生成报MSB4018 “GenerateStaticWebAsssetsPropsFile”任务意外失败

拉取abp新解决方案后&#xff0c;执行初始化dotnet build--生成项目和所有的依赖 但是生成仍然报错&#xff1a; 错误 MSB4018 “GenerateStaticWebAsssetsPropsFile”任务意外失败。 System.IO.DirectoryNotFoundException: 未能找到路径“E:\TZKJNet\绿色建材\greeni…

【深度学习】执行wandb sync同步命令报错wandb: Network error (SSLError), entering retry loop

执行wandb sync同步命令报错wandb: Network error (SSLError), entering retry loop 在代码中设置wandb offline的命令 os.environ["WANDB_API_KEY"] "API keys" os.environ["WANDB_MODE"] "offline"日志文件生成后&#xff0c;使…

sqlilabs靶场1—20题学习笔记(思路+解析+方法)

前几个题目较为简单&#xff0c;均尝试使用各种方法进行SQL注入 第一题 联合查询 1&#xff09;思路&#xff1a; 有回显值 1.判断有无注入点 2.猜解列名数量 3.判断回显点 4.利用注入点进行信息收集 爆用户权限&#xff0c;爆库&#xff0c;爆版本号 爆表&#xff0c;爆列&…

基于springboot的医护人员排班系统

随着信息技术在管理上越来越深入而广泛的应用&#xff0c;管理信息系统的实施在技术上已逐步成熟。本文介绍了医护人员排班系统的开发全过程。通过分析医护人员排班系统管理的不足&#xff0c;创建了一个计算机管理医护人员排班系统的方案。文章介绍了医护人员排班系统的系统分…