vscode 中快捷生成模板快捷键

1 使用 Emmet 缩写

Emmet 是一个强大的工具，可以帮助你快速生成 HTML、CSS 等代码模板。

• HTML 模板 : 输入 ! 然后按下 Tab 键，Emmet 会自动生成一个基本的 HTML5 模板。

Document

• 其他 Emmet 缩写 : 例如输入 div.container>ul>li*5 然后按下 Tab 键，Emmet 会生成如下代码：#### 2 使用用户代码片段 (User Snippets) 你可以创建自定义的代码片段，以便快速插入常用的代码模板。

1. 打开用户代码片段 :

• 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)，然后输入 “Preferences: Configure User Snippets”。
• 选择你想要为其创建代码片段的语言（例如 JavaScript、HTML 等）。

2. 创建代码片段 :

• 在打开的 snippets.json 文件中，添加一个新的代码片段。例如： “Print to console”: { “prefix”: “log”, “body”: [ “console.log(’$1’);”, “$2” ], “description”: “Log output to console” }
• 在这个例子中，当你输入 log 并按下 Tab 键时，VSCode 会自动插入 console.log('');，并且光标会停留在 '' 中。

3 使用扩展

你也可以安装一些扩展来快速生成代码模板，例如：

• HTML Snippets : 提供了一系列 HTML 代码片段。
• JavaScript (ES6) code snippets : 提供了 ES6 的代码片段。
• Reactjs code snippets : 提供了 React 相关的代码片段。

4 自定义快捷键

你可以为常用的代码片段或命令绑定自定义快捷键。

1. 打开快捷键设置 :

• 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)，然后输入 “Preferences: Open Keyboard Shortcuts”。

2. 添加快捷键 :

• 在快捷键设置中，搜索你想要绑定的命令（例如 “Insert Snippet”），然后点击左侧的加号图标来添加快捷键。

5 使用文件模板

你可以创建文件模板，以便在创建新文件时自动插入预定义的代码。

1. 创建模板文件 :

• 创建一个包含你想要插入的代码的文件，例如 template.html。

2. 使用模板 :

• 当你创建新文件时，手动复制模板文件的内容，或者使用扩展（如 “File Templates”）来自动插入模板内容。

总结

• Emmet : 快速生成 HTML/CSS 代码。
• 用户代码片段 : 自定义代码片段，快速插入常用代码。
• 扩展 : 安装扩展来获取更多代码片段。
• 自定义快捷键 : 为常用命令绑定快捷键。
• 文件模板 : 创建文件模板，快速生成新文件。