知乎分享：vscode从入门到进阶

地址：知乎 内容大纲

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 从入门到进阶

第一章 VSCode的优势

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

你真的会用VS Code吗

快捷键

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的设置来修改键位，也可以下载键盘映射插件。

菜单栏-配置项

通过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我就不希望搜索到，可以加入到这里面进行设置。

菜单-视图

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

主题

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

集成终端/terminal

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

如何更好地学习VS Code

学会搜索：

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

学会提问：描述清楚问题，方便别人帮助

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

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

贡献：

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

讨论：

• gitter chat room:https://gitter.im/Microsoft/vscode
• Slack: https://aka.ms/vscode-dev-community

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

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

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

VSCode的核心组件

四个核心组件：

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

Electron

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

Monaco Editor

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

Language Server Protocol

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

DAP

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

VSCode是如何做开源的

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

进阶功能

命令行

• 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的根目录

打造自己的主题

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

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

自己的代码片段

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

Tasks，将重复工作自动化

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

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

调试：launch.json

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

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

远程开发

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

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

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

插件推荐

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

插件开发

设计

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

确定目标用户

实现

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

推广

维护