vscode typescript for cocoscreator

 代码片段

记录cocoscreator自定义在vscode 中typescirpt 的代码片段,方便书写代码，让代码更加整洁。

或者采用定义xx.d.ts文件的形势配置自定义接口快速提醒。

代码片段如下，有需要可以再添加些。

{
	// snippets:
	"Print to console": {
		"prefix": "log",
		"body": [
			"cc.log('$1');",
		],
		"description": "Log output to console "
	},
	"property label": {
		"prefix": "@label",
		"body": [
			"@property(cc.Label)",
			"public $1: cc.Label = null;"
		],
		"description": "@property(cc.Label)"
	},
	"property node": {
		"prefix": "@node",
		"body": [
			"@property(cc.Node)",
			"public $1: cc.Node = null;"
		],
		"description": "@property(cc.Node)"
	},
	"property sprite": {
		"prefix": "@sprite",
		"body": [
			"@property(cc.Sprite)",
			"public $1: cc.Sprite = null;"
		],
		"description": "@property(cc.Sprite)"
	},

	"property spriteAtlas": {
		"prefix": "@spriteAtlas",
		"body": [
			"@property(cc.SpriteAtlas)",
			"public $1: cc.SpriteAtlas = null;"
		],
		"description": "@property(cc.SpriteAtlas)"
	},

	"property [node]": {
		"prefix": "@nodes",
		"body": [
			"@property([cc.Node])",
			"public $1: cc.Node[] = [];"
		],
		"description": "@property([cc.Node])"
	},
	"property [color]": {
		"prefix": "@colors",
		"body": [
			"@property([cc.Color])",
			"public $1: cc.Color[] = [];"
		],
		"description": "@property([cc.Color])"
	},
	"property [sprite]": {
		"prefix": "@sprites",
		"body": [
			"@property([cc.Sprite])",
			"public $1: cc.Sprite[] = [];"
		],
		"description": "@property([cc.Sprite])"
	},
	"property [label]": {
		"prefix": "@labels",
		"body": [
			"@property([cc.Label])",
			"public $1: cc.Label[] = [];"
		],
		"description": "@property([cc.Label])"
	},

	"property string": {
		"prefix": "@string",
		"body": [
			"@property",
			"public $1: string = '';"
		],
		"description": "@property(cc.String)"
	},

	"property int": {
		"prefix": "@integer",
		"body": [
			"@property",
			"public $1: cc.Integer = 0;"
		],
		"description": "@property(cc.Integer)"
	},

	"property enum": {
		"prefix": "@enum",
		"body": [
			"@property({type:cc.Enum($2)})",
			"public $1: $2 = $2.$3;"
		],
		"description": "@property(cc.Enum)"
	},

	// default: 设置属性的默认值，这个默认值仅在组件第一次添加到节点上时才会用到
	// type: 限定属性的数据类型，返回任意类型值的 function 空数组  或空对象  number, string boolean null undefined cc.ValueType 的子类 cc.Vec2, cc.Color 或 cc.Rect
	// number cc.Integer | 枚举 cc.Enum
	// visible: 设为 false 则不在 属性检查器 面板中显示该属性
	// serializable: 设为 false 则不序列化（保存）该属性
	// displayName: 在 属性检查器 面板中显示成指定名字
	// tooltip: 在 属性检查器 面板中添加属性的 Tooltip
	// notify: function
	"property {}": {
		"prefix": "@property({})",
		"body": [
			"@property({",
			"    default: null",
			"    type: $2",
			// "visible:",
			// "serializable:",
			// "displayName:",
			"    tooltip:'$4'",
			"    notify: function(){",
			"        $5",
			"    }",
			"})",
			"public $1 :$2 = $3;",
		],
		"description": "@property ({})"
	},

	"property set get": {
		"prefix": "@property",
		"body": [
			"@property",
			"_$1 = $2;",
			"@property",
			"get $1 (){",
			"    return this._$1",
			"}",
			"@property",
			"set $1 (value){",
			"    return this._$1 = value;",
			"}",
		],
		"description": "@property set get"
	},

	"property async": {
		"prefix": "@async",
		"body": [
			"async $1 (){",
			"    $2 = await this.$3();",
			"};",
			"async $3(): Promise<string>{",
			"    return new Promise<string>((resolve,reject)=>{",
			"        setTimeout(() => {",
			"            resolve(string);",
			"        },1000);",
			"    });",
			"}",
		],
		"description": "function async"
	},
	
}

配置

用vscode 断点调试ts或者js文件，具体如何操作见官网。这里只保留下自己使用的配置，方便后面其他地方使用。

launch.js

{
    "version": "1.4.0",
    "configurations": [
        {
            "name": "Creator Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:7456",
            "sourceMaps": true,
            "userDataDir": "${workspaceRoot}/.vscode/chrome",
            "trace": "verbose", 
            "pathMapping": {
                "/preview-scripts/assets": "${workspaceRoot}/temp/quick-scripts/assets",
                "/": "${workspaceRoot}"
            },
            "runtimeArgs": [
                "--auto-open-devtools-for-tabs"
            ],    
            // "preLaunchTask": "mycompile"
        }
    ]
}

tasks.json

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "shell",
            "label": "mycompile",
            "command": "curl",
            "args": ["http://localhost:7456/update-db"],
            "isBackground": false,
            "presentation": {
                "echo": true,
                "reveal": "always",
                "focus": false,
                "panel": "shared",
                "showReuseMessage": true,
                "clear": true
            },
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }    
    ]
}

有新的再添加记录