空气能热水器,两个人免费高清视频www,一边做一边潮喷30p

來源：https://mp.weixin.qq.com/s/rz0AxCcVG_ODGaYFtl0QuA?tdsourcetag=s_pcqq_aiomsg

VSCode高效開發工作流配置指南

原創： Charley [Layabox](javascript:void(0);) 今天

LayaAirIDE 2.4將VSCode剝離出去，其主要目的是讓開發者編碼工作流更加自由。比如，可以即時體驗到新版本的升級，無需受限于LayaAirIDE。可以通過VSCode來靈活配置自己的開發工作流等。

本篇指南文檔從最簡單的LayaAirIDE與VSCode工作流配置開始，逐步介紹一些高效開發工作流的常用配置方式。

一、前置準備

開發工作流，自然離不開工具的支撐，第一小節先羅列出基礎的必備環境工具。如果都已準備好，可以跳過本小節。

1.1、下載安裝LayaAirIDE

哪怕是將VSCode剝離出去，LayaAirIDE仍然需要下載安裝，這不僅是因為UI與場景的編輯以及項目創建需要用到LayaAirIDE。游戲發布的gulp配置js以及平臺配置json也必須是由LayaAirIDE生成的，哪怕是用命令行發布，對于不同平臺的js發布腳本及json配置，也是需要先在LayaAirIDE中生成一次，所以一定要下載LayaAirIDE。（本篇文檔是基于2.4.0beta版IDE介紹）

LayaAirIDE 下載地址：

https://ldc2.layabox.com/layadownload/?type=layaairide

1.2、下載安裝Node.js

Node.js 是我們日常開發的基礎環境，比如TypeScript編譯、npm都需要依托于 Node.js。

如果沒有安裝，直接前往node官網下載安裝即可，

Node.js 官網下載地址：

https://nodejs.org/en/

1.3、下載安裝VSCode

VSCode是一個應用廣泛的編碼工具，是本篇主要介紹的工具，對于TS與JS項目，推薦使用該工具。

VSCode官網下載地址：

https://code.visualstudio.com/Download

1.4、下載安裝chrome

chrome瀏覽器是LayaAir引擎推薦的運行調試環境，對于這個，開發者一般都會安裝。如果沒有，請下載安裝好。

chrome官網下載地址：

https://www.google.cn/intl/zh-CN/chrome/

二、LayaAirIDE與VSCode關聯設置

假如前置準備的工具我們都安裝好，這時，我們只需要做一個IDE的關聯，即可完成一個完整的開發工作流的配置。

2.1 最基礎的LayaAir工作流（面向VSCode新手）

關于創建項目、打開項目（管理項目）、編譯項目（F8）、運行調試項目（F6）、發布項目等都可以在LayaAirIDE中完成。

我們只需要把VSCode當成一個基礎的編碼工具，編譯與調試，不推薦在VSCode中進行（具體原因后面還會講）。

所以在開發的時候，需要打開兩個軟件，寫代碼在VSCode中進行，UI編輯與項目編譯及運行調試在LayaAirIDE中進行，兩個軟件，快速切換一下，即可完成一個從編碼到運行發布的完整工作流。

對于沒有VSCode使用經驗的開發者，這種模式是最容易理解和操作的工作流。

2.2 在LayaAirIDE中關聯VSCode

正常情況下，安裝好VSCode后，LayaAirIDE能自動找到安裝目錄進行關聯。然而也可能會有無法自動關聯的情況出現。

注：MAC版本，當前的2.4.0beta版有個BUG，必定沒辦法自動關聯。BUG已在2.4.0正式版中修復。

當無法自動關聯的情況出現后，點擊LayaAirIDE中的編輯模式按鈕時，如下圖所示，會彈出來工具路徑配置的頁面。

image

點擊瀏覽或者拖動VSCode安裝目錄的VSCode可執行文件，到工具路徑配置面板的第二個輸入框，再點保存。即完成了IDE與VSCode的關聯。

如果是AS語言的開發者，可以拖動FB或FD的可執行文件進行關聯。總之，第二行就是代碼編輯器可執行文件的啟動關聯路徑。開發者可根據自己的實際使用情況進行關聯。

需要注意的是，在LayaAirIDE 2.4.0beta MAC版里目前有個BUG，點瀏覽可能會無法選中可執行文件。開發者可以采用拖入可執行文件到該輸入框的方式進行配置關聯。（該BUG已在2.4.0正式版中修復）

2.3 修改IDE的關聯

如果開發者不小心選擇錯誤的目錄或者可執行文件，保存后，點擊LayaAirIDE左側的編輯模式按鈕，那就會直接打開錯誤的路徑。

修改的方法如下圖所示，在設計模式下，打開 菜單 -> 文件 -> 工具路徑配置，即可重新拖入正確的可執行文件到對應的配置欄目。

image

三、VSCode中斷點調試

LayaAirIDE剝離VSCode后，不再支持IDE內斷點調試，只能是外部的Chrome調試器中斷點。

如果開發者想在代碼編輯器中斷點調試，則需要在VSCode中配置好調試環境。

VSCode默認是沒有配置調試環境的，如果開發者沒有配置好，可根據本小節的指引，來安裝chrome調試插件（擴展）和配置launch.json來配置好調試環境。

3.1 安裝Debugger for Chrome

點擊左側導航面板的擴展（EXTENSIONS）商店圖標，然后在搜索欄中輸入關鍵字chrome，找到Debugger for Chrome點擊Install進行安裝(已安裝的不再顯示)，操作流程的指引如下圖所示。

image

如果有開發者想使用VSCode中文菜單的，也可以搜索chinese，找到中文插件進行安裝，操作如下圖所示。

image

注：本篇文檔是基于已安裝了中文插件的window版VSCode進行截圖示例。

總之，以后想安裝什么插件，都可以在插件擴展商店中搜索查找及安裝。

3.2 啟動斷點調試及運行項目的流程

安裝完Debugger for Chrome插件后，

如果開發者采用的是LayaAirIDE 2.4.0beta 或更高版本創建的項目，LayaAirIDE在創建項目時會幫大家創建好VSCode調試配置文件 .vscode/launch.json 。

此時，先到LayaAirIDE里按快捷鍵F8編譯一下，然后回到VSCode再按快捷鍵F5，即可啟動VSCode中的斷點調試，以及調起Chrome，顯示運行效果。

經驗匯總：

這里重點強調一下開發者經常遇到的錯誤，那就是不編譯，安裝好Debugger for Chrome之后，直接F5調試，會出現如下圖所示的報錯。

image

這是由于F5只是調試的快捷鍵，必須要先使用LayaAirIDE的編譯（F8），編譯生成運行代碼后，才能使用VSCode里的F5斷點調試。

對于VSCode開發工作流不是特別熟悉的開發者，編譯方面一定要使用LayaAirIDE提供的編譯功能。不要使用VSCode中的tsc編譯任務，因為VSCode中的tsc編譯與LayaAirIDE的編譯及發布流程不一致，所以會有很多地方都要修改，編譯后才能運行成功，而且就算是在VSCode中運行成功了，如果修改的和LayaAirIDE流程不完全一致，也不能使用LayaAirIDE的項目發布功能。當使用LayaAirIDE提供的項目發布功能時，還是要用LayaAirIDE的編譯再重新編譯一次，才能發布成功。

3.2 配置launch.json

如果是LayaAirIDE 2.4.0beta版之前創建的項目，是沒有調試配置文件的。所以，當編譯后，在VSCode使用F5編譯時，會提示選擇調試環境，建議選擇Chrome作為調試環境，如下圖所示。

image

選擇之后，會自動創建調試配置文件 .vscode/launch.json ，并有一些基礎的配置信息。但這些并不夠用。最簡單的辦法是用 LayaAirIDE 2.4.0beta或更高版本IDE創建一個示例項目，把 .vscode/launch.json 文件復制過來替換即可。

launch.json 內容如下：

{
"version":"0.2.0",
"configurations":[
{
"name":"chrome調試",
"type":"chrome",
"request":"launch",
"file":"${workspaceRoot}/bin/index.html",
"runtimeArgs":[
"--allow-file-access-from-files",
"--disable-web-security"
],
"sourceMaps":true,
"webRoot":"${workspaceRoot}",
"userDataDir":"${workspaceRoot}/.laya/chrome",
"sourceMapPathOverrides":{
"src/":"${workspaceRoot}/src/"
}
}
]
}

</pre>

如果不想創建項目復制launch.json的，直接在.vscode目錄創建一個空文件launch.json，將上面的內容復制過去也是可以的。

在VSCode中打開launch.json，鼠標懸停到launch.json的屬性名稱上，可以查看當前屬性描述。

四、VSCode中調LayaAir命令行工具

在第三小節中，僅僅是實現了在VSCode中的斷點調試，編譯與發布還是要切到LayaAirIDE中進行。

有一些開發者，提出不切換，直接在VSCode中實現完整的編譯、調試、發布的需求。本小節將繼續進行指引。

4.1 安裝 layaair2-cmd 與 gulp

Layabox提供了layaair2-cmd命令行工具，通過這個工具，可以不打開LayaAirIDE，直接在VSCode終端命令行下對LayaAir引擎項目進行編譯，以及項目發布（HTML5、微信、百度等小游戲版本）。

安裝 layaair2-cmd

layaair2-cmd安裝的方式比較簡單，由于我們前置準備已安裝好了Node.js，所以直接在命令行終端模式下輸入 npm i layaair2-cmd -g 回車即可，安裝過程如下圖所示。

image.gif

安裝 gulp

要使用layaair2-cmd命令，沒有gulp環境，是跑不起來的，下圖的報錯，正是不支持gulp導致。

image

所以，我們繼續用npm來安裝gulp，在命令行終端模式下輸入npm i gulp -g 回車即可，安裝過程如下圖所示。

image

4.2 layaair2-cmd的使用

layaair2-cmd的使用很簡單，目前只有兩個功能參數， compile 與 publish ，分別是編譯和發布。

編譯命令

當我們想編譯項目時，輸入 layaair2-cmd compile 回車即可。編譯效果如下圖所示。

image

發布命令

不僅是編譯，發布也可以通過命令行搞定。目前的發布類型為HTML5（web）、微信小游戲（wxgame）、百度小游戲（bdgame）、小米快游戲（xmgame）、OPPO小游戲（oppogame）、vivo小游戲（vivogame）、QQ小游戲（qqgame）。

各平臺不同版本的發布命令為：

//HTML5版本發布命令
layaair2-cmd publish -c web
//微信小游戲版本發布命令
layaair2-cmd publish -c wxgame
//百度小游戲版本發布命令
layaair2-cmd publish -c bdgame
//小米快游戲版本發布命令
layaair2-cmd publish -c xmgame
//OPPO小游戲版本發布命令
layaair2-cmd publish -c oppogame
//vivo小游戲版本發布命令
layaair2-cmd publish -c vivogame
//QQ小游戲版本發布命令
layaair2-cmd publish -c qqgame

</pre>

未來有新的平臺命令，可以通過官網文檔中查看，文檔鏈接為：

https://ldc2.layabox.com/doc/?nav=zh-ts-3-0-6

使用命令行發布的注意事項

使用命令行發布之前，我們一定要先在LayaAirIDE里發布一次，因為命令行發布功能需要依托于.laya目錄下的各個平臺的js發布腳本和平臺json配置信息。比如排除，發布配置等信息，需要發布一次后，才會更新保存到對應的平臺json配置中。如果對平臺發布功能不熟悉的，可以打開之前提供的官網文檔鏈接。

需要注意的是，layaAirIDE 2.4beta版創建的項目，TS與TS實驗版的編譯配置有個BUG，所以會導致layaair2-cmd運行報錯。layabox社區上給出了已修復的編譯庫，大家可以前往下載替換，或者等待layaAirIDE 2.4正式版。

2.4beta編譯庫的layabox社區下載地址為：

http://ask.layabox.com/article/8

4.3 不切IDE的工作流

學到此處，我們不僅可以在VSCode中用F5斷點調試，也可以通過本小節學習到的命令行方式，直接通過VSCode終端，使用layaair2-cmd來編譯和發布項目。

這樣一來，對于日常的編碼、編譯、調試、發布，直接在VSCode中實現，不用在兩個工具之間來回切換了。

五、配置VSCode的編譯快捷鍵

盡管命令行模式的工作流可以在日常編碼中脫離了來回切換IDE的繁瑣，或許有一些開發者仍會覺得易用性不夠，如何能實現LayaAirIDE那樣，直接F8快捷鍵就編譯，請繼續看本小節的指引。

直接給命令行設置快捷鍵是通過VSCode做不到的。但是，我們可以在任務里去執行命令行的相關指令。然后修改執行任務的快捷鍵，并指定默認運行的任務名稱，就可以實現VSCode快捷鍵的綁定。

5.1 新建任務（task）

如果我們還沒有創建過任務，可以在VSCode的終端菜單里，點擊配置任務，如下圖所示。

image

然后，點擊選擇 使用模板創建tasks.json文件 的選項，如下圖所示。

image

之后再點擊選擇運行任意外部命令的示例選項，如下圖所示。

image

這時，我們就可以看到，.vscode目錄下，一個執行外部命令的任務模板.vscode/task.json創建成功了，我們只需要更改一下label（任務名稱）和command（要執行的命令）即可。效果如下圖所示。

image

修改后的task.json內容為：

{
"version":"2.0.0",
"tasks":[
{
"label":"compile",
"type":"shell",
"command":"layaair2-cmd compile"
}
]
}

</pre>

5.2 綁定快捷鍵

在文件菜單 -> 首選項 -> 打開 鍵盤快捷方式，或者直接先后連按快捷鍵Ctrl+K Ctrl+S 打開，如下圖所示。

image

打開鍵盤快捷方式后，先在頂部搜索task，找出任務相關的快捷方式，再找到 運行任務（Run Task）雙擊，設置快捷鍵 Ctrl + F8 （可按自己的習慣設置一個不沖突的快捷鍵即可），回車即完成運行任務的快捷鍵綁定。效果如下圖所示。

image

然后，通過快捷鍵Ctrl + Shift +P調出命令面板，搜關鍵字 open key，找到 打開鍵盤快捷方式（JSON）的命令，如下圖所示，點擊打開。

image

點擊后，我們看到快捷盤配置的JSON里，有剛剛綁定了快捷鍵的配置信息。這里，我們增加一個參數args，此處的值就是默認啟動的任務，我們將之前創建的任務名稱compile設置到這里即可，效果如下圖所示。

image

有經驗的開發者，其實也可以跳過之前的步驟，不需要先在鍵盤快捷方式面板那里綁定，而是直接在keybindings.json中增加以下內容：

[
{
"key":"ctrl+f8",
"command":"workbench.action.tasks.runTask",
"args":"compile"
}
]

</pre>

到這里，我們就完成了給編譯命令綁定快捷方式的全部操作。以后，我們就可以在VSCode中直接使用Ctrl+F8編譯，F5斷點運行，這個快捷的編碼工作流了。

六、用gulp監聽實現自動執行編譯

如果開發者覺得快捷鍵編譯還不夠，想實現實時編譯，也是可以做到的。這一小節，我們以創建gulp任務的方式，為大家介紹如何實現自動編譯。

6.1 安裝本地gulp環境

之前，我們以npm i gulp -g 命令安裝過gulp全局環境。

如果要使用gulp監聽等功能，還需要在項目的目錄內安裝本地gulp環境，

安裝命令去掉全局參數-g即可，去掉后的命令為： npm i gulp，安裝效果如下圖所示。

image

安裝完成后，我們可以看到項目目錄內多了一個node_modules目錄，如下圖所示。

image

6.2 編寫gulp任務腳本

我們在根目錄創建一個gulpfile.js腳本文件，腳本內容參照如下：

const {watch ,task }= require("gulp");
const {exec}= require("child_process");
function compile(cb){
//執行編譯命令 layaair2-cmd compile
let process = exec("layaair2-cmd compile");
process.stdout.on("data",(data)=>{
console.log(data);
});
process.stderr.on("data",(data)=>{
console.log(data);
});
process.on("exit",(code,signal)=>{
console.log("success");
console.log(code,signal);
cb();
})
}
//創建一個名稱為compile的gulp任務
task("compile", function(){
/**
*@監聽src目錄下的所有子目錄的所有文件，
*@延遲1000毫秒，才執行下次監聽
*@監聽生效后執行的函數
*/
watch('src/**/*.*',{delay:1000}, compile);
});

</pre>

了解更多gulp任務監聽，可以查閱gulp官方文檔：

https://www.gulpjs.com.cn/docs/getting-started/watching-files/

保存好gulpfile.js這個gulp任務腳本后，效果如下圖所示。

image

然后，我們直接在終端命令行下，直接輸入gulp compile即可執行名稱為compile的gulp任務。如下圖所示。

image

只要這個任務不關，那這個任務的watch監聽會一直執行下去，從而達到了自動編譯的目標。

七、寫在最后

至此，在VSCode中編碼時，無論是編譯、調試運行、還是發布，本篇都有涉及，以此為借鑒，開發者可以搭建一個流暢的開發工作流。

當然，VSCode自定義工作流的強大遠不止于此，對于工作流的搭建，方式非常多。如果想更加深入了解的，可以不必局限于本篇。本篇僅僅為那些沒有VSCode使用經驗的開發者，提供一些基礎的工作流搭建參照。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

LayaAirIDE與VSCode工作流配置

VSCode高效開發工作流配置指南

一、前置準備

1.1、下載安裝LayaAirIDE

1.2、下載安裝Node.js

1.3、下載安裝VSCode

1.4、下載安裝chrome

二、LayaAirIDE與VSCode關聯設置

2.1 最基礎的LayaAir工作流（面向VSCode新手）

2.2 在LayaAirIDE中關聯VSCode

2.3 修改IDE的關聯

三、VSCode中斷點調試

3.1 安裝Debugger for Chrome

3.2 啟動斷點調試及運行項目的流程

經驗匯總：

3.2 配置launch.json

四、VSCode中調LayaAir命令行工具

4.1 安裝 layaair2-cmd 與 gulp

安裝 layaair2-cmd

安裝 gulp

4.2 layaair2-cmd的使用

編譯命令

發布命令

使用命令行發布的注意事項

4.3 不切IDE的工作流

五、配置VSCode的編譯快捷鍵

5.1 新建任務（task）

5.2 綁定快捷鍵

六、用gulp監聽實現自動執行編譯

6.1 安裝本地gulp環境

6.2 編寫gulp任務腳本

七、寫在最后

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频