这个做法适合大部分具有输出型(打印到终端)的语言函数,比如 JavaScript 的 `console 类`,Python 的`print()`等。因这个功能只能预先在代码片段中制作好模板,然后以代码片段的方式插入到代码中,下文中的 `$TM*`开头的所谓的变量都只是VSCODE用于用户代码片段的变量,仅在代码片段中生效,切勿将这些变量直接写入代码中,离开了VScode 编辑器它是不生效的。
1. 基本的格式:
**[文件名称] + [行:列] + [要输出、打印的变量或者其他内容] =>**
> 这样在测试具有调用关系(文件多)且存在多个变量打印输出的程序时,便能从终端中清晰地看到输出结果来自具体的文件及变量或者表达式。
2. 把它做成代码片段,当需要用的时候可以插入到代码中。
在调试检查JavaScript 代码的时候,你是使用 debug 工具多一些还是直接插入 console.log() 多一些? 反正我自己是用 console.log() 多一些。当插入的 console 函数多了,就会发生一件可怕的事情:完全不知道哪是哪了。尤其像那种懒得加备注的人只输出变量或者函数执行结果,不会花半点时间加上变量名或者函数名。你能想象吧:输出一大堆结果,可不一定知道结果来自哪个变量或者函数。</br>
某天,我以外发现VS CODE 支持文件地址及文件内容内部行列组成的地址,在状态栏或者终端中可以直接点击(Ctrl+鼠标左键)链接准确直达出问题的地方。因此,后知后觉决定给console.log()等常用的输出加点东西:`文件路径+[行号]:[列号]`
即便不加上备注(变量名、函数名等)也能通过行列地址很快找到出处。
## JavaScript 代码片段
(VS code 的代码片段大都是JSON格式)
```json
"console.log-Addr":{
"prefix": ["cl","console"],
"body": "console.log(` \\${__filename}:$TM_LINE_NUMBER:$TM_LINE_INDEX --> \\${$1}`)",
"description": "不会DeBUG只会 console.log() 就乖乖加行号!!!"
}
// 这里为什么用 __filename(node.js 的全局变量,仅 node.js 运行环境支持), 因为用 $TM_FILEPATH 得到的路径含有“\”,大家都知道“\”符号在代码内会发生什么!
// 在执行之后就不是路径了。至少我发现在Windows 下存在这个问题。
// 当然,你可以用$TM_FILENAME(不足的地方在于:但有多个相同的文件名时会不好分辨)
```
> 我只在 console.log() 上加,你可以给 console.err()\console.warn()等函数加上。
>
>这东西(源代码行列地址)其实很实用,仔细看你会发现,像 throw 这类关键字在触发时可能会在状态栏显示出错位置(具体文件以及所在行列),但console.log()这类是不会显示其源码所在位置的。
一些特别需要强调的说明,就可以通过这方式输出给用户或者协作人知晓。也方便他们在最短时间内定位源代码。
不出意外你会在JS程序执行之后在终端或者浏览器控制台看到它们,比如类似这样的信息:` index.js:50:60 --> xxx` (意思是:"xxx" 来自 index.js 的第50行第60列) 你可以按自己注释习惯来灵活使用文件内行列地址。
> **注意**
>
>*这不是一劳永逸的做法,因为当源码被新增行,原有的位置就会下移,但是已有的行列号不变,最终的结果就是源码地位不准确,这是没有办法的事情,毕竟它是字符形式添加进入文件的和注释差不多,它不是运行时生成故不能自动变化。当位置发生变化时,有必要的话你应该更改先前的行列地址。以保证指向准确。*
## 优化下:
```
"log-with_address":{
"prefix": ["cl","console"],
"body": "console.log(` \\${__filename}:$TM_LINE_NUMBER:$TM_LINE_INDEX ` + '${any}-->' + ${any})",
"description": "log address"
},
// ${any} 的用途: 两个相同的 ${any} 可以实现在不同的地方输入相同的内容。不一定是${any},可以是 ${1}
"log-with_address":{
"prefix": ["cl","console"],
"body": "console.log(` \\${__filename}:$TM_LINE_NUMBER:$TM_LINE_INDEX ` + '${1}-->' + ${1})",
"description": "log address"
}
// 说到底只是增加了输出的内容
// 把 console.log(foo) 变成了类似
// console.log("这是变量 foo 输出的结果=>" + foo) 而已
```