地址:知乎 内容大纲

  1. VS Code 的优势

  2. VS 和 VS Code 到底有什么关系?

    • 微软从 VS 组里面抽了一拨人做 VS Code,是真的吗?
    • VS 支持 Java ?背后的真相到底是怎样的?
  3. 你真的会用 VS Code 了吗?

    • VS Code Insiders 版本
    • 常用的配置项
    • 命令面板
    • 面包屑导航/大纲/缩略图
    • 主题
    • 快捷键
    • 集成终端
  4. 如何更好地学习 VS Code ?

    • 学会提问
    • 学会搜索
    • 学会学习
  5. 一起改进 VS Code,你也能成为 VS Code 的 Contributor

  6. VS Code 的核心组件

    • Electron
    • Monaco Editor
    • Language Server Protocol
    • Debug Adapter Protocol
  7. VS Code 怎么做开源的?

  8. 进阶

    • 命令行
    • 玩转 Git
    • 打造自己的主题
    • 快速创建属于你的 Code Snippet
    • 玩转 Tasks,把重复的工作自动化
    • 调试
    • 远程开发
  9. 插件

    • 插件管理
    • 好用的插件推荐
    • 你也可以开发一款属于你的插件

VS Code 从入门到进阶 Link to heading

第一章 VSCode的优势 Link to heading

特点:开源、跨平台、轻量级、内置git支持、丰富的插件

你真的会用VS Code吗 Link to heading

快捷键 Link to heading

VSCode shortcut for windows 常见命令:

  • Ctrl+Shift+P或F1:调出命令面板,可以输出执行所有命令。
  • Ctrl+P:在不同的文件跳转
  • Ctrl+Shift+Tab:在所有打开的文件中进行跳转
  • Ctrl+Shift+O:跳转到文件中的Symbol
  • Ctrl+T:搜索当前文件夹下的所有Symbol
  • Ctrl+G:跳转到某一行
  • Alt+<-/->:向后/向前跳转 可以修改Preference->Keyboard Shortcuts的设置来修改键位,也可以下载键盘映射插件。

菜单栏-配置项 Link to heading

通过File-Preference-Settings可以访问配置项,可以修改所有的配置,包括扩展与否 常用配置项如下:

  • Editor: Format On Save,可以在保存时格式化文件
  • Files: Auto Save,控制已更新文件的自动保存
  • Files: Auto Save Delay,上面自动保存的间隔
  • Editor: Tab Size,规定一个制表符等于的空格数
  • Edirot: Insert Spaces,在按制表符的时候会自动插入空格
  • “file.exclude”:在打开VS code时有一些文件夹是默认不展示的,比如.git文件夹等。可以通过修改该配置项进行设置。
  • “search.exclude”:因为VS Code有内置的搜索功能,比如nodejs项目中,node module我就不希望搜索到,可以加入到这里面进行设置。

菜单-视图 Link to heading

最上方会有面包屑导航,可以方便的查看在工作区的位置。 左边会有大纲导航,方便查看变量级别。 右边有全文跳转,方便在全文中进行跳转。

主题 Link to heading

包括颜色主题或文件图标主题

集成终端/terminal Link to heading

  • Ctrl+`,打开终端
  • Ctrl+Shift+`,打开新的终端
  • Ctrl+Home,滚动到顶
  • Ctrl+End,滚动到底

如何更好地学习VS Code Link to heading

学会搜索:

  • 访问VSCode官网
  • 访问VSCode的github
  • Google
  • Stack Overflow

学会提问:描述清楚问题,方便别人帮助

  • 版本/环境/插件
  • 问题的步骤(是否可复现/复习过程)
  • 问题的期望行为与实际行为的比较
  • Code Sample,最好有error message
  • Screenshot

寻求帮助前一定要有自己的思考(不然会提出很多弱智问题) 知其然,更要知其所以然 学会举一反三

贡献:

  • 提问
  • issues
  • PRs
  • 插件
  • 翻译

讨论:

PRs:发PR前需要看一下PR指南:https://github.com/Microsoft/vscode/wiki/How-to-Contribute#pull-requests 一般标help-wanted或bug的标签是可以发PR的。

另外一个贡献的方式就是开发插件。

翻译:翻译指南https://aka.ms/vscodeloc

VSCode的核心组件 Link to heading

四个核心组件:

  • Electron
  • Monaco Editor
  • Language Server Protocol
  • Debug Adapter Protocol

Electron Link to heading

开发框架,基于Node.js和Chromium,使用HTML,CSS和JavaScript等前端技术来开发跨平台的桌面级应用程序

Monaco Editor Link to heading

基于浏览器的代码编辑器:IntelliSense,代码验证,语法高亮等特性

Language Server Protocol Link to heading

IDE与语言服务器之间的协议,可以允许开发人员在最喜爱的工具中使用各种语言来写程序。

DAP Link to heading

希望将编辑器与调试器解耦合,便于编辑器与其他Debugger的集成

VSCode是如何做开源的 Link to heading

开源的三个阶段:公开源代码->Issues&PRs->Planning&Design 实时更新,管理Issues和PR来交互,并且有着开发和设计的计划。

进阶功能 Link to heading

命令行 Link to heading

  • code .:在当前目录下打开新的VSCode
  • code -r .:在当前目录下覆盖打开VSCode
  • code -n:创建新的窗口
  • code --local=es:改变语言
  • code --diff <file1> <file2>:打开diff工具对两个文件进行比较
  • code --goto package.sjon:10:5:打开指定文件,指定行列(file:line[:character])
  • code --help:查看帮助选项
  • code --disable-extensions:禁止所有的扩展

命令行高级功能:

  • --status/-s:查看信息
  • extensions-dir <dir>:查看extension的根目录

打造自己的主题 Link to heading

https://code.visualstudio.com/api/references/theme-color

TmThemeEditor:https://ththeme-editor.herokuapp.com/

自己的代码片段 Link to heading

在当前工作目录的.vscode目录下 文件>首选项>用户代码片段即可,可以生成仅在当前工作区生效的VSCode代码片段。

Tasks,将重复工作自动化 Link to heading

在菜单中,选择终端>Configure Task来配置。 选择终端>Run Task来运行重复工作。 这样可以不用在终端中反复输入重复的命令。

变量:https://code.visualstudio.com/docs/editor/variables-reference,列出了常用的变量

调试:launch.json Link to heading

常规语言可以直接进行调试,复杂的项目要进行调试的时候需要对launch.json进行配置,通过修改当前目录下.vscode/launch.json中的对应内容,可以实现调试。

多目标调试,比如在开发Web应用的时候,可以同时调试前端和后端的应用。

远程开发 Link to heading

VSCode Remote,允许将容器/远程计算机/WSL作为完整的开发环境。相关插件包括:

  • Remote - SSH
  • Remote - Containers
  • Remote - WSL

其中,Remote - SSH就很方便,可以通过SSH channel连接上远程计算机,访问远程文件夹进行开发。

插件推荐 Link to heading

  • GitLens:Git管理利器
  • REST Client:也许比Postman更好
  • Bracket Pair Colorizer:括号颜色高亮,我觉得可以
  • Browser Preview:把Chrome浏览器代入到VSCode中
  • LeetCode:Offer收割利器
  • Visual Studio Live Share:极大方便协作编程,可以实时实现代码编辑、跟踪光标、团队调试、分享本地服务器、共享终端
  • Visual Studio IntelliCode:AI赋能,根据上下文给出编程建议与智能提示

插件开发 Link to heading

设计 Link to heading

如何获取产品灵感:从日常生活、github issues中 参考其他浏览器/IDE的热门插件

确定目标用户

实现 Link to heading

VSCode插件开发:https://code.visualstudio.com/api VSCode插件样例:https://code.visualstudio.com/api/extension-guides/overview

推广 Link to heading

维护 Link to heading