命令列速成課
在你的開發過程中,你無疑會被要求在終端(或“命令列”——它們實際上是一回事)中執行一些命令。本文介紹了終端,你需要輸入的常用命令,如何將命令連結在一起,以及如何新增自己的命令列介面(CLI)工具。
| 預備知識 | 對你的計算機作業系統、用於構建網站的基本軟體和檔案系統有基本瞭解。 |
|---|---|
| 學習成果 |
|
歡迎來到終端
終端是一個用於執行基於文字程式的文字介面。如果你正在執行任何用於 Web 開發的工具,幾乎可以肯定你必須開啟命令列並執行一些命令來使用你選擇的工具(你經常會看到這些工具被稱為 CLI 工具——命令列介面工具)。
大量的工具可以透過在命令列中輸入命令來使用;許多預裝在你的系統上,還有大量的其他工具可以從包登錄檔中安裝。包登錄檔類似於應用商店,但(大部分)是用於基於命令列的工具和軟體。我們將在本章稍後部分介紹如何安裝一些工具,並將在下一章中瞭解更多關於包登錄檔的資訊。
對命令列最大的批評之一是它在使用者體驗方面嚴重不足。第一次看到命令列可能會讓人望而生畏:一個空白的螢幕和一個閃爍的游標,幾乎沒有任何明顯的幫助來告訴你該做什麼。
表面上看,它們遠非友好,但你可以用它們做很多事情,我們保證,透過一些指導和練習,使用它們會變得更容易!這就是我們提供本章的原因——幫助你在這個看似不友好的環境中開始使用。
終端從何而來?
終端起源於 1950 年代到 1960 年代左右,它的原始形式與我們今天使用的完全不同(對此我們應該感到慶幸)。你可以在維基百科的計算機終端條目中閱讀一些歷史。
從那時起,終端一直是所有作業系統的恆定功能——從桌上型電腦到雲中的伺服器,再到像 Raspberry PI Zero 這樣的微型計算機,甚至到手機。它提供了對計算機底層檔案系統和低階功能的直接訪問,因此如果你知道自己在做什麼,它對於快速執行復雜任務非常有用。
它也適用於自動化——例如,編寫一個命令來即時更新數百個檔案的標題,比如從“ch01-xxxx.png”到“ch02-xxxx.png”。如果你使用 Finder 或 Explorer GUI 應用程式更新檔名,那將花費你很長時間。
無論如何,終端在短期內是不會消失的。
終端是什麼樣的?
下面你可以看到一些可用的不同型別的程式,它們可以讓你進入終端。
接下來的圖片顯示了 Windows 中可用的命令提示符——從“cmd”程式到“powershell”有多種選擇——可以透過在開始選單中輸入程式名稱來執行。

在下面,你可以看到 macOS 終端應用程式。

如何訪問終端?
如今許多開發人員都在使用基於 Unix 的工具(例如,終端以及可以透過它訪問的工具)。當今網路上存在的許多教程和工具都支援(並且遺憾地假設)基於 Unix 的系統,但不用擔心——它們在大多數系統上都可用。在本節中,我們將介紹如何在所選系統上訪問終端。
Linux/Unix
如上所述,Linux/Unix 系統預設提供終端,列在你的應用程式中。
macOS
macOS 有一個名為 Darwin 的系統,它位於圖形使用者介面之下。Darwin 是一個類似 Unix 的系統,它提供終端和對低階工具的訪問。macOS Darwin 大多與 Unix 具有同等功能,足以讓我們在閱讀本文時不必擔心。
終端在 macOS 上位於 Applications/Utilities/Terminal。
Windows
與其他一些程式設計工具一樣,在 Windows 上使用終端(或命令列)傳統上不如在其他作業系統上那麼簡單或容易。但情況正在好轉。
Windows 傳統上有一個名為 cmd(“命令提示符”)的類似終端的程式很長時間,但它與 Unix 命令不相容,相當於老式的 Windows DOS 提示符。
存在更好的程式可在 Windows 上提供終端體驗,例如 PowerShell(在此處查詢安裝程式)和 Git Bash(作為 Windows 版 Git 工具集的一部分)。
然而,現代 Windows 的最佳選擇是適用於 Linux 的 Windows 子系統(WSL)——一個相容層,可以直接從 Windows 10 內部執行 Linux 作業系統,讓你可以在 Windows 上直接執行“真正的終端”,而無需虛擬機器。
這可以從 Windows 商店免費直接安裝。你可以在適用於 Linux 的 Windows 子系統文件中找到所需的所有文件。

關於在 Windows 上選擇哪個選項,我們強烈建議嘗試安裝 WSL。你可以堅持使用預設的命令提示符 (cmd),許多工具也能正常工作,但如果你與 Unix 工具的相容性更好,你會發現一切都會更容易。
旁註:命令列和終端有什麼區別?
通常,你會發現這兩個術語可以互換使用。從技術上講,終端是啟動並連線到 shell 的軟體。shell 是你的會話和會話環境(其中可能自定義了提示符和快捷方式)。命令列是你輸入命令並游標閃爍的字面一行。
你必須使用終端嗎?
儘管命令列提供了大量的工具,但如果你使用像 Visual Studio Code 這樣的工具,也有大量的擴充套件可以作為代理來使用終端命令,而無需直接使用終端。然而,你不會找到針對所有你想做的事情的程式碼編輯器擴充套件——你最終還是需要積累一些使用終端的經驗。
基本的內建終端命令
廢話不多說,讓我們開始看一些終端命令吧!開箱即用,命令列可以做以下幾件事,並附帶各自相關工具的名稱。
-
瀏覽計算機的檔案系統,並執行建立、複製、重新命名和刪除等基本任務。
- 在目錄(資料夾)結構中移動:
cd - 建立目錄:
mkdir - 建立檔案(並修改它們的元資料):
touch - 複製檔案或目錄:
cp - 移動檔案或目錄:
mv - 刪除檔案或目錄:
rm
- 在目錄(資料夾)結構中移動:
-
下載特定 URL 處的檔案:
curl -
在較大文字主體中搜索文字片段:
grep -
逐頁檢視檔案內容:
less,cat -
處理和轉換文字流(例如將 HTML 檔案中的所有
<div>例項更改為<article>):awk,tr,sed
注意:網路上有很多很好的教程,它們更深入地探討了命令列——這只是一個簡要介紹!
讓我們繼續,看看如何在命令列中使用其中一些工具。在你繼續之前,開啟你的終端程式!
命令列上的導航
當你訪問命令列時,你將不可避免地需要導航到特定目錄以“做一些事情”。所有作業系統(假設是預設設定)都將在你的主目錄中啟動其終端程式,從那裡你可能會想移動到其他位置。
注意:“目錄”是我們上一篇文章中提到的“資料夾”的技術術語。當在使用者介面 (UI) 中檢視檔案結構時,“資料夾”一詞更有意義,因為使用的圖示看起來像老式物理儲存資料夾。然而,你也會經常聽到“目錄”一詞,尤其是在談論使用命令列操作檔案時。它們之間存在細微差別,但這兩個術語基本表示相同的意思。
cd 命令允許你更改目錄 (Change Directory)。嚴格來說,cd 不是一個程式,而是一個內建命令。這意味著你的作業系統開箱即用,而且你不會意外刪除它——謝天謝地!你不需要太擔心某個命令是否是內建的,但請記住,內建命令會出現在所有基於 Unix 的系統上。
-
要更改目錄,請在終端中鍵入
cd,後跟要移動到的目錄。假設目錄在你的主目錄中,你可以使用cd Desktop(請參見下面的螢幕截圖)。
-
現在嘗試在你的系統終端中輸入此命令
bashcd Desktop -
要返回上一級目錄,可以使用兩個點。現在輸入此命令
bashcd ..
注意:一個非常有用的終端快捷方式是使用 tab 鍵來自動補全已知存在的名稱,而不是必須輸入整個名稱。例如,在輸入上述兩個命令後,嘗試輸入 cd D 並按下 tab 鍵——如果當前目錄中存在 Desktop 目錄,它應該為你自動補全。在接下來的操作中請記住這一點。
如果你想進入的目錄巢狀很深,你需要知道到達它的路徑。當你越來越熟悉檔案系統結構時,這通常會變得更容易,但如果你不確定路徑,通常可以透過組合使用 ls 命令(見下文)並在 Explorer/Finder 視窗中點選檢視目錄相對於你當前位置的位置來找出路徑。
例如,如果你想進入一個名為 src 的目錄,它位於一個名為 project 的目錄中,而 project 目錄又位於 Desktop 上,你可以鍵入以下三個命令從你的 Home 目錄到達那裡:
cd Desktop
cd project
cd src
但這太浪費時間了——相反,你可以輸入一個命令,路徑中的不同項用正斜槓分隔,就像你在 CSS、HTML 或 JavaScript 程式碼中指定影像或其他資產的路徑時所做的那樣。
cd Desktop/project/src
請注意,在路徑中包含前導斜槓會使路徑成為絕對路徑,例如 /Users/your-user-name/Desktop。像我們上面那樣省略前導斜槓會使路徑相對於你當前的工作目錄。這與你在網路瀏覽器中看到的 URL 完全相同。前導斜槓表示“在網站的根目錄”,而省略斜槓表示“URL 相對於我當前的頁面”。
注意:在 Windows 上,你使用反斜槓而不是正斜槓,例如 cd Desktop\project\src — 這可能看起來很奇怪,但如果你有興趣瞭解原因,請觀看此 YouTube 剪輯,其中包含一位微軟首席工程師的解釋。
列出目錄內容
另一個內建的 Unix 命令是 ls(list 的縮寫),它列出你當前所在目錄的內容。請注意,如果你使用預設的 Windows 命令提示符 (cmd),這不起作用——那裡的等效命令是 dir。
現在嘗試在你的終端中執行此命令
ls
這會給你一個當前工作目錄中的檔案和目錄列表,但資訊非常基本——你只能得到每個專案的名稱,而不是它是檔案還是目錄,或任何其他資訊。幸運的是,對命令用法進行少量更改可以給你更多資訊。
介紹命令選項
大多數終端命令都帶有選項——這些是你新增到命令末尾的修飾符,使命令的行為略有不同。它們通常由命令名稱後的空格、破折號和一到多個字母組成。
例如,試試這個,看看你會得到什麼
ls -l
對於 ls,-l(破折號加字母 L)選項會列出每行一個檔案或目錄,並顯示更多資訊。目錄可以透過檢視行最左側的字母“d”來識別。這些是我們可以 cd 進入的目錄。
下面是一個截圖,頂部是“原始”macOS 終端,底部是經過一些額外圖示和顏色定製的終端,使其看起來生動活潑——兩者都顯示了執行 ls -l 的結果。

注意:要查閱每個命令的所有可用選項,可以檢視其手冊頁(man page)。方法是輸入 man 命令,後跟要查詢的命令名稱,例如 man ls。這將在終端的預設文字檔案檢視器(例如我的終端中的less)中開啟手冊頁,然後你可以使用箭頭鍵或類似機制滾動瀏覽頁面。手冊頁會非常詳細地列出所有選項,這可能一開始有點令人望而生畏,但至少你知道它在那裡以備不時之需。檢視完手冊頁後,你需要使用文字檢視器的退出命令(在 less 中是“q”;如果不明,你可能需要在網上搜索才能找到)退出。
注意:要同時執行具有多個選項的命令,通常可以將它們全部放在破折號字元後的單個字串中,例如 ls -lah 或 ls -ltrh。嘗試檢視 ls 手冊頁以弄清楚這些額外選項的作用!
現在我們已經討論了兩個基本命令,請在你的目錄中稍微探索一下,看看你是否可以從一個地方導航到另一個地方。
建立、複製、移動、刪除
還有一些其他的基本實用命令,你可能會在與終端打交道時經常使用。它們非常簡單,所以我們不會像前面幾個命令那樣詳細解釋它們。
在某個你建立的測試目錄中試用它們,這樣你就不會意外刪除任何重要內容,請參考下面的示例命令作為指導。
mkdir— 這會在你當前所在的目錄中建立一個新目錄,名稱為你提供的命令名稱之後的內容。例如,mkdir my-awesome-website將建立一個名為my-awesome-website的新目錄。rmdir— 刪除指定名稱的目錄,但僅當它為空時。例如,rmdir my-awesome-website將刪除我們上面建立的目錄。如果你想刪除一個不為空的目錄(以及它包含的所有內容),那麼你可以使用rm -r代替(見下文),但這很危險。請確保該目錄中沒有任何你以後可能需要的東西,因為它將永遠消失。touch— 在當前目錄中建立一個新的空檔案。例如,touch mdn-example.md建立一個名為mdn-example.md的新空檔案。mv— 將檔案從第一個指定的檔案位置移動到第二個指定的檔案位置,例如mv mdn-example.md mdn-example.txt(這些位置寫成檔案路徑)。此命令將當前目錄中名為mdn-example.md的檔案移動到當前目錄中名為mdn-example.txt的檔案。嚴格來說,檔案被移動了,但從實際角度來看,此命令實際上是在重新命名檔案。cp— 用法與mv類似,cp在第二個指定位置建立第一個指定位置的檔案的副本。例如,cp mdn-example.txt mdn-example.txt.bak建立mdn-example.txt的副本,名為mdn-example.txt.bak(當然,如果你願意,你可以將其命名為其他名稱)。rm— 刪除指定的檔案。例如,rm mdn-example.txt刪除一個名為mdn-example.txt的檔案。請注意,此刪除是永久性的,無法透過桌面使用者介面上的回收站撤銷。
注意:許多終端命令允許你使用星號作為“萬用字元”,表示“任何字元序列”。這允許你一次對大量檔案執行操作,所有這些檔案都與指定的模式匹配。例如,rm mdn-* 將刪除所有以 mdn- 開頭的檔案。rm mdn-*.bak 將刪除所有以 mdn- 開頭並以 .bak 結尾的檔案。
終端——有害嗎?
我們之前已經暗示過,但要明確的是——你需要小心使用終端。簡單的命令沒有太大危險,但當你開始組合更復雜的命令時,你需要仔細考慮命令會做什麼,並嘗試先測試它們,然後再在預期目錄中執行它們。
假設你有一個目錄中包含 1000 個文字檔案,並且你想遍歷所有這些檔案,只刪除檔名中包含特定子字串的檔案。如果你不小心,最終可能會刪除一些重要的內容,從而在此過程中丟失大量工作。一個好習慣是:在文字編輯器中編寫你的終端命令,找出你認為它應該是什麼樣子,然後備份你的目錄並首先嚐試在該備份上執行命令以進行測試。
如果你不習慣在自己的機器上嘗試終端命令,有一些線上託管的終端可供你安全地練習輸入命令,而無需冒險損壞自己的機器。
- 我們的學習夥伴 Scrimba 在其學習環境中提供了一個用於輸入命令的終端。一個很好的實際例子是他們的 命令列基礎 MDN 學習夥伴 課程,該課程還提供了一個有趣的互動式介紹,用於透過終端導航檔案樹和操作檔案和目錄。
- sandbox.bio 上的命令列演練場是嘗試終端命令的好地方,這樣你就可以熟悉命令列介面和 Bash 等常用 shell。
快速瞭解特定終端命令的一個極佳資源是 tldr.sh。這是一個社群驅動的文件服務,類似於 MDN,但專門針對終端命令。
在下一節中,我們將把難度提高一個(實際上是幾個)等級,看看我們如何在命令列中將工具連線起來,從而真正體會到終端相對於常規桌面使用者介面的優勢。
使用管道連線命令
當你開始使用 |(管道)符號將命令串聯起來時,終端才會真正發揮其作用。讓我們看一個非常簡單的例子來解釋這意味著什麼。
我們已經看過 ls,它輸出當前目錄的內容。
ls
但是如果我們想快速計算當前目錄中的檔案和目錄數量呢?ls 無法獨自完成。
還有一個名為 wc 的 Unix 工具可用。它計算輸入到其中的單詞、行、字元或位元組數。這可以是一個文字檔案——下面的示例輸出 myfile.txt 中的行數。
wc -l myfile.txt
但它也可以計算透過管道輸入到其中的任何輸出的行數。例如,下面的命令計算 ls 命令輸出的行數(如果單獨執行,它通常會列印到終端),然後將該計數輸出到終端。
ls | wc -l
由於 ls 將每個檔案或目錄列印在新的一行上,這實際上為我們提供了目錄和檔案的計數。
那麼這裡發生了什麼?(Unix)命令列工具的一個普遍哲學是它們將文字列印到終端(也稱為“列印到標準輸出”或 STDOUT)。許多命令也可以從流式輸入中讀取內容(稱為“標準輸入”或 STDIN)。
管道運算子可以將這些輸入和輸出連線起來,使我們能夠構建越來越複雜的滿足我們需求的操作——一個命令的輸出可以成為下一個命令的輸入。在這種情況下,ls 通常會將其輸出列印到 STDOUT,但現在 ls 的輸出被管道傳輸到 wc,wc 將該輸出作為輸入,計算其中包含的行數,並將其計數列印到 STDOUT。
一個稍微複雜一點的例子
讓我們來看看一個稍微複雜一點的例子。
-
我們將首先嚐試使用
curl命令(可用於從 URL 請求內容)從https://mdn.club.tw/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch獲取 MDN 的“fetch”頁面的內容。現在試試看bashcurl https://mdn.club.tw/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch你不會得到輸出,因為頁面已被重定向(到 /Web/API/fetch)。我們需要使用
-L標誌明確告訴curl遵循重定向。 -
我們再來看看
developer.mozilla.org使用curl的-I標誌返回的頭部資訊,並透過將curl的輸出透過管道傳遞給grep(我們將要求grep返回所有包含“location”一詞的行)來列印它傳送到終端的所有位置重定向。嘗試執行以下命令(你會看到在到達最終頁面之前只有一個重定向)。bashcurl https://mdn.club.tw/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location你的輸出應該看起來像這樣(
curl首先會輸出一些下載計數器等)bashlocation: /en-US/docs/Web/API/Window/fetch -
儘管是人為設計的,但我們可以將這個結果進一步擴充套件,轉換
location:行內容,在每個內容的開頭新增基本源,這樣我們就可以打印出完整的 URL。為此,我們將新增awk(這是一種類似於 JavaScript、Ruby 或 Python 的程式語言,只是更古老!)。嘗試執行此命令。bashcurl https://mdn.club.tw/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location | awk '{ print "https://mdn.club.tw" $2 }'
你的最終輸出應該看起來像這樣
https://mdn.club.tw/en-US/docs/Web/API/Window/fetch
透過組合這些命令,我們定製了輸出,以顯示當我們請求 /docs/Web/API/WindowOrWorkerGlobalScope/fetch URL 時,Mozilla 伺服器正在重定向的完整 URL。瞭解你的系統在未來幾年中會證明非常有用——學習這些單一用途工具的工作原理以及它們如何成為你解決特定問題的工具包的一部分。
新增強化功能
現在我們已經瞭解了系統附帶的一些內建命令,接下來讓我們看看如何安裝並使用第三方 CLI 工具。
目前,用於前端 Web 開發的大量可安裝工具生態系統主要存在於 npm 中,這是一個私有的包託管服務,與 Node.js 密切合作。這個生態系統正在緩慢擴充套件——隨著時間的推移,你可以期待看到更多的包提供商。
安裝 Node.js 還會安裝 npm 命令列工具(以及一個以 npm 為中心的輔助工具 npx),它提供了一個安裝額外命令列工具的入口。Node.js 和 npm 在所有系統上都以相同的方式工作:macOS、Windows 和 Linux。
現在在你的系統上安裝 npm,方法是訪問上面的 URL 並下載並執行適合你作業系統的 Node.js 安裝程式。如果出現提示,請務必將 npm 作為安裝的一部分。

我們將再次以 Prettier 為例。我們在程式碼編輯器文章中展示瞭如何將其安裝為 VS Code 擴充套件。這裡我們將向你展示如何將其安裝為命令列工具。
注意:Prettier 是一個有主見的格式化工具,只有“少量選項”。選項越少通常意味著越簡單。考慮到工具的複雜性有時會失控,“少量選項”可能非常有吸引力。
我們的 CLI 工具應該安裝在哪裡?
在深入安裝 Prettier 之前,有一個問題要回答——“我們應該把它安裝在哪裡?”
使用 npm,我們可以選擇全域性安裝工具——這樣我們就可以在任何地方訪問它們——或者在當前專案目錄中本地安裝。
每種方式都有利弊——以下全域性安裝的利弊列表遠非詳盡無遺。
全域性安裝的優點
- 在終端的任何地方都可以訪問
- 只需安裝一次
- 佔用更少的磁碟空間
- 始終是相同的版本
- 感覺就像任何其他 Unix 命令一樣
全域性安裝的缺點
- 可能與你的專案程式碼庫不相容。
- 團隊中的其他開發人員將無法訪問這些工具,例如,如果你透過像 Git 這樣的工具共享程式碼庫。
- 與上一點相關,這使得專案程式碼更難複製(如果你在本地安裝工具,它們可以設定為依賴項並透過
npm install安裝)。
儘管缺點列表較短,但全域性安裝的負面影響可能遠大於收益。在這裡我們將本地安裝,但一旦你瞭解了相對風險,可以隨意全域性安裝。
安裝 Prettier
Prettier 是一個專為前端開發者設計的有主見的(opinionated)程式碼格式化工具,專注於基於 JavaScript 的語言,並支援 HTML、CSS、SCSS、JSON 等。
Prettier 可以
- 省去手動在所有程式碼檔案中保持樣式一致的認知開銷;Prettier 可以為你自動完成。
- 幫助 Web 開發新手以最佳實踐方式格式化他們的程式碼。
- 安裝在任何作業系統上,甚至作為專案工具的直接一部分,確保與你合作的同事和朋友使用你正在使用的程式碼樣式。
- 配置為在儲存時、鍵入時甚至在釋出程式碼之前執行(使用我們將在模組後面看到的附加工具)。
對於本文,我們將按照Prettier 安裝指南的建議,在本地安裝 Prettier。
-
安裝 Node 後,開啟終端並執行以下命令安裝 Prettier(我們將在下一篇文章中解釋
--save-dev的作用)。bashnpm install --save-dev prettier -
現在你可以使用 npx 工具在本地執行該檔案。像許多其他命令一樣,不帶任何引數執行該命令將提供使用說明和幫助資訊。現在嘗試一下。
bashnpx prettier
你的輸出應該看起來像這樣
Usage: prettier [options] [file/glob ...]
By default, output is written to stdout.
Stdin is read if it is piped to Prettier and no files are given.
…
至少快速瀏覽一下使用資訊總是值得的,即使它很長。它將幫助你更好地理解該工具的預期用途。
注意:如果你沒有先在本地安裝 Prettier,那麼執行 npx prettier 將立即下載並執行最新版本的 Prettier 只用於該命令。雖然這聽起來很棒,但新版本的 Prettier 可能會稍微修改輸出。你需要將其本地安裝,以便在準備好更改它之前固定你用於格式化的 Prettier 版本。
使用 Prettier 玩耍
讓我們快速玩一下 Prettier,這樣你就可以看到它是如何工作的。
-
首先,在檔案系統上建立一個容易找到的新目錄。也許在你的
Desktop上建立一個名為prettier-test的目錄。 -
現在將以下程式碼儲存到一個名為
index.js的新檔案中,放在你的測試目錄中。jsconst myObj = { a:1,b:{c:2}} function printMe(obj){console.log(obj.b.c)} printMe(myObj) -
我們可以針對程式碼庫執行 Prettier,僅僅是為了檢查我們的程式碼是否需要調整。
cd進入你的目錄,然後嘗試執行此命令。bashnpx prettier --check index.js你應該會得到類似以下的輸出
bashChecking formatting... index.js Code style issues found in the above file(s). Forgot to run Prettier? -
所以,有一些程式碼樣式可以修復。沒問題。在
prettier命令中新增--write選項將修復這些問題,讓我們專注於實際編寫有用的程式碼。現在嘗試執行此版本的命令。bashnpx prettier --write index.js你會得到這樣的輸出
bashChecking formatting... index.js Code style issues fixed in the above file(s).但更重要的是,如果你回過頭來看你的 JavaScript 檔案,你會發現它已經被重新格式化成這樣:
jsconst myObj = { a: 1, b: { c: 2 }, }; function printMe(obj) { console.log(obj.b.c); } printMe(myObj);
根據你的工作流程(或你選擇的工作流程),你可以將其作為流程的自動化部分。自動化正是工具的優勢所在;我們個人偏愛那種無需配置即可“自動發生”的自動化。
使用 Prettier 可以實現多種自動化方式,雖然這些超出了本文的範圍,但網上有一些優秀的資源可以提供幫助(其中一些已連結)。你可以呼叫 Prettier:
- 在你使用 Husky 將程式碼提交到 git 倉庫之前。
- 無論何時你在程式碼編輯器中點選“儲存”,無論是 VS Code 還是 Sublime Text。
- 作為持續整合檢查的一部分,使用 GitHub Actions 等工具。
我們個人偏愛第二種方式——例如在使用 VS Code 時,每當我們點選儲存,Prettier 就會啟動並清理任何需要做的格式化。你可以在 Prettier 文件中找到更多關於以不同方式使用 Prettier 的資訊。
其他可以使用的工具
如果你想嘗試更多工具,這裡有一個有趣的簡短列表:
bat— 一個“更好”的cat(cat用於列印檔案內容)。prettyping— 命令列中的ping,但具有視覺化效果(ping是檢查伺服器是否響應的有用工具)。htop— 一個程序檢視器,當你的 CPU 風扇像噴氣發動機一樣執行時,它對於識別罪魁禍首程式很有用。tldr— 本章前面提到過,但它也可以作為命令列工具使用。
請注意,上面的一些建議可能需要像我們安裝 Prettier 那樣使用 npm 進行安裝。
總結
我們的終端/命令列入門之旅就到此結束,環境設定模組也告一段落。接下來,我們將讓你著手構建你的第一個簡單網站,這樣你就可以瞭解 Web 開發是什麼樣的。