在上一篇，我们已经准备好了开发环境（如果你没有，请返回查看上一篇）。
现在我们来学习一步一步创建一个基于vscode的ts项目工程。（typeScript）
vscode和一般的ide区别在于，它不是直接在菜单里新建一个工程。
以下内容非常非常的详细，从无到有，多图实操，跟着一起做你也会成功~
【一】学习使用vscode来创建一个工程：
其实非常简单，我们在任意盘下（你项目一般放在哪），创建一个文件夹。
取个名称：TestWebGL （项目名称不重要，或者叫 LearnWebGL ）
然后，回到vscode里面，执行菜单栏的，“文件”>>"打开文件夹"。
浏览选择你刚刚创建的“TestWebGL”文件夹目录。这样它就成了你的工程目录了。
以后，你创建或生成的所有文件，资源，配置，都会在这个目录下进行。
可以看到，TestWebGL目录在vscode里面显示为大写状态。TESTWEBGL
* 由此可知，任意一个文件夹目录，就可以指定为vscode项目的工程目录。
【二】创建ts项目所需要的配置。
什么是配置？主要是指 package.json 和 tsconfig.json 这两个文件。
* package.json 决定我们的项目名称，程序说明，以及脚本指令集合等。
* tsconfig.json 决定我们如何将ts文件编译成js，编译参数。以及输入输出的路径等。
显然，vscode不会为我们准备好这一切，都需要我们手工去创建。
然而，创建这些配置其实也非常的简单，只需一行命令就完事了。
（a）创建 package.json ：
在vscode中，按快捷键 ctrl+~。打开终端（CMD）输入 npm init
会显示一些提问，比如项目名字，不用管，只需一路回车执行就好，
最后会询问： Is this ok? (yes) 
继续！因为后边可以手工去修改。
就会在目录下创建pakage.json配置模板文件。
（b）创建 tsconfig.json ：
在vscode中，按快捷键 ctrl+~。打开终端（CMD）输入 tsc --init
一路回车，最终会生成tsconfig.json配置模板文件。
两个文件已经生成了，先不用关心里面的内容是什么，后边会讲。
【三】建立工程所需要的目录结构。
我们在其它项目开发的时候，经常会把源码，资源，库，输出单独放在一个目录下方便管理。
所以，常用的存放源码的目录比如：src 。库目录：lib。输出目录：bin。
选中项目名称，点击旁边的”新建文件夹“按钮图标，依次创建这三个常用的目录。
* 注意：点创建的时候，一定要选择项目名称，不然会创建到不对的层级，比如子目录。
万一层级错了，不要紧。你只需要拖动它到正确位置即可。
src 目录：存放源码，比如ts文件。
lib 目录：存放库文件，比如第三方js库引用。
bin 目录：存放编译结果输出。
【四】编写第一个ts文件：Main.ts
选中src目录，点击”新建文件“图标，新建一个ts文件，命名为：Main.ts
我们就按国际惯例，运行后在控制台输出一个文本：hello world
双击Main.ts文件，在编写区，输入代码：console.log("hello world");
我们知道TypeScript语言是JavaScript的超集，所以我们需要将它先编译成js才能使用。
【五】初步配置tsconfig.json
生成js的配置，在上面我们已经知晓，是在tsconfig.json中配置的。
打开tsconfig.json是一个文本文件，json格式显示，有许多参数。
在默认情况下，都无需修改，我们需要关心的是，指定生成的js文件存放目录。
找到outDir这个选项，默认情况下是//注释掉的，我们去掉//符号开启它。修改成："outDir": "bin/js/",
这样，我们刚才的Main.ts如果编译的话，它会生成输出到bin/js/目录下面。
接下来，就是怎么样把ts编译成js的问题了。
【六】初步配置 package.json
这个文件掌管着一些跟项目相关的东西，比如编译命令。
双击打开package.json文件，同样也是一个文本json格式的内容。
{
"name": "learnwebgl",//项目名称
"version": "1.0.0", //版本号
"description": "", //说明
"main": "", //可执行的脚本
"scripts": { //命令
"test": "echo \"Error: no test specified\" && exit 1",
},
"author": "",//作者
"license": "ISC"
}
默认情况下，是这样的，我们可以根据自己的情况修改。
我们最关心的是scripts这个键中的内容，它可以指定一些命令，方便使用。
"tsc:w": "tsc -w" ——以监控模式运行TypeScript编译器。后台始终保持进程。
一旦TypeScript文件变化即会重编译
将上面这个指令，添加到scripts下。
接下来，我们尝试编译ts输出为js文件。
按ctrl+~ 打开终端，输入：npm tsc:w
不出意外的话，在bin/js/目录下，会生成一个Main.js
* 小知识：手工编译ts文件的快捷键是：ctrl+shift+b。然而每次编译都需要按这几个键，太不智能了。
好在提供了tsc -w的指令，它可以实时的监控你的任意一个ts文件，只要内容发生了变动，就会立即编译它。
由于我们使用的正是这个命令，所以以后只要更改了ts文件的内容，都会自动编译成js了，非常舒服省事。
【七】编写html文件调用生成的js文件。
在上一节，我们生成了Main.js文件，我们只需要在bin目录下，创建一个index.html文件。然后调用这个js就完事了。index.html的内容十分的简单。
<script type="text/javascript" src="js/Main.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
<script type="text/javascript" src="js/Main.js"></script>
</head>
<body>
<img src="" id="img"/>
<canvas id='my-canvas' width='480' height='400'>
对不起，您的浏览器未支持H5内容.
</canvas>
</body>
</html>
在body区域，有一个canvas标签，这是h5的画布，在本节中这不是必须的，在以后的章节我们会讲解它。
到现在为止，我们只差一步就完成了，因为web开发是需要有一个http的web服务的。
所以我们还有最后一个任务，就是在vscode中安装一个http web网站服务插件。
【八】安装web浏览的http服务插件：lite-server。
按ctrl+~打开终端，输入：npm install -g lite-server --save-dev参数 -g 表示全局安装，在前面我们已经接触过了。
参数 -save-dev 表示将会把安装的环境写入到pakage.json里面。
安装成功后，http的网站目录默认在我们的项目下，我们需要改到bin/输出目录下。
我们创建一个http的配置文件存放到configs目录下（新建）。configs/http-config.json
prot：指定web访问的端口。
files：表明需要监视哪些文件，一但这些文件的内容发生变化时，会自动刷新浏览器。
server：服务器的主目录。
startPath：指定启动lite-server后自动打开的主页。
然后，我们只需要让lite-server服务器读取这个配置就可以了。
同样，按ctrl+~打开终端，输入：lite-server -c configs/http-config.json
http服务器读取配置启动，并会打开默认的浏览器。建议使用谷歌浏览器作为默认的浏览器。
以后打开http服务只需要输入：lite-server
* 它会一直在后台运行，直到你在终端里按 ctrl+c 组合键，就可以关闭它。 请记住！
另外，终端里的所有进程都关联在vscode上，当我们关闭vscode软件后，进程都会全部关闭。
【九】使用谷歌浏览器调试输出。
在谷歌浏览器，按F12打开控制台，切换到Console选项卡中，按F5刷新。
不出意外的话，控制台应该输出了：hello world
【十】写在结尾：
其实每个步骤都十分简单，做为入门级的教程，为了照顾新人，保证每一步都清晰易懂；
所以将每一步都用多图的形式展现出来，导致的结果就是篇幅很长，大神们可以忽略跳过了。
里面还有一些内容没有完全讲解，但在以后的学习过程中会详细讲解。
本节你只需要搞懂ts项目的建立到编译，然后到调试输出这个流程。
其实打交道最多的是终端命令，希望好好掌握它。ctrl+~
由于是业余时间写作，错误难免会有，如有发现欢迎留言指出。
最终的 tsconfig.json 文件内容：
最终的 package.json 文件内容：
在下一节，我们将学会用ts调用webgl画布！
来做为进入3D编程的开始。