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