使用VS Code开发Angular 2应用程序所需配置文件的解析

{

    "name": "angular-quickstart",

    "version": "1.0.0",

    "scripts": {

        "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",

        "lite": "lite-server",

        "postinstall": "typings install",

        "tsc": "tsc",

        "tsc:w": "tsc -w",

        "typings": "typings"

    },

    "license": "ISC",

    "dependencies": {

        "@angular/common": "~2.0.2",

        "@angular/compiler": "~2.0.2",

        "@angular/core": "~2.0.2",

        "@angular/forms": "~2.0.2",

        "@angular/http": "~2.0.2",

        "@angular/platform-browser": "~2.0.2",

        "@angular/platform-browser-dynamic": "~2.0.2",

        "@angular/router": "~3.0.2",

        "@angular/upgrade": "~2.0.2",

        "angular-in-memory-web-api": "~0.1.5",

        "bootstrap": "^3.3.7",

        "core-js": "^2.4.1",

        "reflect-metadata": "^0.1.8",

        "rxjs": "5.0.0-beta.12",

        "systemjs": "0.19.39",

        "zone.js": "^0.6.25"

    },

    "devDependencies": {

        "concurrently": "^3.1.0",

        "lite-server": "^2.2.2",

        "typescript": "^2.0.3",

        "typings": "^1.4.0"

    }

}

typings.json：

VS Code 使用Typings添加自动补全（用于智能提示）

例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的typings.json文件：

{

    "globalDependencies": {

        "core-js": "registry:dt/core-js#0.0.0+20160725163759",

        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",

        "node": "registry:dt/node#6.0.0+20160909174046"

    }

}

tsconfig.json：

tsconfig.json用于对于TypeScript文件的配置

“target”：编译之后生成的JavaScript文件需要遵循的标准。有三个候选项：es3、es5、es2015（es6）。

“noImplicitAny”：为false时，如果编译器无法根据变量的使用来判断类型时，将用any类型代替。为true时，将进行强类型检查，无法推断类型时，提示错误。

“module”：遵循的JavaScript模块规范。主要的候选项有：commonjs、AMD和es2015。为了后面与node.js保持一致，我们这里选用commonjs。

“removeComments”：编译生成的JavaScript文件是否移除注释。

“sourceMap”：编译时是否生成对应的source map文件。这个文件主要用于前端调试。当前端js文件被压缩引用后，出错时可借助同名的source map文件查找源文件中错误位置。

“outDir”：编译输出JavaScript文件存放的文件夹。

“include”、“exclude”：编译时需要包含/剔除的文件夹。

例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的tsconfig.json文件：

{

    "compilerOptions": {

        "target": "es5",

        "module": "commonjs",

        "moduleResolution": "node",

        "sourceMap": true,

        "emitDecoratorMetadata": true,

        "experimentalDecorators": true,

        "removeComments": false,

        "noImplicitAny": false

    }

}

launch.json：

launch.json用于Debug调试选项配置

"version": 版本号

"name"："Attach to Chrome, with sourcemaps" 附加到Chrome,带映射信息

"type": "chrome"，启用谷歌chrome浏览器

"request": "launch"，发送到浏览器

"request": "attach"，附加到浏览器

"port": 9222，端口号

"sourceMaps": true，源码映射

"webRoot": "${workspaceRoot}"，根路径

例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的launch.json文件：

{

    "version": "0.2.0",

    "configurations": [{

            "name": "Launch Chrome against localhost, with sourcemaps",

            "type": "chrome",

            "request": "launch",

            "url": "http://localhost:8080/index.html",

            "sourceMaps": true,

            "webRoot": "${workspaceRoot}"

        },

        {

            "name": "Attach to Chrome, with sourcemaps",

            "type": "chrome",

            "request": "attach",

            "port": 9222,

            "sourceMaps": true,

            "webRoot": "${workspaceRoot}"

        }

    ]

}

settings.json：

settings.json是VS Code的用户设置文件，可以设置，编辑器的字体、颜色等

"typescript.tsdk": "node_modules/typescript/lib"，指出Angular 2的开发库

"files.exclude": ts 项目, 隐藏 .js 和 .js.map 文件

例如，前一面博文使用VS Code开发AngularJS 2 第一个应用程序的settings.json文件：

{

    "typescript.tsdk": "node_modules/typescript/lib",

    "files.exclude": {

        "node_modules": true,

        "**/*.js": { "when": "$(basename).ts" },

        "**/*.js.map": true

    }

}

tasks.json：

任务配置文件

"command": "cmd"，命令方式

"isShellCommand": true，是否使用命令行方式

"showOutput": "always"，输出显示

"args": ["/C npm start"]，命令参数

例如，前一篇博文使用VS Code开发AngularJS 2 第一个应用程序的tasks.json文件：

{

    "version": "0.1.0",

    "command": "cmd",

    "isShellCommand": true,

    "showOutput": "always",

    "args": ["/C npm start"]

}

参考资料