VSCode安装配置使用教程软技收集2024年10月21日 13:32:03更新关注私信 共计4215字,阅读大约需要14分3秒 0360 加入QQ群 QQ联系我 微信公众号 微信联系我 在线联系站长 本文章来源于(意在于备份和收藏): https://blog.csdn.net/msdcp/article/details/127033151 软件简介 Visual Studio Code(简称VS Code)是一个由微软开发,同时支持Windows、Linux和Mac等操作系统的免费代码编辑器,它支持调试,并内置了Git版本控制功能,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等。该编辑器支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数,同时还在编辑器中内置了扩展程序管理的功能。 1.VSCode的下载 进入VSCode官方的下载页,根据系统需求选择相对应的下载地址。 官方下载页面—>:VSCode官方下载页面链接,选择自己系统对应的下载链接。 User Installer版:会安装在当前计算机帐户目录,意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。 System Installer版:安装在非用户目录,例如C盘根目录,任何帐户都可以使用。(建议使用此版本) vscode默认提供的User Installer版,大多数人都是用的这个版本。 关于具体下载哪个版本我进行了大量的调研,发现网络上大部分的教程都是选择的VSCode默认提供的User Installer版本。但是对于我们实际和真正的开发,以及我们对于系统文件的管理难易度上来讲我更推荐System Installer版本,它可以自定义安装路径,使其我们后期对于它的管理十分方便。 2.VSCode的安装 此处我选择了System Installer版本,原因无它,因为它可以自定义安装路径,使其我们后期对于它的管理十分方便,我也十分建议你选择此版本安装。 同意协议选择同意协议,点击下一步 选择安装位置选择安装位置,单击浏览按需选择自己要设置的安装路径位置。然后点击下一步即可 注意:为了后期的稳定性,切勿使用中文路径。 选择开始菜单文件夹如需修改,请点击浏览进行设置,无需修改直接单击下一步即可 选择附加任务按需选择自己需要的附加任务,建议将以下4项都勾选上 设置完毕最后单击下一步 注意:添加到PATH一定要勾选,很重要。 准备安装确认自己前面设置的是否有误,无误则点击安装即可 安装完成如果你看到如下界面,那么恭喜你,你的VSCode安装完成。 3.VSCode基础配置 VSCode界面简介 VS Code 采用通用的用户界面和左侧的资源管理器布局,显示您可以访问的所有文件和文件夹,右侧的编辑器显示您打开的文件的内容。 关于对上图界面的区域解释: 区块颜色区块名称区块作用红色活动栏位于最左侧,可让您在视图之间切换,并为您提供额外的特定于上下文的指标,例如启用 Git 时传出更改的数量。绿色侧栏包含不同的视图,例如资源管理器,可在您处理项目时为您提供帮助。粉色 状态栏有关已打开项目和您编辑的文件的信息。紫色面板您可以在编辑器区域下方显示不同的面板,用于输出或调试信息、错误和警告或集成终端。面板也可以向右移动以获得更多垂直空间。白色编辑区编辑文件的主要区域。您可以垂直和水平并排打开任意数量的编辑器。黄色菜单栏进行VSCode的各项操作 活动栏简单介绍作用编辑器打开的文件全局搜索Debug插件安装用户登录VSCode设置 经过如上对VSCode界面基本的了解,我们在活动栏区域找到插件安装这个选项,单击它,在搜索框中搜索Chinese 选择第一个即可,选择Install进行安装。 安装完毕,右下角会弹出如下提示框,单击Restart重启VSCode即可完成。 4.VSCode个性化设置 我们找到设置,选择颜色主题 会弹出如下框选,此时我们根据自己的喜好选择即可,如果你觉得没有,还可以选择浏览其他颜色主题进行预览选择。 其余文件图标主题和产品图标主题的个性化设置同理。 5.VSCode常用设置 打开活动栏的VSCode设置,我们在常用设置,设置字体大小,字体,是否自动保存等常用的设置项目,此处按需选择设置即可。 对于其他的设置也是同理,按需选择设置。 对于常用设置这一项,我的个人建议是将Files:AutoSave选项的off更改为onFocusChange选项(当编辑器失去焦点时,会自动保存具有更改的编辑器) 6.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 切换选项卡移动焦点 6.插件推荐 主题/外观美化区 ①Material Icon Theme: 它采用了 Google Material Design 风格,文件图标以及文件夹图标覆盖非常的全面,而且在暗黑模式下使用效果更佳。 ②Material Theme: 可以说是与Material Icon Theme师从一脉了 ③Rainbow Brackets 彩虹括号插件最新版VSCode已内置,无需安装,如需其他请使用Rainbow Brackets: ④Highlight Matching Tag: vscode的彩虹括号扩展。 这个扩展突出显示匹配的开始和/或结束标记。它还可以在状态栏中显示标签的路径。即使VSCode有一些基本的标签匹配,它也只是——基本的。这个扩展将尝试匹配标签的任何地方:从标签属性,字符串内部,任何文件,同时也提供了广泛的样式选项,自定义标签如何突出显示。 Git相关插件 ①GitHub Pull Requests and Issues: 允许您在 Visual Studio Code 中检查和管理 GitHub 拉取请求和问题。 ②Git History: 查看Git日志,提交文件历史,比较分支或提交 ③GitLens — Git supercharged: 通过Git Under注解和CodeLens使你可以直截了当的显示代码作者,无缝导航和探索Git存储库,通过丰富的可视化和强大的比较命令获得有价值的见解等 ④Git Graph: 查看存储库的Git Graph,并从该图轻松执行Git操作 Markdown语法插件 ①Markdown All in One : Markdown All in One 是 VSCode 热门的 Markdown 插件,可以在左边书写,右边即时预览。下图替大家展示了常用的快捷键,以供查阅。 Key CommandCtrl + B 粗体Ctrl + I 斜体Alt + S 删除线Ctrl + Shift + ] 标题(uplevel)Ctrl + Shift + [ 标题(downlevel)Ctrl + M 切换数学环境Alt + C 选中/取消选中任务列表项②Markdown Preview Enhanced: 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: 解决 VS Code 中的 LeetCode 问题 ②daily anime: VSCode追番摸鱼看剧必备,以下展示使用命令行使用此插件方法 ctrl+shift+p 打开命令面板命令行输入anime 打开番剧页面命令行输入hitokoto可随机展示一条句子 ③小霸王: 上班玩游戏必备!摸鱼之王必备! ④超越鼓励师: 梦里的超越将在你枯燥乏味的编辑器中鼓励你。 前端插件 ①Better Comments: 帮助在代码中创建更人性化的注释,有了这个扩展,你就可以把你的注释分类为:警报、查询、待办事项、突出。注释掉的代码也可以设置样式,以明确代码不应该出现在那里,你想要的任何其他评论样式都可以在设置中指定,不同注释可以显示不同的效果。 ②ESLint: 集成ESLint JavaScript到VS Code,一个适用于前端的规范提示插件。 ③vetur: 此插件可谓是前端必备,vetur 的特性: 语法高亮, 代码片段 (emmet 给我的感觉是一个写好了的 snippet), 质量提示 & 错误、格式化 / 风格、智能提示等。 ④Vue VScode Snippets: 构建代码片段的缩写节约开发时间 ⑤JavaScript (ES6) code snippets ES6语法中的JavaScript代码片段 柳ES7+ React/Redux/React-Native snippets: 扩展React, React- native和Redux在JS/TS与ES7+语法 ⑦Image preview: 显示图像预览在槽和悬停,图片是否正确引入的显示工具,在链接处按ctrl,鼠标悬浮即可使用,确定是否正确找到路径下的图片。 ⑧Auto Rename Tag: 自动重命名成对的HTML/XML标记,与Visual Studio IDE相同。 ⑨HTML CSS Support: HTML的CSS智能感知,支持链接和嵌入式样式表、支持模板继承、支持其他样式表、支持其他HTML之类的语言、根据需要验证CSS选择器。 使用方法:通过Ctrl + space查看id和class属性建议列表。 温馨提示:本文最后更新于2024年10月21日 13:32:03,某些文章具有时效性,若有错误或已失效,请在下方留言或联系站长。 本文资源整理自网络,仅供学习和研究使用,请在下载后24小时内删除,谢谢合作! 如果觉得本文有用就按Ctrl+D收藏,方便以后随时翻看,免得想看时又找不着 或 发现更多 十月 2 本站历史上的今天 "吼吼~~~,往年的今天站长不知道跑哪里偷懒去了~~~" © 版权声明 软技收集版权声明 ① 本网站名称:❤软技收集❤ 本站永久网址:▶https://rjasj.com◀ ② 如果您喜欢本站, 点击这儿 开通VIP,同时按Ctrl+D保存网页。 ③ 在浏览网站中可能会帮助到您: 使用帮助 | 报毒说明 | 侵权删除 | | ④ 本站接受投稿,同时也开启了创作分成,投稿用户只需自行设置收费即可!点击查看 如果需要投稿,请点击投稿 发布文章! ⑤ 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。 ⑥ 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。 ⑦ 修改版本安卓及电脑软件,加群提示为修改者自留,非本站信息,注意鉴别。 ⑧ 本网站部分资源来源于网络,仅供大家学习与参考,请于下载后24小时内删除。 ⑨ 若作商业用途,请联系原作者授权,若本站侵犯了您的权益请联系站长进行删除处理。 THE ENDVSCode安装使用教程技术分享 喜欢就支持一下软技收集吧点赞0赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏