当前位置：首页 > article >正文

vscode 中快捷生成模板快捷键

article 2025/3/15 14:09:50

1. 使用 Emmet 缩写

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

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
</html>

其他 Emmet 缩写: 例如输入 div.container>ul>li*5 然后按下 Tab 键，Emmet 会生成如下代码：

<div class="container">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

2. 使用用户代码片段 (User Snippets)

你可以创建自定义的代码片段，以便快速插入常用的代码模板。

打开用户代码片段:
- 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)，然后输入 “Preferences: Configure User Snippets”。
- 选择你想要为其创建代码片段的语言（例如 JavaScript、HTML 等）。
创建代码片段:
- 在打开的 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. 自定义快捷键

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

打开快捷键设置:
- 打开命令面板 (Ctrl + Shift + P 或 Cmd + Shift + P)，然后输入 “Preferences: Open Keyboard Shortcuts”。
添加快捷键:
- 在快捷键设置中，搜索你想要绑定的命令（例如 “Insert Snippet”），然后点击左侧的加号图标来添加快捷键。

5. 使用文件模板

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

创建模板文件:
- 创建一个包含你想要插入的代码的文件，例如 template.html。
使用模板:
- 当你创建新文件时，手动复制模板文件的内容，或者使用扩展（如 “File Templates”）来自动插入模板内容。

总结

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

查看全文

原文地址:https://blog.csdn.net/weixin_64684095/article/details/146222089
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/585622.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！