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的安装与配置,且随着您认真练习使用次数的增加,您对此软件的掌握我相信不止于此,如果您对此软件或其他有进阶的要求,请移步至我的博客进行其余的修炼计划。

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

一、资源背景 MySQL 是全球最受欢迎的开源关系型数据库管理系统之一,广泛应用于各类网站、企业应用和大数据处理场景。无论是初学者还是有一定经验的开发者,掌握 MySQL 的安装配置都是必不可少的技能。本教程旨在为用户提供一份从零开始、详细到极致的 MySQL 安装配置指南,帮助用户轻松搭建稳定、高效的 MySQL 数据库环境。 二、教程内容概述 (一)安装前准备 环境检查 详细说明操作系统版本要求(如 Windows、Linux、macOS 的具体支持版本),并提供检查系统版本的方法。 检查系统是否已安装旧版本 MySQL,若有,指导用户如何安全卸载,避免版本冲突。 介绍必要的系统权限要求,例如在 Linux 系统中,需要 root 用户权限来安装 MySQL。 资源获取 提供 MySQL 官方下载地址,并解释如何根据操作系统类型、版本以及处理器架构(如 x86、ARM)选择合适的安装包。对于 Windows 系统,有 MSI 安装包和 ZIP 压缩包两种形式;对于 Linux 系统,有 RPM 包、DEB 包以及源码编译等多种安装方式;对于 macOS,也有对应的 DMG 安装包。 介绍一些可靠的第三方镜像站点,方便用户在官方下载速度较慢时选择备用下载源。 (二)安装过程 Windows 系统安装 MSI 安装安装 逐步讲解双击 MSI 文件启动安装向导后,如何选择安装路径、组件(如是否安装 MySQL Workbench 等图形化工具)、配置类型(典型安装、自定义安装)等选项。 详细说明安装过程中可能出现的错误提示,例如权限不足、磁盘空间不足等,并提供相应的解决方法。 ZIP 压缩包安装 指导用户如何解压 ZIP 文件到指定目录,然后手动配置 MySQL 的数据目录、配置文件(my.ini)等关键信息。
VSCODE是一款功能强大的代码编辑器,下面是一些使用教程的内容: 1. 使用命令面板:在VSCODE中,你可以使用命令面板来快速搜索和执行命令。你可以通过按下Ctrl+Shift+P(Windows/Linux)或者Cmd+Shift+P(Mac)来打开命令面板。在命令面板中,你可以输入关键字来搜索需要的命令,并且通过键盘操作来执行命令。\[1\] 2. 安装VSCODE:在安装VSCODE时,你可以选择使用User Installer版本或者System Installer版本。User Installer版本是默认提供的版本,而System Installer版本可以自定义安装路径,方便后期管理。根据实际开发需求和对系统文件管理的难易度,我更推荐使用System Installer版本。\[2\] 3. 使用命令行打开文件:你可以使用命令行来打开文件或者文件夹。在命令行中输入"code"命令,后面加上文件或者文件夹的地址,VSCODE就会在一个新窗口中打开该文件或文件夹。如果你希望使用已经打开的窗口来打开文件,可以在"code"命令后添加参数"-r"来进行窗口的复用。\[3\] 希望以上信息对你有帮助!如果你还有其他问题,请随时提问。 #### 引用[.reference_title] - *1* *3* [Visual Studio Code 入门教程](https://blog.youkuaiyun.com/duleilewuhen/article/details/121706354)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [VSCode安装配置使用教程最新版超详细保姆插件一文了](https://blog.youkuaiyun.com/MSDCP/article/details/127033151)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论 30
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

神兽汤姆猫

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值