VsCode分享
此次分享主要来自知乎上的《VsCode从入门到进阶》，一个朋友给我分享了一下，于是我听了一下，做了一些笔记，借此分享给大家。
VsCode官网地址为:
//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官网(//code.visualstudio.com/)
-
GitHub(//github.com/microsoft/vscode)
-
Google/Bing
-
Stack Overflow(//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地址(//github.com/electron/electron)
-
基于Node.js(作为后端)和Chromium(作为前端)
-
使用HTML、CSS、JavaScript开发跨平台桌面GUI应用程序
-
使用者:Atom，Skype、GitHub Desktop、Slack、Microsoft Teams
2.Monaco Editor
-
GitHub地址(//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地址(//github.com/microsoft/language-server-protocol)
-
它是Editor/IDE 与语言服务器之间的一种协议，可以让不同的Editor/IDE 方便嵌入各种程序语言，允许开发人员在最喜爱的工具中使用各种语言来编写程序
-
支持LSP的开发工具:Eclipse IDE、 Eclipse Theia、Atorm、Sublime Text、Emacs
4.Debug Adapter Protocol
-
Github(//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为例)
-
文档(//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插件开发
(//code.visualstudio.com/api/get-started/your-first-extension)
b.VsCode插件样例
(//github.com/developers-youcong/vscode-extension-dev)
c.我开发的插件
(//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
