打造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 SyncVS Code - Debugger for ChromeVSCode TODO Parser ExtensionBookmarks.EditorConfig for Visual Studio CodeNode npm Script Running for Visual Studio CodeFTP-Sync extension for VS CodeMaterial ThemeGulp - VS CodeCodeBing