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

posted @ 2020-05-22 11:09  挑战者V  阅读(678)  评论(0)  编辑  收藏  举报