apps/codelab/src/app/codelabs/extra/visual-studio-code/visual-studio-code.component.html
<slide-deck slideShortcuts slidesRouting slides-tracking>
<slide-arrows></slide-arrows>
<div id="intro" no-padding milestone="TypeScript">
<codelab-title-slide
title="Visual Studio Code"
description="Another Code Editor?"
></codelab-title-slide>
</div>
<div id="about-typescript">
<h1>What is Visual Studio Code?</h1>
<div row>
<div>
<h2>
Visual Studio Code is a free, open-source code editor developed by
Microsoft
</h2>
<ul>
<li>
built with Github Electron, and written in HTML, CSS,and Javascript
</li>
<li>
offers a robust extensible architecture and is highly customizable
</li>
<li>
<span>built-in perks include:</span>
<ul>
<li>Source Control</li>
<li>Extensions Marketplace</li>
<li>Debugger</li>
<li>Built-in Terminal</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
<div>
<h1>Why Use Visual Studio Code?</h1>
<h2>
It has awesome tooling support and works especially well with TypeScript.
</h2>
<h2 class="feature-title">
It comes with <em>Intellisense</em>, which provides code completion and
code info.
</h2>
<div row>
<div class="col-6 vscode-gifs">
<img
src="https://code.visualstudio.com/images/intellisense_intellisense.gif"
alt="IntelliSense demo gif"
/>
</div>
<div class="col-6 vscode-gifs">
<img
src="https://raw.githubusercontent.com/ionutvmi/path-autocomplete/master/demo/path-autocomplete.gif"
alt="IntelliSense demo gif"
/>
</div>
</div>
</div>
<div>
<h1>No Really, Why Use Visual Studio Code?</h1>
<h2>Missing Reference? Syntax Error? No problem!</h2>
<h2 class="feature-title">
Look for the lightbulb to shed some light on the issue and maybe even
automatically fix it for you.
</h2>
<div row>
<div class="col-6 vscode-gifs">
<img
src="https://code.visualstudio.com/images/language-support_quick-fixes.gif"
alt="IntelliSense demo gif"
/>
</div>
</div>
</div>
<div>
<h1>OK, How Do I Get VSCode?</h1>
<div row>
<div class="col-6">
<h2>Interested? Curious?</h2>
<h2>Ready to join the cult?</h2>
<ol>
<li>
Click
<a href="https://code.visualstudio.com/" target="_blank">here</a> to
download.
</li>
<li>Run the installer</li>
<li>Enjoy!</li>
<li>Profit???</li>
</ol>
</div>
<div class="col-6"><img src="http://i.imgur.com/dac74Al.gif" /></div>
</div>
</div>
<div>
<h1>Popular extensions</h1>
<div row>
<ul>
<li>
<span
>are many extensions available for VSCode. Some good ones
include:</span
>
<ul>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons"
target="_blank"
>vscode-icons</a
>
- Adds icons to your file tree (ohhhh shiny)
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig"
target="_blank"
>Editor Config</a
>
- Editor Config Plugin for vs code
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint"
target="_blank"
>ESLint</a
>
- JS linter plugin
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=eg2.tslint"
target="_blank"
>TSLint</a
>
- TypeScript linter plugin (Moarrrrr linter)
</li>
<li>
<a
href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify"
target="_blank"
>Beautify</a
>
- Beautify code, if you don't like JS-beautify
</li>
<li>
And many many more! check out the
<a
href="https://marketplace.visualstudio.com/VSCode"
target="_blank"
>offical site</a
>
and
<a
href="https://github.com/viatsko/awesome-vscode"
target="_blank"
>Awesome VS Code</a
>
for more!
</li>
</ul>
</li>
</ul>
</div>
</div>
<div>
<!--TODO: Add Mac shortcuts?-->
<h1>Common Keyboard Shortcuts</h1>
<ul>
<li>Formats your code (Shift+Alt+F)</li>
<li>Open New Window (Ctrl+Shift+N)</li>
<li>Open Project Folder (Ctrl+K,Ctrl+O)</li>
<li>Go to File (Ctrl+P)</li>
<li>Expand Selection (Shift+Alt+Right)</li>
<li>Search multiple File (Ctrl+Shift+F)</li>
<li>Go to Definition (F12)</li>
<li>Rename (F2)</li>
<li>Multiple Cursor(Alt+Mouse)</li>
<li>
See more
<a
href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf"
target="_blank"
>here</a
>
</li>
</ul>
<p>
Miss your old editor keymap? Try out of one of these extensions:
<a
href="https://marketplace.visualstudio.com/items?itemName=vscodevim.vim"
target="_blank"
>Vim</a
>,
<a
href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings"
target="_blank"
>Atom</a
>,
<a
href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings"
target="_blank"
>Sublime</a
>
</p>
</div>
<div>
<!--TODO: mac shortcuts-->
<h1>What!? you forgot all the shortcuts already?</h1>
<h2>
No problem, VSCode has your back. Hit (F1) or (ctrl+shift+p) and type the
command you want to perform
</h2>
<div class="col-6 vscode-gifs">
<img
src="https://code.visualstudio.com/images/javascript_formatter.gif"
alt="IntelliSense demo"
/>
</div>
</div>
<div id="end'; milestone: 'Visaul-Studio-Code">
<codelab-closing-slide>
<div class="header" header>
<h1>End of Visual Studio Code Section</h1>
</div>
<div class="body" body>
<h2>Well done! This is the end of the milestone!</h2>
<ul>
<li>
<a href="https://code.visualstudio.com/" target="_blank"
>Visual Studio Code Offical Site</a
>
</li>
</ul>
</div>
<div class="footer" footer>
<h2>
<a routerLink="/">Back to Index</a>
<!--<a routerLink="/bootstrap/0">Go to the next Milestone</a>-->
</h2>
</div>
</codelab-closing-slide>
</div>
</slide-deck>