JavaScript and TypeScript Snippets 0.22.0

JavaScript和TypeScript代码片段扩展为开发者提供了强大的工具，旨在通过关键词片段和微模式提升您的开发效率。该扩展适用于JavaScript、TypeScript和JSON，帮助您快速生成常用代码结构和模式。

最新更新（0.22.0）：

• 新增了使用和异步使用功能。
• 添加了Symbol.dispose和Symbol.asyncDispose。
• 引入了${clipboard}和${selection}以支持键盘快捷方式。
• 消除了重复的前缀，并优化了值选择。
• 移除了函数、getter、setter、方法和类型中的基本类型。
• 删除了typeof value !== ...的检查。

索引：

1. 简介
2. JavaScript快捷规则
3. TypeScript快捷规则
4. 推荐设置
5. 推荐键盘快捷键
6. 推荐扩展

简介：

该扩展的设计理念是通过微模式创建一个高效的工作流程。您只需输入一到五个字符，即可获得关键词或模式。

一些前缀可能重复使用，因为它们匹配不同的模式，例如s_ -> set NAME () { ... } 和 static NAME () { ... }。在这种情况下，您需要选择合适的一个。

以下前缀仅为解释规则的示例。 要查看完整列表，请访问SNIPPETS.md。如果您发现缺少某个关键词或模式，请在Github上提出问题并提出建议。

JavaScript快捷规则：

1. 单词的首字母或驼峰式/帕斯卡式命名中的大写字母定义前缀。

   前缀	片段
   a	await
   f	false
   t	true

2. 下划线 "_" 定义大括号作用域。

   前缀	片段
   _	NAME () { ... }
   i_	if (...) { ... }
   f_	function NAME (...) { ... }
   af_	async function NAME (...) { ... }
   d_w	do { ... } while (...);

3. 美元符号 "$" 在末尾定义函数调用。

   前缀	片段
   cl$	console.log();
   Jp$	JSON.parse();

4. 数字 "1" 在末尾定义一行片段。

   前缀	片段
   i1	if (CONDITION) ...;
   c1	const NAME = VALUE;
   l1	let NAME = VALUE;

5. 美元符号 "$" 在开头定义箭头函数。

   前缀	片段
   $_	() => { ... }
   $1	() =>

TypeScript快捷规则：

1. 所有上述JavaScript片段和前缀规则在TypeScript中同样适用。

   前缀	片段
   n_	namespace NAME { ... }
   i_	interface NAME { ... }
   ie_	interface NAME extends NAME { ... }
   t1	type NAME = TYPE;
   t_	type NAME = { ... };

2. 变量声明、属性和方法也支持基本类型和访问器。

   前缀	片段
   cb1	const NAME:boolean = false;
   pb1	public NAME:boolean = false;
   pgn_	public get NAME () :number { ... }
   pso_	public static NAME () :object { ... }

3. 下划线 "_" 在开头定义私有成员或映射类型。

   前缀	片段
   __	private NAME () { ... }
   _a1	private NAME:any = null;
   b	private NAME () :boolean { ... };
   _ik	{ [K in keyof T]: ... };

推荐设置：

建议将代码片段建议设置为顶部。

建议禁用自动智能感知功能以避免干扰。

"editor.suggest.snippetsPreventQuickSuggestions": true

也建议隐藏内置的JavaScript和TypeScript代码片段。

1. 打开一个JavaScript文件
2. 打开命令面板
3. 运行代码片段：插入代码片段
4. 从IntelliSense中隐藏所有JavaScript语言基础代码片段
5. 打开一个TypeScript文件
6. 打开命令面板
7. 运行代码片段：插入代码片段
8. 从IntelliSense中隐藏所有TypeScript语言基础代码片段

推荐键盘快捷键：

请牢记以下键盘快捷键，因为它们是充分利用该扩展的关键。每一步都是按需使用，以防止VS Code自动打开智能感知菜单。有时向下箭头或Cmd/Ctrl Enter可以达到同样的效果。

macOS：

• Tab - 跳转到代码片段的下一个标签停止点。
• DownArrow - 将光标向下移动一行。
• Cmd Enter - 在光标所在行的下方插入新行，即使光标位于行中间。
• Cmd Shift Enter - 在光标所在行的上方插入新行，即使光标位于行中间。

Windows / Linux：

• Tab - 跳转到代码片段的下一个标签停止点。
• DownArrow - 将光标向下移动一行。
• Ctrl Enter - 在光标所在行的下方插入新行，即使光标位于行中间。
• Ctrl Shift Enter - 在光标所在行的上方插入新行，即使光标位于行中间。

快速模板字符串表达式：

以下键盘快捷键可以改善在模板字符串中编写表达式的体验。

macOS：

[
    {
        "key": "cmd -",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
        "args": { "name": "${selection}" }
    },
    {
        "key": "alt cmd -",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
        "args": { "name": "${clipboard}" }
    }
]

Windows和Linux：

[
    {
        "key": "ctrl -",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
        "args": { "name": "${selection}" }
    },
    {
        "key": "alt ctrl -",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus && !editorReadonly && editorLangId =~ /(java|type)script(react)?/",
        "args": { "name": "${clipboard}" }
    }
]

推荐扩展：

• 交换关键词
• 扩展包