搜索
首页开发工具VSCodeVSCode如何更好用?VSCode新手指南分享

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

Mar 01, 2021 am 10:28 AM
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新手指南分享

Rainbow Brackets

‍ 2gua

367,290下载量

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

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

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

Polacode-2019

‍ 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如何更好用?VSCode新手指南分享的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:知乎。如有侵权,请联系admin@php.cn删除
Visual Studio的可用性:哪些版本是免费的?Visual Studio的可用性:哪些版本是免费的?Apr 10, 2025 am 09:44 AM

VisualStudio的免费版本包括VisualStudioCommunity和VisualStudioCode。1.VisualStudioCommunity适用于个人开发者、开源项目和小型团队,功能强大,适合个人项目和学习编程。2.VisualStudioCode是一个轻量级的代码编辑器,支持多种编程语言和扩展,启动速度快,资源占用少,适合需要灵活性和可扩展性的开发者。

如何为Windows 8安装Visual Studio?如何为Windows 8安装Visual Studio?Apr 09, 2025 am 12:19 AM

在Windows8上安装VisualStudio的步骤如下:1.从微软官方网站下载VisualStudioCommunity2019安装包。2.运行安装程序并选择所需组件。3.完成安装后即可使用。注意选择与Windows8兼容的组件,并确保有足够的磁盘空间和管理员权限。

我的计算机可以运行与代码吗?我的计算机可以运行与代码吗?Apr 08, 2025 am 12:16 AM

VSCode可以在大多数现代电脑上运行,只要满足基本系统要求:1.操作系统:Windows7及以上,macOS10.9及以上,Linux;2.处理器:1.6GHz或更快;3.内存:至少2GBRAM(推荐4GB或更高);4.存储空间:至少200MB可用空间。通过优化设置和减少扩展使用,可以在低配置电脑上获得流畅的使用体验。

如何使程序与Windows 8兼容?如何使程序与Windows 8兼容?Apr 07, 2025 am 12:09 AM

要让程序在Windows8上顺畅运行,需采取以下步骤:1.使用兼容性模式,通过代码检测并启用该模式。2.调整API调用,根据Windows版本选择适当的API。3.进行性能优化,尽量避免使用兼容性模式,优化API调用并使用通用控件。

VS代码在Windows 8上有效吗?VS代码在Windows 8上有效吗?Apr 06, 2025 am 12:13 AM

是的,vscodeiscompatiblewithwindows8.1)下载theinstallerfromtherfromthevscodewebsiteandensuretheletheLatest.netframeworksinstalled.2)installextensionsionsthecommandline,installextensions inthecommandline,notsomemememandline,NoteMemeMemAlandlower.3)noteSmomeMayMayload

VS代码和Visual Studio有什么区别?VS代码和Visual Studio有什么区别?Apr 05, 2025 am 12:07 AM

VSCode是轻量级代码编辑器,适用于多种语言和扩展;VisualStudio是功能强大的IDE,主要用于.NET开发。1.VSCode基于Electron,支持跨平台,使用Monaco编辑器。2.VisualStudio使用微软自主技术栈,集成调试和编译器。3.VSCode适合简单任务,VisualStudio适合大型项目。

哪个代码编辑器可以在Windows 7上运行?哪个代码编辑器可以在Windows 7上运行?Apr 03, 2025 am 12:01 AM

在Windows7上可以运行的代码编辑器有Notepad 、SublimeText和Atom。1.Notepad :轻量级,启动快,适合老系统。2.SublimeText:功能强大,需付费。3.Atom:可定制性强,但启动慢。

哪些Windows支持Visual Studio?哪些Windows支持Visual Studio?Apr 02, 2025 pm 02:12 PM

VisualStudio支持的Windows版本包括Windows10、Windows11、Windows7和Windows8.1。1)建议使用Windows10或Windows11以获得最新的功能和最佳支持。2)确保硬件配置足够,特别是在进行大型项目开发时。3)VisualStudio2022对Windows11的支持更为优化,提供了更好的性能和用户体验。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用