打造AngularJs2.0开发环境

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