VSCode 教程

🌙
手机阅读
本文目录结构
axihe

Visual Studio Code

vscode

VS Code

Visual Studio Code(国内一般都不喊全名,都是简称 VS Code),是一个由微软开发,同时支持 Windows 、 Linux 和 macOS 操作系统的开放代码编辑器。

以前的前端开发者讨论使用什么软件写代码的时候,讨论最火热的是`webstorm`和`sublim`哪个好,自从巨硬强力退出 vscode 以后,sublim 已经被干到七零八碎了。

vscode 支持内置了 Git 版本控制,同时也具有开发环境功能,例如代码补全、代码片段和代码重构等;

也支持用户个性化配置,例如改变主题颜色、键盘快捷方式等各种属性和参数;

同时还在编辑器中内置了扩展程序管理的功能(这个是一个大杀器,一定要多用,有很多效率插件)

vscode 是一个带 GUI 的代码编辑器,也就是只能完成简单的代码编辑功能,并不是一个集成开发环境/IDE(但是我感觉和IDE也差不多了)。

安邦与 vscode

我最开始对于 vscode 的态度是比较排斥的,我一直以为这个世界上,没有比 webstorm 还好用到前端代码编辑器或 IDE 了,直到 2017 年的时候,我的 webstorm 到期了(webstorm 是需要付费的),我抱着试试看到态度,尝试了几个月用 vscode 写代码,深度体验后到感觉就是”真香!!!”

功能和语言支持

Visual Studio Code 支持多种编程语言,集成终端,可以在编辑器中运行脚本、编译软件、调试脚本、设置断点、做版本管理。

VSCode 的许多功能可以通过“命令面板”来调用。用户可以在命令面板中搜索和输入命令,从而实现指定功能,例如安装扩展、设置属性等。默认情况下,打开命令面板的快捷键是 Ctrl+Shift+P,Mac 下是command + shift + p

内置一套易于使用的配置界面,同时支持使用 json 文件配置,在控制面板做的所有设置都会自动保存到 json。方便备份或部署。

Code 具备了现代文本编辑器所具有的功能,

例如更改字符编码、更换换行符、语法高亮、支持正则表达式、安装扩展、创建 snippet 等。

VSCode 使用导读

如果你以前熟练使用 VIM,那么这些快捷键其实是差不多的;

如果你以前没有使用过 VIM,或者不能熟练使用 VIM,那么推荐看下 VSCode 的用法,没有 VIM 的难度,却有 VIM 的大部分效率。

如果你是第一次接触 VSCode

如果你是第一次接触 VSCode,下面链接可能是你需要的

如果你已经安装了 VSCode

如果你对 VSCode 使用的了解并不多

鼠标篇

不那么重要的技巧

如果你对 VSCode 已经使用的非常熟练

那么下面的一些文章可能帮助你快速的提高效率

更多的技巧请在目录栏自己点击查看

注意!注意!注意!

第一点:如果你使用 VSCode 来写代码,请记得一定要保存后再预览你的项目!如果你忘记保存了,可能会让你很慌!或者你开自动保存

第二点:如果你是 VSCode 写代码,请记得一定要确保你正在编辑的代码,正是你当前浏览页面的对应文件;

如果你一直 Coding,无论怎么改代码,结果最终效果都不变,那可能就是因为上面两个原因导致的!!!

VSCode 是开源与开放的平台

首先,VS Code 的源代码以 MIT 协议开源。这不仅意味着大家能够免费获取到 VS Code 的核心代码,更意味着社区能够基于 VS Code 的代码,开发自己的产品。

业界现在比较知名的基于 VS Code 的项目有 SourceGraph、StackBlitz、CodeSandbox 等,这些产品可以提供非常接近 VS Code 的开发体验,而 VS Code 也经常从它们身上吸取技术和产品层面的宝贵经验。

其次,开发过程和反馈渠道的开放。 VS Code 源代码托管在 GitHub 上,同时使用 GitHub 管理项目的开发计划和测试,每个用户都可以在 GitHub 上了解到 VS Code 的开发进度。与此同时,GitHub 也是 VS Code 唯一的反馈渠道,开发团队根据反馈的影响程度进行统筹安排。作为用户,你可以近乎实时地跟开发团队进行交流,了解产品的发展情况。

再次,接口的开放。VS Code 自带了 TypeScript 和 Node.js 的支持,用户下载 VS Code 后,立刻就能够在书写 JavaScript 和 TypeScript 时获得智能提示,而且无需任何配置即可立即调试 Node.js 代码。VS Code 核心团队有 Node.js 高手,TypeScript 也是微软官方出品的,VS Code 能把对这两个语言的支持做好,似乎并不是什么值得惊讶的事情。但是 VS Code 团队不可能精通所有语言,对于他们不熟悉的语言,VS Code 该怎么支持呢?

最好的办法莫过于把专业的事情交给专业的人来做。为此,VS Code 为编程语言工作者提供了统一的 API ,即 Language Server Protocol 和 Code Debugging Protocol,每种语言都能够通过实现两个 API 在 VS Code 上得到类似 IDE 的开发和调试体验。

而且 VS Code 也并没有因为 TypeScript 是微软嫡出就给开小灶,而是对大家都一视同仁,TypeScript 能够得到的支持,其他语言一个也不落下。比如 Rust 的语言支持,就是由 Rust 官方团队开发和维护的,他们可以说是这个世界上最懂怎么给 Rust 做语法支持的一群人了。

在这样的平台上,编辑器开发者、编程语言工作者和社区,各自做自己最擅长的事情,把份内事做到极致。同时,从开发到测试,再到用户反馈都是公开透明的,每个人都能参与其中,把产品往自己希望的方向推进。VS Code 的技术实践和成果,最后也以开源的形式回馈给社区,让大家都能够借助 VS Code 去打造自己的产品,一起成功。

VSCode 学习路线

简短地了解了 VS Code 后,你肯定还想知道该如何把 VS Code 玩的熟练些。

你可以按照以下三个步骤来逐步掌握 VS Code。

核心编辑器的使用

VS Code 有一套自己的快捷键,你可以通过快捷键的学习了解核心编辑器所支持的功能。同时, VS Code 允许自定义快捷键的映射,如果你有自己熟悉的一套快捷键操作,也可以无缝地在 VS Code 上使用。

除了快捷键,VS Code 对鼠标操作、多光标、搜索都有完备的支持;

在编程语言的支持上面,VS Code 也向 IDE 看齐,自动补全、代码片段等一应俱全。

掌握了核心编辑器,VS Code 就能够胜任你的日常通用编辑器。

工作台、工作区的使用

VS Code 中除了编辑器区域,还有很多其他的功能,像是资源管理器、跨文件搜索、插件管理等,它们一起组成了统一的界面,我们称之为工作台。

这个工作台的设计,代表了 VS Code 对工作流的选择。内置的软件版本管理,终端模拟器,调试器等,掌握这些 VS Code “钦定”的工具,进一步提升工作效率。

VS Code 定制和插件开发

作为一个百万级别用户量的工具,很多功能的默认设置不可能满足每个人或者每个工作场景,你可以学习如何定制 VS Code 的各个部件,不能永远按部就班;

对于 VS Code 没有实现的功能,还可以学习一下如何使用 JavaScript 书写插件,把自己的想法,变成工具的一部分。

通过这三个步骤,你在使用 VS Code 时就能够“随心所欲”了。

除此之外,我也建议你关注 VS Code 每月的发布更新日志,官方团队会详细讲解每个版本新增的功能。

VS Code 的官方博客也非常值得订阅,团队成员会经常分享开发过程的心得感悟,算得上是最前沿的技术分享。

参考


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang