VSCode插件让目录操作流程更简单

阿雪姑娘_1806

阿雪姑娘_1806

2026-08-26

906人浏览

原创

file utils、markdown all in one、directory tree 和 project manager 各司其职:前者优化文件操作,后者分别解决文档目录生成、项目结构展示和跨项目跳转,混用会增加认知负担。

vscode插件让目录操作流程更简单

File Utils 插件让右键操作真正可用

默认的 VSCode 资源管理器右键菜单功能太基础,复制路径要手动拼、新建文件夹得一层层点。装上 File Utils 后,所有高频操作都塞进右键子菜单里,关键是它不只“有”,还“能按习惯用”。

  • Copy Relative Path 和 Copy Full Path 会自动适配当前上下文——比如在 src/utils 下右键一个 index.ts,前者输出 src/utils/index.ts,后者输出完整绝对路径,不用再切终端手动 pwd 或 realpath
  • Rename 默认不显示扩展名,容易误删后缀;必须在设置里开启 fileutils.rename.showExtension,否则重命名 config.js 成 settings 就只剩个没后缀的空壳文件
  • Delete 默认是永久删除,不进回收站;务必打开 fileutils.delete.useTrash,不然手滑选错文件就是真没了
  • 输入嵌套路径时(比如 components/Modal/Modal.vue),插件会自动创建中间所有不存在的目录,但前提是路径里不能有中文或空格——遇到就报错,得先手动建好父级

Markdown All in One 生成目录不是“一键完事”

很多人装了 Markdown All in One,按 Ctrl + Shift + P → Create Table of Contents,发现生成的目录链接跳转失败,或者标题改了目录不动。问题不在插件,而在 Markdown 的锚点规则和使用节奏。

  • 标题行末尾不能有多余空格,# 简介 (结尾带空格)会导致生成的锚点变成 #简介-,而点击目录项跳转的是 #简介,直接失效
  • 中文标题里的标点符号(如冒号、顿号、括号)会被自动过滤或转义,## API:调用说明 生成的锚点实际是 #api调用说明,但目录项链接写的是 #api:调用说明,得手动删掉冒号才能跳转
  • 修改标题后,Create Table of Contents 不会自动覆盖旧目录——它默认在文档开头插入新目录,旧目录还在那儿。得先删掉已有目录块,再执行命令,否则文档里堆两套目录
  • 如果想让目录始终出现在固定位置(比如文档顶部),建议手动加个标记行,例如 <!-- TOC --> ,然后配置插件的 markdown.extension.toc.insertAtTop 为 true,避免每次都要手动剪切粘贴

Directory Tree 插件生成的是项目结构,不是文档目录

看到名字别误会:Directory Tree 插件干的事和 Markdown All in One 完全不同。它不解析 Markdown 标题,而是读取整个工作区的文件系统,把目录树写进 README.md 底部——适合展示工程结构,不适合做文章导航。

VSCode
VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载
  • 执行 Directory Tree 命令时,它只往 README.md 里写,不会新建其他文件;如果项目没有 README.md,它会自动创建一个,但内容只有目录树,没有其他模板文字
  • 图标渲染依赖 vscode-icons 插件,如果没装,树状图里全是普通文件夹符号 ?,看不出 .git 是隐藏目录、node_modules 是巨型依赖包
  • 生成结果默认包含所有文件,包括 .vscode、.git 这类元数据目录;想过滤掉,得在插件设置里填 directoryTree.exclude,支持 glob 模式,例如 ["**/node_modules/**", "**/.git/**"]
  • 它不监听文件变动,生成完就结束。删了个 src 文件,目录树不会自动更新——得手动再跑一次命令

Project Manager 解决的是“项目级”目录切换,不是文件内导航

如果你每天在 5 个以上 Git 仓库间来回切换,靠 File → Open Folder 或终端 code .,本质是在重复找路径。这时候 Project Manager 提供的是项目维度的“目录书签”,不是编辑器内的大纲视图。

  • 收藏项目后,它存的是绝对路径,不是相对路径;换电脑或重装系统,所有收藏都会失效,得重新导入或手动修复路径
  • 自动扫描 Git 项目时,只识别根目录下有 .git 的文件夹;如果项目放在 ~/work/backend/api,但 .git 在 ~/work/backend,那 api 目录不会被扫出来
  • 左下角的“项目扫描”面板默认关闭,得在设置里搜 projectManager.scanFolders,手动添加几个常用路径,比如 ["~/projects", "~/work"],不然它根本不知道去哪找
  • 它不和文件系统联动——删掉硬盘上的项目文件夹,Project Manager 里那个条目依然存在,点击会报错“文件夹不存在”,得手动右键 → Remove Project

真正的目录操作简化,不在于装多少插件,而在于分清“项目结构展示”“文档内导航”“跨项目跳转”这三类需求各自对应的工具链。一个插件解决一类问题,混用反而增加心智负担。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1395

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

2932

3

vscode使用的框架介绍
vscode使用的框架介绍

VSCode是一款跨平台代码编辑器,它基于Electron框架和Monaco Editor构建。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1989

12

vscode一般用来写什么语言
vscode一般用来写什么语言

VSCode是一款功能强大的代码编辑器,支持多种编程语言和文件格式。它内置对 JavaScript、Python、Java、C++、TypeScript、HTML/CSS、Go 等语言的支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.14

1727

8

vscode可以写什么语言
vscode可以写什么语言

vscode是一款强大的代码编辑器,支持多种编程语言的开发。通过安装扩展,可以为 JavaScript/TypeScript、Python、Java、C#、PHP、Go、Ruby、Rust、HTML/CSS 等语言提供智能代码补全、调试和格式化等功能。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

2607

12

vscode中文设置方法
vscode中文设置方法

方法一:在设置页面中,搜索“locale”,并选择“zh-cn”。方法二:按“Ctrl Shift P”快捷键,输入“Configure Display Language”,将语言修改为“zh-cn”。如果上述方法无效,可考虑安装中文插件。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1838

14

vscode用途介绍
vscode用途介绍

Visual Studio Code(VSCode)是一款由 Microsoft 开发的多功能文本编辑器,适用于各种编程语言。作为一款开源软件,VSCode 拥有代码高亮、自动补全、调试、Git 集成等强大功能,成为程序员不可或缺的工具。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1262

10

vscode和visualstudio的区别
vscode和visualstudio的区别

Visual Studio是一款功能强大的集成开发环境(IDE),适用于专业开发人员进行复杂项目的构建。而VSCode则是一款轻量级的代码编辑器,更适合各种规模的项目开发。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

1116

8

vscode设置中文界面不生效解决方法
vscode设置中文界面不生效解决方法

vscode设置中文界面不生效解决方法:安装中文语言包、通过命令面板设置语言、检查 locale.json 设置、重新安装中文语言包、检查 VSCode 版本和更新、排除插件冲突、检查系统语言设置、查看 VSCode 日志和错误消息、重置 VSCode 设置、查看官方文档和社区支持。想了解更多vscode的相关内容,可以阅读本专题下面的文章。

2024.03.15

494

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程