Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
Everything is
Awesome
…when you’re using
Visual Studio Code
Mike B...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• https://brosteins.com
• https://github.com/mikebranstein
• @mike...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
3
Father of the Year?
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
Everything is
Awesome
…when you’re using
Visual Studio Code
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
5
Why is Visual Studio Awesome?
Powerful IDE Integrated Debugging ...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Next Generation Editor with smarts – it’s NOT an IDE
• When you ...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Electron Framework
• Open-source framework developed by GitHub
•...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
8
Why Everything IS Awesome
Layout
Command Line
Command Palette
Ed...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
9
Master Builders Should Know the UI
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
10
Command Line Interfaces Make me
Happy!
Argument Description
-r ...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Search: Ctrl + P
• Commands: Ctrl + Shift + P
11
Master Builders...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
12
Editing Code
Working Files
Accordion UI
Auto Save
Side-by-Side
...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
13
Follow the Plan by Running Tasks
• Gulp, Make, Ant, MSBuild, Ja...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Emmet (http://emmet.io)
• Multi Cursor
• Content-aware Selection...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• IntelliSense
• Snippets
• Goto & Peek
• Group Text Movement
15
F...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Node.js or Mono Debugging
• Launching the Debugger
• Debugging P...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
• Change Color Themes (…as long at it’s Black or Dark Grey)
• User...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
18
Extending VS Code
Additional guides on writing VS Code extensio...
Mike Branstein
@mikebranstein
brosteins.com / KiZAN.com
Thank You For Attending!
Twitter @mikebranstein Mail mike@brostein...
Upcoming SlideShare
Loading in …5
×

Everything is Awesome with VS Code

11,787 views

Published on

Visual Studio Code is a modern code editor for modern developers. Learn how you can use Code to build and debug web and cloud applications on your favorite platform - Linux, OS X, or Windows. We'll cover the basics of this lightweight editor, including side-by-side editing, source control integration, task running, and some of my favorite Visual Studio features, such as Intellisense, Go to Definition, and Peek. Whether you build web apps in ASP.NET, Single Page Apps with Angular, or just love JavaScript on Node.js, Visual Studio Code can be the editor you've been looking for.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Everything is Awesome with VS Code

  1. 1. Mike Branstein @mikebranstein brosteins.com / KiZAN.com Everything is Awesome …when you’re using Visual Studio Code Mike Branstein @mikebranstein https://brosteins.com
  2. 2. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • https://brosteins.com • https://github.com/mikebranstein • @mikebranstein • @brosteins • @kizantech 2 Where to Find Me
  3. 3. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 3 Father of the Year?
  4. 4. Mike Branstein @mikebranstein brosteins.com / KiZAN.com Everything is Awesome …when you’re using Visual Studio Code
  5. 5. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 5 Why is Visual Studio Awesome? Powerful IDE Integrated Debugging Team CollaborationExtensibility Multiple Languages IntelliSense Code Lens F5 Debug Remote Debugging IntelliTrace TFS / VSTS TFVC Git Add-ins Extensions
  6. 6. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Next Generation Editor with smarts – it’s NOT an IDE • When you need something fast – loads in a second • Cross-platform (Windows, OS X, Linux) • Simple, yet Powerful • Editor, with Multi-Language Support • Debugger • Integrated Source Control Management • Integrated Task Runner • Freedom from a 1 GB+ download and 2 hour install - VS Code is 28MB 6 What is Visual Studio Code? Why Another Editor?
  7. 7. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Electron Framework • Open-source framework developed by GitHub • Build Desktop/GUI apps with Node.js • Write in JavaScript, HTML, CSS • Notable Editors using Electron • GitHub’s Atom Editor • Visual Studio Code • VS Code is NOT a fork of the Atom Editor (although commonly believed) 7 Cross-Platform…Windows, OS X, & Linux? How’d They Do That?
  8. 8. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 8 Why Everything IS Awesome Layout Command Line Command Palette Editing Basics & Tasks Advanced Editing VS Code for VS Lovers Debugging Customization Extensibility
  9. 9. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 9 Master Builders Should Know the UI
  10. 10. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 10 Command Line Interfaces Make me Happy! Argument Description -r open, using last active window -n open, using new window -g used with file:line:column, opens file at line and (optional) column position file open, if file doesn’t exist, creates the file file:line:column used with –g, opens file at line and (optional) column position folder name of folder to open Run VS Code from the CLI, using “code”, with arguments:
  11. 11. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Search: Ctrl + P • Commands: Ctrl + Shift + P 11 Master Builders Use the Command Palette Command Palette = Chrome Omnibox
  12. 12. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 12 Editing Code Working Files Accordion UI Auto Save Side-by-Side Editing Language-specific UI Command Palette
  13. 13. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 13 Follow the Plan by Running Tasks • Gulp, Make, Ant, MSBuild, Jake, & Rake Run Tasks from the Command Palette
  14. 14. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Emmet (http://emmet.io) • Multi Cursor • Content-aware Selection 14 Advanced Editing Increase your Efficiency with these shortcuts
  15. 15. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • IntelliSense • Snippets • Goto & Peek • Group Text Movement 15 For the Visual Studio Fans The best of VS is in VS Code
  16. 16. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Node.js or Mono Debugging • Launching the Debugger • Debugging Profiles • Shortcut Keys 16 Debugging VS Code has a Built-in Debugger
  17. 17. Mike Branstein @mikebranstein brosteins.com / KiZAN.com • Change Color Themes (…as long at it’s Black or Dark Grey) • User Settings • Workspace Settings • Custom Key Bindings 17 Customizing the Editor Make VS Code Look and Feel Just Right
  18. 18. Mike Branstein @mikebranstein brosteins.com / KiZAN.com 18 Extending VS Code Additional guides on writing VS Code extensions can be found at https://code.visualstudio.com/docs Step 1 Step 2 Step 3 npm install –g yo generator-code yo code cd extension-directory code . -n “F5” debug Command Palette: “Hello World”
  19. 19. Mike Branstein @mikebranstein brosteins.com / KiZAN.com Thank You For Attending! Twitter @mikebranstein Mail mike@brosteins.com Web brosteins.com & KiZAN.com

×