layaBox配置vscode开发环境

比较了一下creator3D和layabox，还是选择了layabox。习惯了vscode调试，肯定要先配置一下环境了。

layabox有个不合理的地方就是，代码里边加了组件，回到ide不会自动刷新，还要重新编译打开一下，好烦啊。所以vscode编译调试这个东西是非常有必要的。

参考layabox官方文档配置的环境https://ldc2.layabox.com/doc/?nav=zh-as-3-0-9，但是感觉写的有点太细了。我自己做个简单的笔记。

1、下载layabox，我下载的是目前最新的2.6.1了。

2、nodejs，nodejs必须要10.x的，之前也装了nodejs版本控制工具nvm，直接新装一个10.x的就好了。

3、vscode,chrome肯定是都会有的东西了。vscode安装插件debugger for Chrome，直接插件商店搜索安装就好了，我之前用creator调试的时候有装过。

4、在layaair里边关联代码编辑器，然后新建一个项目，2.6.1是会自动创建launch.json的，低版本要自己创建。

5、安装layaair命令行工具。layaair2-cmd和gulp。（这个工具可以不打开ide就能够编译运行代码，我觉得这个针对layabox不会自动刷新ide是最好的工具了。我可以改完代码直接编译运行，不需要去看那个憨憨的ide)。

安装layaair2-cmd：npm i layaair2-cmd -g

(这个挺容易安装失败的，各种各样的问题，我的是安装之后显示失败，说已经本地有了，但是我的本地目录确实没有，所以在这个命令后边加上了 --force to overwrite就安装成功了。具体安装失败官网文档里还有好几种失败方式，还附了图)

安装gulp：npm i gulp -g

6、配置编译任务，顶部任务栏选择：终端->配置任务->使用模板创建->Others运行任意

就会新建一个task.json的文件在 .vscode文件夹下，改一下command的值为layaair2-cmd compile。

{

"version": "2.0.0",

"tasks": [

{

"label": "compile",

"type": "shell",

"command": "layaair2-cmd compile"

}

]

}

这个时候就可以编译了，在vscode里边，ctrl + p，输入task，空格键加上上边配置的 compile，回车就可以看到底部的终端已经在编译了，下边再配置一下快捷键。

7、配置编译快捷键。左下角设置，选择键盘快捷方式。

右上角倒数第三个小图标打开json

在打开的文件下添加自己的快捷键。

// 将键绑定放在此文件中以覆盖默认值

[

{

"key": "ctrl+enter", //请配置自己习惯的快捷键

"command": "workbench.action.tasks.runTask",

"args": "compile"

}

]

这时候在vscode中按下自己配置好的快捷键，就能够编译了。然后f5，就可以看到运行的效果了。

改动代码，也不需要切laya ide去编译运行了，也可以直接在vscode中断点，控制台看输出，很方便。

还有一个问题：我一开始配置好之后，f5打开的是一个空网页，报错信息是这样

后来搜索了一下，在laya的论坛里看到说是vscode版本太高的缘故。要么降版本，还有一个解决方案就是在settings.json中加上

"git.ignoreLimitWarning": true,

"debug.javascript.usePreview":false

这两行代码就可以了。

layaBox配置vscode开发环境相关推荐

RP2040配置VSCODE开发环境——一劳永逸版
前言前面的环境搭建基本上介绍了所有的开发环境配置,也对比了各个环境的优劣.个人认为,非商业开发的话,可能Segger Embedded Studio是最好的,但是我不太习惯他的使用方式.这个会另外开 ...
在win10上安装go并配置vscode开发环境
1 下载并安装vscode(略) 2 从https://golang.org/dl/https://golang.org/dl/ 下载windows版本的go安装程序 3 双击安装程序,一路点next ...
普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境
目录普冉PY32系列(一) PY32F0系列32位Cortex M0+ MCU简介普冉PY32系列(二) Ubuntu GCC Toolchain和VSCode开发环境普冉PY32系列(三) P ...
HC32L110(三) HC32L110的GCC工具链和VSCode开发环境
目录 HC32L110(一) HC32L110芯片介绍和Win10下的烧录 HC32L110(二) HC32L110在Ubuntu下的烧录 HC32L110(三) HC32L110的GCC工具链和VS ...
vscode使用教程python-用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...
vscode中装js解释器_h5学习记录（1）--vscode配置js开发环境
文笔不是很好,第一次写东西,主要为了记录h5的学习过程.今天记录的是vscode配置js开发环境. 什么是VSCode Visual Studio Code (简称VS Code/VSC) 是一款于2 ...
vs code python_用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...
visual code php,vscode(Visual Studio Code)配置PHP开发环境的方法(已测)_编程开发_软件教程...
Visual Studio Code一个轻量且强大的代码编辑器,支持Windows,OS X和Linux.内置JavaScript.TypeScript和Node.js支持,而且拥有丰富的插件生态系统 ...
vscode python环境配置_用VScode配置Python开发环境
前言 VScode是一个相当优秀的IDE,具备开源.跨平台.模块化.插件丰富.启动时间快.颜值高.可高度定制等等优秀的特质,不愧是微软爸爸的私生子. 所以用VScode来编写Python,也是相当的好 ...

layaBox配置vscode开发环境

layaBox配置vscode开发环境相关推荐

最新文章

热门文章