打造AngularJs2.0开发环境

111

　　angularjs2.0刚发布, typescript2.0也刚发布, 于2016.9.29记录.
　　参考文档：https://angular.cn/docs/ts/latest/quickstart.html
　　win7环境
　　1. 下载并安装 Visual Studio Code, 以下简称 vsc
　　2. 安装 node, 会自动安装 npm, 下载地址: https://nodejs.org/en/download/
　　3. 命令行执行: npm install -g typescript 安装 typescript 编译器
　　4. 打开 vsc , 文件/首选项/用户设置, 设置 setting.json :
　　// 将设置放入此文件中以覆盖默认设置
{
　　//启用 typescript 2.0 编译器
   "typescript.tsdk": "C:/Users/[用户名]/AppData/Roaming/npm/node_modules/typescript/lib",
　　// ts 项目, 隐藏 .js 和 .js.map 文件
   "files.exclude": {
                "node_modules": true,
                "**/*.js": { "when": "$(basename).ts"},
        "**/*.js.map": true
    }
}
　　5. 打开一个ts项目, 从这里下载: https://github.com/angular/quickstart/blob/master/README.md
　　按 ctrl+shift+b 编译项目时, 提示设置 task.json
　　{
    "version": "0.1.0",
    "command": "cmd",
    "isShellCommand": true,
    "showOutput": "always",
    "args": ["/C npm start"]
}
　　6. 至此，按 ctrl+shift+b 可以编译ts项目，并启动一个浏览器打开网站首页。
　　命令行键入
　　node -v 可查看本机安装的 node 版本号, 应该是 6.6+
　　npm -v 可查看本机安装的 npm 版本号, 应该是 3.0+
　　tsc -v 可查看本机安装的 typescript 版本号, 应该是 2.0+
　　npm start 也可从命令行启动项目
　　或许还应该下载类型头文件, npm i -g typings, 我暂未安装
　　我设置了 vsc 文件/首选项/文件图标主题 为seti 主题, 以显示文件的图标
　　我还安装了一系列的vsc插件, 尤其是 visual studio code settings sync, 配置 gist, 用于同步 vsc 的设置项
　　安装的插件有:
　　vscode-tslint
Angular 2 TypeScript Snippets for VS Code
Visual Studio Code HTML Snippets
HTML CSS Class Completion
js-beautify for VS Code
Auto Close Tag
Auto Rename Tag
VSCode Log Output Colorizer
Document This
Code Metrics - Visual Studio Code Extension
AutoImport
　　Visual Studio Code Settings Sync
VS Code - Debugger for Chrome
VSCode TODO Parser Extension
Bookmarks.
EditorConfig for Visual Studio Code
Node npm Script Running for Visual Studio Code
FTP-Sync extension for VS Code
Material Theme
Gulp - VS Code
CodeBing