摘要：支持，和三種環(huán)境，并且可以安裝擴(kuò)展插件，因而可以滿足絕大多數(shù)人的要求，安裝配置非本文所要講述的內(nèi)容，請(qǐng)自行查找，本文著重討論如何用更好的調(diào)試代碼，希望能對(duì)大家有所幫助。

最近在用vscode 1.23版本的時(shí)候發(fā)現(xiàn)outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開(kāi)sourceMaps，同時(shí)在babel編譯的時(shí)候自己搞--watch及時(shí)生成.map文件便于vscode索引;如果你要編譯其他語(yǔ)言，其實(shí)可以在package.json當(dāng)中添加scripts，通過(guò)tasks.json來(lái)在debug之前進(jìn)行編譯，下面展示出.vscode下的兩個(gè)文件，此為babel方法，其他類(lèi)似

.launch.json

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "啟動(dòng)程序",
      "program": "${workspaceFolder}/lib/login.js",
      "sourceMaps": true,
      "preLaunchTask": "build" // 等于下面`label`值
    }
  ]

tasks.json

{
  "version": "2.0.0",
  "command": "npm",
  "tasks": [
    {
      "label": "build",
      // 合起來(lái)就是`npm run build`
      "type": "npm",
      "script": "build"
    }
  ]
}

package.json

"scripts": {
    "build": "babel src --out-dir lib --source-maps"
  },

實(shí)際上這樣較慢，建議多帶帶在build加watch，然后直接不用preLaunchTask

之前一直習(xí)慣了用瀏覽器來(lái)調(diào)試代碼，偶爾想調(diào)試一下node包中的代碼，或者自己想寫(xiě)一個(gè)小的node插件無(wú)從下手，不知道該怎么調(diào)試，經(jīng)過(guò)查找資料和向?qū)熣?qǐng)教實(shí)踐了一下這個(gè)過(guò)程

Visual Studio Code(以下簡(jiǎn)稱vscode)是一個(gè)很強(qiáng)大的編輯器，相對(duì)而言比較輕量，因?yàn)槲彝ǔＯ矚gwebstorm，webstorm自動(dòng)保存和錯(cuò)誤提示的特性深受我喜愛(ài)，但是對(duì)于調(diào)試nodejs來(lái)說(shuō)，vscode則更具有它的優(yōu)勢(shì)所在。vscode支持windows，OS X和Linux三種環(huán)境，并且可以安裝擴(kuò)展插件，因而可以滿足絕大多數(shù)人的要求，安裝配置非本文所要講述的內(nèi)容，請(qǐng)自行查找，本文著重討論如何用vscode更好的調(diào)試node代碼，希望能對(duì)大家有所幫助。

左上角依次是項(xiàng)目目錄，搜索，版本管理git相關(guān)(左下角為當(dāng)前分支)，調(diào)試，其他擴(kuò)展插件 ，其他的均為中文標(biāo)注，不解釋?zhuān)际窃蹅儽匾?，這幾個(gè)如果沒(méi)有的建議調(diào)出來(lái)這都是調(diào)試很必要的幾個(gè)東西，可以去到菜單欄的查看中逐一調(diào)出

點(diǎn)擊圖中左數(shù)第四個(gè)按鈕，也就是調(diào)試，然后點(diǎn)擊圖中紅框即可打開(kāi)launch.json

    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "program": "${workspaceFolder}/src/extract-cli.js",
            "args": ["--output", "output.pot", "${workspaceFolder}/test/product_group.vm"],
            "outDir": "${workspaceFolder}/dist",
            "sourceMaps": true
        }
    ]

type和request不用改，默認(rèn)就可以，request為launch時(shí)用F5直接可以啟動(dòng)調(diào)試，request為attach按照官網(wǎng)解釋是關(guān)聯(lián)到已經(jīng)運(yùn)行的一個(gè)程序，但是此處可以不管，我們就用vscode自帶的調(diào)試器進(jìn)行調(diào)試就好。

program這個(gè)參數(shù)是指定要運(yùn)行的js入口文件，其中${workspaceFolder}為當(dāng)前打開(kāi)的項(xiàng)目目錄，.vscode目錄會(huì)自動(dòng)生成在此目錄下，launch.json也在此目錄下

args也是個(gè)比較重要的，比如該例，我執(zhí)行命令gettext-extract --output output.pot input.vm 那么args的作用其實(shí)就是傳入命令后面的參數(shù)，每個(gè)空格之間要分開(kāi)，寫(xiě)成args的某個(gè)子元素

sourceMaps對(duì)于編寫(xiě)es5代碼來(lái)說(shuō)這個(gè)參數(shù)沒(méi)有什么卵用，但是對(duì)于寫(xiě)es6,TypeScript等就十分有必要了，這個(gè)參數(shù)的值為true時(shí)會(huì)利用編譯過(guò)程生成的map來(lái)進(jìn)行源碼和編譯后的代碼進(jìn)行對(duì)應(yīng)，這樣在源碼打斷點(diǎn)，就可以愉快的進(jìn)行我們的調(diào)試了

outDir是用來(lái)標(biāo)注編譯后代碼的生成目錄的，幫助vscode進(jìn)行查找

下面討論下關(guān)于編譯前后的對(duì)應(yīng)關(guān)系這件事

我這邊是用的babel來(lái)進(jìn)行編譯的，經(jīng)過(guò)嘗試，program參數(shù)如果直接指向編譯后的文件，vscode奇跡般的可以自己去尋找到源碼文件，這對(duì)于我們的調(diào)試是最簡(jiǎn)單的方式了

如果program指向你編寫(xiě)的文件，那么需要提供一個(gè)outDir參數(shù),只要配置到編譯生成目錄就好了。

其他：目測(cè)不需要sourceMaps還有編譯成成.js.map如果你調(diào)試遇到了問(wèn)題請(qǐng)嘗試將sourceMaps設(shè)置為true并讓編譯工具生成map文件

只要在你調(diào)試的代碼左邊點(diǎn)擊一下，只要是紅色的，說(shuō)明此處斷點(diǎn)可行，如圖所示

直接按F5即可開(kāi)始調(diào)試，會(huì)在界面上出現(xiàn)類(lèi)似于chrome的那幾個(gè)單步跳過(guò)，單步調(diào)試等等，使用方法類(lèi)似chrome,只是快捷鍵稍有不同

然后點(diǎn)擊左側(cè)上面介紹的調(diào)試按鈕，會(huì)看到運(yùn)行到某一步的變量，還有調(diào)用堆棧情況，如圖所示

捎帶介紹一下本文使用的babel和命令行入口相關(guān)的知識(shí)

打開(kāi)package.json，會(huì)發(fā)現(xiàn)有一個(gè)bin的配置,這么配置再npm install的時(shí)候就會(huì)將這兩個(gè)命令加入到node_modules/.bin當(dāng)中，然后就可以用做命令行了

  "bin": {
    "gettext-compile": "./dist/compile-cli.js",
    "gettext-extract": "./dist/extract-cli.js"
  }

babel執(zhí)行命令時(shí)可以加--source-maps true來(lái)生成map文件，如果遇到我上面說(shuō)到問(wèn)題的才會(huì)用到這個(gè)，估計(jì)其他的編譯工具也會(huì)有；另外，我們修改源文件之后，想立即重啟調(diào)試來(lái)進(jìn)行驗(yàn)證，每次都自己執(zhí)行命令很麻煩，那么babel自身支持--watch參數(shù)，可以監(jiān)控文件變化，這樣我們就可以實(shí)現(xiàn)簡(jiǎn)單的自動(dòng)化

babel或者其他的命令行命令寫(xiě)的很長(zhǎng)，不容易記住，那么我們就可以將其寫(xiě)在package.json當(dāng)中,如下就是講babel編譯寫(xiě)在其中，可以執(zhí)行npm run prepublish即可

  "scripts": {
    "prepublish": "babel  --watch --presets es2015 --plugins transform-object-assign --source-maps true src --out-dir dist/"
  }

參考資料：

官網(wǎng)提示文檔

[譯]Visual Studio Code文檔其4—調(diào)試

采用easygettext源碼來(lái)進(jìn)行講解的

babel --help的幫助