<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:media="http://search.yahoo.com/mrss/">
  <channel>
    <title>Folder Structure｜林鼎淵 Dean Lin</title>
    <link>https://deanlin.net/tags/folder-structure/</link>
    <image><url>https://deanlin.net/images/author_hu_aa256fc934e9a932.jpg</url><title>Folder Structure｜林鼎淵 Dean Lin</title><link>https://deanlin.net/tags/folder-structure/</link><width>144</width><height>144</height></image>
    <description>林鼎淵（Dean Lin）的部落格：生成式 AI 企業內訓講師、外商資安公司軟體專家、7 本書作者。400 多篇文章用白話分享生成式 AI 實戰、Claude Code 與 Vibe Coding 教學、團隊合作與職場成長。</description>
    <generator>Hugo</generator>
    <language>zh-tw</language>
    <copyright>© 2020–2026 林鼎淵 Dean Lin</copyright>
    <lastBuildDate>Thu, 11 Jul 2024 18:11:07 +0800</lastBuildDate>
    <atom:link href="https://deanlin.net/tags/folder-structure/index.xml" rel="self" type="application/rss+xml" />
    <item>
      <title>用 tree 套件生成專案樹狀的資料夾（目錄）結構</title>
      <link>https://deanlin.net/blog/202407/project-tree-structure/</link>
      <pubDate>Thu, 11 Jul 2024 18:11:07 +0800</pubDate>
      <guid>https://deanlin.net/blog/202407/project-tree-structure/</guid>
      <dc:creator>林鼎淵</dc:creator>
      <category>技術教學</category>
      <description>隨著專案迭代，除了程式碼越來越龐大外，資料夾結構也越來越複雜。這邊推薦一個直接產生資料夾結構的套件「tree」，透過簡單的指令就能生成樹狀的目錄結構。</description>
      <media:content url="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-og_hu_895f5209e82220a2.jpg" medium="image" type="image/jpeg" width="1200" height="675" />
      <content:encoded><![CDATA[<h2 id="用-tree-套件生成專案樹狀資料夾目錄結構">用 tree 套件生成專案樹狀資料夾（目錄）結構<a class="h-anchor" href="#%e7%94%a8-tree-%e5%a5%97%e4%bb%b6%e7%94%9f%e6%88%90%e5%b0%88%e6%a1%88%e6%a8%b9%e7%8b%80%e8%b3%87%e6%96%99%e5%a4%be%e7%9b%ae%e9%8c%84%e7%b5%90%e6%a7%8b" aria-label="這個段落的連結"></a></h2>
<p>隨著專案迭代，除了程式碼越來越龐大外，資料夾結構也越來越複雜。</p>
<p>到後來，可能連開發人員自己都搞不清楚每個資料夾在做什麼事。</p>
<p>為了避免交接、教育訓練時要花很多時間回憶、解釋，我們應該把這些資訊記錄到文件中。</p>
<p>這邊推薦一個直接產生資料夾結構的套件「<a href="https://www.npmjs.com/package/tree-cli">tree</a>」，透過簡單的指令就能生成樹狀的目錄結構，以此加速文件撰寫。</p>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-01.webp" width="1400" height="786" alt="用 tree 套件生成專案樹狀資料夾（目錄）結構（圖 1）" fetchpriority="high" decoding="async"></p>
<h2 id="-安裝-tree-套件">安裝 tree 套件<a class="h-anchor" href="#-%e5%ae%89%e8%a3%9d-tree-%e5%a5%97%e4%bb%b6" aria-label="這個段落的連結"></a></h2>
<p>在 Windows &amp; Mac 有安裝 npm 的電腦上，只要輸入如下指令便可安裝。</p>
<div class="highlight"><pre tabindex="0" style="color:#e6edf3;background-color:#0d1117;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-text-size-adjust:none;"><code class="language-bash" data-lang="bash"><span style="display:flex;"><span>npm install -g tree-cli
</span></span></code></pre></div><p>安裝好後，可透過 <code>tree -h</code> 查看有哪些指令可以使用。</p>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-02.webp" width="659" height="652" alt="安裝 tree 套件（圖 2）" loading="lazy" decoding="async"></p>
<p>官方文件中有提醒，Windows 要用「treee」來當指令（多一個 e），筆者的環境為 Mac。</p>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-03.webp" width="631" height="185" alt="安裝 tree 套件（圖 3）" loading="lazy" decoding="async"></p>
<hr>
<h2 id="-使用-tree-生成樹狀的目錄結構">使用 tree 生成樹狀的目錄結構<a class="h-anchor" href="#-%e4%bd%bf%e7%94%a8-tree-%e7%94%9f%e6%88%90%e6%a8%b9%e7%8b%80%e7%9a%84%e7%9b%ae%e9%8c%84%e7%b5%90%e6%a7%8b" aria-label="這個段落的連結"></a></h2>
<p>下面分享幾個高頻率使用的指令：</p>
<ul>
<li><code>tree</code> : 顯示「資料夾」與「目錄」</li>
</ul>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-04.webp" width="440" height="446" alt="使用 tree 生成樹狀的目錄結構（圖 4）" loading="lazy" decoding="async"></p>
<ul>
<li><code>tree -d</code> : 僅顯示「資料夾」</li>
</ul>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-05.webp" width="399" height="424" alt="使用 tree 生成樹狀的目錄結構（圖 5）" loading="lazy" decoding="async"></p>
<ul>
<li><code>tree -l n</code> : 顯示到第 n 層目錄（tree -l 2 就是顯示兩層目錄）</li>
</ul>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-06.webp" width="399" height="709" alt="使用 tree 生成樹狀的目錄結構（圖 6）" loading="lazy" decoding="async"></p>
<ul>
<li><code>tree &ndash;ignore pattern</code> : 排除不要顯示的檔案/資料夾（tree &ndash;ignore node_modules 就能排除 node_modules 資料夾）</li>
</ul>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-07.webp" width="448" height="396" alt="使用 tree 生成樹狀的目錄結構（圖 7）" loading="lazy" decoding="async"></p>
<ul>
<li><code>tree -o filename</code> : 將結果寫入 filename 這個檔案</li>
</ul>
<p>這邊展示一個組合指令： <code>tree &ndash;ignore node_modules -l 3 -d &gt; README.md</code></p>
<p>這個指令能將 3 層目錄資料夾（排除 node_modules）結果寫入 README.md 這個檔案中。</p>
<p>一開始生成好後，README.md 的預覽會因為沒有排版導致難以閱讀。</p>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-08.webp" width="1400" height="680" alt="使用 tree 生成樹狀的目錄結構（圖 8）" loading="lazy" decoding="async"></p>
<p>但只要在開頭和結尾加上「```」就會排版嚕！</p>
<p><img src="https://deanlin.net/blog/202407/project-tree-structure/images/project-tree-structure-09.webp" width="1400" height="606" alt="使用 tree 生成樹狀的目錄結構（圖 9）" loading="lazy" decoding="async"></p>
<p>以上就是這篇文章的分享，希望這個套件能幫助大家更輕鬆、清晰的撰寫與表達文件。</p>
]]></content:encoded>
    </item>
  </channel>
</rss>
