VsCode分享

此次分享主要来自知乎上的《VsCode从入门到进阶》，一个朋友给我分享了一下，于是我听了一下，做了一些笔记，借此分享给大家。

VsCode官网地址为:

https://code.visualstudio.com/

感兴趣的朋友可以下载体验一下:

内容大纲

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 的优势

• 开源

• 跨平台

• 轻量级

• 智能提示

• 代码调试

• 内置Git支持

• 多语言支持

• 丰富的插件

1.学习曲线

2.用户体验(Terminal、调试器、版本控制、前端开发、扩展插件)

3.开源(一切皆开源，不止代码开源)

4.性能

(1)比IDE和Atorm要快

(2)与Vim和Sublime相比，略有差异

(3)不断的性能优化(主要解决VsCode为什么越用越慢问题):

 a.插件进程与主进程的隔离

 b. 插件的延迟加载

 c.Text Buffer的优化，提升大文件和加载和编辑速度，减少内存使用率

5.丰富的插件(10000+以上插件，编辑器插件管理方便)

6.强大的生态

(1)强大的组件生态

a.Monaco Editor

b.Languge Server Protocol

c.Debug Adapter Protocol

(2)Visual Studio Family

a.Visual Studio Live Share:极大地方便了协作编程--实时共享编辑、跟随光标、团队调试、分享本地服务器、共享终端等等。

b.Visual Studio IntelliCode:通过AI赋能，跟随上下文给出编程建议和智能提示，提高开发者的效率。

二、 VS 和 VS Code 到底有什么关系？

相当于Java和JavaScript的关系，看上去有关系，实际上半毛钱关系都没有，只是名字相似而已。

三、 你真的会用 VS Code 了吗？

1.VsCode Insider版本

(1)每天获取最新版本的VsCode

(2)与稳定版并存

2.命令面板

(1)快速列出所有命令

(2)快捷键:Ctrl+Shift+P或F1

3.常用的配置项

(1)Windows/Linux 文件-首选项-设置

(2)macOS Code-首选项-设置

4.面包屑导航/大纲/缩略图

5.主题

• 文件->首选项->颜色主题

• 文件->首选项->文件图标主题

• 插件市场

6.常用快捷键

• Ctrl+P 文件跳转

• Ctrl+Shift+Tab 在所有打开的文件中跳转

• Ctrl+Shift+P 命令面板

• Ctrl+Shift+O 跳转到文件中的Symbol

• Ctrl+T 搜索所有的Symbols

• Ctrl+G 跳转到某一行

• Alt+<-/->向后/向前跳转

怎么多命令怎么记得住？

别怕，按照如下操作即可:

点击帮助->键盘快捷方式参考

7.集成终端

打开集成终端:

• 使用Ctrl+快捷键

• 通过菜单栏 查看->终端

• 通过命令面板(Ctrl+Shift+P)，试图:切换集成终端

四、如何更好地学习 VS Code ？

1.学会搜索

• VsCode官网(https://code.visualstudio.com/)

• GitHub(https://github.com/microsoft/vscode)

• Google/Bing

• Stack Overflow(https://stackoverflow.com/)

2.学会提问

• Environment

• Repro steps

• Actual behavior

• Expected behavior

• Code sample

• Screenshot

上面所说的主要是关于如何提问，

环境->步骤->实际情况->预期情况->代码->截图

目的:只为将一个问题描述清楚，减少回答者回答问题的时间成本。

3.学会学习

• 寻求帮助前，要有自己的思考

• 知其然知其所以然

• 举一反三

五、一起改进 VS Code，你也能成为 VS Code 的 Contributor

• 提问

• Issue

• PRs

• 插件

• 翻译

反馈渠道:

• Bugs & feature request(Github Issue)

• 提问 (Stack Overflow)

• 讨论 (Gitter Chat Room/Slack)

提问:

• Stack Overflow

• 使用标签

• 好的问题也能帮助别人搜索到

Issue:

• Report bugs

• Sumit feature request

• Share you idea/feedback exising issues

• 帮助翻译中文issue

PRs:

• PR指南

• 哪些issue 可以发PR，有help-wanted或者bug标签的issue、在发PR之前，先于相关的开发负责人讨论

六、VS Code 的核心组件

1.Electron

• GitHub地址(https://github.com/electron/electron)

• 基于Node.js(作为后端)和Chromium(作为前端)

• 使用HTML、CSS、JavaScript开发跨平台桌面GUI应用程序

• 使用者:Atom，Skype、GitHub Desktop、Slack、Microsoft Teams

2.Monaco Editor

• GitHub地址(https://github.com/microsoft/monaco-editor)

• 基于浏览器的代码编辑器:IntelliSense、代码验证、语法高亮、文件比较)

• 支持主流浏览器:IE11、Edge、Chrome、Firefox、Safari和Opera

• 使用者:Gitee Web IDE、Cloud Studio、Eclipse Che、Eclipse Theia、Azure DevOps、OneDrive、Edge Dev Tools

3.Language Server Protocol

• Github地址(https://github.com/microsoft/language-server-protocol)

• 它是Editor/IDE 与语言服务器之间的一种协议，可以让不同的Editor/IDE 方便嵌入各种程序语言，允许开发人员在最喜爱的工具中使用各种语言来编写程序

• 支持LSP的开发工具:Eclipse IDE、 Eclipse Theia、Atorm、Sublime Text、Emacs

4.Debug Adapter Protocol

• Github(https://github.com/microsoft/debug-adapter-protocol)

• DAP与LSP的目的类似，DAP把Editor/IDE与不同语言的debugger解耦，极大地方便了Editor/IDE与其他Debugger的集成

• 支持DAP的开发工具:Eclipse IDE、Eclipse Theia、Emacs、Vim

七、VS Code 怎么做开源的？

开源的三个阶段:

公开源代码、Issues &PRs、Planning & Design

1.开源的开发流程

VsCode不仅仅把代码开源出来，而是把整个产品的开发过程建立于开源之上。

• 每一年，VsCode团队都会在GitHub Wiki 发布Roadmap，列出一整年的规划图

• 每个月初，在产品设计阶段，VsCode团队会在GitHub Issue上会发布Iteratioin Plan，列出这个月会做的每个功能，每一个功能基本会对应一个GitHub Issue，你可以看到详细的设计以及mockup

2.开源的生态(以VsCode为例)

• 文档(https://github.com/microsoft/vscode/wiki)

• Monaco Editor(参考前面GitHub链接)

• Language Server Protocol(参考前面GitHub链接)

• Debug Adapter Protocol(参考前面GitHub链接)

八、进阶

1.命令行(支持命令行打开VsCode)

  命令行--高级选项(VsCode启动慢，查看插件内存使用情况)

2.玩转Git

   玩转Git--合并冲突

3.打造自己的主题--颜色配置

   可以自己编写颜色插件，也可以去插件市场上下载自己中意的插件。

4.快速创建属于你的Code Snippet

以我使用Idea为例，Idea中的Live Template与VsCode中的Code Snippet功能基本相同，都是将常用代码段抽取出来，通过自定义快捷键的方式调出来，减少重复编码，提高效率。

5.玩转Task，把重复的工作自动化

与WebStorm如图功能一样:

根本目的就是将常用命令抽取出来，不需要自己手动输入

6.调试--lauch.json

7.远程开发

Visual Studio Code Remote允许开发者将容器、远程计算机或Windows Subsystem for Linux 作为完整的开发环境。

• 在部署环境相同的操作系统上进行开发，或者使用更大或更专业的硬件

• 把开发环境作为沙箱，以避免影响本地计算机配置

• 让新手轻松上手，让每个人都保持一致的开发环境

• 使用原本在本地环境不可用的工具或运行时，或者管理它们的多个版本

• 在WSL里开发Linux应用

• 从多台不同的计算机访问现有的开发环境

• 调试在其他位置(比如客户网站或云端)运行的应用程序

九、插件

1.插件管理

a.web版插件市场

b.内置插件管理

c.命令行

2.好用的插件推荐(根据需求可自行去插件市场下载安装使用)

a.Settings Sync:轻松同步VsCode所有配置

b.Code Runner:代码一键运行，支持超过40种语言

c.GitLens:Git管理利器

d.REST Client:也许是比Postman更好的选择

e.Bracket Pair Colorizer:括号颜色高亮

f.Browser Preview:把Chrome浏览器带入VsCode中

g.LeetCode:Offer收割利器

h.Visual Studio Live Share:极大地方便了协作编程--实时共享代码编辑、跟随光标、团队调试、分享本地服务、共享终端等

i.Remote Development：基于SSH、Container或者WSL进行远程开发

3.Visual Studio Code插件开发

• 设计

• 实现

• 推广

• 维护

从设计->实现->推广->维护，仔细想来与我们平常开发自己的软件或者是公司的商业软件，套路基本上都是相似的。

  a.怎样获取灵感?

     从自身需求出发

     Auto Close Tag:GitHub Issue

     其它编辑器/IDE的热门插件

  b.确定目标用户

   Code Runner(例子，CodeRunner插件可使用40种编程语言):

• 初学者

• "懒人"

• 多语言用户

 4.有用资源

 a.VsCode插件开发

(https://code.visualstudio.com/api/get-started/your-first-extension)

 b.VsCode插件样例

(https://github.com/developers-youcong/vscode-extension-dev)

 c.我开发的插件

(https://github.com/developers-youcong/youcongtech-blog)

5.开发环境

(1)Visual Studio Code

(2)Node.js

(3)Yeoman And VsCode Extension generator

(4)npm install -yo generator-code

a.VsCode界面功能扩展--Workbench

  Tree View Container

  Tree View

  WebView

  Status Bar Item

b.VsCode界面功能扩展--Editor area

  CodeLens

  Decoration

  Gutter

  Hover

  Context Menu

6.推广渠道

• Stack Overflow、GitHub、Twitter、FaceBook、Google Plus、LinkedIn

• 博客:V2ex、知乎、微信公众号、开源中国、微博、CSDN

7.数据驱动

• 下载量、月活、日活

• 用户的使用行为

• 优先级

• Fail fast