vscode_Intellisense suggestion list sort (代码片段snippet补全提示): 代码片段管理snippetManager/easy snippet)/jsonc

文章目录

• ​​vscode❤️javascript官方特性演示介绍​​

• ​​intellisens​​
• ​​[IntelliSense features]​​
• ​​以下内容非常有用,可以帮助您更好的配置智能提示补全等行为​​
• ​​[customizing-intellisense in Visual Studio Code]​​
• ​​[Types of completions#]​​

• ​​自定代码片段​​

• ​​snippet documents​​

• ​​[Snippets in suggestions#]​​
• ​​效果​​
• ​​关闭基于单词的提示​​

• ​​配置入口​​

• ​​基于工作空间的配置​​

• ​​代码片段管理插件Easy snippet​​

• ​​添加片段/修改片段​​
• ​​删除片段​​
• ​​troubleshoot​​

• ​​列表中显示不出来​​

• ​​创建全局模板/模板的模板​​

• ​​我的模板(全局模板)​​

vscode❤️javascript官方特性演示介绍

​​JavaScript Programming with Visual Studio Code​​

intellisens

IntelliSense IntelliSense is a general term for various code editing
features including: code completion, parameter info, quick info, and
member lists. IntelliSense features are sometimes called by other
names such as “code completion”, “content assist”, and “code hinting.”

[IntelliSense features]

​​IntelliSense features#​​

以下内容非常有用,可以帮助您更好的配置智能提示补全等行为

[customizing-intellisense in Visual Studio Code]

​​coustomizing-intellisense​​

[Types of completions#]

​​Types of completions#​​

自定代码片段

带有个人风格的(比如下划线结尾,就可以干掉不需要的部分)
甚至,你还可以配置​​​sout​​​(来自IDEA的习惯),映射到​​console.log​​​ 反正不同语言也不会相互干扰.

由于vscode 的补全中包括了对之前输入过的内容的引用(虽然着有时很有用,但在这里显得有些碍手碍脚),导致第二次输入log的时候​​console.log​​不再是第一个候选,那么可以通过在自定义片段,通过新的缩写来保持补全的候选第一

snippet documents

[Snippets in suggestions#]

• ​​Snippets in suggestions#​​

By default, VS Code shows snippets and completion proposals in one widget. You can control the behavior with the ​​editor.snippetSuggestions​​​ setting. To remove snippets from the suggestions widget, set the value to ​​"none"​​​. If you’d like to see snippets, you can specify the order relative to suggestions; at the top (​​"top"​​​), at the bottom (​​"bottom"​​​), or inline ordered alphabetically (​​"inline"​​​). The default is ​​"inline"​​​.

效果

关闭基于单词的提示

配置入口

"log to the console by cxxu design": {
    "prefix": [
      "sout",
      "log_",
      "lg_",
      "lgd",
      "lg",
      "D"
    ],
    "body": [
      "console.log($1)"
    ],
    "description": "print to check the program"
  }

基于工作空间的配置

变量的提示某些时候也挺有用的,但是有时他是真的烦)

您可以在某个工作空间内(vscode打开的目录以及其子目录的作用空间)
禁用到某些种类的提示

代码片段管理插件Easy snippet

• ​​Easy Snippet - Visual Studio Marketplace​​

添加片段/修改片段

• 这两中操作的单位是语言,一个语言的snippet的不同片段都配置在同一个​​.json​​文件中

删除片段

操作单位为json文件中的某一个片段对象.

troubleshoot

列表中显示不出来

• 注意description 字段的填写
• 刷新按钮点击一下
  

创建全局模板/模板的模板

我的模板(全局模板)

文件路径:​​/C:/Users/User/AppData/Roaming/Code/User/snippets/snippetTemplateJson.code-snippets​​​ 文件名称: ​​snippetTemplateJson.code-snippets​​

• 下方的scope,我采用了jsonc(一种允许注释的json(for vscode))
• 使用json是无法使其在全部配置文件中生效
  

{
  // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
  // description. 
  //Add comma separated ids of the languages where the snippet is applicable in the scope field. 
  //If scope  is left empty or omitted, the snippet gets applied to all languages. 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": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "insert snippet creation template": {
    "scope": "json,jsonc,code-snippets",
    "prefix": [
      "ist",
      "jt",
      "ii"
    ],
    "body": [
      "\"${1:brief tip there}\":{",
      "\t\"prefix\":[",
      "\t\t\"$2\"",
      "\t],",
      "\t\"body\":[",
      "\t\t\"$3\"",
      "\t],",
      "\t\"description\":\"$4\"",
      "},"
      //此处我预设逗号!
    ]
  },
  /* 直接在下方测试上方的该模板 */
  
  
}