VSCode 如何通过快捷键快速生成项目目录结构 VSCode 快速生成项目目录结构的快捷键技巧

雪夜

发布时间：2025-08-02 11:13:01

1575人浏览过

来源于php中文网

原创

vscode没有一键生成项目目录结构的快捷键，但可通过emmet语法结合文件名列表实现：在文本文件中用缩进和/表示层级，复制内容后在html文件中使用“emmet: wrap with abbreviation”命令将/替换为>并用.包装，再粘贴到终端执行mkdir和touch命令创建目录和文件；2. 可使用“project tree generator”等插件右键生成项目结构并根据编辑后的文本创建文件；3. 推荐为常用文件结构创建自定义代码片段，通过“user snippets”定义模板，输入前缀后按tab快速生成内容，轻量且安全；4. 进阶用户可编写shell脚本（如create_project.sh）自动创建项目，结合mkdir和touch命令实现高度自动化；5. 将shell脚本集成到vscode任务中，在.vscode/tasks.json中定义任务，配置command为bash，args包含脚本路径和用户输入的项目名，并通过inputs提示输入，保存后按ctrl+shift+b运行任务，还可为“run build task”设置快捷键，最终实现一键创建项目。通过组合emmet、插件、代码片段和任务系统，可高效构建项目目录结构。

VSCode 如何通过快捷键快速生成项目目录结构 VSCode 快速生成项目目录结构的快捷键技巧

VSCode本身并没有直接提供一键生成项目目录结构的快捷键，但我们可以巧妙地利用VSCode的Emmet语法、插件，以及自定义代码片段来实现类似的功能，提高开发效率。

解决方案

Emmet 语法 + 文件名列表： 这是最基础也最灵活的方法。Emmet允许你通过类似CSS选择器的语法快速生成HTML结构。我们可以扩展这个思路，结合文件名列表来创建目录和文件。
- 首先，创建一个文本文件，例如
```
structure.txt
```
  ，在其中按层级关系编写你的目录和文件名。使用缩进表示层级关系，用
```
/
```
  表示目录。例如：
```
src/
    components/
        Button.js
        Input.js
    utils/
        api.js
    App.js
index.js
```
- 然后，在VSCode中打开
```
structure.txt
```
  ，全选所有内容，复制。
- 新建一个
```
.html
```
  文件（随便什么文件类型都行，目的是激活Emmet）。
- 输入
```
!
```
  （或者任何Emmet支持的简写），然后粘贴刚才复制的内容。将
```
/
```
  替换为
```
>
```
  。
- 选中所有内容，按下
```
Ctrl+Shift+P
```
  (Windows/Linux) 或
```
Cmd+Shift+P
```
  (macOS) 打开命令面板，输入 "Emmet: Wrap with Abbreviation"。
- 在弹出的输入框中输入
```
.
```
  (注意这个点)。 Emmet会将每一行包装在一个
```
div
```
  中。
- 再次选中所有内容，复制。
- 现在，在你的项目根目录下，打开终端（VSCode内置终端即可）。
- 粘贴复制的内容到终端，并执行。这将会创建对应的目录和文件。当然，你需要预先安装
```
mkdir
```
  和
```
touch
```
  命令（通常Linux和macOS自带，Windows可能需要Git Bash或其他环境）。你可以使用
```
&&
```
  连接命令，例如：
```
mkdir -p src/components && touch src/components/Button.js && touch src/components/Input.js && mkdir -p src/utils && touch src/utils/api.js && touch src/App.js && touch index.js
```
这种方法略显繁琐，但高度可定制，适合复杂目录结构。
使用插件： VSCode市场上有不少插件可以帮助你生成目录结构。例如，"Project Tree Generator" 插件。
- 安装插件后，在项目根目录右键，选择 "Generate Project Tree"。
- 插件会生成一个包含项目目录结构的文本文件。
- 你可以编辑这个文件，然后使用插件提供的命令，根据文件内容创建目录和文件。
这种方法比手动输入要方便一些，但依赖于插件的质量和功能。
自定义代码片段 (User Snippets): 对于常用的项目结构，可以创建自定义代码片段。
- 打开 VSCode，点击 "File" -> "Preferences" -> "User Snippets"。
- 选择你想要创建代码片段的语言 (例如 JavaScript)。或者选择 "new Global Snippets file..." 创建全局代码片段。
- 定义你的代码片段。例如：
```
"React Component": {
    "prefix": "react-component",
    "body": [
        "import React from 'react';",
        "",
        "const ${1:ComponentName} = () => {",
        "  return (",
        "    ",
        "      $2",
        "    ",
        "  );",
        "};",
        "",
        "export default ${1:ComponentName};"
    ],
    "description": "React Component Template"
}
```
- 保存代码片段。
- 在你的项目中，输入
```
react-component
```
  (或者你定义的
```
prefix
```
  )，然后按下
```
Tab
```
  键，VSCode 会自动生成代码片段。
这种方法适合快速创建单个文件，而不是整个目录结构。但是，你可以结合 Emmet 和代码片段，先用 Emmet 创建目录结构，然后用代码片段快速生成文件内容。

利用 Shell 脚本 (进阶): 如果你对Shell脚本比较熟悉，可以编写一个脚本来自动创建目录和文件。

创建一个Shell脚本文件，例如
```
create_project.sh
```
。
在脚本中，使用
```
mkdir
```
和
```
touch
```
命令创建目录和文件。

#!/bin/bash

PROJECT_NAME=$1

if [ -z "$PROJECT_NAME" ]; then
  echo "Please provide a project name."
  exit 1
fi

mkdir -p "$PROJECT_NAME/src/components"
touch "$PROJECT_NAME/src/components/Button.js"
touch "$PROJECT_NAME/src/components/Input.js"
mkdir -p "$PROJECT_NAME/src/utils"
touch "$PROJECT_NAME/src/utils/api.js"
touch "$PROJECT_NAME/src/App.js"
touch "$PROJECT_NAME/index.js"

echo "Project '$PROJECT_NAME' created successfully."

在终端中，运行脚本，并传入项目名称作为参数：
```
bash create_project.sh my-new-project
```

这种方法需要一定的Shell脚本知识，但可以高度自动化，适合创建复杂项目。

如何高效利用Emmet语法创建嵌套目录结构？

Emmet 语法不仅仅可以用于 HTML，它也可以用于创建目录结构，关键在于正确使用

和

符号。

表示子目录，

表示同级目录。结合

符号可以批量创建文件。

例如，要创建以下目录结构：

src/
    components/
        Button.js
        Input.js
    utils/
        api.js
    App.js
index.js

你可以使用以下 Emmet 语法：

src>components>(Button.js+Input.js)+utils>api.js+App.js+index.js

这个语法看起来有点复杂，但分解开来就很容易理解了：

```
src>
```
: 创建一个名为
```
src
```
的目录。
```
components>(Button.js+Input.js)
```
: 在
```
src
```
目录下创建一个名为
```
components
```
的目录，并在
```
components
```
目录下创建
```
Button.js
```
和
```
Input.js
```
文件。
```
()
```
用于分组。
```
utils>api.js
```
: 在
```
src
```
目录下创建一个名为
```
utils
```
的目录，并在
```
utils
```
目录下创建
```
api.js
```
文件。
```
App.js+index.js
```
: 在
```
src
```
目录下创建
```
App.js
```
和
```
index.js
```
文件。

然后，按照前面提到的步骤，使用 "Emmet: Wrap with Abbreviation" 命令，将这个语法包装在

中，再复制到终端执行即可。

为什么选择自定义代码片段而不是总是依赖插件？

插件虽然功能强大，但存在一些潜在问题：

依赖性： 插件的维护和更新可能不及时，如果插件作者停止维护，或者插件与新版本的 VSCode 不兼容，可能会影响你的开发效率。
性能： 某些插件可能会占用大量的系统资源，导致 VSCode 运行缓慢。
安全性： 安装来自未知来源的插件可能存在安全风险。
定制性： 插件的功能通常是固定的，你可能无法根据自己的需求进行定制。

相比之下，自定义代码片段具有以下优点：

轻量级： 代码片段只是简单的文本模板，不会占用额外的系统资源。
可定制： 你可以根据自己的需求创建和修改代码片段。
无需依赖： 代码片段是 VSCode 内置的功能，不需要安装任何额外的插件。
安全性： 代码片段是你自己编写的，不存在安全风险。

因此，对于常用的代码模板，建议使用自定义代码片段。对于更复杂的功能，可以考虑使用插件。最佳实践是结合使用两者，充分发挥各自的优势。

MotionGo

AI智能对话式PPT创作，输入内容一键即可完成

下载

如何将Shell脚本集成到VSCode任务中，实现一键创建项目？

为了更方便地使用Shell脚本创建项目，可以将其集成到VSCode的任务系统中。这样，你就可以通过一个快捷键或者命令来执行脚本，而无需手动打开终端。

在你的项目根目录下创建一个
```
.vscode
```
目录 (如果不存在)。
在
```
.vscode
```
目录下创建一个
```
tasks.json
```
文件。
在
```
tasks.json
```
文件中，定义一个任务来执行你的Shell脚本。例如：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Create Project",
            "type": "shell",
            "command": "bash",
            "args": [
                "${workspaceFolder}/create_project.sh",
                "${input:projectName}"
            ],
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ],
    "inputs": [
        {
            "id": "projectName",
            "type": "promptString",
            "description": "Enter project name:"
        }
    ]
}

这个配置文件的含义如下：

```
version
```
: 任务配置文件的版本。
```
tasks
```
: 一个包含所有任务的数组。
```
label
```
: 任务的名称，显示在 VSCode 的任务列表中。
```
type
```
: 任务的类型，这里是
```
shell
```
，表示执行一个Shell命令。
```
command
```
: 要执行的命令，这里是
```
bash
```
。
```
args
```
: 传递给命令的参数，
```
${workspaceFolder}
```
表示当前工作区目录，
```
${input:projectName}
```
表示从用户输入中获取的项目名称。
```
problemMatcher
```
: 用于解析命令输出中的错误和警告，这里为空数组，表示不进行解析。
```
group
```
: 任务所属的组，
```
build
```
表示构建任务，
```
isDefault
```
表示这是默认构建任务。
```
inputs
```
: 一个包含所有用户输入的数组。
```
id
```
: 输入的唯一标识符，用于在
```
args
```
中引用。
```
type
```
: 输入的类型，
```
promptString
```
表示提示用户输入一个字符串。
```
description
```
: 提示用户的描述信息。
保存
```
tasks.json
```
文件。