CocosCreator手记03——简单配置VSCode的TypeScript环境

对于基于JavaScript的各种语言,我用过Coffee。但是印象中,除了遍地语法糖,写起来比较快。也没有觉得特别好用。

而TypeScript可谓一门语言,其主要特性有:

  • 兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码(ECMAScript 3及以上版本);
  • 面向对象,并拥有一些函数式特性;
  • 类型语言;
  • 实现了注解、泛型等特性;
  • 适配大型App构建。

这些特性,对于曾经使用过强类型语言的开发者,并且对于重构,代码提示有大量需求的团队,都是很有吸引力的。虽然表面上编码量变大了,但得到的好处则是成倍的,尤其是对于大项目。

虽然CocosCreator1.5已经提供了对TypeScript的支持,但是基于初步学习的方便性,我们还是需要一个轻量级的,独立的TS开发环境。

1.安装node

https://nodejs.org/en/download/

一路确认

2.安装vscode

https://code.visualstudio.com/

一路确认

3.安装TypeScript

命令行模式下,全局选项,安装TypeScript

npm install -g typescript

4.确认三者安装成功

在命令行模式下,用三个命令确认安装成功

node -v
npm -v
tsc -v

新建一个文件夹,用作ts工程,命令行cd到文件夹里,然后运行

code .

就可以从vscode打开当前文件夹

5.项目配置文件

task.json

此文件是项目的编译配置文件

在VSCode中快捷键 Ctrl + Shift + B用来编译,对应的编译配置文件为.vscode/task.json

第一次运行时没有这个文件,选择创建TypeScript项目那个选项,就会自动创建.vscode/task.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "0.1.0",
    "command": "tsc",
    "isShellCommand": true,
    "args": ["-p", "."],
    "showOutput": "silent",
    "problemMatcher": "$tsc"
}

基本没什么要改的,有了这个task.json后每次Ctrl + Shift + B 即可调用tsc命令编译typescript

tsconfig.json

这个文件和输出有关,直接在VSCode里建立tsconfig.json即可,然后写入如下内容

{
    "compilerOptions": {
        "target": "es6",
        "outDir": "build",
        "sourceMap": true
    }
}

launcher.json

此文件是项目的引导启动文件

Ctrl + Shift + D 点击配置图标,选择nodejs

然后根据提示创建launcher.json,打开此文件,加入一些选项,使VSCode认得typescript和sourceMap

"program": "${workspaceRoot}/app.ts",
"sourceMaps": true,
"outDir": "${workspaceRoot}/build"

这样就可以在typescript上打断点调试了

6.编写并调试

新建app.ts,开始写

/**
 * person
 */
class person {
constructor() {
}
/**
     * print
     */
public print() {
    console.log(‘你好,TS‘);
    console.log(‘老G,666‘);
    console.log(‘弄好了,睡觉‘);
}
}
let p = new person();
p.print();

Ctrl + Shift + B 编译后就可以 ,F5调试程序了。

如果需要配置浏览器环境,可以从下面的参考文章中找到

参考:
http://www.2gua.info/post/59

https://github.com/nshen/ts-node-vscode-starter

https://dotblogs.com.tw/lapland/2016/03/09/163229

http://www.cnblogs.com/gaoshang212/p/5626445.html

时间: 2024-12-08 18:17:22

CocosCreator手记03——简单配置VSCode的TypeScript环境的相关文章

VS Code配置Go语言开发环境

参考文件文档: https://www.liwenzhou.com/posts/Go/00_go_in_vscode/ linux环境下安装Go语言开发工具包的坑: 安装时会报失败: 配置好环境变量: sudo vim /etc/profile export GOROOT="/usr/local/go" export GOPATH=$HOME/go export GOBIN=$GOROOT/bin export PATH=$PATH:$GOBIN 按esc -> shift+;

vsCode怎么为一个前端项目配置ts的运行环境

vsCode为一个前端项目配置ts的运行环境,ts文件保存的时候自动编译成js文件: 假设此前端项目名称为Web:文件结构如图 1. 在根目录中新建一个".vscode"文件夹,里面建一个"tasks.json"文件,内容为: { // See https://go.microsoft.com/fwlink/?LinkId=733558 // for the documentation about the tasks.json format "versio

vscode 调试 TypeScript

安装 typescript 依赖 npm install typescript --save-dev 目录结构: 添加 tsconfig.json 主要是将 sourceMap 设置为true. { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": true, "outDir

简单配置让iterm2用得更爽

同步自本人独立博客:https://liushiming.cn/2020/01/15/awesome-iterm2-config/ 概述 iterm2比mac原生的terminal好用很多,是mac下必装的软件之一,装好后简单配置就用的很爽了.我个人的配置主要有以下方面,供参考: 开机默认启动iterm 主题设置为Solarized Dark 设置更美观的中文字体 开启全局快捷键opton + space方便随时唤起iterm2 设置vim中鼠标选中复制功能 设置vim支持鼠标滚动 备份配置文件

nagios的简单配置实践

我们都知道军队里,哨兵的角色很重要,敌人来了先把哨兵解决了.猴子,在企业网站 架构里,这个监控系统就相当于哨兵的作用,监控系统非常重要.体检.. 监控系统都需要监控: 1.本地资源:负载uptime, CPU(top,sar), 磁盘(df-h),内存(free swap ),lO(iostat), RAID 级别,CPU温度,passwd文件的变化,本地所有文件指纹识别监控.. 2.网络服务:端口,web(URL),DB, ping 丢包,进程数,IDC 网络流量.. 3.其他设备:路由器.交

0123简单配置LNMP

简单配置LNMP不怕出现错误,就怕错误不知道出现在哪里?看日值tail -f /var/log/message -- 系统整个的日志tail -f /var/log/nginx/error.log -- 单个应用的日志http://www.cnblogs.com/make217/p/5836864.htmlhttp://www.cnblogs.com/xiaoit/p/3991037.html

Samba服务器的简单配置

案例说明: 公共目录        public   /abc            ro  允许任何人匿名访问, Daiqing1        smbdq1   /tmp/daiqing1   rw  不允许他人访问 Daiqing2        smbdq2   /tmp/daiqing2   rw  不允许他人访问 Samba服务器的简单配置,布布扣,bubuko.com

Linux安装MariaDB和简单配置

1.安装MariaDB 安装命令 yum -y install mariadb mariadb-server 安装完成MariaDB,首先启动MariaDB systemctl start mariadb 设置开机启动 systemctl enable mariadb 接下来进行MariaDB的相关简单配置 mysql_secure_installation 首先是设置密码,会提示先输入密码 Enter current password for root (enter for none):<–初

linux ntp安装简单配置

公司的一台服务器硬件坏了挂了,其中就有ntp服务端,写一下ntp服务端的简单配置. 1.首先安装ntp,centos 系统执行 yum install ntp 2.写入配置文件/etc/ntp.conf如下 restrict 192.168.18.153 mask 255.255.255.0 nomodify notrap restrict 192.168.18.0 mask 255.255.255.0 nomodify server time.pool.aliyun.com #server 1