Intro to JavaScript Tooling in Visual Studio Code

@scott_addie

2

About VS Code

Launched on April 29, 2015 at //Build/ conference Current = v1.2.1 Free product Lightweight Microsoft’s 1st cross-platform code editor

3

Based on GitHub’s Electron shell Designed by engineers who created:

Eclipse @ IBM Monaco @ Microsoft

Built w/ web technologies

About VS Code (cont.)

IDEText Editor

4

“

”

Instead of making them [Linux and Mac developers] go to Windows, we want to meet them where they are.

S. “Soma” Somasegar – Microsoft - Corporate VP of Developer Division

Quote retrieved from http://tcrn.ch/1PwSw1r

5

Git Repo Branch

Command Palette

Git Tools

Debugger

File Search

File Explorer

Output Window

6

Extensibilitymarketplace.visualstudio.com/vscode

7

8

4 Notable JSON Configuration Files

File Name Location Common Usesjsconfig.json Project root or subfolder Enable ECMAScript version

supportlaunch.json .vscode/ Debugger configurationsettings.json .vscode/ - or - %APPDATA%\Code\

User\Override editor settings

tasks.json .vscode/ Define custom tasks to run w/ built-in task runner

9

1. jsconfig.json

10

2. launch.json

11

3. settings.json

12

4. tasks.json

13

JSON Schema Supportschemastore.org/json/

14

package.json Schema Support

15

Library / Framework IntelliSense

Reliance on type definitions Deprecated: TSD Shiny: Typings

> npm install –g typings

*.d.ts files provide metadata to editor Angular, Gulp, React, etc.

16

Enable IntelliSense via tsd

17

Enable IntelliSense via typings

18

IntelliSense in Action

19

let demo = + ;DemoAdding Node.js & Webpack Type Definitions

20

JS Task Runners

Command Palette Discoverable Launchable

1st class support for: Grunt Gulp Jake

Terminate running tasks: >Tasks: Terminate Running Task

>Tasks: Run Task

21

Task Output

22

let demo = + ;DemoDiscovering, Launching, & Debugging Gulp Tasks

23

Native Task Runner

VS Code has its own task runner

Integrate w/ 3rd party tools: Babel Webpack etc.

isBuildCommand property ties to Shift + Ctrl + B gesture isTestCommand property ties to Shift + Ctrl + T gesture

24

Babel Transpilation Tasktasks.json

25

let demo = + ;DemoRunning Custom Webpack Build Task

26

Node.js Debugginglaunch.json

Default launch configuration provided:

27

Node.js Debugging (cont.)

3 easy steps:1. Configure launch.json for Node.js debugging2. Launch Node.js program:

node --debug-brk program.js

3. Attach VS Code debugger to running program

--debug and --debug-brk supported --debug-brk stops on 1st line of program

28

let demo = + ;DemoDebugging Mocha Unit Tests: Attach to Node Process

29

Resources

Best of VS Code: Tips and Tricks Build 2016 session

VS Code Docs

VS Code Source on GitHub

Visual Studio Code John Papa, Pluralsight course

VS Code ES6 Sample Project

30

Thank you!

Scan QR for slides:

GitHub.com/scottaddie/slide-decks

ScottAddie.com

@Scott_Addie

LinkedIn.com/in/scottaddie