如何用代码片段提升编码效率

如何定义代码段

1 在vscode中 ,打开命令:

 

 选择后会弹出一下选择框

 

 

如果你已经创建过针对某个语言类型的代码片段,则会出现在“已有代码片段”中

如果你之前没有创建过，则会出现在“新代码片段”。

创建过的代码片段会保存你的电脑中的C:\Users\你的用户\AppData\Roaming\Code\User\snippets目录下(win10操作系统，其它可自行查找)，你可以去打开看看。这个里面就保存着自定义的代码片断的内容。

其中：

javascript.json表示这个文件中的代码片段只有当你编辑.js文件时才能使用。

html.json表示在编辑.html文件时才能使用。其它类似。

我们假设你之前没有定义过css.json这个代码片段，所以你可以选中css.json 这个栏目，会进入对这个文件的编辑状态。

编辑代码片段-json文件

我们选择新建全局代码片段

"try catch async await": {
		"scope": "javascript,typescript",
		"prefix": "tcaa", // 快捷键 + tab
		"body": [
			"async $1(){",
      "import { $2 } from '@/api/${4}'",
      "  try {",
      "    const res = await $2($3)",
      "    console.log('$2', res)",
      "    ${5}// 保存数据",
      "  } catch (err) {",
      "    console.log('$2', err)",
      "  }",
			"},"
		],
		"description": "飞起来的async await"
	}

 完成后在文件用一下

 这样就OK啦!

具体的编写格式如下

{
	// Place your snippets for css 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.
	// 示例:
	// "片段名": {
	// 	"prefix": "此片段触发关键字",
	// 	"body": [
	// 		"代码段中第一行",
	// 		"代码段中第二行"
	// 	],
	// 	"description": "对此代码段的说明"
	// }
}