如果你总是忘记写组件（函数）文档，那么你就是同道中人，快看下去~
办公室一角
"好烦啊... 为什么还要更新组件文档！"
"我刚开发好了需求，组件文档等我有时间了我一定去补哈~ ( 骗人的鬼话 ) "
"你要用这个组件啊？嗯... 我好像开发过... 在哪呢... 不太好找... 等一下..."
"哎，我要用这个组件，咱们项目里之前有没有？"
"我也不知道... 我记得好像有..."
"......"
😭
怎么避免一下呢？
以上场景可能你或多或少都遇到过，所以维护一个或多个组件（工具函数）文档，在组内还是很有必要的...
但是...但是...但是...！
种一棵树比较简单，但是每天都要去浇水，可就比较不简单了...
组件文档我们很快可以写出来，有时间可以搞一个比如类似在线的网站(antD文档、vant文档)、没时间可以搞个简单点的比如石墨文档、飞书文档，总之，大家还是有不少方式去记录的。
不过，在每次组件更新都去及时更新文档的，可是就很少很少了。
自己经历过一些项目组，也和其他公司的同学沟通过，发现一个很共通的理由就是：想不起来。
日常生活里，大家不是忘了登记，就是不知道要去登记，只能在每次技术评审的时候，不断强调，不断耳旁风。
以至于当后续的同学在使用文档的时候，发现已经落后很多很多版本了，参考价值就不是很高了。
最近考虑是不是做点工具可以改善一下这件事，哪怕成本降低一点点，可能带来的成效会比预期要更好一些！
工具操作示例
有什么好功能？
我们通过一些问答的方式，看看我们提供了什么好用的功能进来！
1、常常忘记去更新文档❓开发的时候忘记有文档这回事了...
🙋 那就直接在项目中维护嘛，你可以每次都能看到，省得你跑来跑去的，开发组件的时候，顺便在代码中写好简单的注释，剩下的交给 fuckdoc 就好了！
2、封装好的组件怎么快速找到呢❓
🙋 前端组件很大部分是可以通过”长什么样子“来区分的，所以，你可以写好功能之后，顺手截个图，放在你的代码文件旁边就好了，只有一点需要注意：图片文件命名要规范，剩下的交给 fuckdoc 就好了！
3、我通过图片看到这个组件了，但是它在代码的哪个地方呢❓
🙋 我们提供一键定位代码的功能，你只需要点一下按钮，就会帮你打开编辑器，定位到当前行，很快的！
4、听着好像还不错，怎么安装呢？复不复杂❓
🙋 很简单，一键启动！安装下面的npm包到你的本地，注意是放在devDependencies哈，之后通过运行 npx fuckdoc 就可以看到文档页面啦！
怎么安装呢
这是一个 Node.js 模块，所以你需要使用 npm 安装
$ npm install --save-dev fuckdoc
怎么使用呢
1、添加图片
├── GlobalAlert // GlobalAlert 组件文件夹
│ ├── index.tsx // 组件入口
│ └── index.tsx.fuckdoc.png // 👈🏻👈🏻👈🏻 在此添加一个格式为 ”入口文件同名同后缀.fuckdoc.图片后缀“ 的图片即可完成图片添加
├── GlobalLayout
│ ├── index.tsx
│ └── index.tsx.fuckdoc.png // 👈🏻👈🏻👈🏻 同上
├── Mutou.tsx
├── Mutou.tsx.fuckdoc.png // 👈🏻👈🏻👈🏻 同上
├── Mutou.tsx.fuckdoc.1.png // 👈🏻👈🏻👈🏻 可以多图
├── Mutou.tsx.fuckdoc.n.png // 👈🏻👈🏻👈🏻 可以多图，注意在.fuckdoc.后加任意字符即可
├── None.tsx
├── Select.vue
└── Select.vue.fuckdoc.png // 👈🏻👈🏻👈🏻 同上
注：我们贴心的提供了好用的vscode插件，来帮你快速添加图片，就在文章后面！
2、添加描述
如果你只想记录组件的样子，方便查阅的话，那么只添加图片就可以了。(省事儿的方式)
如果你还想给一些更详细的信息：组件名、组件描述、一些参数，那么你需要在入口文件写一些注释。(在定义组件的时候，顺手写上注释，是一种好的习惯！)
import React from 'react';
/**
* F:C
*
* @title 这是一个Demo组件
* @description 这是一段关于Demo组件的描述
*
* @param {string} name1 这是name1参数
* @param {string} name2 这是name2参数
* @param {string} name3 这是name3参数
*/
const Demo = () => {
return <div> this is demo </div>
}
export default Demo;
需要注意以下几点：
| 序号 | 标识 | 书籍 |
|---|---|---|
| 1 | F:C 或者 F:F | 这是fuckdoc在扫描代码时的重要标识依据！ F:C 即为Fuckdoc Component F:F 即为Fuckdoc Function |
| 2 | @title | 用于描述一个组件、函数的标题，可换行 |
| 2 | @description | 用于描述一个组件、函数的描述，可换行 |
| 2 | @param | 用于描述组件、函数的参数 当有多个的时候并列即可，单param可换行 |
注：我们贴心的提供了好用的vscode插件，来帮你快速添加注释，就在文章后面！
如何查看文档
在项目根目录执行以下命令即可看到页面地址
$ npx fuckdoc
不出意外，你将得到：
9527？😯
高级配置
如果你需要高级配置，请在项目根目录下添加该文件：fuckdoc.config.js，示例如下：
module.exports = {
// 需要支持扫描的路径，glob语法
paths: ['src/components/**/*', 'src/components2/**/*', 'src/**/*'],
// 需要支持的入口文件后缀，默认 'js', 'ts', 'tsx', 'jsx', 'mjs', 'vue', 'weex'
// 如果不满足，可在此添加
suffix: ['ts']
// 文档启动端口，程序默认会找一个可用端口，如果需要固定，可以在此设置
port: 9528,
};
如何减小添加的截图带来的体积影响
在项目根目录下执行以下命令，即可将添加的截图压缩为webp格式，体积瞬间减小到原体积的10%-20%
$ npx fuckdoc sharp
别急！还有一个好用的VsCode插件
我们还贴心的提供了一个好用的vscode插件，帮你(快速!!!)添加图片、注释。
1、安装vscode插件示例
在vscode插件商店搜：fuckdoc-vscode-extension 不出意外，你就可以搜到一个黑底白字的图标，那就是它了！
2、为组件添加图片（来自粘贴板）
推荐！
这是最符合操作逻辑的方式，当你使用截屏软件截图之后，一般会保存在你的粘贴板中，所以在这里直接粘贴就好了，最简单！
如果你本地也有图片，直接复制一下，在这里粘贴就可以！
3、为组件添加图片（来自本地）
如果本地已经有图片文件了，你可以在此选择图片文件，并保存。
4、右键添加注释示例
推荐！
你可以在任意行打开右键菜单，就可以看到两个选项，点击即可帮你在当前行自动填充注释模板，非常方便！省了很多时间！
一些取舍 & 计划
1、我们希望你在使用前问一问自己，“我是想要一个完备的文档平台，还是想要一个易维护、快定位的一个文档平台”，这有点像算法里的空间、时间，两者很难兼得。
fuckdoc提供的是快速”找“到想要的组件、方法，而不是这个组件怎么用，关于怎么用，你自然可以去定位到源码去看。
再次注意，我们只提供简单的注释来生成标题、描述、参数，为的就是减少维护时的成本，让它更好维护起来，你甚至可以任何描述都不写，只来一张图片，也可以满足大部分场景，追求简单是设计fuckdoc时的初衷。
如果你想生成一个功能极其完备的文档，那么fuckdoc可能不适合你。
2、git仓库会变大，目前来看是一定会这样的，因为会随着你添加的图片呈线性增长，不过这些图片不会被打包进线上，所以问题不大，关于这里，你大可不必做过多的纠结。我们已经提供一键降低截图体积(转webp格式)功能，可以将原体积压缩到原体积的10%-30%，我们强烈推荐你使用vscode插件来添加图片，这样添加的图片本身就是webp格式的啦。
结束语
🎉 Enjoy it! 🎉
如果有使用上的不方便 or bug，请 Github 提 issue 吧！
