打造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
打造AngularJs2.0开发环境的更多相关文章
- vagrant打造自己的开发环境
vagrant打造自己的开发环境 缘由: 在网上看到斌哥,爽神都写了关于vagrant的博客,都在说很强大,所以很好奇这玩意怎么个强大,然后也就自己来一发玩玩看看. 真实缘由: 说实话是电脑配置太低, ...
- 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 ...
- android 5.0开发环境搭建
Android 5.0 是 Google 于 2014 年 10 月 15 日发布的全新 Android 操作系统.本文将就最新的Android 5.0 开发环境搭建做详细介绍. 工具/原料 jdk- ...
- EJB3.0开发环境的搭建
EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...
- windows下cocos2dx3.0开发环境及Android编译环境搭建
cocos2dx更新到了3.x版本号,自己一直没有换,如今开发组要求统一换版本号,我就把搭建好开发环境的过程记录下来. 一.Windowns下开发环境搭建 1. 所需工具 1)coc ...
- Linux下搭建gtk+2.0开发环境
安装gtk2.0 sudo apt-get install libgtk2.0-dev 查看 2.x 版本 pkg-config --modversion gtk+-2.0 #有可能需要sudo ap ...
- (4)Linux(ubuntu)下配置Opencv3.1.0开发环境的详细步骤
Ubuntu下配置opencv3.1.0开发环境 1.最近工作上用到在Ubuntu下基于QT和opencv库开发应用软件(计算机视觉处理方面),特把opencv的配置过程详细记录,以供分享 2.步骤说 ...
- IMX6开发板Qtopia2.2.0开发环境搭建以及编译镜像
搭建 Qtopia2.2.0 开发环境,需要先搭建 Android 的编译环境,然后在 Android 编译环境的基础上,再搭建 Qtopia2.2.0 编译环境.以下内容基于迅为-iMX6开发板.Q ...
- Android Studio 1.0.1 + Genymotion安卓模拟器打造高效安卓开发环境
我们开发安卓大多是使用Eclipse和安卓SDK中自带的安卓模拟器.当然,Google早就推出了自己的安卓开发环境——Android studio,在不久前,Google发布了Android Stud ...
随机推荐
- 已知当前地理位置经纬度查询几个点中最近的一个地点demo
1.首先定义一个点与点之间测算距离的方法 2.然后定义找出基本点和集合中最近的一个点的方法 3.取第一条数据即是最近的点的坐标 public class Location { public int i ...
- 动态创建 Lambda 表达式
首先我们看一个简单 Lambda 表达式的构成. i => i > 5 在这个表达式中,"i" 被称为 Parameter,"i > 5" 是 ...
- html内容超出了div的宽度如何换行让内容自动换行
在显示评论列表的时候因为有固定宽,但是显示的内容超出的了div的宽,在这种情况下我们需要将其换行,实现的css代码如下 在工作中评论内容测试遇到评论着的评论内容为:"dddddddddd ...
- left join 多个表关联时,将表值置换
/****** Script for SelectTopNRows command from SSMS ******/ SELECT B.[GOODSID] ,A.INDUSTRY_CNAME ,C. ...
- js的一些笔记
var txt = "Hello World!";document.write("<p>字体变大: " + txt.big() + "&l ...
- c语言实现开灯问题
开灯问题: 有n盏灯,编号为1~n,第1个人把所有灯打开,第2个人按下所有编号为2 的倍数的开关(这些灯将被关掉),第3 个人按下所有编号为3的倍数的开关(其中关掉的灯将被打开,开着的灯将被关闭),依 ...
- mysql+ssh 配置(转载)
Mysql+ssh配置 一.Linux平台间mysql+ssh配置 本机地址为:192.168.189.133 mysql服务器地址为:192.168.189.139 linux命令行下使用ssh命令 ...
- QuanbenSoft Windows Runtime (Windows Store)Apps 应用及其框架总览
Parrot Simple audio repeater for language learners http://www.windowsphone.com/en-au/store/app/parro ...
- 【BZOJ】4001: [TJOI2015]概率论
题意 求节点数为\(n\)的有根树期望的叶子结点数.(\(n \le 10^9\)) 分析 神题就打表找规律.. 题解 方案数就是卡特兰数,$h_0=1, h_n = \sum_{i=0}^{n-1} ...
- WebRTC通信流程
WebRTC是HTML5支持的重要特性之一,有了它,不再需要借助音视频相关的客户端,直接通过浏览器的Web页面就可以实现音视频对聊功能.而且WebRTC项目是开源的,我们可以借助WebRTC源码快速构 ...