<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>https://fall-zhang.github.io/blog</id>
    <title>Fall 的笔记本 Blog</title>
    <updated>2025-07-24T00:00:00.000Z</updated>
    <generator>https://github.com/jpmonette/feed</generator>
    <link rel="alternate" href="https://fall-zhang.github.io/blog"/>
    <subtitle>Fall 的笔记本 Blog</subtitle>
    <icon>https://fall-zhang.github.io/./svg/fallen_leaf.svg</icon>
    <entry>
        <title type="html"><![CDATA[你为什么需要 husky]]></title>
        <id>https://fall-zhang.github.io/blog/2025/07/24/你为什么需要 husky</id>
        <link href="https://fall-zhang.github.io/blog/2025/07/24/你为什么需要 husky"/>
        <updated>2025-07-24T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[你为什么需要 husky]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="你为什么需要-husky">你为什么需要 husky<a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81-husky" class="hash-link" aria-label="你为什么需要 husky的直接链接" title="你为什么需要 husky的直接链接">​</a></h2>
<p>husky（哈士奇）一种精力和破坏力都极强的生物，混乱制造者。有一位伟大的法师说过，要用魔法来打败魔法，你需要这个 husky，帮助你避免一个不留神家被拆了。</p>
<blockquote>
<p>还有一个原因是，能用工具解决的问题都使用工具解决，而非额外的人力。</p>
</blockquote>
<p>如果你想要找一个项目作为参考，可以查看我的 <a href="https://github.com/fall-zhang/fruit-navigation" target="_blank" rel="noopener noreferrer">鲜果起始页</a> 项目</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="前提准备">前提准备<a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E5%89%8D%E6%8F%90%E5%87%86%E5%A4%87" class="hash-link" aria-label="前提准备的直接链接" title="前提准备的直接链接">​</a></h3>
<blockquote>
<p>一个 js 项目
配置好 eslint
安装好 git</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="添加依赖">添加依赖<a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E6%B7%BB%E5%8A%A0%E4%BE%9D%E8%B5%96" class="hash-link" aria-label="添加依赖的直接链接" title="添加依赖的直接链接">​</a></h3>
<p>安装 husky，husky 本身只提供了执行 git 对应命令时，调取对应的钩子函数，因此需要其它工具来执行对应的检查</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">npm i husky -D</span><br></span></code></pre></div></div>
<p>commitlint 用于对提交内容（commit message）进行检查</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">npm i @commitlint/cli @commitlint/config-conventional -D</span><br></span></code></pre></div></div>
<p>lint-staged 用于在缓冲区执行 lint，代码检查</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">npm i lint-staged -D</span><br></span></code></pre></div></div>
<p>cz-git 自定义 git 提交工具</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">npm i cz-git czg -D</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="更新你的-packagejson">更新你的 <code>package.json</code><a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E6%9B%B4%E6%96%B0%E4%BD%A0%E7%9A%84-packagejson" class="hash-link" aria-label="更新你的-packagejson的直接链接" title="更新你的-packagejson的直接链接">​</a></h3>
<div class="language-json codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-json codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"scripts"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"lint-staged"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"lint-staged"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 该命令用于在缓冲区执行</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"commit"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"czg"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 之后可以使用 npm rum commit 代替 git commit -m ''</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"prepare"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"husky init"</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 拉去依赖后，自动执行该命令</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"config"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"commitizen"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 定义 commitlint 的配置</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token property" style="color:#36acaa">"path"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"node_modules/cz-git"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"lint-staged"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"*.{js,jsx,ts,tsx}"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 对以 js,jsx,ts,tsx 后缀名的文件使用 eslint --fix</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token string" style="color:#e3116c">"eslint --fix"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"*.{md,json}"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 对以 md,json 后缀名的文件使用 prettier --write</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">      </span><span class="token string" style="color:#e3116c">"prettier --write"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="创建-husky-文件">创建 husky 文件<a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E5%88%9B%E5%BB%BA-husky-%E6%96%87%E4%BB%B6" class="hash-link" aria-label="创建 husky 文件的直接链接" title="创建 husky 文件的直接链接">​</a></h3>
<p>husky 会在 package.json 目录创建 <code>.husky</code> 文件，如果没有创建，可以手动创建</p>
<p>手动创建 <code>.husky\commit-msg</code> 文件，并且添加以下内容</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">#!/bin/sh</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># . "$(dirname "$0")/_/husky.sh"</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">npx --no -- commitlint --edit $1</span><br></span></code></pre></div></div>
<p>手动创建 <code>.husky\pre-commit</code> 文件，并且添加以下内容</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">#!/bin/sh</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># . "$(dirname "$0")/_/husky.sh"</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">npm run lint-staged</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">echo '✅✅✅ lint pass ✅✅✅'</span><br></span></code></pre></div></div>
<p>你可以在这些 <code>bash</code> 文件中自定义命令，来实现你相对应的需求</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="完成">完成<a href="https://fall-zhang.github.io/blog/2025/07/24/%E4%BD%A0%E4%B8%BA%E4%BB%80%E4%B9%88%E9%9C%80%E8%A6%81%20husky#%E5%AE%8C%E6%88%90" class="hash-link" aria-label="完成的直接链接" title="完成的直接链接">​</a></h3>
<p>到了这里，你已经完成了在项目中添加 husky 的所有步骤，并且添加提交检查以及 git 缓冲区的检查功能</p>
<p>之后你可以使用 <code>npm run commit</code> 提交变更</p>]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[性能优化清单]]></title>
        <id>https://fall-zhang.github.io/blog/2025/07/17/性能优化清单</id>
        <link href="https://fall-zhang.github.io/blog/2025/07/17/性能优化清单"/>
        <updated>2025-07-17T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[加载优化]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="加载优化">加载优化<a href="https://fall-zhang.github.io/blog/2025/07/17/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B8%85%E5%8D%95#%E5%8A%A0%E8%BD%BD%E4%BC%98%E5%8C%96" class="hash-link" aria-label="加载优化的直接链接" title="加载优化的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="请求">请求<a href="https://fall-zhang.github.io/blog/2025/07/17/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B8%85%E5%8D%95#%E8%AF%B7%E6%B1%82" class="hash-link" aria-label="请求的直接链接" title="请求的直接链接">​</a></h3>
<ul class="contains-task-list containsTaskList_KO8y">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->减少 Cookie 携带的数据大小</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->避免重定向</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->避免短时间内多次请求</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->减少 HTTP 请求</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->避免请求的多次往返<!-- -->
<ul class="contains-task-list containsTaskList_KO8y">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->单个文件大小有没有超过 500k</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->将小型工具合并为一个包</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->单个文件有没有小于 4k</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->请求预加载</li>
</ul>
</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="静态文件部署">静态文件部署<a href="https://fall-zhang.github.io/blog/2025/07/17/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B8%85%E5%8D%95#%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E9%83%A8%E7%BD%B2" class="hash-link" aria-label="静态文件部署的直接链接" title="静态文件部署的直接链接">​</a></h3>
<ul class="contains-task-list containsTaskList_KO8y">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->静态文件 CDN</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->压缩图像</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->小型资源（小于 4k 直接内联到网页中减少额外请求）</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->压缩代码</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->提升首屏加载速度</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->按需加载</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->文件缓存</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->启用 gzip</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->预加载</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->单独的静态文件（图像，MP4）服务器</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="css">CSS<a href="https://fall-zhang.github.io/blog/2025/07/17/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B8%85%E5%8D%95#css" class="hash-link" aria-label="CSS的直接链接" title="CSS的直接链接">​</a></h3>
<ul class="contains-task-list containsTaskList_KO8y">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->CSS 写在头部</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->优化动画，利用 GPU 加速</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->避免行内 style</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->避免滥用 float</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->减少重绘和回流</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="开发">开发<a href="https://fall-zhang.github.io/blog/2025/07/17/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%B8%85%E5%8D%95#%E5%BC%80%E5%8F%91" class="hash-link" aria-label="开发的直接链接" title="开发的直接链接">​</a></h3>
<ul class="contains-task-list containsTaskList_KO8y">
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->减少 DOM 节点</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->首页绘制时间（首页资源加载量）</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->图片资源懒加载</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->高频事件处理（防抖、节流）</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->根据等待时长给予动画或是进度条</li>
<li class="task-list-item"><input type="checkbox" disabled=""> <!-- -->SPA 项目重构为 SSR 项目</li>
</ul>]]></content>
    </entry>
    <entry>
        <title type="html"><![CDATA[npm前端包]]></title>
        <id>https://fall-zhang.github.io/blog/npm前端包</id>
        <link href="https://fall-zhang.github.io/blog/npm前端包"/>
        <updated>2025-02-20T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[Create by fall on 02 Mar 2023]]></summary>
        <content type="html"><![CDATA[<blockquote>
<p>Create by <strong>fall</strong> on 02 Mar 2023<br>
Recently revised in 11 Feb 2025</p>
</blockquote>
<p>所有的包名称就是 npm 中的包名称，可以直接在 npm 官网进行搜索</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="系统工具">系统工具<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E7%B3%BB%E7%BB%9F%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="系统工具的直接链接" title="系统工具的直接链接">​</a></h2>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>node-cron</td><td>This module allows you to schedule task in node.js using full crontab syntax.</td><td>计划执行一些内容</td></tr><tr><td>croner</td><td>Trigger functions or evaluate cron expressions in JavaScript or TypeScript.</td><td>定时执行任务，并提供即将到来的事件</td></tr><tr><td>cronstrue</td><td></td><td>将 <code>cron</code> 表达式转换更可读</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="git-工具">git 工具<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#git-%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="git 工具的直接链接" title="git 工具的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>husky</td><td></td><td>提供 git 相关的 hooks 方法</td></tr><tr><td>lint-staged</td><td>Run linters against staged git files</td><td>在 git 缓存区强制执行 lint</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="命令行相关">命令行相关<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E5%91%BD%E4%BB%A4%E8%A1%8C%E7%9B%B8%E5%85%B3" class="hash-link" aria-label="命令行相关的直接链接" title="命令行相关的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>concurrently</td><td>Run multiple commands concurrently.</td><td>实时运行多个命令</td></tr><tr><td>start-server-and-test</td><td>Starts server, waits for URL, then runs test command; when the tests end, shuts down server</td><td></td></tr><tr><td>live-server</td><td></td><td>提供 <code>npx live-server index.html</code></td></tr><tr><td>http-server</td><td></td><td><code>npx http-server [path] [options]</code></td></tr><tr><td>inquirer</td><td>A collection of common interactive command line user interfaces.</td><td>通用终端 UI 输入接口</td></tr><tr><td>ora</td><td></td><td>优雅的终端加载动画</td></tr><tr><td>node-jq</td><td></td><td>命令行 JSON 处理工具</td></tr><tr><td>enquirer</td><td></td><td>命令行选择功能工具</td></tr><tr><td>node-gyp</td><td>compiling native addon modules for Node.js.</td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td>np</td><td></td><td>更好用的 npm publish</td></tr><tr><td>release-it</td><td>Automate versioning and package publishing</td><td>自动打包和发布更新</td></tr><tr><td>chalk</td><td></td><td>命令行内容着色</td></tr><tr><td>voici.js</td><td></td><td>终端表格打印</td></tr><tr><td>fx</td><td><code>fx data.json</code></td><td>JSON 命令行处理工具</td></tr><tr><td>gradient-string</td><td>Beautiful color gradients in terminal output</td><td>为命令行加上渐变</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="操作系统">操作系统<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F" class="hash-link" aria-label="操作系统的直接链接" title="操作系统的直接链接">​</a></h3>
<table><thead><tr><th style="text-align:left">包名称</th><th style="text-align:left">介绍</th><th style="text-align:left">英文介绍</th></tr></thead><tbody><tr><td style="text-align:left">wallpaper</td><td style="text-align:left">获取或者设置桌面壁纸</td><td style="text-align:left">Get or set the desktop wallpaper</td></tr><tr><td style="text-align:left">diskusage</td><td style="text-align:left">跨平台磁盘使用统计</td><td style="text-align:left"></td></tr><tr><td style="text-align:left">node-osc</td><td style="text-align:left">用于在媒体设备之间进行通信的协议</td><td style="text-align:left"></td></tr><tr><td style="text-align:left"></td><td style="text-align:left"></td><td style="text-align:left"></td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="工程化">工程化<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E5%B7%A5%E7%A8%8B%E5%8C%96" class="hash-link" aria-label="工程化的直接链接" title="工程化的直接链接">​</a></h2>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>npm-check-updates</td><td></td><td><code>-i</code> 交互模式，查看潜在的升级并逐个选择</td></tr><tr><td>knip</td><td>finds unused files, dependencies and exports in your projects</td><td>查看 TS 项目中没有用到的文件和依赖</td></tr><tr><td>dependency-cruiser</td><td></td><td>将应用的依赖可视化</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="打包">打包<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%89%93%E5%8C%85" class="hash-link" aria-label="打包的直接链接" title="打包的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>rspack</td><td></td><td>基于 Rust 的打包工具</td></tr><tr><td>rolldown</td><td></td><td>重写 rollup，更快更强</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="格式化-lint">格式化 lint<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%A0%BC%E5%BC%8F%E5%8C%96-lint" class="hash-link" aria-label="格式化 lint的直接链接" title="格式化 lint的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>quick-lint-js</td><td>finds bugs in JavaScript programs.</td><td>快速分析 js 中的语法错误，C++</td></tr><tr><td>sugarss</td><td>Indent-based CSS syntax for <a href="https://github.com/postcss/postcss" target="_blank" rel="noopener noreferrer">PostCSS</a>.</td><td>强缩进 CSS 语法检测</td></tr><tr><td>@biomejs/biome</td><td>fast formatter for JavaScript, TypeScript, JSX, and JSON</td><td>rust 重写的格式化工具，快！</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="测试">测试<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%B5%8B%E8%AF%95" class="hash-link" aria-label="测试的直接链接" title="测试的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>jest</td><td>User-friendly glob matching.Based on <code>fast-glob</code></td><td>筛选文件目录</td></tr><tr><td>autocannon</td><td>HTTP/1.1 基准测试工具</td><td></td></tr><tr><td>vitest</td><td></td><td>基于 vite 的测试，开箱可用 import 语法</td></tr><tr><td>jsdom</td><td></td><td>纯 JS 实现的 DOM</td></tr><tr><td>fetch-mock</td><td></td><td>请求 mock</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="语法转换">语法转换<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E8%AF%AD%E6%B3%95%E8%BD%AC%E6%8D%A2" class="hash-link" aria-label="语法转换的直接链接" title="语法转换的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>官方介绍</th><th>介绍</th></tr></thead><tbody><tr><td>sucrase</td><td>Sucrase is about 20x faster than Babel</td><td>babel 的替代品，允许更快地构建</td></tr><tr><td>unplugin</td><td>Unified plugin system for build tools.</td><td>制作所有打包平台都可以使用的插件</td></tr><tr><td>swc</td><td>super-fast TypeScript / JavaScript compiler written in Rust.</td><td>超快的 ts / js 编译器</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="通用工具">通用工具<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E9%80%9A%E7%94%A8%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="通用工具的直接链接" title="通用工具的直接链接">​</a></h2>
<p>这些工具是不依赖于 DOM，前后端通用的 package</p>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>ohash</td><td>Super fast hashing library written in Vanilla JS</td><td>原生书写的快速哈希库，判断对象内容是否相等</td></tr><tr><td>imask</td><td></td><td>文字校验功能</td></tr><tr><td>validator</td><td>A library of string validators and sanitizers.</td><td>字符串校验库</td></tr><tr><td>zod</td><td>schema validation</td><td>字符串等数据的校验工具</td></tr><tr><td>destr</td><td></td><td>实现同 <code>JSON.parse</code> 的功能但更安全，支持 ts</td></tr><tr><td>file-type</td><td></td><td>使用二进制判断文件的类型</td></tr><tr><td>rxjs</td><td>Reactive Extensions For JavaScript</td><td>JS 的响应式扩展</td></tr><tr><td>chardet</td><td></td><td>文件，字符使用的编码方式检测库</td></tr><tr><td>brotli-wasm</td><td></td><td>基于 Brotli 算法的压缩和解压缩工具</td></tr><tr><td>filesize</td><td></td><td>把文件大小换算为易读的内容</td></tr><tr><td>math.js</td><td></td><td>处理复数、分数、单位、矩阵、符号计算等</td></tr><tr><td>@faker-js/faker</td><td>Generate massive amounts of fake data</td><td>生成大量假数据</td></tr><tr><td>ip-address</td><td></td><td>解析和操作 IPv4/6 地址</td></tr><tr><td>lossless-json</td><td></td><td>避免数据过大影响 json 解析</td></tr><tr><td>china-division</td><td></td><td>中国行政区划（五级）</td></tr><tr><td>emoji-regex</td><td>offers a regular expression to match all emoji symbols and sequences</td><td>正则匹配所有的 emoji</td></tr><tr><td>culori</td><td></td><td>根据颜色获取颜色名称</td></tr><tr><td>color-names</td><td></td><td>根据颜色获取颜色名称（或者反向）</td></tr><tr><td>zip-stream</td><td></td><td></td></tr><tr><td>@zip.js/zip.js</td><td></td><td></td></tr><tr><td>fast-csv</td><td></td><td>对 csv 文件进行快速处理</td></tr><tr><td>web-worker</td><td></td><td>浏览器和 node 一致的 worker</td></tr><tr><td>alfaaz</td><td>the fastest multilingual word counter</td><td>号称最快的字数统计工具</td></tr><tr><td>workerpool</td><td></td><td>将任务分配给工作池</td></tr><tr><td>pretty-ms</td><td></td><td>将 ms 转换为好看的形式</td></tr><tr><td>chroma-js</td><td>zero-dependency color conversions</td><td>无依赖的颜色转换工具</td></tr><tr><td>immer</td><td></td><td>不可变数据处理</td></tr><tr><td>mutative</td><td>efficient immutable</td><td>不可变数据，效率更高</td></tr><tr><td>js-yaml</td><td></td><td>解析 yaml 文件</td></tr><tr><td>tinybase</td><td><em>reactive</em> data store for local-first apps.</td><td>本地响应式数据库</td></tr><tr><td>microdiff</td><td>object and array differ</td><td>查看 array 和 object 的不同</td></tr><tr><td>madge</td><td></td><td>给出指定文件的依赖关系</td></tr><tr><td>browser-or-node</td><td></td><td>判断当前的环境，</td></tr><tr><td>merge-anything</td><td></td><td>合并，但是是递归合并</td></tr><tr><td>ejs</td><td></td><td>模板引擎</td></tr><tr><td>bwip-js</td><td></td><td>条形码生成工具</td></tr><tr><td>superstruct</td><td></td><td>数据格式验证工具（运行时</td></tr><tr><td>es-toolkit</td><td></td><td>正实现着 Lodash 所有功能，类型支持，性能 up</td></tr><tr><td>@diffusionstudio/vits-web</td><td></td><td>本地语音生成工具，阅读</td></tr><tr><td>calendar-link</td><td>Calendar link generator for popular services</td><td>在各个流行平台上生成日历事件</td></tr><tr><td>tesseract.js</td><td></td><td>基于 js 的 OCR 识别</td></tr><tr><td>humanifyjs</td><td></td><td>代码反混淆</td></tr><tr><td>colorthief</td><td>Grab the color palette from an image</td><td>从图像中获取主要的颜色</td></tr><tr><td>match-sorter</td><td></td><td>确定性最佳匹配数组排序</td></tr><tr><td>tinybench</td><td>Benchmark your code easily</td><td></td></tr><tr><td>immutable</td><td></td><td>不可变数据，支持 map</td></tr><tr><td>fraction.js</td><td></td><td>数学更精确的计算</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="时间处理">时间处理<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%97%B6%E9%97%B4%E5%A4%84%E7%90%86" class="hash-link" aria-label="时间处理的直接链接" title="时间处理的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>timeago.js</td><td>format datetime with <code>*** time ago</code></td><td>返回 XX 时间之前</td></tr><tr><td>luxon</td><td>working with dates and times in JavaScript.</td><td>时间日期处理</td></tr><tr><td>date-fns</td><td></td><td>提供超多关于日期的处理函数</td></tr><tr><td>chrono-node</td><td>A natural language date parser in Javascript.</td><td>自然语言日期处理器</td></tr><tr><td>dayjs</td><td></td><td>极小的事件处理工具</td></tr><tr><td>@formkit/tempo</td><td>as small and easy to use as possible.</td><td>小巧好用的时间工具（有TS类型支持）</td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="node">node<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#node" class="hash-link" aria-label="node的直接链接" title="node的直接链接">​</a></h2>
<p>更倾向于服务端（node）使用的内容</p>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>undici</td><td></td><td>请求库</td></tr><tr><td>graphql</td><td>a query language</td><td>Meta 用的查询语言（一个接口请求前端想要的数据）</td></tr><tr><td>staticrypt</td><td></td><td>轻松加密静态站点</td></tr><tr><td>migrate</td><td></td><td>一个抽象迁移框架</td></tr><tr><td>ws</td><td></td><td>使用 websocket</td></tr><tr><td>pm2</td><td>·</td><td>后端资源监听</td></tr><tr><td>piscina</td><td></td><td>线程池控制工具</td></tr><tr><td>nodemon</td><td></td><td>监听文件变动并自动执行</td></tr><tr><td>mqtt</td><td>client library for the <a href="http://mqtt.org/" target="_blank" rel="noopener noreferrer">MQTT</a> protocol</td><td>支持 mqtt 协议</td></tr><tr><td>pureimage</td><td>100% JavaScript implementation of theCanvas 2D drawing API for NodeJS</td><td>纯 node 实现 2d canvas 绘制</td></tr><tr><td>tinypool</td><td></td><td>轻量级/微型 Node.js 工作线程池</td></tr><tr><td>necord</td><td></td><td>用于创建 Discord 机器人的框架</td></tr><tr><td>globby</td><td>User-friendly glob matching.Based on <code>fast-glob</code></td><td>筛选文件目录</td></tr><tr><td>passport</td><td></td><td>后端权限验证工具</td></tr><tr><td>@humanfs/node</td><td>what a modern, high-level filesytem API should look like.</td><td>原生 fs API 应该成为的样子</td></tr><tr><td>node-usb</td><td></td><td>Node 的改进 USB 库</td></tr><tr><td>phin</td><td>The lightweight Node.js HTTP client</td><td>轻量请求库</td></tr><tr><td>node-jq</td><td></td><td>c 的 json 处理工具</td></tr><tr><td>node-usb</td><td></td><td>使用 node 操作 usb</td></tr><tr><td>wait-on</td><td>wait for files, ports, sockets, and http(s) resources to become available</td><td>等待文件等变得可用</td></tr><tr><td>piscina</td><td>fast, efficient Node.js Worker Thread Pool implementation</td><td>工作线程池库</td></tr><tr><td>@vinejs/vine</td><td>One of the fastest validation library for Node.js</td><td>号称最快速的表单验证库</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="文件处理">文件处理<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%96%87%E4%BB%B6%E5%A4%84%E7%90%86" class="hash-link" aria-label="文件处理的直接链接" title="文件处理的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>node-xlsx</td><td></td><td>使用 node 处理 xlsx 文件</td></tr><tr><td>imgly/background-removal</td><td></td><td>移除图像背景</td></tr><tr><td>sharp</td><td>high speed Node.js module is to convert large images</td><td>超快速图片处理</td></tr><tr><td>jimp</td><td></td><td>无依赖的 Node 图像处理库</td></tr><tr><td>node-poppler</td><td></td><td>异步 PDF 渲染器</td></tr><tr><td>chokidar</td><td></td><td>更好的 watchFile</td></tr><tr><td>exiftool-vendored</td><td></td><td>图片拍摄信息数据访问</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="数据库">数据库<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%95%B0%E6%8D%AE%E5%BA%93" class="hash-link" aria-label="数据库的直接链接" title="数据库的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>lmdb</td><td></td><td>LMDB 的数据存储包装器。</td></tr><tr><td>mongoose</td><td>Mongoose is a MongoDB object modeling tool</td><td>对象建模工具</td></tr><tr><td>lowdb</td><td>Simple to use local JSON database.</td><td>简单的 JSON 作为 DB</td></tr><tr><td>json-server</td><td>Get a full fake REST API with zero coding in less than 30 seconds</td><td>也是 JSON 作为 DB</td></tr><tr><td>node-oracledb</td><td></td><td>纯 JS Oracle 数据库驱动程序</td></tr><tr><td>pgsql-ast-parser</td><td>a Postgres SQL syntax parser.</td><td>SQL 语法解析器</td></tr><tr><td>kanel</td><td></td><td>从 Postgres 生成 TypeScript 类型</td></tr><tr><td>knex</td><td>A batteries-included SQL query &amp; schema builder</td><td></td></tr><tr><td>mysql2</td><td></td><td>专注于性能的 mysql</td></tr><tr><td>prisma</td><td>Prisma is a next-generation ORM</td><td>下一代关系对象映射（自己说的）</td></tr><tr><td>mikro-orm</td><td>TypeScript ORM for Node.js based on Data Mapper</td><td></td></tr><tr><td>slonik</td><td>PostgreSQL client</td><td></td></tr><tr><td>node-pg-migrate</td><td>database migration management built exclusively for postgres.</td><td>数据库迁移工具</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="爬虫">爬虫<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E7%88%AC%E8%99%AB" class="hash-link" aria-label="爬虫的直接链接" title="爬虫的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>node-html-to-image</td><td></td><td>将 HTML 转换为 img</td></tr><tr><td>crawlee</td><td></td><td>网络爬虫和浏览器自动化库</td></tr><tr><td>got</td><td></td><td>Node HTTP 请求库</td></tr><tr><td>puppeteer</td><td></td><td>自动化浏览器操作</td></tr><tr><td>linkinator</td><td><code>npx linkinator https://example.com/</code></td><td>查看网站是否有效</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="浏览器">浏览器<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%B5%8F%E8%A7%88%E5%99%A8" class="hash-link" aria-label="浏览器的直接链接" title="浏览器的直接链接">​</a></h2>
<p>更倾向于在前端使用（或者是依赖于 DOM 等浏览器提供的对象），这些包默认是不依赖框架，或者在多个框架中都可以使用的</p>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>frappe-gantt</td><td>A simple, interactive, modern gantt chart library for the web</td><td>甘特图，日期计划表，时间线</td></tr><tr><td>gantt-schedule-timeline-calendar</td><td>Gantt, schedule, timeline and calendar components all in one!</td><td>计划表，甘特图，时间线</td></tr><tr><td>@schedule-x/calendar</td><td></td><td>日历对工作进行管理</td></tr><tr><td>@fullcalendar/core</td><td></td><td>日历组件</td></tr><tr><td>js-confetti、canvas-confetti</td><td></td><td>添加一个彩带动画</td></tr><tr><td>satori</td><td>Satori only accepts JSX elements</td><td>dom 转化为 svg</td></tr><tr><td>highlight.js</td><td></td><td>语法高亮</td></tr><tr><td>prismjs</td><td></td><td>语法高亮</td></tr><tr><td>shiki</td><td>A beautiful yet powerful syntax highlighter</td><td>异步语法高亮，漂亮的代码查看器</td></tr><tr><td>sugar-high</td><td></td><td>极小的 jsx 语法高亮</td></tr><tr><td>htmlparser2</td><td></td><td>快速解析HTML</td></tr><tr><td>gridstack</td><td></td><td>类似于 vue-grid-layout</td></tr><tr><td>melonjs</td><td></td><td>成熟的 HTML5 游戏引擎。</td></tr><tr><td>eslint-plugin-check-file</td><td></td><td>强制检查文件名称</td></tr><tr><td>@algolia/autocomplete-js</td><td></td><td>自动完成组件</td></tr><tr><td>qrcode</td><td></td><td>生成二维码</td></tr><tr><td>selecto</td><td>allows select elements in the drag area using the mouse or touch.</td><td>区域选择组件</td></tr><tr><td>@formkit/auto-animate</td><td></td><td>简单的方式添加动画（支持各种框架）</td></tr><tr><td>@tiptap/core</td><td>Build collaborative editor apps</td><td>多人协作的编辑器</td></tr><tr><td>mathlive</td><td></td><td>数学公式的编辑和展示</td></tr><tr><td>copy-text-to-clipboard</td><td></td><td>将内容粘贴到剪切板（2k）</td></tr><tr><td>wavesurfer</td><td></td><td>音频文件的波形查看器</td></tr><tr><td>fast-png</td><td></td><td>使用原生 JavaScript 事件解码编码 PNG 图片</td></tr><tr><td>svguitar</td><td>演示：<a href="https://github.com/omnibrain/svguitar" target="_blank" rel="noopener noreferrer">https://github.com/omnibrain/svguitar</a></td><td>用 SVG 做吉他谱！</td></tr><tr><td>axios-token-manager</td><td></td><td></td></tr><tr><td>axios-mock-adapter</td><td>Axios adapter that allows to easily mock requests</td><td>axios mock 适配器</td></tr><tr><td>@popperjs/core</td><td></td><td>popover 组件</td></tr><tr><td>@floating-ui/dom</td><td></td><td>popover 组件</td></tr><tr><td>driver.js</td><td></td><td>第一次进入页面的提示组件</td></tr><tr><td>moveable</td><td></td><td>移动缩放旋转等操作</td></tr><tr><td>sortablejs</td><td>Sortable is a JavaScript library for reorderable drag-and-drop lists.</td><td>列表拖拽库</td></tr><tr><td>capture-website</td><td></td><td>获取网站截屏</td></tr><tr><td>reveal</td><td></td><td>滚动和动画结合起来，构建展示页面</td></tr><tr><td>emoji-mart</td><td>a customizable emoji picker</td><td>自定义 emoji 选择器</td></tr><tr><td>ai2html</td><td></td><td>将 Adobe Illustrator 文件转换成 HTML</td></tr><tr><td>screenfull</td><td></td><td>用于全屏和取消全屏展示</td></tr><tr><td>@tsparticles/engine</td><td><a href="https://particles.js.org/" target="_blank" rel="noopener noreferrer">https://particles.js.org/</a></td><td>特效引擎</td></tr><tr><td>matter-js</td><td>JavaScript 2D rigid body physics engine for the web</td><td>刚体物理引擎</td></tr><tr><td>signature_pad</td><td>a JavaScript library for drawing smooth signatures.</td><td>写字板的签名组件</td></tr><tr><td>@algolia/autocomplete-js</td><td></td><td>优化搜索自动提示体验</td></tr><tr><td>@bitjson/qr-code</td><td></td><td>二维码生成</td></tr><tr><td>embla-carousel（非包名</td><td></td><td>轮播功能（支持主流框架</td></tr><tr><td>jsbarcode</td><td></td><td>条形码生成器</td></tr><tr><td>perfect-freehand</td><td></td><td>让手绘内容更加优雅</td></tr><tr><td>atrament</td><td></td><td>另一个手绘包</td></tr><tr><td><a href="https://github.com/tanstack/table" target="_blank" rel="noopener noreferrer">tanstack</a> 非包名</td><td></td><td>一系列的 UI 组件</td></tr><tr><td>dexie</td><td></td><td>indexDB 封装</td></tr><tr><td>tonal</td><td></td><td>音乐理论包</td></tr><tr><td>cally</td><td></td><td>无框架无依赖原生日历</td></tr><tr><td>facesjs</td><td></td><td>生成卡通脸部（不怎么好看</td></tr><tr><td>katex</td><td>fast TeX math rendering</td><td>快速渲染的数学符号库</td></tr><tr><td>simple-parallax-js</td><td></td><td>视差效果</td></tr><tr><td>fabric</td><td></td><td>svg 和 canvas 互相转换的库</td></tr><tr><td>@egjs/infinitegrid</td><td></td><td>多框架支持的无限滚动</td></tr><tr><td>html2pdf.js</td><td></td><td>html 转为 pdf</td></tr><tr><td>ag-grid-community</td><td></td><td>高性能数据 grid（表格）</td></tr><tr><td>@glidejs/glide</td><td></td><td>一个滑动块（走马灯效果）</td></tr><tr><td>spoiled</td><td></td><td>文字掩盖效果</td></tr><tr><td>music-metadata</td><td></td><td>获取音乐原信息</td></tr><tr><td>click-to-component</td><td></td><td>点击进入组件的源码编辑</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="react">React<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#react" class="hash-link" aria-label="React的直接链接" title="React的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>react-qrcode-logo</td><td>generate a customizable QR Code.</td><td>生成带 Logo 的 qrcode</td></tr><tr><td>react-spinners</td><td></td><td>加载动画</td></tr><tr><td>react-spring</td><td>a cross-platform spring-physics first animation library.</td><td>动画库</td></tr><tr><td>react-chrono</td><td>Render timelines in three different modes</td><td>时间线组件</td></tr><tr><td>plyr-react</td><td></td><td>自定义多媒体播放器组件</td></tr><tr><td>@tremor/react</td><td>The react library to build dashboards fast</td><td>快速快速构建后台</td></tr><tr><td>next-sitemap</td><td></td><td>Next.js 应用程序的网站地图生成器</td></tr><tr><td>react-wrap-balancer</td><td></td><td>减少内容变换的换行频率次数</td></tr><tr><td><a href="https://github.com/petyosi/react-virtuoso" target="_blank" rel="noopener noreferrer">react-virtuoso</a></td><td></td><td>虚拟滚动</td></tr><tr><td>boring-avatars</td><td>generates custom, SVG-based avatars from any username and color palette.</td><td>根据名称随机生成头像</td></tr><tr><td>react-webcam</td><td></td><td>摄像头相关</td></tr><tr><td>react-icons</td><td>Include popular icons in your React projects</td><td>Icon，但是 React</td></tr><tr><td>html-react-parser</td><td></td><td>HTML 字符串解析为 React 代码的解析器</td></tr><tr><td>spectacle</td><td></td><td>基于 React 和 JSX 的演示文库</td></tr><tr><td>react-virtualized</td><td></td><td>强大的虚拟列表组件</td></tr><tr><td>react-grid-layout</td><td>RGL is React-only</td><td>自定义布局的组件</td></tr><tr><td>react-tracking</td><td></td><td>用户行为采集框架</td></tr><tr><td>@codesandbox/sandpack-react</td><td></td><td>前端沙盒</td></tr><tr><td>react-quick-pinch-zoom</td><td></td><td>DOM 放大和拖动，多点控制形状</td></tr><tr><td>react-datasheet-grid</td><td></td><td>表格大数据渲染</td></tr><tr><td>react-scroll-sync</td><td></td><td>同步滚动内容</td></tr><tr><td>react-to-print</td><td></td><td>打印相关功能</td></tr><tr><td>react-scroll-parallax</td><td></td><td>滚动动画</td></tr><tr><td>react-aria-components</td><td></td><td>40 多个可自定义、支持无障碍访问的组件</td></tr><tr><td>shadcn/ui（不是 npm 包名</td><td>shadcn/ui <a href="https://ui.shadcn.com/" target="_blank" rel="noopener noreferrer">https://ui.shadcn.com/</a></td><td>把 UI 组件生成到你的项目内，高可扩展</td></tr><tr><td>react-resize-detector</td><td>managing element size changes in React</td><td>利用 ResizeObserver 实现</td></tr><tr><td>react-use</td><td></td><td>提供 react 的 hooks</td></tr><tr><td>jotai</td><td>simple useState replacement</td><td>小型状态管理</td></tr><tr><td>zustand</td><td></td><td>状态管理</td></tr><tr><td>react-tag-autocomplete</td><td></td><td>自动完成 tag 功能</td></tr><tr><td>@million/lint</td><td></td><td>类似 eslint，但给的是性能优化建议</td></tr><tr><td>react-geiger</td><td><a href="https://github.com/kristiandupont/react-geiger" target="_blank" rel="noopener noreferrer">https://github.com/kristiandupont/react-geiger</a></td><td>让 React 应用卡顿时发出声音</td></tr><tr><td>onborda</td><td></td><td>产品导览功能（next</td></tr><tr><td>spectacle</td><td></td><td>在线预览组件</td></tr><tr><td>astro</td><td><a href="https://astro.build/" target="_blank" rel="noopener noreferrer">Astro</a> is the all-in-one web framework designed for speed.</td><td>访问速度优先 md 生成 SSR 框架</td></tr><tr><td>reassure</td><td>Performance testing companion for React and React Native.</td><td>react 和 RN 的性能测试工具</td></tr><tr><td>pixelmatch</td><td></td><td>像素级别对比图像差异</td></tr><tr><td>react-ace</td><td></td><td>react 的一个代码编辑器</td></tr><tr><td>valtio</td><td></td><td>为 react 设计状态管理</td></tr><tr><td>@tanstack/react-query</td><td></td><td>获取</td></tr><tr><td>@codaworks/react-glow</td><td></td><td>高亮追踪功能</td></tr><tr><td>react-burger-menu</td><td></td><td>侧边可收起展开菜单样式</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h4 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="ui--组件">UI / 组件<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#ui--%E7%BB%84%E4%BB%B6" class="hash-link" aria-label="UI / 组件的直接链接" title="UI / 组件的直接链接">​</a></h4>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>react-content-loader</td><td></td><td>骨架内容组件屏</td></tr><tr><td>react-pro-sidebar</td><td></td><td>sidebar 组件库</td></tr><tr><td>sonner</td><td><a href="https://sonner.emilkowal.ski/" target="_blank" rel="noopener noreferrer">Sonner</a> is an opinionated toast component for React.</td><td>一个轻提示的组件</td></tr><tr><td>react-day-picker</td><td><a href="http://react-day-picker.js.org/" target="_blank" rel="noopener noreferrer">DayPicker</a> is a date picker component for <a href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>.</td><td>日期选择（a11y）</td></tr><tr><td>@dnd-kit/core</td><td><strong>Beautiful</strong> and <strong>accessible</strong> drag and drop for lists with <code>React</code></td><td>React 可拖拽组件库</td></tr><tr><td>react-currency-input-field</td><td></td><td>金额输入框</td></tr><tr><td>react-archer</td><td></td><td>在 DOM 之间创建箭头</td></tr><tr><td>react-clock</td><td></td><td>React 时钟</td></tr><tr><td>react-barcode</td><td></td><td>条形码</td></tr><tr><td>react-phone-number-input</td><td></td><td>国际电话输入</td></tr><tr><td>react-awesome-reveal</td><td></td><td>元素可见时触发动画</td></tr><tr><td>react-international-phone</td><td></td><td>电话号码输入组件</td></tr><tr><td>hamburger-react</td><td></td><td>菜单转换动画</td></tr><tr><td>react-force-graph</td><td></td><td>force-graph 的 react 版本</td></tr><tr><td>@codaworks/react-glow</td><td></td><td>追踪高亮的功能</td></tr><tr><td>react-big-calendar</td><td></td><td>大型日历的组件</td></tr><tr><td>react-signature-pad-wrapper</td><td></td><td>对 signature-pad 的 react 包装</td></tr><tr><td>react-datepicker</td><td>A simple and reusable Datepicker component for React</td><td>简单的日期选择组件</td></tr><tr><td>vaul</td><td></td><td>一个简单的抽屉组件</td></tr><tr><td>@uiw/react-codemirror</td><td></td><td>codemirror react</td></tr><tr><td>simple-keyboard</td><td></td><td>虚拟键盘</td></tr><tr><td>react-loading-skeleton</td><td></td><td>react 加载骨架</td></tr><tr><td>react-snap-carousel</td><td></td><td>轮播滚动屏，自适应</td></tr><tr><td>react-paginate</td><td></td><td>自定义页脚，用于翻页功能</td></tr><tr><td>reecharts</td><td></td><td>d3 react 构建可视化库</td></tr><tr><td>@chakra-ui/system</td><td></td><td></td></tr><tr><td>@viselect/react</td><td></td><td>可以通过框选选中多个 DOM</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h4 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="文件相关">文件相关<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%96%87%E4%BB%B6%E7%9B%B8%E5%85%B3" class="hash-link" aria-label="文件相关的直接链接" title="文件相关的直接链接">​</a></h4>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>yet-another-react-lightbox</td><td></td><td>支持视频和滑动的媒体图片预览组件</td></tr><tr><td>react-pdf</td><td></td><td>在 React 应用中显示 PDF。</td></tr><tr><td>react-medium-image-zoom</td><td></td><td>图片缩放工具</td></tr><tr><td>react-image-crop</td><td></td><td>图片裁剪工具</td></tr><tr><td>@onedoc/react-print</td><td></td><td>将 react 生成为 PDF</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="vue">Vue<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#vue" class="hash-link" aria-label="Vue的直接链接" title="Vue的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>vue-cropper</td><td></td><td>一个优雅的图片裁剪插件</td></tr><tr><td>vuetify</td><td>the world's most popular Vue.js framework for building feature rich, blazing fast applications.</td><td>Vue 组件库</td></tr><tr><td>vue-grid-layout</td><td></td><td>可以拖拽 DOM 的大小</td></tr><tr><td>sandpack-vue3</td><td></td><td>vue 沙盒</td></tr><tr><td>@formkit/core</td><td></td><td></td></tr><tr><td>shadcn-vue</td><td>A CLI for adding components to your project.</td><td>复制组件到你自己的应用程序中。</td></tr><tr><td>vue-qr</td><td></td><td>提供 二维码生成</td></tr><tr><td>vue-virtual-scroller</td><td></td><td>vue 虚拟滚动的</td></tr><tr><td>@inkline/inkline</td><td></td><td>一个可定制的 Vue.js 3 UI/UX 库</td></tr><tr><td>radix-vue</td><td>UI component library for building high-quality, accessible design systems and web apps</td><td>a11y 高质量 UI 框架</td></tr><tr><td>@tinymce/tinymce-vue</td><td>The world's #1 open source rich text editor.</td><td>富文本编辑器</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="编辑器">编辑器<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E7%BC%96%E8%BE%91%E5%99%A8" class="hash-link" aria-label="编辑器的直接链接" title="编辑器的直接链接">​</a></h3>
<table><thead><tr><th>组件名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>codemirror</td><td></td><td>代码编辑器</td></tr><tr><td>slate</td><td></td><td>富文本编辑器</td></tr><tr><td>prosemirror</td><td></td><td>文本编辑器</td></tr><tr><td>@ckeditor/ckeditor5-core</td><td></td><td>编辑器</td></tr><tr><td>lexical</td><td></td><td>可扩展编辑器</td></tr><tr><td>monaco</td><td></td><td>VS Code 的编辑器</td></tr><tr><td>trix</td><td>Rich Text Editor</td><td>富文本编辑器</td></tr><tr><td>quill</td><td></td><td>所见即所得的编辑器</td></tr><tr><td>micromark</td><td></td><td>CommonMark 最小的实现</td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="markdown">markdown<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#markdown" class="hash-link" aria-label="markdown的直接链接" title="markdown的直接链接">​</a></h3>
<table><thead><tr><th>组件名称</th><th>英文介绍</th><th>介绍</th><th>框架</th></tr></thead><tbody><tr><td>remark</td><td></td><td>解析 MD，输出序列化内容</td><td></td></tr><tr><td>markdown-it</td><td>Markdown parser done right. Fast and easy to extend.</td><td></td><td></td></tr><tr><td>marked</td><td></td><td>Markdown 解析器和编译器</td><td></td></tr><tr><td>remark-mdx</td><td>remark plugin to support the MDX syntax</td><td>支持 MDX 高亮</td><td></td></tr><tr><td>@mdx-js/mdx</td><td></td><td></td><td></td></tr><tr><td>@penrose/core</td><td></td><td>更多数学<a href="https://penrose.cs.cmu.edu/examples" target="_blank" rel="noopener noreferrer">相关图形</a>的支持</td><td></td></tr><tr><td>mermaid</td><td>definitions and a renderer to create and modify complex diagrams.</td><td>为 markdown 添加更多支持</td><td></td></tr><tr><td>@milkdown/core</td><td></td><td>编辑 markdown 所见即所得</td><td></td></tr><tr><td>turndown</td><td></td><td>将 html 转换为 markdown</td><td></td></tr><tr><td>markdown-to-jsx</td><td></td><td>将 markdown 转换为 jsx</td><td>react</td></tr><tr><td>@blocknote/core</td><td></td><td>开源多人协作文档</td><td></td></tr><tr><td>@mdxeditor/editor</td><td></td><td>更轻量的 markdown 编辑器</td><td></td></tr><tr><td>codehike</td><td>bridges the gap between Markdown and React</td><td>把 markdown 转为 react</td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="文件查看">文件查看<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E6%96%87%E4%BB%B6%E6%9F%A5%E7%9C%8B" class="hash-link" aria-label="文件查看的直接链接" title="文件查看的直接链接">​</a></h3>
<table><thead><tr><th>组件名称</th><th>文档类型</th><th>介绍</th></tr></thead><tbody><tr><td>docx-preview</td><td>doc/docx</td><td>前端 docx 文件预览组件</td></tr><tr><td>mammoth</td><td>doc/docx</td><td>前端 word 编辑文件，可导出为 html</td></tr><tr><td>docx</td><td>doc/docx</td><td>简单生成和修改 docx 文件</td></tr><tr><td>xlsx</td><td>xlsx</td><td>提供 xlsx 数据处理（官方切换了 git 和安装的地址，详见<a href="https://docs.sheetjs.com/docs/getting-started/installation/nodejs" target="_blank" rel="noopener noreferrer">连接</a>）</td></tr><tr><td>exceljs</td><td>xlsx</td><td>操作和书写数据，并且转化为 xlsx 和 JSON</td></tr><tr><td>handsontable</td><td>xlsx</td><td>数据绑定，数据分析，筛选，排序，和操作</td></tr><tr><td>pptxgenjs</td><td>pptx</td><td>创建 js ppt</td></tr><tr><td>@webtoon/psd</td><td>psd</td><td>无依赖的 .psd 文件解析器</td></tr><tr><td>@pdfslick/core</td><td>pdf</td><td>基于 PDF.js 的 pdf 文件查看器</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="css">CSS<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#css" class="hash-link" aria-label="CSS的直接链接" title="CSS的直接链接">​</a></h3>
<table><thead><tr><th>组件名称</th><th>文档类型</th><th>介绍</th></tr></thead><tbody><tr><td>css-doodle</td><td>A web component for drawing patterns with CSS.</td><td>使用 CSS 画图案</td></tr><tr><td>@medv/finder</td><td>CSS Selector Generator</td><td>生成 DOM 最短的 selector（选择器）</td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="可视化">可视化<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E5%8F%AF%E8%A7%86%E5%8C%96" class="hash-link" aria-label="可视化的直接链接" title="可视化的直接链接">​</a></h3>
<table><thead><tr><th>组件名称</th><th>文档类型</th><th>介绍</th><th>框架</th></tr></thead><tbody><tr><td>plotly.js</td><td>a standalone Javascript data visualization library</td><td>独立的可视化库</td><td></td></tr><tr><td>plotteus</td><td></td><td>时间叙事的可视化库（滚动、UI 控件）</td><td></td></tr><tr><td>reagraph</td><td></td><td>基于 WebGL 的 React 图形可视化库（600 stars</td><td>React</td></tr><tr><td>@visx/visx</td><td></td><td>基于 D3 的 React 可视化</td><td>React</td></tr><tr><td>@xyflow/react 或 reactflow</td><td>building node-based UIs with React or Svelte.</td><td>流程图，MIT</td><td>React</td></tr><tr><td>@excalidraw/excalidraw</td><td>virtual hand-drawn style whiteboard.</td><td>超级画布</td><td>react</td></tr><tr><td>@glideapps/glide-data-grid</td><td><a href="https://grid.glideapps.com/" target="_blank" rel="noopener noreferrer">https://grid.glideapps.com/</a></td><td>表格 + 可视化</td><td></td></tr><tr><td>spacekit.js</td><td></td><td>宇宙 3D 视图</td><td></td></tr><tr><td>vizzu</td><td><a href="https://lib.vizzuhq.com/latest/" target="_blank" rel="noopener noreferrer">https://lib.vizzuhq.com/latest/</a></td><td>新的<strong>动画</strong>可视化库</td><td></td></tr><tr><td>cytoscape</td><td>library for visualisation and analysis</td><td>关系图，各个内容间的联系</td><td></td></tr><tr><td>peaks.js</td><td>display and interact with audio waveforms</td><td>音频文件的波形查看器和操作</td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td>bpmn-js</td><td></td><td>标准的 BPMN 图</td><td></td></tr><tr><td>chart.js</td><td>Simple yet flexible JavaScript charting for designers &amp; developers</td><td>简单灵活的 chart</td><td></td></tr><tr><td>apexcharts</td><td>build interactive data visualizations with simple API</td><td>编写互动数据</td><td></td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="跨端">跨端<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#%E8%B7%A8%E7%AB%AF" class="hash-link" aria-label="跨端的直接链接" title="跨端的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="react-native">React Native<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#react-native" class="hash-link" aria-label="React Native的直接链接" title="React Native的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td>react-native-permissions</td><td></td><td>RN 的统一权限 API</td></tr><tr><td>react-native-picker-select</td><td></td><td>选择功能</td></tr><tr><td>react-native-svg</td><td></td><td>提供一个兼容层来适配 React。</td></tr><tr><td>react-native-share</td><td></td><td>RN 分享功能</td></tr><tr><td>tamagui</td><td>Style and UI for React（web and native）</td><td></td></tr><tr><td>@shopify/react-native-skia</td><td>High-performance 2d Graphics for React Native using Skia</td><td>绘制 2D 图像库</td></tr><tr><td>react-native-image-picker</td><td>select a photo/video from the device library or camera.</td><td>从设备上选择图片文件</td></tr><tr><td>@expensify/react-native-live-markdown</td><td></td><td>跨平台 Markdown 编辑器</td></tr><tr><td>react-native-bootsplash</td><td></td><td>启动页面</td></tr><tr><td>react-native-vision-camera</td><td>powerful, high-performance Camera library</td><td>相机库</td></tr><tr><td>react-native-circular-progress</td><td></td><td>动画进度</td></tr><tr><td>react-native-background-actions</td><td></td><td>运行后台任务的后台服务库</td></tr><tr><td>react-native-filament</td><td></td><td>RN 3d 渲染引擎</td></tr><tr><td>react-native-compressor</td><td></td><td>上传前压缩</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="tauri">tauri<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#tauri" class="hash-link" aria-label="tauri的直接链接" title="tauri的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td></td><td></td><td></td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="electron">electron<a href="https://fall-zhang.github.io/blog/npm%E5%89%8D%E7%AB%AF%E5%8C%85#electron" class="hash-link" aria-label="electron的直接链接" title="electron的直接链接">​</a></h3>
<table><thead><tr><th>包名称</th><th>英文介绍</th><th>介绍</th></tr></thead><tbody><tr><td></td><td></td><td></td></tr></tbody></table>]]></content>
        <author>
            <name>Fall Zhang</name>
            <uri>https://github.com/fall-zhang</uri>
        </author>
        <category label="npm" term="npm"/>
        <category label="依赖" term="依赖"/>
        <category label="常用依赖" term="常用依赖"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[2分钟环境搭建]]></title>
        <id>https://fall-zhang.github.io/blog/2分钟环境搭建</id>
        <link href="https://fall-zhang.github.io/blog/2分钟环境搭建"/>
        <updated>2025-02-14T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[环境配置]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="环境配置">环境配置<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="环境配置的直接链接" title="环境�配置的直接链接">​</a></h2>
<p>当然不是普通的环境搭建方式，而是敲（或者是复制粘贴）三五行代码就可以搞定的那种安装。</p>
<p>使用 Chocolatey 进行快速安装，以及一些 PowerShell、VS code 、npm 的配置。</p>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="chocolatey">Chocolatey<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#chocolatey" class="hash-link" aria-label="Chocolatey的直接链接" title="Chocolatey的直接链接">​</a></h2>
<p>使用命令行批量安装 Windows 软件，同类命令行应用有：<a href="https://scoop.sh/" target="_blank" rel="noopener noreferrer">Scoop</a> 、winget</p>
<p>这节课，我们学习使用 <a href="https://community.chocolatey.org/packages" target="_blank" rel="noopener noreferrer">Chocolatey</a>。</p>
<p>WinGet 作为微软官方出品还需观望，也不知道微软这次靠不靠谱。</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="choco-安装">choco 安装<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#choco-%E5%AE%89%E8%A3%85" class="hash-link" aria-label="choco 安装的直接链接" title="choco 安装的直接链接">​</a></h3>
<p>在 <code>powershell</code>（右键开始菜单，选中 Windows PowerShell 管理员）执行下面程序进行安装</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))</span><br></span></code></pre></div></div>
<blockquote>
<p>注：必需要管理员权限才能进行安装。否则报一大堆错</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="软件使用">软件使用<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E8%BD%AF%E4%BB%B6%E4%BD%BF%E7%94%A8" class="hash-link" aria-label="软件使用的直接链接" title="软件使用的直接链接">​</a></h3>
<blockquote>
<p>你可以访问 <a href="https://community.chocolatey.org/packages" target="_blank" rel="noopener noreferrer">https://community.chocolatey.org/packages</a> 进行线上搜索可以安装的软件</p>
</blockquote>
<p>例如，安装 node.js、nvm</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">choco install nodejs</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">choco install nvm</span><br></span></code></pre></div></div>
<p>一行代码搞定前端全家桶！</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain"># windows 系统</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 不建议直接安装 node，而是通过 nvm 安装 node</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">choco install -y googlechrome firefox git vscode nvm</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 使用 nvm 安装 20.19.0 版本的 node </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">nvm install 20.19.0 </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 使用 20.19.0 版本的 node</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">nvm use 20.19.0</span><br></span></code></pre></div></div>
<blockquote>
<p>注：可以查看 <a href="https://fall-zhang.github.io/docs/npm%20%E5%92%8C%20nvm%20%E7%9A%84%E4%BD%BF%E7%94%A8">nvm</a> 工具的使用
注：安装的 firefox 是国际版的，不是国内版，两个版本之间无法共享账户数据</p>
</blockquote>
<p>不仅仅是前端全家桶</p>
<p>安装 python 全家桶！</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">choco install -y git tortoisegit vscode python</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">refreshenv</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">python -m pip install --upgrade pip</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 中国教育网用户切换镜像</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">pip install pipenv</span><br></span></code></pre></div></div>
<p>安装 docker</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">choco install docker-desktop</span><br></span></code></pre></div></div>
<p>安装 powertoys（微软推出的便利工具集合）</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">choco install powertoys</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="搜索软件">搜索软件<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E6%90%9C%E7%B4%A2%E8%BD%AF%E4%BB%B6" class="hash-link" aria-label="搜索软件的直接链接" title="搜索软件的直接链接">​</a></h3>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">choco search nodejs</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="vs-code">VS code<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#vs-code" class="hash-link" aria-label="VS code的直接链接" title="VS code的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="快捷键">快捷键<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E5%BF%AB%E6%8D%B7%E9%94%AE" class="hash-link" aria-label="快捷键的直接链接" title="快捷键的直接链接">​</a></h3>
<ul>
<li><code>ctrl + D</code>：阔选光标所在位置的内容，再次按下阔选相同内容</li>
<li><code>Alt + Shift + F</code>：格式化代码</li>
<li><code>alt + ↑/↓</code>：移动选中的整行内容</li>
<li><code>shift + alt +↑/↓</code>：复制当前选中的行</li>
<li><code>ctrl + enter</code>：创建新的行，并且跳转到下一行</li>
<li><code>ctrl + ~</code>：呼出 vs code 命令行</li>
<li><code>ctrl + /</code>：为所选区域添加注释</li>
<li><code>alt + shift +a</code>：为所选区域添加注释，注意，这个快捷可能微信的截图 <code>alt + a</code> 冲突</li>
<li>选中变量，然后点击 <code>f2</code>，可以重命名所有名称相同的变量，该操作跨文件</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="插件">插件<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E6%8F%92%E4%BB%B6" class="hash-link" aria-label="插件的直接链接" title="插件的直接链接">​</a></h3>
<ul>
<li>Chinese（simplified）功能和名字一样，提供中文的操作界面</li>
<li>Git Graph，提供图表方式来查看 git 版本历史</li>
<li>volar 为 vue 提供代码高亮，代码格式化</li>
<li>Material Icon Theme 提供各式各样的图标，用来美化和区分不同类型的文件</li>
<li>node-snippets  快速生成 node 代码块</li>
<li>ESlint 控制代码规范，对代码进行格式化处理，在配置中可以开启格式化功能</li>
</ul>
<p><strong>慎用插件</strong></p>
<table><thead><tr><th>应用名称</th><th>插件功能</th></tr></thead><tbody><tr><td>小霸王</td><td>小霸王游戏机</td></tr><tr><td>超级鼓励师</td><td>加油，你是最棒的，年薪百万就在前方。</td></tr><tr><td>韭菜盒子/vscode-stocks</td><td>看股票走势</td></tr><tr><td>电影集</td><td>看电影，刷剧</td></tr><tr><td>daily-anime</td><td>喜欢二次元，喜欢动漫，番剧的更新。</td></tr><tr><td>read-vscode-e/Thief-Book/</td><td>网易云阅读，可以一边敲代码一边看小说。</td></tr><tr><td>vsc-netease-music</td><td>可以听音乐，好像音乐本身感知不强，意义也不大。</td></tr><tr><td>vscode-maxPlus</td><td>浏览游戏资讯。</td></tr><tr><td>vscode-leetcode</td><td>刷算法。</td></tr><tr><td>Zhihu On VScode</td><td>刷知乎。</td></tr><tr><td>fakeupdate</td><td>模仿各种电脑系统的系统更新。</td></tr><tr><td>LeetCode</td><td>刷算法</td></tr><tr><td>NBA real-time score</td><td>看NBA数据。</td></tr></tbody></table>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="默认配置">默认配置<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E9%BB%98%E8%AE%A4%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="默认配置的直接链接" title="默认配置的直接链接">​</a></h3>
<p>可以同步到 github 上面</p>
<div class="language-json codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-json codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// 注意要在设置中开启保存时格式化代码</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"workbench.iconTheme"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"material-icon-theme"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.fontSize"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">14</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.wordWrap"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"on"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.linkedEditing"</span><span class="token operator" style="color:#393A34">:</span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.tabSize"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">2</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.detectIndentation"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 滚轮缩放编辑器大小</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.mouseWheelZoom"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"diffEditor.ignoreTrimWhitespace"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.unicodeHighlight.nonBasicASCII"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"diffEditor.renderSideBySide"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"javascript.updateImportsOnFileMove.enabled"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"never"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token comment" style="color:#999988;font-style:italic">// 可以生成预览窗口，而不是打开一个文件就是一个独立的窗口</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"workbench.editor.enablePreview"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.formatOnSave"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[javascript]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"dbaeumer.vscode-eslint"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[html]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"vscode.html-language-features"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[json]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"vscode.json-language-features"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[typescript]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"rvest.vs-code-prettier-eslint"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[jsonc]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"rvest.vs-code-prettier-eslint"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[vue]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"Vue.volar"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.quickSuggestions"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"strings"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"search.followSymlinks"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"search.maxResults"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">200</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"files.autoSave"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"onFocusChange"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"emmet.includeLanguages"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.formatOnType"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"true"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.formatOnSave"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"true"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"git.confirmSync"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.fontLigatures"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.autoClosingOvertype"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"always"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.stickyScroll.enabled"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"editor.stickyScroll.maxLineCount"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">3</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"css.lint.float"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"css.lint.duplicateProperties"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"error"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"css.lint.important"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"css.lint.universalSelector"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"less.lint.universalSelector"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"scss.lint.duplicateProperties"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"scss.lint.float"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"warning"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"eslint.format.enable"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">true</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"[scss]"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">    </span><span class="token property" style="color:#36acaa">"editor.defaultFormatter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"vscode.css-language-features"</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token punctuation" style="color:#393A34">}</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"window.commandCenter"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"extensions.autoUpdate"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">"onlyEnabledExtensions"</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  </span><span class="token property" style="color:#36acaa">"explorer.compactFolders"</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token boolean" style="color:#36acaa">false</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="其它配置">其它配置<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E5%85%B6%E5%AE%83%E9%85%8D%E7%BD%AE" class="hash-link" aria-label="其它配置的直接链接" title="其它配置的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="windows-系统">windows 系统<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#windows-%E7%B3%BB%E7%BB%9F" class="hash-link" aria-label="windows 系统的直接链接" title="windows 系统的直接链接">​</a></h3>
<p>可以在 <code>设置：系统 -&gt; 存储 -&gt; 保存新内容的地方</code> 进行配置</p>
<p>全部切换到需要的磁盘</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="powershell">PowerShell<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#powershell" class="hash-link" aria-label="PowerShell的直接链接" title="PowerShell的直接链接">​</a></h3>
<p>如果 powershell 不能执行一些命令，需要进行修改执行策略：</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">Set-ExecutionPolicy -ExecutionPolicy RemoteSigned</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="wsl">wsl<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#wsl" class="hash-link" aria-label="wsl的直接链接" title="wsl的直接链接">​</a></h3>
<p>windows subsystem for linux</p>
<p>linux 的子系统</p>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain"># 安装 wsl</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">wsl --install</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 安装 ubuntu</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">wsl --install -d Ubuntu-22.04</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 安装后，可以通过下面命令查看当前电脑上的 wsl 子系统</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">wsl -l -v</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 以下命令查看线上拥有的 linux 版本</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">wsl -l -o</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="npm">npm<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#npm" class="hash-link" aria-label="npm的直接�链接" title="npm的直接链接">​</a></h3>
<p><code>npm -v</code> 用于检测 npm 是否安装成功（安装 node 时会同时安装 npm）</p>
<p>注：因为某些大家知道的原因，可能需要更换为国内的镜像，或者安装 yarn、pnpm，代替 npm。</p>
<p>通过该命令 <code>npm get registry</code> 查看当前使用的镜像。</p>
<p>通过 <code>npm set registry [target-webset]</code> 设置镜像</p>
<p>一些镜像网址</p>
<ul>
<li><code>https://registry.npmjs.org/</code>（默认镜像网址）</li>
<li><code>https://registry.npmmirror.com/</code>（阿里镜像，原地址为 <code>https://registry.npm.taobao.org</code>）</li>
</ul>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="项目创建">项目创建<a href="https://fall-zhang.github.io/blog/2%E5%88%86%E9%92%9F%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA#%E9%A1%B9%E7%9B%AE%E5%88%9B%E5%BB%BA" class="hash-link" aria-label="项目创建的直接链接" title="项目创建的直接链接">​</a></h2>
<p>初始项目搭建</p>
<div class="language-powershell codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-powershell codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">pnpm create vite my-app-name --template &lt;template-name&gt;</span><br></span></code></pre></div></div>
<p>支持的模板：</p>
<ul>
<li>原生：<code>vanilla</code>、<code>vanilla-ts</code></li>
<li>Vue：<code>vue</code>、<code>vue-ts</code></li>
<li>React：<code>react</code>、<code>react-ts</code>、<code>react-swc</code>、<code>react-swc-ts</code>、<code>preact</code>、<code>preact-ts</code></li>
<li>Lit：<code>lit</code>、<code>lit-ts</code></li>
<li>Svelte：<code>svelte</code>、<code>svelte-ts</code></li>
</ul>]]></content>
        <author>
            <name>Fall Zhang</name>
            <uri>https://github.com/fall-zhang</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[TypeScript声明]]></title>
        <id>https://fall-zhang.github.io/blog/TypeScript声明</id>
        <link href="https://fall-zhang.github.io/blog/TypeScript声明"/>
        <updated>2022-06-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[声明空间]]></summary>
        <content type="html"><![CDATA[<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="声明空间">声明空间<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E5%A3%B0%E6%98%8E%E7%A9%BA%E9%97%B4" class="hash-link" aria-label="声明空间的直接链接" title="声明空��间的直接链接">​</a></h2>
<p>声明空间，就是声明类型和声明变量所在的不同空间。类型声明空间是 TypeScript 声明的类型空间，这些空间的变量<strong>不能进行赋值</strong>。变量声明空间可以进行赋值：</p>
<p>类型声明空间</p>
<div class="language-ts codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-ts codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">Foo</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">type</span><span class="token plain"> </span><span class="token class-name">Bus</span><span class="token plain"> </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">interface</span><span class="token plain"> </span><span class="token class-name">Bar</span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 这些都可以作为类型注解使用</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> foo</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">Foo</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> bus</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">Bus</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">let</span><span class="token plain"> bar</span><span class="token operator" style="color:#393A34">:</span><span class="token plain">Bar</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 但是 Bar、Bus 不能赋值，因为它们只存在类型声明空间</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> bar </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> Bar </span><span class="token comment" style="color:#999988;font-style:italic">// error: cannot find name 'Bar'</span><br></span></code></pre></div></div>
<p>变量声明空间</p>
<div class="language-ts codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-ts codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token keyword" style="color:#00009f">class</span><span class="token plain"> </span><span class="token class-name">Foo</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> someVar </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> Foo</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// class Foo {}  Foo 既会被放置到变量声明空间，也会放到类型声明空间</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 所以 class 声明的内容既可以作为类型注解，也可以进行赋值</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="全局模块">全局模块<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E5%85%A8%E5%B1%80%E6%A8%A1%E5%9D%97" class="hash-link" aria-label="全局模块的直接链接" title="全局模块的直接链接">​</a></h2>
<p>全局模块就是任何文件都可以访问的模块，默认情况下，在一个新的 ts 文件中写代码时，它处于全局命名空间中。</p>
<div class="language-ts codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-ts codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// foo.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> foo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">123</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 此时，如果在相同的项目里，创建一个新的文件 bar.ts 系统会允许你使用 foo 内的内容</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// bar.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> back </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> foo</span><br></span></code></pre></div></div>
<p>想避免暴露在全局作用空间</p>
<div class="language-ts codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-ts codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// foo.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">export</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> foo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">123</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// 如果想继续使用 foo 就需要进行导入，并且使用其他变量也不会污染全局作用域</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token comment" style="color:#999988;font-style:italic">// bar.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">import</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">{</span><span class="token plain">foo</span><span class="token punctuation" style="color:#393A34">}</span><span class="token plain"> </span><span class="token keyword" style="color:#00009f">from</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">'./foo'</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// 此时还会将该文件定义为一个模块，文件内定义的变量也不会污染全局空间</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token keyword" style="color:#00009f">const</span><span class="token plain"> back </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> foo</span><br></span></code></pre></div></div>
<blockquote>
<p>所以文件内，只要使用了 export 关键字，就会表示该文件是个模块。所以也常使用 <code>export {}</code> 放在首行，表示是一个模块。</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="环境声明">环境声明<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E7%8E%AF%E5%A2%83%E5%A3%B0%E6%98%8E" class="hash-link" aria-label="环境声明的直接链接" title="环境声明的直接链接">​</a></h2>
<p>通过 <code>declare</code> 关键字来告诉 TypeScript 一个其他地方已经存在的代码（内容）。</p>
<div class="language-ts codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-ts codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token comment" style="color:#999988;font-style:italic">// main.ts</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">foo </span><span class="token operator" style="color:#393A34">=</span><span class="token plain"> </span><span class="token number" style="color:#36acaa">1123</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Error</span><br></span></code></pre></div></div>
<p>通常会使用 <code>.d.ts</code> 结尾的文件进行声明，一般会使用 <code>global.d.ts</code> 或者 <code>vendor.d.ts</code>。</p>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">// global.d.ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">declare let foo:any</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">// main.ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">foo = 1123 // declare 声明了该变量，将不会报错</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span></code></pre></div></div>
<p>其他的声明文件也类似于该文件，但是更加详细，所以如果自带 <code>.d.ts</code> 结尾的声明文件，一般不需要自行书写。</p>
<p>在声明文件中，每个根级别的声明必须以 <code>declare</code> 关键字作为前缀， TypeScript 将不会把它编译成任何代码。</p>
<p>开发者需要确保这些声明文件，和声明的内容在编译时存在。</p>
<blockquote>
<p>声明文件可以声明各种类型</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="ts的声明文件">TS的声明文件<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#ts%E7%9A%84%E5%A3%B0%E6%98%8E%E6%96%87%E4%BB%B6" class="hash-link" aria-label="TS的声明文件的直接链接" title="TS的声明文件的直接链接">​</a></h3>
<p>编译器通过声明文件能够显示来自其他包的错误和提示。并且声明文件提供有关库的所有类型信息。</p>
<p>获取一个库的声明文件有两种方式</p>
<ul>
<li><strong>Bundled</strong> 包含了自己的声明文件，我们只需安装这个库，就可以立即使用它，看库中是否包含 index.d.ts 文件，有些库会在 <code>package.json</code> 文件的 <code>typings</code> 或 <code>types</code> 属性中指定类型文件。</li>
<li><strong>Definitely Typed</strong> 是一个庞大的声明仓库，为没有声明文件的 JavaScript提供类型定义。这些类型定义通过众包的方式完成，微软和开源者一同管理。（比如 React 没有自己的声明文件，可以从 Definitely Typed 获取它的声明文件）</li>
</ul>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain"># yarn </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">yarn add --dev @types/react</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># npm </span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">npm i --save-dev @types/react</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="第三方代码的声明">第三方代码的声明<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E7%AC%AC%E4%B8%89%E6%96%B9%E4%BB%A3%E7%A0%81%E7%9A%84%E5%A3%B0%E6%98%8E" class="hash-link" aria-label="第三方代码的声明的直接链接" title="第三方代码的声明的直接链接">​</a></h3>
<p>有时，可能在某些内容上添加显式注解，并且你会在类型声明空间中使用它。</p>
<p>可以通过 <code>type</code> 快速实现它</p>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">declare type Staff = {</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">	name:string</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">}</span><br></span></code></pre></div></div>
<blockquote>
<p>我个人倾向认为这是自定义声明，在声明文件中进行声明之后，在任何其他的文件中都可以使用，并且无需进行引入。在使用中要符合 <code>declear</code> 中定义的约束。</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="第三方-npm-模块">第三方 NPM 模块<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E7%AC%AC%E4%B8%89%E6%96%B9-npm-%E6%A8%A1%E5%9D%97" class="hash-link" aria-label="第三方 NPM 模块的直接链接" title="第三方 NPM 模块的直接链接">​</a></h3>
<p>可以用声明一个全局模块的方式，来解决查找模块路径的问题。</p>
<p><code>global.d.ts</code> 是一种扩充 <code>lib.d.ts</code> 很好的方式，如果你需要的话。</p>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">// 定义 global.d.ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">declare module 'jquery'{</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  // some variable declarations</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  export var bar: number;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">// 导入使用 main.js</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">// 在必要的时候进行导入</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">import * as $ from 'jquery'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">// import vue from 'vue' // 如果没有进行 declare 声明，直接引入会报错</span><br></span></code></pre></div></div>
<p>有人会声明 <code>npm i @types/jquery</code></p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="非-js-资源">非 JS 资源<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E9%9D%9E-js-%E8%B5%84%E6%BA%90" class="hash-link" aria-label="非 JS 资源的直接链接" title="非 JS 资源的直接链接">​</a></h3>
<p>在 ts 文件中，可能引入其他类型的文件，比如 png。为了避免报错，向文件中进行声明。</p>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">// index.d.ts</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">declare module '*.svg'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">declare module '*.png'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">declare module '*.vue'{ // 用于定义以 .vue 结尾的文件，并且让 typescript 跳过识别</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  import type {DefineComponent} from 'vue'</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  const component: DefineComponent &lt;{}, {}, any&gt;</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">  export default component</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">}</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">// 在声明之后就可以使用</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">import * as foo from './some/file.css'</span><br></span></code></pre></div></div>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="参考文章">参考文章<a href="https://fall-zhang.github.io/blog/TypeScript%E5%A3%B0%E6%98%8E#%E5%8F%82%E8%80%83%E6%96%87%E7%AB%A0" class="hash-link" aria-label="参考文章的直接链接" title="参考文章的直接链接">​</a></h2>
<table><thead><tr><th>文章名称</th><th>链接</th></tr></thead><tbody><tr><td>深入理解TypeScript</td><td><a href="https://link.juejin.cn/?target=https%3A%2F%2Fjkchao.github.io%2Ftypescript-book-chinese%2F" target="_blank" rel="noopener noreferrer">jkchao.github.io/typescript-…</a></td></tr><tr><td>铁皮饭盒</td><td><a href="https://juejin.cn/post/6844903993727008776" target="_blank" rel="noopener noreferrer">juejin.cn/post/684490…</a></td></tr></tbody></table>
<p>如有错误（不当）可以在评论区指出。</p>
<p>转载请注明出处。</p>]]></content>
        <author>
            <name>Fall Zhang</name>
            <uri>https://github.com/fall-zhang</uri>
        </author>
    </entry>
    <entry>
        <title type="html"><![CDATA[客户想要的不是她们所说的（译）]]></title>
        <id>https://fall-zhang.github.io/blog/客户想要的不是她们所说的（译）</id>
        <link href="https://fall-zhang.github.io/blog/客户想要的不是她们所说的（译）"/>
        <updated>2022-06-08T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[我见过的用户中，他们没有一个不是特别详细的，迫切的想告诉我他们想要的。问题是，你的客户并不能一直告诉你实事的全貌。他们一般来讲不会说谎，但是他们的说话方式是作为用户的表达方式，而不是开发者的表达方式。她们拥有他们的团队，和他们的沟通方式。她们会遗漏重要的细节，她们会当你已经在他们公司干活 20 年了，就跟他们一样熟悉。真正复杂的是，一开始他们就不知道怎么做。一些客户可能构建了宏图，但是他们很少能充分的地交流她们认为的这些“宏图”的细节。另一些客户可能不会特别的清楚，但是他们知道她们不想要什么。在她们不完整的说出他们想要的东西的情况下，我们怎样才能去开发一个项目？答案显而易见，多去配合他们。]]></summary>
        <content type="html"><![CDATA[<p>我见过的用户中，他们没有一个不是特别详细的，迫切的想告诉我他们想要的。问题是，你的客户并不能一直告诉你实事的全貌。他们一般来讲不会说谎，但是他们的说话方式是作为用户的表达方式，而不是开发者的表达方式。她们拥有他们的团队，和他们的沟通方式。她们会遗漏重要的细节，她们会当你已经在他们公司干活 20 年了，就跟他们一样熟悉。真正复杂的是，一开始他们就不知道怎么做。一些客户可能构建了宏图，但是他们很少能充分的地交流她们认为的这些“宏图”的细节。另一些客户可能不会特别的清楚，但是他们知道她们不想要什么。在她们不完整的说出他们想要的东西的情况下，我们怎样才能去开发一个项目？答案显而易见，多去配合他们。</p>
<p>尽早质疑你的客户，并且要经常质疑你的客户。不要单纯的重申他们已经告诉你她们想要的话。记住，他们想要的不是她们提出的。我经常和他们在交流中这样做以查看她们对此的表现。你可能会吃惊于，客户这个词，可能完全不同于所谓的甲方。而且，这些人告诉你她们想要这个应用使用的是她们所使用的属于，并且期待你能够注意到她们所谈论的内容。而你会疑惑，然后你的项目也跟着遭殃。</p>
<p>直到你能确定客户到底需要什么时，和你的客户多次讨论这些话题。试着和他们重复问题两到三次。和他们谈论刚刚说过的话题，或者是话题结束后，以获取更好的背景。尽可能的，让不同的人在不同的环境下让她们回答你相同的话题。她们大多会告诉你不同的故事，也会揭示剩余的还没有表明的事实。两个人告诉你相同的话题，可能会反驳彼此。让我们在开始这些超级复杂的软件之前，解决这些差异，尽可能去成功。</p>
<p>在你们的对话中使用可视化进行帮助。这可能和在会话中使用一块白板一样简单，和设计阶段创建实体模型一样简单，或者像制作一个功能原型一样复杂。众所周知，可视化工具可以帮助延长我们的注意力，并提高信息利用率。利用这个实事，让你的项目在成功的方向上。</p>
<p>在过去，我是一“多媒体程序员”，去生产炫目的项目。我们的一个甲方尽量描绘了他们的想法，这个想法看起来如何，感受如何。主题颜色的配色方案演示文稿在设计会议上表明了黑色背景。我们以为我们搞定了。图形设计师开始创建上百个图层的图片文件。很多时间都用来打磨最终产品，惊人的一幕出现在我们向客户展示我们工作的成果那天。当她看见产品的时候，他说他的原话是，“当我说黑色的时候，我想要的是白色”，看，黑白都不分明了。</p>
<p>By <a href="http://programmer.97things.oreilly.com/wiki/index.php/Icnatejackson" target="_blank" rel="noopener noreferrer">Nate Jackson</a></p>]]></content>
        <author>
            <name>Fall Zhang</name>
            <uri>https://github.com/fall-zhang</uri>
        </author>
        <category label="翻译" term="翻译"/>
        <category label="客户" term="客户"/>
    </entry>
    <entry>
        <title type="html"><![CDATA[git功能查找]]></title>
        <id>https://fall-zhang.github.io/blog/git功能查找</id>
        <link href="https://fall-zhang.github.io/blog/git功能查找"/>
        <updated>2022-03-16T00:00:00.000Z</updated>
        <summary type="html"><![CDATA[下载： 从淘宝镜像上下载 git，选择最新版就可以了]]></summary>
        <content type="html"><![CDATA[<blockquote>
<p><strong>下载：</strong> 从淘宝镜像上下载 git，选择最新版就可以了</p>
<p><a href="https://link.juejin.cn/?target=https%3A%2F%2Fnpm.taobao.org%2Fmirrors%2Fgit-for-windows%2F" target="_blank" rel="noopener noreferrer">npm.taobao.org/mirrors/git…</a></p>
</blockquote>
<p><strong>Git工作流程图</strong>（空间上的 git 操作）</p>
<p><img decoding="async" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0478a7ad108e463191d27a6e741a6e64~tplv-k3u1fbpfcp-zoom-in-crop-mark:1304:0:0:0.awebp" alt="img" class="img_EI9Z"></p>
<blockquote>
<p><strong>共有四个区域</strong>：</p>
<ul>
<li>Workspace：工作区</li>
<li>Index / Stage：暂存区</li>
<li>Repository：仓库区（或本地仓库）</li>
<li>Remote：远程仓库</li>
</ul>
</blockquote>
<table><thead><tr><th>命令名称</th><th>作用</th></tr></thead><tbody><tr><td>clone（克隆）</td><td>从远程克隆仓库，将远程的代码下载到本地</td></tr><tr><td>commit（提交）</td><td>commit 将修改提交到本地仓库，</td></tr><tr><td>push（推送）</td><td>push 将本地仓库的内容提交到远程库</td></tr><tr><td>pull（拉取）</td><td>将远程最新的代码拉取到本地，自动合并 merge</td></tr><tr><td>fetch（获取）</td><td>将远程最新的代码拉取到本地，不合并 merge</td></tr><tr><td>checkout（检出）</td><td>创建分支，切换分支</td></tr><tr><td>reset</td><td>将代码回退到选定的版本</td></tr><tr><td>tag</td><td>就是给版本打个标记，方便识别</td></tr></tbody></table>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="git-工具">git 工具<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#git-%E5%B7%A5%E5%85%B7" class="hash-link" aria-label="git 工具的直接链接" title="git 工具的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="git介绍">git介绍<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#git%E4%BB%8B%E7%BB%8D" class="hash-link" aria-label="git介绍的直接链接" title="git介绍的直接链接">​</a></h3>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="配置文件">配置文件<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6" class="hash-link" aria-label="配置文件的直接链接" title="配置文件的直接链接">​</a></h3>
<p><code>.gitignore</code> 是 git 的配置文件，可以用在用户主目录之下（全局配置），也可以用在项目目录下（项目配置），作用就是告诉Git 哪些文件不需要添加到版本管理中。</p>
<div class="language-swift codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-swift codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">/</span><span class="token plain">mtk</span><span class="token operator" style="color:#393A34">/</span><span class="token plain"> 过滤整个文件夹</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">*</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">zip 过滤所有</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">zip文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">/</span><span class="token plain">mtk</span><span class="token operator" style="color:#393A34">/</span><span class="token keyword" style="color:#00009f">do</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">c 过滤某个具体文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<p>通过上面这些规则进行过滤之后，被过滤的文件不会通过push传递到服务器，本地库中还是存在的。</p>
<div class="language-swift codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-swift codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token operator" style="color:#393A34">!</span><span class="token plain">src</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">   不过滤该文件夹</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">!*</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">zip   不过滤所有</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">zip文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token operator" style="color:#393A34">!/</span><span class="token plain">mtk</span><span class="token operator" style="color:#393A34">/</span><span class="token keyword" style="color:#00009f">do</span><span class="token punctuation" style="color:#393A34">.</span><span class="token plain">c 不过滤该文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<p>可以通过以上设置不过滤以上的文件</p>
<p><strong>配置文件的语法</strong></p>
<div class="language-swift codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-swift codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">以斜杠</span><span class="token operator" style="color:#393A34">/</span><span class="token plain">开头表示目录；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">以星号</span><span class="token operator" style="color:#393A34">*</span><span class="token plain">通配多个字符；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">以问号</span><span class="token operator" style="color:#393A34">?</span><span class="token plain">通配单个字符</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">以方括号</span><span class="token punctuation" style="color:#393A34">[</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain">包含单个字符的匹配列表；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">以叹号</span><span class="token operator" style="color:#393A34">!</span><span class="token plain">表示不忽略</span><span class="token punctuation" style="color:#393A34">(</span><span class="token plain">跟踪</span><span class="token punctuation" style="color:#393A34">)</span><span class="token plain">匹配到的文件或目录；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<p><strong>配置文件示例</strong></p>
<div class="language-text codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-text codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">a、规则：fd1/*</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">忽略目录 fd1 下的全部内容；注意，不管是根目录下的 /fd1/ 目录，还是某个子目录 /child/fd1/ 目录都会被忽略；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">b、规则：/fd1/*</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">说明：忽略根目录下的 /fd1/ 目录的全部内容；</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">c、规则：</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">/*</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">!.gitignore</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">!/fw/bin/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">!/fw/sf/</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">说明：忽略全部内容，但是不忽略 .gitignore 文件、根目录下的 /fw/bin/ 和 /fw/sf/ 目录</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<p><strong>用 Git Bash 创建文件夹</strong></p>
<ul>
<li>根目录下右键选择“Git Bash Here”进入bash命令窗口；</li>
<li>输入<code>vim .gitignore</code>或<code>touch .gitignore</code>命令，打开文件（没有文件会自动创建）；</li>
<li>按i键切换到编辑状态，输入规则，例如node_modules/，然后按Esc键退出编辑，输入<!-- -->:wq<!-- -->保存退出。</li>
</ul>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="生成密钥">生成密钥<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E7%94%9F%E6%88%90%E5%AF%86%E9%92%A5" class="hash-link" aria-label="生成密钥的直接链接" title="生成密钥的直接链接">​</a></h3>
<blockquote>
<p>命令行中执行命令：</p>
<p><code>ssh-keygen -t rsa -C "xxxx@gmail.com"</code> 必须填写自己使用的邮箱</p>
</blockquote>
<h2 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="git-的操作">git 的操作<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#git-%E7%9A%84%E6%93%8D%E4%BD%9C" class="hash-link" aria-label="git 的操作的直接链接" title="git 的操作的直接链接">​</a></h2>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="简��单的提交代码流程">简单的提交代码流程<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E7%AE%80%E5%8D%95%E7%9A%84%E6%8F%90%E4%BA%A4%E4%BB%A3%E7%A0%81%E6%B5%81%E7%A8%8B" class="hash-link" aria-label="简单的提交代码流程的直接链接" title="简单的提交代码流程的直接链接">​</a></h3>
<blockquote>
<p>连接克隆远程仓库 git clone <a href="https://link.juejin.cn/?target=https%3A%2F%2Fbalabalabala.com" target="_blank" rel="noopener noreferrer">balabalabala.com</a></p>
<p>在项目的文件夹中打开<code>cmd 命令行工具</code>（一般为含有 ReadMe 的文件夹）</p>
<p><code>git add . </code>   将代码添加到版本里面（添加到暂存区）</p>
<p><code>git commit -m</code>	“放置你想添加的内容”</p>
<p>最后使用 <code>git push</code> 将本地库里面的代码提交到网络共享库里面</p>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="常用功能查找">常用功能查找<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E5%B8%B8%E7%94%A8%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE" class="hash-link" aria-label="常用功能查找的直接链接" title="常用功能查找的直接链接">​</a></h3>
<blockquote>
<ul>
<li><code>git diff --shortstat "@{0 day ago}"</code> 看看自己一天写了多少代码</li>
<li>查看远程仓库<code>git remote -v</code></li>
<li>显示有变更的文件<code>git status</code></li>
<li>退回到上一个版本：<code>git reset --hard head</code></li>
<li>查看日志：<code>git log </code>或者<code> git reflog</code></li>
<li>查看工作区和暂存区版本区别<code>git diff</code></li>
<li>回退上一个版本<code>git reset --hard HEAD^</code> 每多一个<code>^</code>多回退一个版本</li>
<li>回退到指定版本<code>git reset --hard version</code> version 为版本号</li>
</ul>
</blockquote>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="新建代码仓库">新建代码仓库<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%96%B0%E5%BB%BA%E4%BB%A3%E7%A0%81%E4%BB%93%E5%BA%93" class="hash-link" aria-label="新建代码仓库的直接链接" title="新建代码仓库的直接链接">​</a></h3>
<ul>
<li><code>git init</code> 在本地进行初始化（建立工作区）</li>
<li><code>git init [project-name]</code> 新建一个目录，作为代码仓库</li>
<li><code>git clone [url]</code></li>
</ul>
<p><code>.git</code> 文件夹存储当前项目的所有版本信息，这个文件夹通常会隐藏</p>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="暂存区控制">暂存区控制<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%9A%82%E5%AD%98%E5%8C%BA%E6%8E%A7%E5%88%B6" class="hash-link" aria-label="暂存区控制的直接链接" title="暂存区控制的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git add [file1] [file2] ...  # 添加指定文件到暂存区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git add [dir] # 添加指定目录到暂存区，包括子目录</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git add . # 添加当前目录的所有文件到暂存区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git add -p</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 确认所有文件的变化，并且可以做最终修改</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 对于同一个文件的多处变化，可以分多次提交</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git rm [file1] [file2] ... # 删除工作区文件，并且将这次删除放入暂存区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git rm --cached [file] # 停止追踪指定文件，但该文件会保留在工作区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git mv [file-original] [file-renamed] # 改名文件，并且将这个改名放入暂存区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="本地仓库">本地仓库<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93" class="hash-link" aria-label="本地仓库的直接链接" title="本地仓库的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit -m "message" # 提交暂存区内容提交到仓库区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit [file1] [file2] ... -m [message] # 提交暂存区的指定文件到仓库区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit -a # 提交工作区自上次 commit 之后的变化，直接到仓库区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit -v # 提交时显示所有 diff 信息</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit --amend -m [message]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 使用一次新的commit，替代上一次提交</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 如果代码没有任何新变化，则用来改写上一次 commit 的提交信息 message</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git commit --amend [file1] [file2] ... # 重做上一次commit，并包括指定文件的新变化</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="分支操作">分支操作<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E5%88%86%E6%94%AF%E6%93%8D%E4%BD%9C" class="hash-link" aria-label="分支操作的直接链接" title="分支操作的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch # 列出所有本地分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch -r # 列出所有远程分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch -a # 列出所有本地分支和远程分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout master  # 切换到master分支下</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout -b [branch] # 新建一个分支，并切换到该分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch [branch-name] # 新建一个分支，但依然停留在当前分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch [branch] [commit] # 新建一个分支，指向指定commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch --track [branch] [remote-branch] # 新建一个分支，与指定的远程分支建立追踪关系</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout [branch-name] # 切换到指定分支，并更新工作区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout -  # 切换到上一个分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch --set-upstream [branch] [remote-branch] # 建立追踪关系，在现有分支与指定的远程分支之间</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git merge [branch] # 合并指定分支到当前分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git cherry-pick [commit] # 选择一个commit，合并进当前分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch -d [branch-name] # 删除分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 删除远程分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push origin --delete [branch-name]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git branch -dr [remote/branch]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="远程功能">远程功能<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E8%BF%9C%E7%A8%8B%E5%8A%9F%E8%83%BD" class="hash-link" aria-label="远程功能的直接链接" title="远程功能的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git fetch [remote] # 下载远程仓库的所有变动</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git pull [remote] [branch] # 取回远程仓库的变化，并与本地分支合并</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git remote -v # 显示所有远程仓库</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git remote show [remote] # 显示某个远程仓库的信息</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git remote add [shortname] [url] # 增加一个新的远程仓库，并命名</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push origin master # 推到 master 上</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push [remote] [branch] # 上传本地指定分支到远程仓库</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push [remote] --force # 强行推送当前分支到远程仓库，即使有冲突</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push -u origin login # 将当前子分支推到一个新创建的 login 分之中</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push [remote] --all # 推送所有分支到远程仓库</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push origin --delete [branch-name]  # 删除远程分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="撤销操作">撤销操作<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%92%A4%E9%94%80%E6%93%8D%E4%BD%9C" class="hash-link" aria-label="撤销操作的直接链接" title="撤销操作的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout [file] # 恢复暂存区的指定文件到工作区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout [commit] [file] # 恢复某个commit的指定文件到暂存区和工作区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout . # 恢复暂存区的所有文件到工作区</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reset [file] # 重置暂存区的指定文件，与上一次commit保持一致，但工作区不变</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reset --hard # 重置暂存区与工作区，与上一次commit保持一致</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reset [commit] # 重置当前分支的指针为指定commit，同时重置暂存区，但工作区不变</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reset --hard [commit] # 重置当前分支的HEAD为指定commit，同时重置暂存区和工作区，与指定commit一致</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reset --keep [commit] # 重置当前HEAD为指定commit，但保持暂存区和工作区不变</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git revert [commit]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 新建一个commit，用来撤销指定commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 后者的所有变化都将被前者抵消，并且应用到当前分支</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"># 暂时将未提交的变化移除，稍后再移入</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git stash</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git stash pop</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="标签的设定和查看">标签的设定和查看<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%A0%87%E7%AD%BE%E7%9A%84%E8%AE%BE%E5%AE%9A%E5%92%8C%E6%9F%A5%E7%9C%8B" class="hash-link" aria-label="标签的设定和查看的直接链接" title="标签的设定和查看的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git tag # 列出所有tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git tag [tag] # 新建一个tag在当前commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git tag [tag] [commit] # 新建一个tag在指定commit</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git tag -d [tag] # 删除本地tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push origin :refs/tags/[tagName] # 删除远程tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git show [tag] # 查看tag信息</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push [remote] [tag] # 提交指定tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git push [remote] --tags # 提交所有tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git checkout -b [branch] [tag] # 新建一个分支，指向某个tag</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">复制代码</span><br></span></code></pre></div></div>
<h3 class="anchor anchorWithHideOnScrollNavbar_SIDZ" id="查看日志信息">查看日志信息<a href="https://fall-zhang.github.io/blog/git%E5%8A%9F%E8%83%BD%E6%9F%A5%E6%89%BE#%E6%9F%A5%E7%9C%8B%E6%97%A5%E5%BF%97%E4%BF%A1%E6%81%AF" class="hash-link" aria-label="查看日志信息的直接链接" title="查看日志信息的直接链接">​</a></h3>
<div class="language-bash codeBlockContainer_nh8n theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_NZOu"><pre tabindex="0" class="prism-code language-bash codeBlock_B3O4 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_u9PO"><span class="token-line" style="color:#393A34"><span class="token plain">$ git status # 显示有变更的文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log # 显示当前分支的版本历史</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log --stat # 显示commit历史，以及每次commit发生变更的文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log -S [keyword] # 搜索提交历史，根据关键词</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log [tag] HEAD --pretty=format:%s # 显示某个commit之后的所有变动，每个commit占据一行</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log [tag] HEAD --grep feature # 显示某个commit之后的所有变动，其"提交说明"必须符合搜索条件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log --follow [file] # 显示某个文件的版本历史，包括文件改名</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git whatchanged [file]</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log -p [file] # 显示指定文件相关的每一次diff</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git log -5 --pretty --oneline # 显示过去5次提交</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git shortlog -sn # 显示所有提交过的用户，按提交次数排序</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git blame [file] # 显示指定文件是什么人在什么时间修改过</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git diff # 显示暂存区和工作区的差异</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git diff --cached [file] # 显示暂存区和上一个commit的差异</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git diff HEAD # 显示工作区与当前分支最新commit之间的差异</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git diff [first-branch]...[second-branch] # 显示两次提交之间的差异</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git diff --shortstat "@{0 day ago}" # 显示今天你写了多少行代码</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git show [commit] # 显示某次提交的元数据和内容变化</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git show --name-only [commit] # 显示某次提交发生变化的文件</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git show [commit]:[filename] # 显示某次提交时，某个文件的内容</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">$ git reflog # 显示当前分支的最近几次提交</span><br></span></code></pre></div></div>]]></content>
        <author>
            <name>Fall Zhang</name>
            <uri>https://github.com/fall-zhang</uri>
        </author>
    </entry>
</feed>