效率翻倍小工具💖

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

🎨前言

工作中最重要的就是效率没有效率怎么摸鱼啊，推荐几款适合开发用到的小工具🥙

markdown 自动生成目录结构

当我们在写博客的时候经常想要介绍一下自己项目的目录结构，如下图这种，我当初还以为都是手动生成的😒。

├── app.vue # Nuxt 3 应用程序中的主组件 入口组件
├── components # 组件目录，支持自动导入
|  └── helloWorld.vue # 组件
├── nuxt.config.ts # Nuxt 配置文件，文件名必须是nuxt.config 后缀名可以是.js,.ts或.mjs
├── package.json # 项目包的配置文件和项目的启动调式命令配置
├── README.md # 搭建 Nuxt 3脚手架之后的阅读文档
├── tsconfig.json # ts配置
└── yarn.lock # yarn锁文件 锁定依赖包版本

直到我发现了windows自带的tree命令。

tree 使用方法

在需要生成目录的文件夹中输入tree将输出的内容复制出来即可👇。

上面的内容看起来不错，但是tree命令没有提供可忽略的选项🍖定在生成你目录结构的时候不想要node_modules,.git等等，于是我们需要用到tree-cli指令👍

tree-cli 安装

npm install tree-cli

需要注意一点，如果是windows系统的话要使用treee避免与windows系统自带的tree产生冲突🦺

# -l 层级深度，-o 输出文件
treee -l 2 -o output.txt

treee -l 5 -o output.txt --ignore 'node_modules,.git'

在markdown中使用

在使用的时候需要用代码块包裹才可以正常显示哦,以后妈妈再也不用担心我的博客中缺少目录结构了✌。

生成代码片段

当我们在使用vscode编程的时候在写vue程序的时候避免不了要用到以下模板

但是🥠身份程序员每次多打一个字我们都会觉得累想一下我们在写html文件的时候为什么写一个html:5 的时候就会自动生成一个模板呢😘

实际上上面的过程就是一个代码片段，接下来我们就需要实现一个vue的代码片段。

`vue`代码片段

打开vscode设置小齿轮找到用户代码片段

点击用户代码片段，在弹出的框中选择新代码片段，填入名称可以随意填写，点击enter

编写代码片段模板，保存即可。

// Example: 
// "vue": {
// 	"scope": "javascript,typescript", 指定文件类型
// 	"prefix": "log", //输入前缀
// 	"body": [ // 模板内容
// 		"console.log('$1');",
// 		"$2"
// 	],
// 	"description": "Log output to console" // 描述
// }
{
  "vue":{
    "prefix":"vue",
    "body":[
        "<template>",
            "  <div class=\"\"></div>",
        "</template>",
        "",
        "<script>",
        "export default {}",
        "</script>",
        "",
        "<style scoped></style>",
    ],
    "description":"vue Components"
  }
}