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