Visual Studio Code 编辑JavaScript:

我们从一个例子开始：

/*
* @file index.js
*/

let x,y,z;
x = 10;
y = 20;
z = 5;

console.log(x)
// 终端输出：10

接着我们改一下console.log()的内容:

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+点击鼠标左键跳转到文件f:\test\index.js的第10行第10列。

这样的处理使我们能通过路径精确定位到这条消息所在的源码位置，方便我们识别并定位输出该消息的变量位置。当我们的项目下有多个JS文件而且有多个console.log()/console.warn()等时，加上路径及上下文坐标方便我们准确定位代码。不过每次都这样写还是很麻烦的，好在我们可以利用Visual Studio Code 提供的“用户代码片段”功能来简化输入。

做成JavaScript用户代码片段

大家觉得实用的话可以参考下面的JavaScript的用户代码片段文件JavaScript.json的一个片段设置例子：

"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（终端字符着色可以参考：https://www.jianshu.com/p/cca3e72c3ba7）。

举一反三

其实，不止JavaScript 类代码可以这么干，其他的语言也可以的，例如 Python 的 print() 这类的。我们终究只是增加了输出的内容而已，只要不会导致语法错误和导致BUG且不太麻烦就可以。

需要注意的问题

在Node.js的项目中因有__filename的支持，用起来比较方便，但其他项目中想打印完整路径，需要做转义处理：
$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} 可以一次输入两组相同的字符串，减少键入量（技巧：多个相同的变量可以一次键入多组相同字符串）。
  // 本来可以加入列坐标，但不好控制,直接默认为1。

注意：

1. 这种做法只适合在开发过程中调试使用，如果你想保留到实际成品中，还请尽可能调试并保证路径和行列坐标准确。因为随着代码量的增/减，行列坐标可定是会变的。
2. Visual Studio Code 支持的代码片段变量详见:https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables