命令列速成課程

終端是用於執行基於文字的程式的文字介面。如果你正在執行任何用於 Web 開發的工具，那麼幾乎可以肯定你需要開啟命令列並執行一些命令來使用你選擇的工具（你經常會看到這樣的工具被稱為CLI 工具——命令列介面工具）。

大量工具可以透過在命令列中輸入命令來使用；許多工具預裝在你的系統上，還有大量其他工具可以從軟體包註冊中心安裝。軟體包註冊中心就像應用商店，但（主要）用於基於命令列的工具和軟體。我們將在本章後面瞭解如何安裝一些工具，並在下一章中詳細瞭解軟體包註冊中心。

命令列最大的批評之一是它在使用者體驗方面嚴重不足。第一次檢視命令列可能會令人望而生畏：一個空白螢幕和一個閃爍的游標，幾乎沒有明顯的幫助資訊告訴你該做什麼。

表面上看，它們遠非友好，但你可以用它們做很多事情，我們保證，只要有一點指導和練習，使用它們就會變得更容易！這就是我們提供本章的原因——幫助你在這個看似不友好的環境中入門。

終端起源於 20 世紀 50 年代到 60 年代，其最初的形式與我們今天使用的完全不同（對此我們應該心存感激）。你可以在維基百科的 計算機終端 詞條中閱讀一些歷史資訊。

從那時起，終端一直是所有作業系統的恆定特徵——從桌面機器到隱藏在雲中的伺服器，再到像 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（點選此處查詢安裝程式）和 Gitbash（它是 git for Windows 工具集的一部分）。

但是，在現代 Windows 中最好的選擇是 Windows 子系統 Linux (WSL)——一個用於直接在 Windows 10 內部執行 Linux 作業系統的相容性層，允許你直接在 Windows 上執行“真正的終端”，而無需虛擬機器。

可以從 Windows 應用商店免費直接安裝。你可以在 Windows 子系統 Linux 文件 中找到所需的所有文件。

在 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

讓我們繼續前進，看看如何在命令列上使用其中一些工具。在你繼續操作之前，請開啟你的終端程式！

當你訪問命令列時，你不可避免地需要導航到特定的目錄以“執行某些操作”。所有作業系統（假設預設設定）都將在你的“主目錄”中啟動其終端程式，然後你可能希望移動到其他位置。

cd 命令允許你更改目錄。從技術上講，cd 不是程式，而是內建命令。這意味著你的作業系統開箱即用地提供它，並且你也不會意外地刪除它——謝天謝地！你不需要太擔心命令是內建的還是不是，但請記住，內建命令出現在所有基於 unix 的系統上。

要更改目錄，請在終端中輸入 cd，後跟你要移動到的目錄。假設該目錄位於你的主目錄內，你可以使用 cd Desktop（請參閱下面的螢幕截圖）。

嘗試在你的系統終端中輸入此命令

cd Desktop

如果你想返回到上一個目錄，可以使用兩個點

cd ..

如果你要轉到的目錄巢狀得很深，你需要知道到達它的路徑。隨著你對檔案系統結構越來越熟悉，這通常會變得更容易，但如果你不確定路徑，你通常可以透過結合使用 ls 命令（見下文）以及在 Explorer/Finder 視窗中四處點選來檢視目錄相對於你當前位置的位置來弄清楚。

例如，如果你想轉到名為 src 的目錄，該目錄位於名為 project 的目錄內，位於 Desktop 上，你可以輸入以下三個命令從你的主資料夾到達那裡

cd Desktop
cd project
cd src

但這是一種浪費時間的方法——相反，你可以輸入一個命令，路徑中的不同專案用正斜槓分隔，就像你在 CSS、HTML 或 JavaScript 程式碼中指定影像或其他資源的路徑時一樣

cd Desktop/project/src

請注意，在你的路徑上包含一個前導斜槓會使路徑成為絕對路徑，例如 /Users/your-user-name/Desktop。像上面那樣省略前導斜槓會使路徑相對於你當前的工作目錄。這與你在 Web 瀏覽器中看到的 URL 完全相同。前導斜槓表示“在網站的根目錄下”，而省略斜槓表示“URL 相對於我的當前頁面”。

另一個內建的 Unix 命令是 ls（代表列表），它列出你當前所在目錄的內容。請注意，如果你使用的是預設的 Windows 命令提示符 (cmd)，則此命令將不起作用——等效命令為 dir。

現在嘗試在你的終端中執行此命令

ls

這會為你提供當前工作目錄中檔案和目錄的列表，但資訊非常基礎——你只會獲得每個專案的名稱，而不是它是否是檔案或目錄，或其他任何資訊。幸運的是，對命令用法進行少量更改可以提供更多資訊。

大多數終端命令都有選項——這些是新增到命令末尾的修飾符，使命令的行為略有不同。這些通常由命令名稱後面的空格、破折號以及一個或多個字母組成。

例如，試試這個命令，看看你得到了什麼

ls -l

對於ls命令，-l（讀作dash ell）選項可以讓你以每行一個檔案或目錄的方式顯示列表，並提供更多資訊。可以透過檢視每行最左側的字母“d”來識別目錄。這些就是我們可以使用cd命令進入的目錄。

下面是一個截圖，上面是“原始”的macOS終端，下面是一個自定義的終端，添加了一些額外的圖示和顏色，使其看起來更生動——兩者都顯示了執行ls -l的結果。

現在我們已經討論了兩個基本命令，在你的目錄中四處看看，看看是否可以從一個地方導航到另一個地方。

還有許多其他基本的實用程式命令，在使用終端時你可能會經常用到它們。它們非常簡單，所以我們不會像前面幾個命令那樣詳細解釋它們。

在一個你建立的測試目錄中試用它們，這樣你就不會意外刪除任何重要的東西，使用下面的示例命令作為指導。

• 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.bak的mdn-example.txt副本（當然，你也可以根據需要將其命名為其他名稱）。
• rm——刪除指定的檔案。例如，rm mdn-example.txt刪除一個名為mdn-example.txt的單個檔案。請注意，此刪除是永久性的，無法透過桌面使用者介面上的回收站撤消。

我們之前已經提到了這一點，但為了明確起見——在使用終端時需要小心。簡單的命令不會帶來太多危險，但當你開始組合更復雜的命令時，需要仔細考慮命令將執行的操作，並在最終在目標目錄中執行它們之前先進行測試。

假設你在一個目錄中有1000個文字檔案，並且想要遍歷所有這些檔案，只刪除檔名中包含特定子字串的檔案。如果不小心，你可能會最終刪除一些重要的東西，從而丟失大量工作。一個好的習慣是在文字編輯器中寫出你的終端命令，弄清楚你認為它應該是什麼樣子，然後備份你的目錄，並在備份上先執行該命令進行測試。

另一個好建議——如果你不習慣在自己的機器上嘗試終端命令，一個安全的地方是在Glitch.com上嘗試。除了是一個嘗試 Web 開發程式碼的好地方之外，這些專案還允許你訪問終端，因此你可以在該終端中直接執行所有這些命令，並確信不會破壞自己的機器。

獲取特定終端命令快速概述的一個很好的資源是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”頁面的內容。現在就試試吧。

curl 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”一詞的行）。

嘗試執行以下命令（你會看到在到達最終頁面之前只有一個重定向）。

curl https://mdn.club.tw/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch -L -I | grep location

你的輸出應該如下所示（curl首先會輸出一些下載計數器等）。

location: /en-US/docs/Web/API/fetch

雖然是人為設計的，但我們可以更進一步，轉換location:行的內容，在每個內容的開頭新增基本來源，以便我們獲得打印出的完整URL。為此，我們將新增awk（這是一種類似於JavaScript、Ruby或Python的程式語言，只是歷史更悠久！）。

嘗試執行此命令。

curl 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/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。Prettier是一個有主見的程式碼格式化程式，它只有“幾個選項”。選項越少，往往意味著越簡單。考慮到工具有時在複雜性方面會失控，“幾個選項”可能非常有吸引力。

在我們深入安裝Prettier之前，有一個問題需要回答——“我們應該在哪裡安裝它？”

使用npm，我們可以選擇全域性安裝工具——這樣我們就可以在任何地方訪問它們——或者在當前專案目錄中本地安裝。

全域性安裝和本地安裝各有優缺點——以下列出的全域性安裝的優缺點遠非詳盡無遺。

全域性安裝的優點

• 在終端的任何位置都可以訪問
• 只需安裝一次
• 佔用更少的磁碟空間
• 始終使用相同的版本
• 感覺就像任何其他 Unix 命令

全域性安裝的缺點

• 可能與專案的程式碼庫不相容
• 團隊中的其他開發人員無法訪問這些工具，例如，如果透過 Git 等工具共享程式碼庫。
• 與前一點相關，它使專案程式碼更難複製（如果在本地安裝工具，則可以將其設定為依賴項並使用npm install安裝）。

雖然“缺點”列表較短，但全域性安裝的負面影響可能遠大於其帶來的好處。在這裡，我們將進行本地安裝，但如果您瞭解了相關的風險，也可以隨時進行全域性安裝。

Prettier 是一款針對前端開發人員的程式碼格式化工具，它專注於基於 JavaScript 的語言，並添加了對 HTML、CSS、SCSS、JSON 等的支援。

Prettier 可以

• 節省手動確保所有程式碼檔案樣式一致的認知開銷；Prettier 可以自動完成此操作。
• 幫助 Web 開發新手以最佳實踐的方式格式化程式碼。
• 安裝在任何作業系統上，甚至可以作為專案工具的直接一部分，確保與您一起處理程式碼的同事和朋友使用您正在使用的程式碼風格。
• 可以配置為在儲存時、鍵入時甚至釋出程式碼之前執行（使用稍後在模組中看到的其他工具）。

在本文中，我們將按照Prettier 安裝指南的建議，在本地安裝 Prettier。

安裝好 Node 後，開啟終端並執行以下命令來安裝 Prettier（我們將在下一篇文章中解釋--save-dev的作用）

npm install --save-dev prettier

您現在可以使用npx工具在本地執行該檔案。與許多其他命令一樣，不帶任何引數執行該命令將提供用法和幫助資訊。現在試試看

npx 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，以便您瞭解它的工作原理。

首先，在檔案系統上的某個易於查詢的位置建立一個新目錄。也許在您的桌面上建立一個名為prettier-test的目錄。

現在將以下程式碼儲存在測試目錄內的名為index.js的新檔案中

const myObj = {
a:1,b:{c:2}}
function printMe(obj){console.log(obj.b.c)}
printMe(myObj)

我們可以對程式碼庫執行 Prettier 以檢查我們的程式碼是否需要調整。cd到您的目錄，然後嘗試執行此命令

npx prettier --check index.js

您應該得到類似以下內容的輸出

Checking formatting...
index.js
Code style issues found in the above file(s). Forgot to run Prettier?

因此，有一些程式碼樣式可以修復。沒問題。將--write選項新增到prettier命令將修復這些問題，讓我們專注於編寫有用的程式碼。

現在嘗試執行此版本的命令

npx prettier --write index.js

您將獲得如下輸出

Checking formatting...
index.js
Code style issues fixed in the above file(s).

但更重要的是，如果您檢視 JavaScript 檔案，您會發現它已被重新格式化為類似以下內容

const 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——在本章前面提到過，但也可以作為命令列工具使用。

請注意，上述某些建議可能需要使用 npm 進行安裝，就像我們對 Prettier 所做的那樣。

這標誌著我們對終端/命令列的簡短之旅的結束。接下來，我們將更詳細地瞭解包管理器以及我們可以用它們做什麼。

• 上一個
• 概述：瞭解客戶端 Web 開發工具
• 下一個