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

打造AngularJs2.0开发环境的更多相关文章

  1. vagrant打造自己的开发环境

    vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...

  2. Windows 8.0上Eclipse 4.4.0 配置CentOS 6.5 上的Hadoop2.2.0开发环境

    原文地址:http://www.linuxidc.com/Linux/2014-11/109200.htm 图文详解Windows 8.0上Eclipse 4.4.0 配置CentOS 6.5 上的H ...

  3. android 5.0开发环境搭建

    Android 5.0 是 Google 于 2014 年 10 月 15 日发布的全新 Android 操作系统.本文将就最新的Android 5.0 开发环境搭建做详细介绍. 工具/原料 jdk- ...

  4. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  5. windows下cocos2dx3.0开发环境及Android编译环境搭建

    cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1.  所需工具         1)coc ...

  6. Linux下搭建gtk+2.0开发环境

    安装gtk2.0 sudo apt-get install libgtk2.0-dev 查看 2.x 版本 pkg-config --modversion gtk+-2.0 #有可能需要sudo ap ...

  7. (4)Linux(ubuntu)下配置Opencv3.1.0开发环境的详细步骤

    Ubuntu下配置opencv3.1.0开发环境 1.最近工作上用到在Ubuntu下基于QT和opencv库开发应用软件(计算机视觉处理方面),特把opencv的配置过程详细记录,以供分享 2.步骤说 ...

  8. IMX6开发板Qtopia2.2.0开发环境搭建以及编译镜像

    搭建 Qtopia2.2.0 开发环境,需要先搭建 Android 的编译环境,然后在 Android 编译环境的基础上,再搭建 Qtopia2.2.0 编译环境.以下内容基于迅为-iMX6开发板.Q ...

  9. Android Studio 1.0.1 + Genymotion安卓模拟器打造高效安卓开发环境

    我们开发安卓大多是使用Eclipse和安卓SDK中自带的安卓模拟器.当然,Google早就推出了自己的安卓开发环境——Android studio,在不久前,Google发布了Android Stud ...

随机推荐

  1. OE学习笔记流水

    Terrain.cpp中的getWorldCoordsUnderMouse函数,进行标记.

  2. (转)Redis使用场景及使用经验

    Redis is an open source (BSD licensed), in-memory data structure store! 刚刚结束一个游戏类的活动项目,由于预估的参与人数较多,产 ...

  3. C++开始前篇,深入编译链接(3)

    一,COMMON块 什么是COMMON块,这是一种机制,早期的Fortran没有动态分配空间的机制,程序员必须事先声明它所需要的临时使用空间的大小.Fortran把这种空间叫做COMMON块,当不同的 ...

  4. hive 复杂类型

    hive提供一种复合类型的数据 struct:可以使用"."来存取数据 map:可以使用键值对来存取数据 array:array中存取的数据为相同类型,其中的数据可以通过下表获取数 ...

  5. struts 2 时间控件

    在使用struts2框架时,为我们提供了时间选择器控件:datetimepicker.但是在使用过程中会出现一些问题,主要就是struts2版本更新时做了一些修改.在struts2.0时,使用< ...

  6. Cocos2d-x 生成真正的随机数

    关于随机数 cocos2d-x 定义了一个宏 CCRANDOM_0_1 生成的是 [0, 1] 之间的值 因此,要生成  [0-100] 之间的数    CCRANDOM_0_1 * 100 生成 [ ...

  7. Matlab 读取文件夹中所有的bmp文件

    将srcimg文件下的bmp文件转为jpg图像,存放在dstimg文件夹下 str = 'srcimg'; dst = 'dstimg'; file=dir([str,'\*.bmp']); :len ...

  8. CommonJS, AMD 和 RequireJS之间的关系(转载)

    先说说CommonJS CommonJS - 大家是不是觉得JavaScript仅仅是一个客户端的编译语言,其实JavaScript设计之初不仅仅是针对客户端设计的语言.后来只是由于Web的迅速流行, ...

  9. 限制input只能输入金额(类似:100.00|100.9|100)

    $(".inputmoney").keyup(function () {    var reg = $(this).val().match(/\d+\.?\d{0,2}/);    ...

  10. 商贸食品车销成功应用PDA抄单 现场开单 打印销售单安卓智能手持POS应用

    中小超市配送食品,酒水饮料,业务员以往是挨家挨户抄每个超市需要哪些东西,晚上回公司再统计,打到软件里面,开单配货. 选用PDA后,人手一台,直接在超市里面抄好货物,通过网络传输到公司软件上面,加快了工 ...