BROADCASTS.com

Published: June 13, 2017, 10 a.m.

JSJ 265 Wade Anderson and Ramya Rao on Visual Studio CodeThis episode is live at the Microsoft Build 2017 with Charles Max Wood and AJ O\u2019Neal. We have Wade Anderson and Ramya Rao from the Visual Studio Code Team at Microsoft. Tune in and learn more about what\u2019s new with Visual Studio Code![00:01:20] \u2013 Introduction to Ramya Rao and Wade AndersonRamya Rao and Wade Anderson are in the Visual Studio Code Team at Microsoft.Questions for Wade and Ramya[00:02:00] \u2013 Elevator Pitch for Visual Studio CodeOur vision on Visual Studio Code is to take what was best out of the IDE world (Visual Studio, Eclipse, IntelliJ, etc.) and bring what was best from the lightweight editor world (Sublime Text, Notepad++, Atom) and merge those two together. We wanted the lightweight features from text editors and the debugging capabilities of Visual Studio and Eclipse. We did general availability last year. We\u2019ve been stable for a year. Additionally, this is Visual Studio Code for Mac, Windows, or Linux. It\u2019s also built in Electron.[00:03:45] \u2013 What are your roles on the team? Do you have particular parts that each of you work on?Wade\u2019s title is a Program Manager. He does more non-developer things but Ramya is an engineer on the team so she gets a lot more coding that Wade does. Everybody has a key area to own but nothing stops them to go into another area. We try to share knowledge between people but we always have that one key owner that you always go to.Ramya is a recent addition to the team. She started out maintaining the Go extension, maintaining and adding features. She\u2019s slowly branching out to the Emmet features of the product.[00:05:30] What is Emmet?Emmet, or Zen Coding, is a must-have tool for you. You can write, say abbreviations and that expands to really huge HTML to update tags, rename tags, etc. That is one of the features of Emmet and Sergey actually wrote the library. We have an in built integration in the product. I [Ramya] am currently working on that.[00:06:28] Does Visual Studio Code make it easy to go to the parts that I need to customize on an HTML?In that case, we have a multi-cursor software in Visual Studio Code, as well. You could place your cursor in different positions, and then, simultaneously edit things.[00:07:42] Is Emmet an extension or does it come with Visual Studio Code?Right now, it\u2019s in Built. If you want to know more about Emmet features, you can to emmet.io. That has all the documentation that you need to learn about Emmet features. In Visual Studio Code right now, we\u2019re looking at making into an extension. We pull it out of the main code and maybe more people can contribute and make it even more better.[00:08:21] \u2013 What\u2019s new in Visual Studio Code?One of our main pillars for this year is to improve performance of the product. We\u2019ve grown a larger team so we\u2019re adding a lot more features every month. Last few months has been, \u201cHow can we get some stability on the issues coming in while making sure we\u2019re reducing our tech load?\u201d We really keep to those core principles that we started with at the beginning, which was, we want a fast, lightweight editor.We built a few extensions that we call key map extensions. They are just a mapping of key bindings that you learned in Sublime Text. You don\u2019t have to re-learn any key bindings in Visual Studio Code.We also build this Welcome page where you can flip through and see features really briefly. In that Welcome page, one of the key things is an interactive playground where you can play with existing code in different sections. Additionally, as we\u2019ve mentioned, we also put multi-cursor features.Another thing is workbench naming. You can change the theme of Visual Studio Code but it will be restricted to the editor and not the rest of the workbench.[00:13:40] \u2013 Do you know how Xterm.js works as it was one of the features that you\u2019ve added in Visual Studio Code?Daniel\u2019s another engineer that\u2019s here with us today. He was the largest contributor to the Xterm.js project. He built the integrated terminal for Visual Studio code so I can\u2019t speak to the internals of how that works.[00:14:12] \u2013 Are we going to start seeing Visual Studio Code integrated into web experiences with other Microsoft products?That\u2019s actually where we started. We were Monaco editor where you get this cloud-based editing experience. We\u2019re getting people to use it but we\u2019re only getting people who were already using Microsoft products.\xa0 When electron came out, we saw an opportunity of, \u201cHey, can we port this\xa0 Monaco editor to Electron and we could then, run it on Mac and Linux.\u201d[00:19:45] \u2013 What are the performance things that you\u2019ve done?One thing that we did recently was adding an ability to calculate the start time for Visual Studio Code? That\u2019s one of our full steps to get more information from the user-side. How can you get a profile of what things are running? Which part of the process took much time?We also need to identify what are the things people are doing that\u2019s causing the editor slow down. An example is when you open a large file and things get laggy.Another exercise we did was we looked at all of our extension API\u2019s to see which one of those could be a malicious extension.The difference between VS Code and Atom is that, we ask questions like, \u201cAre we using good data structures? Are we managing our memory properly? Are we removing stuff we don\u2019t need anymore?\u201d That just comes down to all those little things you learn from basic textbooks that have been around for decades about how to write good code. That\u2019s what we have been doing and that\u2019s what we\u2019ll continue to try to do, to try and improve the performance.[00:25:55] \u2013 Do you have problem on the desktop? Are all the modules just load at once?We definitely don\u2019t load everything at once. Different parts of the editor is loaded differently. When you do the Require, we don\u2019t do it at first load. We do it when we notice that the user wants to use Emmet. We don\u2019t try to load all the library at the beginning and delay the whole process.We try to lazy load as much as possible, even the extensions. We have a separate process called extension host that takes care of loading all the extensions. Whether the extensions are completed loading or not, that does not stop you from typing in a file. Simple actions shouldn\u2019t be bugged down by fancy actions.[00:28:25] \u2013 What\u2019s coming next for Visual Studio Code?Every month, when we plan our iteration, we create iteration draft plan. We put it out there for people to see. Performance and helping people get started are probably the top two for us. You can look at github.com/Microsoft/vscode, look for the label \u2018iteration plan draft.\u2019 So that\u2019s the current work that we\u2019re doing that month.Another feature is the multi-root workspace where you can open multiple folders. When you look at the issues and sort by most comments, multi-root is the number one. The second one that is little paper cuts around formatting and auto-intending \u2013 just things that make your code prettier.PicksAJ O\u2019neal

• Breath on the Wild
• Microsoft\u2019s Intelligent Edge

Charles Max Wood

• Boom Beach
• Bluetick.io
• Emacs key binding extension for Visual Studio Code

Wade Anderson

• Kindle Paperwhite
• \xa0Twitter @waderyan_

Ramya Rao

• Open source
• Twitter @ramyanexus

Special Guests: Ramya Rao and Wade Anderson.

Support this podcast at \u2014 https://redcircle.com/javascript-jabber/donations

Privacy & Opt-Out: https://redcircle.com/privacy

Become a supporter of this podcast: https://www.spreaker.com/podcast/javascript-jabber--6102064/support.