Typescript development setup with Visual Studio Code

  1. Install node.js
  2. Install node.js modules: typescript and tslint globally: 
    npm install -g typescript tslint
  3. Install Visual Studio Code extensions: "TSLint" and "Debugger for Chrome"
    • Start Visual Studio Code
    • CMD+SHIFT+P (CTRL+SHIFT+P) then type: Extensions, select "Extensions: Install Extensions"
    • Search and install "Debugger for Chrome" and "TSLint" extensions
  4. Initialize project/workspace directory: 
    mkdir HelloWorld
cd HelloWorld
tsc --init
    It will create tsconfig.json file in the project/workspace directory.
  5. open HelloWorld folder in Visual Studio Code, and edit tsconfig.json file: 
    {
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
        "es2015.promise", /* Promise */
        "dom"
    ],
    "sourceMap": true,
    "outDir": "./",
  }
}
  6. Create index.html file: 
    <!DOCTYPE html>
<html>

<head>
    <title>Hello Typescript</title>

</head>

<body>
    <h1>Fun with TypeScript</h1>
    <p id="index">Let's rock</p>
    <script src="main.js"> </script>
</body>

</html>
  7. Create main.ts file: 
    function hello() {
    console.log('Hello');
    alert('hello');
}
hello();
  8. Configure Default Build Task
    • Open the command palette using CMD+SHIFT+P (CTRL+SHIFT+P) and type "Tasks", then select "Configure Default Build Task...", then select "tsc:watch".
    • It will create .vscode/tasks.json file.
    • tsc:watch runs automatically when you change a TypeScript file.)
  9. Run Build Task
    • CMD+SHIFT+B (CTRL+SHIFT+B) to build.
    • It generates main.js and main.js.map files.
  10. Debugging setup
    • CMD+SHIFT+P (CTRL+SHIFT+P) and select "Debuging: Start Debugging", then select "Chrome"
    • It should create .vscode/launch.json, edit the file: 
      {
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8086/HelloWorld/index.html",
            "webRoot": "${workspaceFolder}",
            "userDataDir": "/tmp/chrome-debug",
        }
    ]
}
    • Set some breakpoint in the main.ts, then CMD+SHIFT+P and "Debuging: Restart Debugging", see if it stops at the breakpoint.
  11. Directory structure: 
    HelloWorld/
HelloWorld/.vscode/
HelloWorld/.vscode/launch.json
HelloWorld/.vscode/settings.json
HelloWorld/.vscode/tasks.json
HelloWorld/index.html
HelloWorld/main.ts
HelloWorld/main.js
HelloWorld/main.ts.map
HelloWorld/tsconfig.json
    Project/Workspace settings are saved in .vscode/settings.json

See also

No comments:

Post a Comment