VSCode如何更好用?VSCode新手指南分享

如何让 vscode 更好用10倍?下面本篇文章给大家分享一份vs code 新手指南。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

VSCode如何更好用?VSCode新手指南分享

相关推荐:《vscode教程》

“VS Code 写代码是真好用、真爽。”

想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中,VS Code 也是以压倒性的优势获胜第一,其他的编辑器只能被无情碾压在地上摩擦……

VSCode如何更好用?VSCode新手指南分享
JS 2019 报告

但是呢,VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的,需要额外安装一些插件、掌握一些快捷键和技巧,才能顺手的用起来。

我们花了一周的时间,为你整理了可能是最全的 VS Code 新手指南,分为快捷键速查表、10个超好用插件、新手使用教程三部分,让小白也能快速上手、效率加倍。

● 快捷键速查表

先上两张我们整理的 VS Code 常用快捷键的速查表:

VSCode如何更好用?VSCode新手指南分享
Mac 快捷键

VSCode如何更好用?VSCode新手指南分享
Windows/Linux 快捷键

快捷键用熟了,才能发现 VS Code 有多方便。真正的大神写起代码来那是手不离键盘。

● 10个超好用插件

VSCode如何更好用?VSCode新手指南分享

Chinese(Simplified) Language Pack for Visual Studio Code

‍ Microsoft

3,358,698 下载量

安装之后一秒汉化 VS code ,再也不用担心看不懂英文。

VSCode如何更好用?VSCode新手指南分享

City Lights theme

‍ Yummygum

54,054 下载量

VSCode如何更好用?VSCode新手指南分享

这是一个不错的主题插件,不过挑选主题还是看个人,也可以在直接搜索 “theme”能得到很多主题,找到合适自己的。

VSCode如何更好用?VSCode新手指南分享 

VSCode如何更好用?VSCode新手指南分享

Beautify

‍ HookyQR

3,998,071 下载量

可以放大标记,调整代码间距,快速格式化代码,可以让杂乱的 HTML、CSS、JS代码瞬间变得整齐,利于他人阅读,也方便后期维护。

VSCode如何更好用?VSCode新手指南分享

vscode-icons

‍ VSCode Icons Team

4,237,487 下载量

设置文件图标,根据各种类型的文件,设置对应的文件图标,我们看文件列表的时候,一目了然,能快速找到需要的文件(特别是文件多,类型也多的时候)。

VSCode如何更好用?VSCode新手指南分享        

VSCode如何更好用?VSCode新手指南分享

Image preview

‍ Kiss Tamás

123,990下载量

光标悬浮在图片路径上时,显示图片预览,这样我们在敲代码的时候一下子就能知道有没有引用了正确的图片或图标。

VSCode如何更好用?VSCode新手指南分享

VSCode如何更好用?VSCode新手指南分享

Code Spell Checker

‍ Street Side Software

970,955下载量

我们日常敲代码很多命名都是使用英文单词,粗心的小伙伴可能会拼错,这个插件就是单词拼写错时的拯救神器,它可以标志错的单词,还可以提示单词的正确拼法。有了它,就再也不用因为单词拼错找半天的 bug 了

VSCode如何更好用?VSCode新手指南分享

VSCode如何更好用?VSCode新手指南分享

Live Server

‍ Ritwick Server

3,551,236下载量

做前端开发的时候,我们需要打开浏览器进行预览和调试页面。这个插件就可以实现静态、动态页面的实时预览,保存就能看见页面更新,不需要手动去刷新。

VSCode如何更好用?VSCode新手指南分享

VSCode如何更好用?VSCode新手指南分享

indent-rainbow

‍ oderwat

567,061下载量

写代码的时候,能提示我们的缩进是否到位,每步交替四种不同的颜色,没有到位的话颜色变红,看着代码整整齐齐的就很舒心。

VSCode如何更好用?VSCode新手指南分享

VSCode如何更好用?VSCode新手指南分享

vscode教程0

‍ 2gua

367,290下载量

为圆括号,方括号和弯曲的括号提供彩色;相同颜色表示相同级别的括号,孤立的右括号以红色突出显示,对写 JavaScript 的人比较有用。

VSCode如何更好用?VSCode新手指南分享

VSCode如何更好用?VSCode新手指南分享

vscode教程1

‍ Jeff Hykin

4,704下载量

可以把代码保存成美观的图片,主题不同,代码配色方案也不同,也可以自己设置边框颜色、大小、阴影,在教程或者文档中提供代码示例时挺有用的。

VSCode如何更好用?VSCode新手指南分享

● VS Code 新手使用教程

① 安装 VS code

VS Code 官方下载地址:https://code.visualstudio.com

根据自己的电脑下载对应的版本,然后安装即可。

② 进入 VS code

界面上分为这几个部分,先整体了解下每个部分是做什么的

VSCode如何更好用?VSCode新手指南分享

③ 安装 VS Code 插件

VSCode如何更好用?VSCode新手指南分享

上面提到的超好用的插件,在这里就可以安装。

④ 开始写代码

首先在自己的电脑新建一个文件夹

VSCode如何更好用?VSCode新手指南分享

然后在 VScode 里面打开这个文件夹,也可以按快捷键 (Command /Ctrl+ O)

VSCode如何更好用?VSCode新手指南分享

新建文件(Command/Control + N),要写后缀名,VScode 才能识别出来是什么类型的文件。

VSCode如何更好用?VSCode新手指南分享

⑤ 开始运行代码

编辑代码,保存,用的是上面推荐的 Live Server 插件预览,安装插件后,右键选择 ” Open with Live Server “打开或点击右下角的 “Go Live”

VSCode如何更好用?VSCode新手指南分享        VSCode如何更好用?VSCode新手指南分享

更多编程相关知识,请访问:vscode教程2!!

以上就是VSCode如何更好用?VSCode新手指南分享的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/61126.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月10日 23:27:14
下一篇 2025年11月10日 23:27:58

相关推荐

  • Windows 11下PHP和前端开发:WSL2宝塔面板还是Docker宝塔面板更优?

    在 Windows 11 系统中进行 PHP 和前端开发,选择 WSL2 还是 Docker 作为开发环境一直是开发者关注的焦点。本文将对比分析在 WSL2 中直接安装宝塔面板与使用 Docker 容器(包含宝塔面板)两种方案的优劣,帮助您做出最佳选择。 目前,许多开发者采用 Docker 容器结合…

    2025年12月10日
    000
  • VSCode运行PHP报错“Class ‘mysqli’ not found”:如何解决?

    VSCode下PHP程序报错:Class ‘mysqli’ not found 在使用VSCode运行PHP代码时,遇到“Class ‘mysqli’ not found”错误,表示PHP无法找到mysqli扩展。 问题原因分析 该错误通常是因为PHP…

    2025年12月10日
    000
  • 如何在VSCode中实现ThinkPHP 6的代码提示?

    提升VSCode ThinkPHP 6开发效率:代码提示配置指南 高效的代码提示是流畅开发ThinkPHP 6应用的关键。本文将指导您如何在VSCode中轻松实现ThinkPHP 6的代码提示功能。 实现代码提示 借助合适的VSCode扩展,您可以轻松获得ThinkPHP 6的代码提示支持。 立即学…

    2025年12月10日
    000
  • VSCode 如何配置 ThinkPHP6 代码提示?

    VSCode ThinkPHP6 代码提示配置指南 在使用 VSCode 开发 ThinkPHP6 项目时,如果没有代码提示功能,将会大大降低开发效率。 本指南将指导您如何配置 VSCode,实现 ThinkPHP6 的代码自动补全。 第一步:安装扩展 首先,您需要安装 phpdoc comment…

    2025年12月10日
    000
  • VSCode 如何启用ThinkPHP6代码提示?

    VSCode 中启用 ThinkPHP6 代码提示的简易指南 在使用 VSCode 开发 ThinkPHP6 项目时,代码提示功能至关重要。本文将指导您如何轻松实现此功能。 为了获得 ThinkPHP6 的智能代码提示,您需要安装一个 VSCode 扩展: PHP DocBlocker: 此扩展程序…

    2025年12月10日
    000
  • 学习PHP的iOS开发者该如何选择编辑器?Syntra Small够用吗?

    为 PHP 学习选择最佳编辑器 作为一名网络开发人员,选择一款合适的编辑器至关重要。对于初学者,这可能让人无所适从。如果您正在学习 PHP,那么选择一款高效且易于使用的编辑器可以让您的学习之旅更加顺畅。 问题:对于 iOS 系统,您推荐使用哪款 PHP 编辑器?Syntra Small 是否是一个不…

    2025年12月9日
    000
  • PHP初学者,特别是iOS用户,应该选择哪个编辑器?

    PHP 编辑器的选择 对于初学者来说,学习 PHP 是一个明智的选择,但是选择合适的编辑器至关重要,尤其对于 iOS 用户。虽然 Syntra Small 可以在打英文时使用,但它在处理中文时会遇到问题。 推荐的 PHP 编辑器 推荐的 PHP 编辑器包括: 立即学习“PHP免费学习笔记(深入)”;…

    2025年12月9日
    000
  • .NET开发者学习PHP,哪个编辑器更好用?

    php开发编辑器推荐 对于.net开发人员学习php,选择合适的编辑器至关重要。本文将介绍Syntra Small的局限性,并推荐一个替代方案——VSCode。 Syntra Small的局限性 Syntra Small是一种适用于iOS系统的php编辑器。虽然它对于键入英语文本是合适的,但在输入中…

    2025年12月9日
    000
  • iOS系统下学习PHP,哪个编辑器最适合.NET开发者?

    学习php编辑器推荐 一位.NET开发者询问在iOS系统下学习PHP并寻找合适的编辑器。 推荐编辑器: 回答者推荐[VSCode](https://code.visualstudio.com/),并提供了配置指南链接。 Syntra Small工具的局限性: 立即学习“PHP免费学习笔记(深入)”;…

    2025年12月9日
    000
  • PHP初学者如何选择合适的编辑器?

    为 PHP 开发选择合适的编辑器 作为一名原本从事 .NET 开发的工程师,在公司要求下开始学习 PHP 后,您可能想知道使用哪种编辑器最合适。在 Mac 系统上,您已设置好 PHP 环境,可以使用 Syntra Small。然而,在输入汉字时遇到问题。 对于 PHP 开发,许多经验丰富的工程师推荐…

    2025年12月9日
    000
  • 前端和企业 PHP 开发者,哪个 IDE 更适合你?

    php ide 比较 对于偏向于前端和企业发展的 PHP 开发人员,这里推荐几个好用且专业的 IDE 选项: PHPStorm PHPStorm 是 JetBrains 开发的一款强大的 PHP IDE,深受开发人员的喜爱。它提供了许多高级功能,包括: 智能代码完成代码重构和重构版本控制集成调试和性…

    2025年12月9日
    000
  • 什么是 Xdebug?

    Xdebug 是一个强大的 PHP 调试和分析工具。它为开发人员提供了增强其调试和优化 PHP 应用程序能力的功能。以下是 Xdebug 的一些主要功能和用途: Xdebug 的主要特点 调试: 远程调试:Xdebug 允许您通过远程连接从 IDE 或编辑器调试 PHP 应用程序,使您能够单步执行代…

    2025年12月9日
    000
  • 婴儿学步学习 Laravel

    欢迎回来,开发者! ✨ 在 laravel 之旅的这一章中(请记住,我在撰写这些文章时正在学习,因此这将是您能找到的最现实的教程系列之一!),我们将深入研究我们的 laravel 项目。我们将探索项目结构,熟悉迁移,并以最简单的方式分解 mvc 架构。 ?今天的议程: 探索我们的项目结构 ?️ 了解…

    2025年12月9日
    000
  • VSCode选择范围提供者实现

    Selection Range Provider是VSCode中用于实现层级化代码选择的API,通过注册provideSelectionRanges方法,按光标位置从内到外逐层扩展选择范围,如从变量名扩展至函数体;需结合AST解析构建准确的SelectionRange链式结构以提升选择智能性。 在 …

    2025年12月6日 开发工具
    000
  • VSCode终端美化:功率线字体配置

    首先需安装Powerline字体如Nerd Fonts,再在VSCode设置中将terminal.integrated.fontFamily设为’FiraCode Nerd Font’等支持字体,最后配合oh-my-zsh的powerlevel10k等Shell主题启用完整美…

    2025年12月6日 开发工具
    000
  • VSCode入门:基础配置与插件推荐

    刚用VSCode,别急着装一堆东西。先把基础设好,再按需求加插件,效率高还不卡。核心就三步:界面顺手、主题舒服、功能够用。 设置中文和常用界面 打开软件,左边活动栏有五个图标,点最下面那个“扩展”。搜索“Chinese”,装上官方出的“Chinese (Simplified) Language Pa…

    2025年12月6日 开发工具
    000
  • VSCode性能分析与瓶颈诊断技术

    首先通过资源监控定位异常进程,再利用开发者工具分析性能瓶颈,结合禁用扩展、优化语言服务器配置及项目设置,可有效解决VSCode卡顿问题。 VSCode作为主流的代码编辑器,虽然轻量高效,但在处理大型项目或配置复杂扩展时可能出现卡顿、响应延迟等问题。要解决这些性能问题,需要系统性地进行性能分析与瓶颈诊…

    2025年12月6日 开发工具
    000
  • VSCode的悬浮提示信息可以自定义吗?

    可以通过JSDoc、docstring和扩展插件自定义VSCode悬浮提示内容,如1. 添加JSDoc或Python docstring增强信息;2. 调整hover延迟与粘性等显示行为;3. 使用支持自定义提示的扩展或开发hover provider实现深度定制,但无法直接修改HTML结构或手动编…

    2025年12月6日 开发工具
    000
  • VSCode插件:GitLens使用详解

    GitLens是VSCode中强大的Git增强插件,提供行级代码追踪、提交历史浏览、版本对比、跨文件导航及与GitHub等平台集成;通过启用Current Line Blame和In-Line Blame,可实时查看每行代码的作者与修改时间;支持按分支、作者过滤提交记录,比较差异,并利用Go Bac…

    2025年12月6日 开发工具
    000
  • VSCode调试:快速定位与修复问题

    掌握VSCode调试技巧可提升开发效率。首先设置断点并配置launch.json文件,通过“运行和调试”面板启动调试;程序暂停时利用变量窗格查看数据状态,结合调用栈追溯函数执行路径;使用调试控制台动态执行代码、验证逻辑;针对高频调用场景,可设置条件断点(如i===100)或日志断点输出信息而不中断执…

    2025年12月6日 开发工具
    000

发表回复

登录后才能评论
关注微信