我們從一個(gè)例子開始：
/*
* @file index.js
*/
let x,y,z;
x = 10;
y = 20;
z = 5;
console.log(x)
// 終端輸出：10
接著我們改一下console.log()的內(nèi)容:
console.log(__filename+":10:10 x=> "+x)
// 終端輸出：f:\test\index.js:10:10 x=> 10
因Visual Studio Code 的集成終端支持路徑訪問，故輸出的
f:\test\index.js:10:10是可以通過Ctrl+點(diǎn)擊鼠標(biāo)左鍵跳轉(zhuǎn)到文件f:\test\index.js的第10行第10列激率。
這樣的處理使我們能通過路徑精確定位到這條消息所在的源碼位置，方便我們識(shí)別并定位輸出該消息的變量位置。當(dāng)我們的項(xiàng)目下有多個(gè)JS文件而且有多個(gè)console.log()/console.warn()等時(shí)，加上路徑及上下文坐標(biāo)方便我們準(zhǔn)確定位代碼伪阶。不過每次都這樣寫還是很麻煩的，好在我們可以利用Visual Studio Code 提供的“用戶代碼片段”功能來簡化輸入芬膝。
做成JavaScript用戶代碼片段
大家覺得實(shí)用的話可以參考下面的JavaScript的用戶代碼片段文件JavaScript.json的一個(gè)片段設(shè)置例子：
"devLog":{
"prefix": "cl",
"body": "console.log(` \\${__filename\\}:$TM_LINE_NUMBER:${1}` + '\\033[40;32m ${2} -->\\033[0m ' + ${2})",
"description": "console.log() with link."
}
在代碼片段中，我加了終端消息著色處理字符 ：\\033[40;32m 和 \\033[0m（終端字符著色可以參考：http://www.reibang.com/p/cca3e72c3ba7）形娇。
舉一反三
其實(shí)锰霜，不止JavaScript 類代碼可以這么干，其他的語言也可以的桐早，例如 Python 的 print() 這類的癣缅。我們終究只是增加了輸出的內(nèi)容而已厨剪，只要不會(huì)導(dǎo)致語法錯(cuò)誤和導(dǎo)致BUG且不太麻煩就可以。
需要注意的問題
在Node.js的項(xiàng)目中因有__filename的支持友存，用起來比較方便祷膳，但其他項(xiàng)目中想打印完整路徑，需要做轉(zhuǎn)義處理：
$TM_FILEPATH 需要做這樣的處理：${TM_FILEPATH/(\\\\)/\\\\\\\\/g} ——把“\”替換為“\\”屡立。
上面的例子處理之后為：
"devLog":{
"prefix": "cl",
"body": "console.log(` ${TM_FILEPATH/(\\\\)/\\\\\\\\/g}:$TM_LINE_NUMBER:1` + '\\033[40;32m ${2} -->\\033[0m ' + ${2})",
"description": "console.log() with link."
},
// ${2} 可以一次輸入兩組相同的字符串直晨，減少鍵入量（技巧：多個(gè)相同的變量可以一次鍵入多組相同字符串）。
// 本來可以加入列坐標(biāo)膨俐，但不好控制,直接默認(rèn)為1勇皇。
注意：
- 這種做法只適合在開發(fā)過程中調(diào)試使用，如果你想保留到實(shí)際成品中焚刺，還請盡可能調(diào)試并保證路徑和行列坐標(biāo)準(zhǔn)確敛摘。因?yàn)殡S著代碼量的增/減，行列坐標(biāo)可定是會(huì)變的乳愉。
- Visual Studio Code 支持的代碼片段變量詳見:https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables
