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\"",
			"},"
			//此处我预设逗号!
		]
	},
	/* 直接在下方测试上方的该模板 */
	
	
}