[版权声明] 本站内容采用知识共享署名-非商业性使用-相同方式共享 3.0 中国大陆 (CC BY-NC-SA 3.0 CN) 进行许可。
部分内容和资源来自网络，纯学习研究使用。如有侵犯您的权益，请及时联系我，我将尽快处理。
如转载请注明来自： Broly的博客，本文链接： VSCode+Node.js+Angular2开发环境

前不久Angular2发布了正式版，而且Angular4不会颠覆式改变语法（对比Angular1和Angular2），所以感觉不会坑的情况下，决定学习Angular2。第一件事当然是搭建个开发环境，但是网上的教程不是很多或者版本比较旧，不适用当前，最后自己摸索出来了：

其他相关博文：

《VSCODE+CPP开发环境》

《VSCODE+GOLANG开发环境》

一、测试环境

Windows 10
VSCode v1.11.1
Node.js v6.10.2
NPM v3.10.10
tsc v2.2.2

二、安装Node.js、NPM、TSC

直接去官网下载安装包：https://nodejs.org/en/download/

安装好之后，打开命令提示符：Win+R -> cmd ，然后安装tsc，

npm install -g typescript

1	npm install -g typescript

三、安装Visual Studio Code

同样去官网下载VSCode并安装： https://code.visualstudio.com/Download

四、下载Angular2提供的quickstart

官网提供的文档：https://angular.cn/docs/ts/latest/guide/setup.html

git clone https://github.com/angular/quickstart.git quickstart
cd quickstart
npm install

git clone https://github.com/angular/quickstart.git quickstart

cd quickstart

npm install

五、VSCode中配置运行环境

首先在VSCode的资源管理器，打开quickstart文件夹。

按F1键，出来输入框后，输入launch，选择“打开launch.json”，编辑

{
    // Use IntelliSense to learn about possible Node.js debug attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server",
            "cwd": "${workspaceRoot}/"
        }
    ]
}

{

// Use IntelliSense to learn about possible Node.js debug attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"request": "launch",

"name": "Launch Program",

"program": "${workspaceRoot}/node_modules/lite-server/bin/lite-server",

"cwd": "${workspaceRoot}/"

}

]

}

注意：cwd后面要加上 / 斜杠，不然最后运行的时候会找不到路径。（至少我测试是这样）

按F1键，出来输入框后，输入task，选择“配置任务运行程序”，再选择“TypeScript - Watch Mode”，编辑

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": [
        "-w",
        "-p",
        "."
    ],
    "showOutput": "silent",
    "isBackground": true,
    "problemMatcher": "$tsc-watch",
    "watch": true
}

{

// See https://go.microsoft.com/fwlink/?LinkId=733558

// for the documentation about the tasks.json format

"version": "0.1.0",

"command": "tsc",

"isShellCommand": true,

"args": [

"-w",

"-p",

"."

"showOutput": "silent",

"isBackground": true,

"problemMatcher": "$tsc-watch",

"watch": true

}

六、运行程序

此时已经算是配置完成了，按F5运行可以看到效果：

参考链接：《Getting Started With Angular 2 Application Using Visual Studio Code》

如果本文对您有所帮助，可以请作者喝杯咖啡，感谢支持^_^

支付宝支付

微信支付

Broly的博客

VSCode+Node.js+Angular2开发环境