VScode使用--代码段设置console.log以及调整代码段提示的显示位置

visual studio code——使用代码段设置console.log以及调整代码段提示的显示位置

不同于WebStorm系统内定制了方法，输入’.log’可以非常方便的实现功能。
在VSCode只能退而求其次设置代码段实现类似的效果了。步骤如下：

1. 进入设置页面：文件>首选项>用户代码片段>选择设置的语言。

   

2. 系统默认给我们提供了console.log的代码格式例子，我们只要去掉注释就可以使用了，当然你也可以把注释内容删除(注释的内容是snippet 的格式说明，下文有解释)。

   

---

关于代码段显示位置的调整设置

1. 但是新的问题出现了 用户设置的代码片段在列表最下面不方便使用。

   

2. 接下来我们调整提示的显示位置：文件>首选项>设置，搜索代码段或snippetSuggestions，点击铅笔修改value为”top”;

   

3. 修改成功后显示结果如下：

   

4. VScode其实内部已经帮我们设置了for循环以及for in和foreach的代码段了，当我们修改后同样的显示也提前了。

   

---

snippet 格式解释

以下为系统默认自带代码段，如果想要修改按照要修改就OK啦。

{
// Place your snippets for JavaScript here. Each snippet is defined under a snippet name and has a prefix, body and 
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
// same ids are connected.
// Example:
    "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
}

• 参考注释1

prefix :这个参数是使用代码段的快捷入口,比如这里的log在使用时输入log会有智能感知.
body :这个是代码段的主体.需要设置的代码放在这里,字符串间换行的话使用 \r\n换行符隔开.注意如果值里包含特殊字符需要进行转义.
$1 :这个为光标的所在位置.
$2 :使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换
description :代码段描述,在使用智能感知时的描述

---

1. 参考注释内容来自互联网. ↩