前端基建之Code snippets

Code snippets (代码片段) 是编辑器提供给我们一种方便快捷输入重复代码的工具，可以作为一种基建功能帮助团队内部减少开发工作量，同时统一某些通用逻辑的代码风格。

1. 唤出用户代码片段界面 (或者通过Ctrl + Shift + P唤出命令面板后键入snippets)

2. 选择新建全局/代码仓库的代码片段

3. 按照范例来新建代码片段

"leptos Component": {
		"scope": "rust", // 此代码段使用的语言名称列表，例如 "typescript,javascript"
		"prefix": "leptos_component", // 在 Intellisense 中选择代码片段时要使用的前缀
		"body": [ // 片段内容。请使用 '$1', '${1:defaultText}' 来定义光标位置，使用“$0”表示最终光标位置。请插入带有“${varName}”和“${varName:defaultText}”的变量值，例如 "这是文件: $TM_FILENAME"。
			"use leptos::*;",
			"",
			"#[component]",
			"pub fn ${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/i}} () -> impl IntoView {",
			"    view!(",
			"        <article>$1</article>",
			"    )",  
			"}"
		],
		"description": "快速生成leptos Component" // 代码片段描述
	}

4. 去代码中放肆使用

Q1：${1:${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/i}}解析

//  ${1: foo} 占位符 后续使用可以用 $1 来标识
//  变量转换 ${var_name/regular_expression/format_string/options}
//  TM_FILENAME_BASE 当前文件名称(不带后缀版) 使用时可以用 $TM_FILENAME_BASE 或 ${TM_FILENAME_BASE: default}
// (.*) 正则表达式用来匹配当前字符串
// ${1:/pascalcase} 把当前匹配值转为大驼峰模式
// i 是否区分大小写
// 前方更多用法可以去VsCode官网去探索吧

Q2: 后续文章中会更新如何把多个snippet打包成vscode插件供团队使用