ngAir 125 - Debugging with the CLI and VSCodeGuests Tony Sneed




Angular Air show

Summary: <h3><span style="font-weight: 400;">Guest</span></h3><br> <ul> <li style="font-weight: 400;"><span style="font-weight: 400;">Tony Sneed</span></li> <br> </ul><p> </p><br> <h3><span style="font-weight: 400;">Episode Notes</span></h3><br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Intro</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Debugging</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Why would we want to debug in our editor instead of just in browser dev tools?</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">VS Code Debugging: </span></h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Debugging app serve, unit tests, end-to-end tests</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3> <span style="font-weight: 400;">Recipe: </span><a href="https://github.com/weinand/vscode-recipes/tree/master/Angular-CLI"><span style="font-weight: 400;">https://github.com/weinand/vscode-recipes/tree/master/Angular-CLI</span></a> </h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Angular CLI versions</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Fix sourcemap issues - 1.3 (now in rc)</span></h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">How do we get set up</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Install / update node - latest current version</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Install angular cli globally: npm install -g @angular/cli@1.3.0-rc.5</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">New angular app: ng new my-dream-app</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Npm scripts vs global ng commands</span></h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Demo</span></h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Other cool stuff (time permitting)</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3> <span style="font-weight: 400;">Blog post: </span><a href="https://blog.tonysneed.com/2017/07/18/turbocharge-vs-code-for-angular-development/"><span style="font-weight: 400;">https://blog.tonysneed.com/2017/07/18/turbocharge-vs-code-for-angular-development/</span></a> </h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">VS Code tasks for npm scripts</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Passing parameters</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Keyboard shortcuts</span></h3> <br> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Cool extensions</span></h3> <br> <ul> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Icons: vs-code-icons</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Organizing imports: TS Hero</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Renaming and moving files:  Move TypeScript</span></h3> <br> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Angular Language Service</span></h3> <br> </li> <br> </ul> </li> <br> </ul> </li> <br> <li style="font-weight: 400;"> <br> <h3><span style="font-weight: 400;">Wrap up</span></h3> <br> </li> <br> </ul><p> </p><br> <h3><span style="font-weight: 400;">P</span></h3>