CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：vim

🔍 搜尋結果：vim

使用更多的終端機和更少的滑鼠來提高您的工作效率 (🚀)。

許多初學者可能認為只有高級開發人員才能使用終端機來提高生產力。當我開始學習程式設計時，我害怕使用終端機來執行`npm`命令等基本任務以外的任何事情。 然而，多年來，我意識到我錯過了一個提高生產力的巨大機會。因此，我們將探討您應該更多地使用終端的所有原因以及一些可以幫助您提高工作效率的工具。 另外，讓我們對所有隻使用滑鼠的使用者說實話，你們有點遲鈍。 ### 滑鼠速度慢了🐌 基本上，您使用滑鼠的次數越少，速度就越快。將手放在鍵盤上將為您節省大量時間。老實說，如果您在大部分活動中都使用滑鼠，那麼您就是菜鳥。 **瀏覽資料夾** 誰在他們的電腦上使用文件瀏覽器？我的意思是，即使你是 Windows 用戶，檔案總管基本上也很糟糕，但即使在 Mac 上，使用終端機進行導航也要快得多。對於那些在 Linux 上使用文件瀏覽器的人們，我希望上帝寬恕你們的罪。 **建立檔案和目錄** 據說右鍵建立文件的人精神有問題，雖然我不完全同意，但我是82%。像`touch` 、 `mkdir`和`ls`這樣的命令基本上是提高生產力的救星。 使用`cat`快速瀏覽文件也非常有幫助。 我想在評論中聽聽你對此的看法。您還使用哪些其他命令？ **如果我在 Windows 上怎麼辦？** 首先，如果你是Windows用戶，你的情況可能比那些使用右鍵建立檔案的人更糟。不過，這是改天再討論的事。 透過安裝**Git Bash** ，您基本上將擁有幾乎所有的 Unix 系統終端命令並遠離 PowerShell 疾病。 **Windows 用戶=🥲** ### nano 或 Vim 了解 nano 或 vim 的基礎知識將阻止您打開較慢的替代品，例如 vscode 或 jetbrains。當您想要快速編輯一個小檔案時，打開 IDE 或文字編輯器只是為了更改幾行程式碼可能是對開發人員社群的背叛。 另外，這意味著您在伺服器方面基本上毫無用處。 ### ZSH 如果您不使用[oh-my-zsh](https://ohmyz.sh/) ，您將錯過一些令人驚嘆的插件。大多數人希望終端具有的一項功能是自動完成。使用[zsh-autosuggestions](https://github.com/zsh-users/zsh-autosuggestions/blob/master/INSTALL.md)插件，您的終端將自動完成大多數命令並記住先前的命令。 因此，對於所有使用向上箭頭🔼的戰士來說，您將不再需要按向上箭頭鍵 500 次來查找舊命令，因為您厭倦了谷歌搜尋。 ### 硬核的東西 (🍆) 使用**tmux**切換到**neovim**讓你看起來像某種色情明星程式設計師。當您在會議中以及共享螢幕以顯示程式碼時，您會顯得很酷。 除了有趣的一面之外，如果您願意使用 neovim 切換到 tmux，它可以讓您成為 10 倍的開發人員。我可以花幾個小時來談論在你完成學習曲線後它有多麼有益，但那是一篇單獨的文章。 ### 結論 所以你有它！放棄滑鼠並選擇命令列就像從自行車升級到火箭飛船一樣 — 它更快、更酷，而且景色也很壯觀！ 透過熟悉終端，您不僅可以加快工作流程，還可以加入精英開發人員聯盟，只需敲擊幾下鍵盤即可創造奇蹟。 請記住，每一位大師都曾經是一場災難。 感謝您的閱讀，希望這篇文章對您有幫助。如果您有任何疑問，請隨時發送電子郵件至[**[email protected]**](mailto:[email protected]) \*\*，我會回覆。 您也可以透過查看我的 X 來了解我的最新更新： [**x.com/sotergreco**](http://x.com/sotergreco) --- 原文出處：https://dev.to/sotergreco/improve-your-productivity-by-using-more-terminal-and-less-mouse--2o7b

0個讚   0留言 35瀏覽

shell 程式設計

在當今快速發展的技術環境中，掌握命令列可以簡化開發人員的開發過程。可以透過各種 shell 環境（如 Bash 和 PowerShell）存取命令列。本文探討了 shell 環境，展示了它在執行複雜操作、導航檔案、處理資料和文字操作中的作用。 shell 的定義 ----- shell 是一種使用者介面，允許使用者使用基於文字的命令與電腦作業系統進行互動。將其視為使用者和作業系統之間的轉換器。 shell 接受使用者輸入的人類可讀指令，並將其轉換為作業系統瞭解和執行的指令，也將這些指令的結果或輸出顯示給使用者。與圖形使用者介面 (GUI) 相比，這種類型的互動稱為命令列介面 (CLI)，可讓您更直接地控制系統。 使用命令列介面，您可以執行程式、管理文件和執行各種任務。 shell 的重要性 ------ - Shell 允許使用者與作業系統互動。這使得透過鍵入特定命令來執行複雜任務變得更加容易。 - 它允許使用者使用編寫的 shell 腳本自動執行重複任務。 - 它幫助管理員和用戶透過 SSH 等協定存取遠端系統 - 它可用於存取和管理文件和目錄。 - 它診斷問題並檢查系統狀態。 shell 環境 ---- 有多種可用的 shell，每種都有其獨特的功能和語法。一些最廣泛使用的 shell 包括： **Bourne-Again Shell(BASH)** ：這是 Linux 發行版和 macOS 上的 shell 之一。它的語法與原始的 Unix shell 相容，使其成為流行的選擇。 **PowerShell：** PowerShell是Windows系統預設預先安裝的shell環境，它是物件導向的。 **Z Shell(ZSH)：** Zsh 以其廣泛的客製化選項和高級功能而聞名。它提供了改進的選項卡補全、歷史管理和插件支援。 本文使用 Bash shell 來取得程式碼範例和命令。如果您不熟悉 Bash，請考慮使用適用於 Windows 的 Git Bash 或 macOS 上的內建終端應用程式。兩者都提供了類似 Bash 的體驗，您可以在本文中了解。 Shell 導覽和操作 ----------- 透過命令列瀏覽檔案系統是掌握 shell 環境的基本技能之一。更改目錄、管理檔案和理解路徑名的能力對於有效的命令列操作至關重要。目錄在 Windows 系統中稱為資料夾。 用於導航檔案系統的各種命令是： |命令 |功能| | -------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------- | | cd（更改目錄）|此命令用於更改您的工作目錄。您可以鍵入 cd 後接目錄名稱或路徑來變更到其他目錄。例如： `cd newfile.` | | pwd（列印工作目錄）|此命令顯示您正在使用的目前目錄的路徑。 | |ls |此指令用於列出目錄的內容。 | | | | ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j595skabenpcc2wh9njx.png) ### 命令語法 某些命令具有修改其功能的元件。這些元件稱為選項和參數。 選項用於調整指令的操作，而參數則用於指令的操作。例如： `ls -l myfile` -l 是選項，而 myfile 是參數。 這是一個包含命令選項及其功能的表： |命令 |功能| |:------------ | -------------------------------------------------- -------- | | ls -a |列出所有文件內容，包括隱藏內容 | | ls -t |按上次修改時間列出所有文件內容 | |cd -|這將帶您到上一個目錄 | |cd .. |這將帶您到父目錄 | | cd ~用戶名 |這將帶您到指定使用者名稱的目錄 | | rm -r |這將刪除目錄及其內容。 | | ls -l |以長格式列出所有文件內容 | | ls-al |列出所有文件內容，包括長格式的隱藏內容。 | ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8sai709iaifkv2agytnc.png) ### 檔案和目錄操作 - **mkdir：**此指令用於建立目錄，例如： `mkdir newDirectory` - **touch：**這個指令會建立一個空文件，例如： `touch Mynewfile`建立一個名為「Mynewfile」的文件 - **mv：**此指令既可以移動檔案/目錄，也可以重新命名它們，例如： `mv oldfile newfile` ，該指令將 oldfile 移動或重新命名為 newfile。 - **cp：**此指令用於複製檔案和目錄，例如： `cp Myfile backup`將「Myfile」複製到「backup」目錄中。 - **rm：**此指令刪除文件，例如： `rm unwanted.txt` - **rmdir：**指令刪除空目錄，例如：`rmdir emptydir` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3v2uotfppwghzwej1d3.png) 文件處理和文字處理 --------- ### 使用檔案和目錄： 有些文字編輯器可讓您直接從命令列建立、檢視和修改文字檔案。其中一些流行的文本編輯器包括： - [nano](https://www.nano-editor.org/) - [vim](https://vim.rtorr.com/lang/da_DK) - [Emacs](https://www.gnu.org/software/emacs/manual/) ### 查看文件內容 - **cat：** cat指令在終端機中顯示檔案的全部內容，例如： `cat filename` - **less：** less 指令可讓您一次一屏查看文件的內容，從而實現導航和搜尋。 - **head 和 tail：**這些指令分別顯示檔案的第一行或最後幾行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoukz46g5dk3b5jgx2ux.png) ### 使用 grep、sed 和 awk 進行文字處理 - **grep：** grep 指令是一個強大的工具，用於搜尋檔案中的特定模式或文字。它可以與其他命令結合使用以進行更高級的操作。 範例： `grep "keyword" myFile` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd6bm7oz7svwy8sk1cyy.png) - **sed：** sed 指令代表流編輯器，它對輸入流執行文字轉換。它對於查找和替換文件中的文字特別有用。 範例： `sed 's/old/new/' myfile` ，這將在名為“myfile”的檔案中用“new”替換“old” - **awk：** awk 指令逐行處理和分析文本。它通常用於資料提取和報告。 語法： `awk 'pattern { action }' file` `pattern`指定執行操作的條件。 `action`是模式匹配時要執行的程式碼區塊。 `file`是要處理的輸入檔。如果未指定，awk 從標準輸入讀取。 範例： `awk '{sum += $1} END {print sum}' myfile` ，這將計算列中數字的總和並列印它們的總和。 使用 Shell 進行遠端系統管理 ----------------- 遠端系統的 Shell 存取是透過 Secure Shell (SSH) 等協定實現的。 SSH 是一個私鑰，使您能夠存取遠端伺服器；它透過加密用戶電腦和遠端伺服器之間的通訊來確保安全連接。 ### 其工作原理的簡要概述 要建立 SSH 連接，管理員需要提供遠端伺服器的位址和身份驗證憑證，例如使用者名稱和密碼或金鑰對 ``` ssh your_username@remote-machine-address ``` 將“your\_username”替換為您的實際使用者名，將“remote-machine-address”替換為提供的位址。 如果您使用基於金鑰的身份驗證，它可能如下所示： ``` ssh -i /path/to/your/private/key your_username@remote-machine-address ``` 如果您在鍵入時沒有看到字符，請不要擔心；這是一項安全功能。 一旦完成，管理員就可以在遠端電腦上執行命令、管理檔案並執行各種管理任務。 文件權限和所有權 -------- 作業系統提供對 shell 環境中的檔案和目錄的存取權限。這決定了可以對文件和目錄執行哪些操作。這允許遠端工作人員從不同的系統存取檔案。您可以使用`ls -l`指令查看檔案的權限設定。 共有三種基本權限類型： - **Read(r)：**這允許使用者查看目錄或檔案內容。 - **Write(w)：**這允許使用者修改或刪除文件，以及在目錄中建立或刪除文件。 - **執行（x）：**這授予檔案執行權限。 檔案權限為三類使用者設定： - **擁有者：**建立檔案或目錄的使用者。 - **群組：**指定的使用者群組。 - **其他：**不屬於所有者或群組類別的任何人。 ### 更改權限 `chmod`指令用於修改檔案權限。您可以透過數字或符號方式變更權限。 數值範例：chmod 774 myfile 符號範例：chmod u+rwx myfile ### 更改所有權 (chown) `chown`指令用於變更檔案或目錄的擁有者和群組。 `chown username filename` 這會將`filename`的擁有權分配給名為`username`用戶 `chown username:groupname filename` 這會將`filename`的擁有權指派給名為`username`用戶，並將群組擁有權設定為`groupname` `chown -R username:groupname directory` 這會遞歸地將`directory`中所有檔案和子目錄的所有權變更為`username`和`groupname` 。 輸入和輸出重定向 -------- 重定向是操作命令輸入和輸出的基本技術。 重定向允許您重定向命令輸出的位置以及命令獲取輸入的位置。 - **輸出重定向：** `>`符號用於將指令的輸出重定向到檔案。如果文件不存在，則建立它；如果存在，則會被覆蓋。範例： `cat myfile > newfile`將把 myfile 的內容重新導向到 newfile。 - **追加重定向：** `>>`符號與輸出重定向類似，但它不會覆蓋文件，而是將輸出加入到現有文件的末尾。範例： `cat myfile >> newfile`將把 myfile 的內容加入 newfile 內容的末端。 - \### 輸入重定向 **管道 (|)** 一根管子`|`用於將一個命令的輸出作為另一個命令的輸入發送。這用於連接命令。 例如： `ls -l | grep "file"` 在此範例中，ls -l 命令以詳細格式列出文件，然後透過 grep 過濾輸出以僅顯示包含單字「file」的行。 管道和重定向可以結合起來執行複雜的操作。 例如： `ls -l | grep "file" | sort > sorted_file_list.txt` --- 原文出處：https://dev.to/ollie20/shell-programming-4k65

0個讚   0留言 47瀏覽

✨使用這些工具成為進階 Linux 用戶😎💫

## 簡介 本文列出了開發人員可以在 Linux 電腦上安裝的六種出色工具。 🎉 請隨意探索這些工具，並為這些儲存庫加註星標。開源專案需要您的幫助！ 🙏🏻 您準備好成為 **10X Linux 使用者** 了嗎？ 🧠 開玩笑，你不會的，😆 但這些工具絕對可以加快你的日常工作量。 🏃🏻‍♂️💨 ![笑 GIF](https://media.giphy.com/media/3o72FfM5HJydzafgUE/giphy.gif) *** **1. [Ngrok](https://ngrok.com/)** > 💡 安全地在線上公開本機伺服器。 ![ngrok cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5rk3ko7fn4w8uvye1de.jpg) Ngrok 可協助您為本機 Web 伺服器建立公用 URL 🌐，以便您可以與團隊成員、客戶或全世界分享您正在進行的工作。 🌍 只需執行一個簡單的命令，Ngrok 就會啟動一條從公共端點到您的電腦的安全隧道。這使您可以在「localhost」上測試網站、應用程式和 API，而無需部署任何內容。 Ngrok 支援 HTTP 和 TCP 流量，因此您幾乎可以透過隧道傳輸任何內容 - Web 伺服器，甚至間接資料庫。它還提供有用的功能，例如自訂子網域和重播/檢查流量。 Ngrok 在以下主要領域提供協助： - 暫時分享一個僅在您的開發機器上執行的網站🖥️。 <br/> - 開發任何使用 webhook 的服務 🪝。 <br/> - 透過檢查網路流量來除錯 🧑‍💻 網路服務。 > ✨ 我不常使用這個工具，但我記得幾年前我第一次使用這個工具是為了向我的朋友展示我在本地建立的網站。 https://github.com/inconshreveable/ngrok 🌟 GitHub 上的 ngrok *** **2. [fzf](https://github.com/junegunn/fzf)** > 💡 命令列模糊查找器。 ![fzf cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m0m9bdx5v5chokkc3ni3.jpg) 對於那些花費大量時間在終端工作的人來說，Fzf 是一個有用的工具🖥️。它可作為模糊查找器，可讓您快速搜尋並過濾檔案、命令歷史記錄、git 提交等資料清單。 這是它的工作原理。當您執行“fzf”命令時，它會在您鍵入時立即過濾下面的列表，以僅顯示匹配的結果。 這是一個可能的用例。 😯 ``` ls -la | fzf ``` ![fzf 工具使用案例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58xp7w58iahqf62mk285.png) 這種互動式方法使您可以快速輕鬆地找到所需內容，即使在長列表中也是如此。模糊匹配意味著它將找到部分匹配，因此您不必輸入全名。 🤯 https://github.com/junegunn/fzf 🌟 GitHub 上的 fzf *** **3. [Z](https://github.com/rupa/z)** > 💡 在不知道整個路徑的情況下跳轉目錄。 ![z cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a2mhiv09d5qomevhfan.jpg) 您是否曾經處理過具有深層巢狀資料夾結構的專案，並且必須不斷使用 cd 命令鍵入長目錄📂路徑？ Z 解決了這個問題。 😉 一旦您安裝並開始使用 Z，它就會追蹤您最常存取的目錄。然後，您可以輸入一個短名稱來立即跳轉 🦘 到該資料夾，而不是輸入完整路徑。 ![Z工具使用](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cvmisaqr0vkkmdkthx1.jpg) Z 使用**兩個因素**來決定要為您追蹤哪些目錄：您存取資料夾的**頻率**以及您最近**存取該資料夾的方式。 因此，您最常使用的資料夾將獲得最短的名稱。 https://github.com/rupa/z 🌟 GitHub 上的 Z *** **4. [遊俠](https://github.com/ranger/ranger)** > 💡 受 VIM 啟發的控制台檔案管理器。 ![ranger cli 檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b396pdtrppbtdinamrts.jpg) Ranger 是一個**受 vim 啟發的**檔案管理器👮🏻，帶有控制台介面。它提供了一種易於使用且高效的方式來導航和檢視檔案系統。 Ranger 的一些主要特點是： - 多欄✨顯示 <br/> - 預覽所選檔案/目錄的📂 <br/> - 常見檔案操作（`create/chmod/copy/delete`/...） <br/> - 一次重新命名多個文件 <br/> - 類似 VIM 的控制台和熱鍵 ⌨️ ![ranger cli 檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d6m0lu91gkyi88ti7y0.png) https://github.com/ranger/ranger 🌟 GitHub 上的 Ranger *** **5. [Ncdu](https://www.howtoing.com/ncdu-a-ncurses-based-disk-usage-analyzer-and-tracker/)** > 💡 查看 Linux 系統上使用的檔案和磁碟空間。 Ncdu 是一個有用的命令列工具，可以幫助您有效地管理磁碟空間。 它以直觀方式顯示磁碟機上的空間使用情況，使您可以輕鬆辨識佔用最多空間的大檔案和資料夾。 當您執行 Ncdu 時，它會掃描您的檔案系統並在終端機中顯示互動式列表，向您顯示磁碟機上的每個資料夾以及它們使用了多少空間。您可以導航此清單以深入查看並查看子資料夾的空間使用情況📂。 ![ncdu cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70889hif0ue5w7ev04vu.png) 其簡單的介面使其易於使用，但功能強大，可用於分析磁碟使用情況和最佳化儲存。 如果您遇到磁碟空間💾填滿的問題，Ncdu 可以成為一個方便的工具來辨識罪魁禍首並採取行動。 👮🏻 *** **6。 [Exa](https://github.com/ogham/exa)** - _最好有_ > 💡 `ls` 指令的多彩替換。 ![exa cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tykdqcgsnqdqcku9j8ro.jpg) > 🚨 Exa 現已不再維護，請使用 [eza](https://github.com/eza-community/eza)。它是 exa 的一個分支，增加了一些功能。但我仍在使用 Exa，而且效果很好。它們幾乎是一樣的。 Exa 是舊的「ls」指令的現代替代品，您在終端機中使用該指令列出檔案和資料夾。它為您提供當前目錄中更豐富多彩、詳細且易於閱讀的文件清單。 當您執行 **exa** 而不是 `ls` 時，您會看到一些不錯的改進。首先，它使用不同的顏色和圖示（啟用或停用）對文件類型進行顏色編碼💬，從而更容易一目了然地在視覺上區分文件。 它還會向您顯示額外的訊息，例如文件權限、所有者、大小等。 ![exa cli 工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dn2d0k7kgqkjp56a4ykl.png) https://github.com/ogham/exa 🌟 GitHub 上的 Exa *** > 如果您認為本文中未提及的任何其他方便的工具，請在下面的評論部分中分享。 👇🏻 那麼，這就是本文的內容。非常感謝您的閱讀！ 🎉🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/be-a-10x-linux-user-with-these-tools-3g1f

0個讚   0留言 178瀏覽

程式設計師的 5 個殺手級網站 💎

**嘿，編碼員！** 我想分享一些我發現的最酷的網站，它們確實可以節省您的時間並幫助提高您的編碼技能。 每一款都有獨特且免費的東西。 那麼就讓我們從👇開始吧 ## 1. [HTMLrev.com💎](htmlrev.com) ![htmlrev.com](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2z3wigsyjyj5jnhzsxz.jpeg) 這個網站真的很棒，他們在每個類別（如登陸頁面、部落格、作品集、電子商務和儀表板）上收集了**1000 多個免費HTML 模板**，其中包含大量使用HTML、CSS、 TailwindCSS 和JavaScript 等 必須結帳一次🤓。 ## 2. [uiverse.io✨](uiverse.io) ![uiverse.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ta889ycbtkejeawz9ts.jpeg) UIverse 擁有超過 **3000 多個免費 CSS 和 Tailwind 元素**，您可以在專案中使用，例如按鈕、表單、載入器等。 其他開發者也貢獻了它們，因此品質非常好 ⭐。他們甚至有程式碼片段可供複製。 這麼大的圖書館竟然免費！ ## 3.[exercism.io💪](exercism.io) ![exercism.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8818q7g50gg2y8dnrb1x.jpeg) 這對於**練習特定的編碼挑戰**非常有用。他們有超過 3500 個簡短的練習，分成不同的語言。 對解決方案進行編碼後，您可以提交它以獲得自動回饋並與導師配對。 這是學習新技能和更好地進行除錯的有趣😅方式。 ## 4. [quickref.me💭](quickref.me) ![quickref.me](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2n7i5wgmcfxazbl8q37x.jpeg) 需要**您剛接觸的語言**的語法快速參考嗎？這個☝網站非常完美。 他們的備忘錄涵蓋了從 Python 和 JavaScript 到 Vim 和 Markdown 的所有內容。 當您遇到困難時，您可以隨時搜尋它們。真的很方便！ ## 5. [resume.io📝](resume.io) ![resume.io](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orm4q934p9wgtk9sd79a.jpeg) 當您準備好建立您的編碼作品集時，**此網站可協助您建立專業的履歷**。😎 他們為開發人員、設計師等提供精美的客製化模板。您只需輸入您的訊息，它就會產生高品質的 PDF。 非常適合申請實習或工作！ ## 很快再見👋 **感謝您閱讀這篇部落格🙏**，我希望這能為您提供一些新的地方來了解程式設計師朋友！ _如果您發現任何其他有用的網站，請發表評論📩。_ 並且不要忘記加上“💖🦄🔥” https://github.com/taqui-786 關注Github✅ ## 快樂編碼😊 --- 原文出處：https://dev.to/random_ti/5-killer-websites-for-coders-a7

1個讚   0留言 258瀏覽

使用這些 React 函式庫和雲端後端來建立全端應用程式。

今天，我們將學習如何使用 Wing 作為後端建立全端應用程式。 ![反應 + 維特 + 翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vb7jf7dk9b08x042p0vl.png) 我們將使用 React 和 Vite 作為前端。 我知道還有其他框架，如 Vue、Angular 和 Next，但 React 仍然是最常見的，並且迄今為止有大量值得信賴的新創公司使用它。 如果您不知道， [React](https://github.com/facebook/react)是 Facebook 建立的開源程式庫，用於建立 Web 和本機使用者介面。正如您從儲存庫中看到的，它被超過 2040 萬開發人員使用。所以，這是值得的。 讓我們看看如何使用 Wing 作為後端。 ![豎起大拇指](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pskz2tyzodt4wnxbqa8y.gif) --- [Wing](https://git.new/wing-repo) - 一種雲端程式語言。 --------------------------------------------- ![翅膀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n97bowkrexjk46n94bcc.png) Winglang 是一種專為雲端（又稱「面向雲端」）設計的新型開源程式語言。它允許您在雲端中建立應用程式，並且具有相當簡單的語法。 Wing 程式可以使用功能齊全的模擬器在本地執行（是的，不需要網路），也可以部署到任何雲端供應商。 ![機翼基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eun3zd1gkp870rj57eeu.png) Wing 需要 Node `v20 or higher` 。 建立一個父目錄（我們使用的`shared-counter` ）並使用 Vite 使用新的 React 應用程式設定前端。您可以使用這個 npm 指令。 ``` npm create -y vite frontend -- --template react-ts // once installed, you can check if it's running properly. cd frontend npm install npm run dev ``` 您可以使用此 npm 命令安裝 Wing。 ``` npm install -g winglang ``` 您可以使用`wing -V`驗證安裝。 Wing 還提供官方[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing) ，後者提供語法突出顯示、補全、轉到定義和嵌入式 Wing 控制台支援。您可以在建立應用程式之前安裝它！ 建立後端目錄。 ``` mkdir ~/shared-counter/backend cd ~/shared-counter/backend ``` 建立一個新的空 Wing 專案。 ``` wing new empty // This will generate three files: package.json, package-lock.json and main.w file with a simple "hello world" program wing it // to run it in the Wing simulator // The Wing Simulator will be opened in your browser and will show a map of your app with a single function. //You can invoke the function from the interaction panel and check out the result. ``` 使用指令`wing new empty`後的結構如下。 ``` bring cloud; // define a queue, a bucket, and a counter let bucket = new cloud.Bucket(); let counter = new cloud.Counter(initial: 1); let queue = new cloud.Queue(); // When a message is received in the queue -> it should be consumed // by the following closure queue.setConsumer(inflight (message: str) => { // Increment the distributed counter, the index variable will // store the value before the increment let index = counter.inc(); // Once two messages are pushed to the queue, e.g. "Wing" and "Queue". // Two files will be created: // - wing-1.txt with "Hello Wing" // - wing-2.txt with "Hello Queue" bucket.put("wing-{index}.txt", "Hello, {message}"); log("file wing-{index}.txt created"); }); ``` 您可以安裝`@winglibs/vite`來啟動開發伺服器，而不是使用`npm run dev`來啟動本機 Web 伺服器。 ``` // in the backend directory npm i @winglibs/vite ``` 您可以使用`backend/main.w`中提供的 publicEnv 將資料傳送到前端。 讓我們來看一個小例子。 ``` // backend/main.w bring vite; new vite.Vite( root: "../frontend", publicEnv: { TITLE: "Wing + Vite + React" } ); // import it in frontend // frontend/src/App.tsx import "../.winglibs/wing-env.d.ts" //You can access that value like this. <h1>{window.wing.env.TITLE}</h1> ``` 你還可以做更多： - 讀取/更新 API 路線並使用 Wing Simulator 檢查它。 - 使用後端獲取值。 - 使用`@winglibs/websockets`同步瀏覽器，它在後端部署一個 WebSocket 伺服器，您可以連接此 WebSocket 來接收即時通知。 您可以閱讀完整的逐步指南，以了解[如何使用 React 作為前端和 Wing 作為後端建立簡單的 Web 應用程式](https://www.winglang.io/docs/guides/react-vite-websockets)。測試是使用 Wing Simulator 完成的，並使用 Terraform 部署到 AWS。 部署後的AWS架構是這樣的。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27awil840ktgh3jvklij.png) 為了提供開發者選擇和更好的體驗，Wing 推出了對[TypeScript (Wing)](https://www.winglang.io/docs/typescript/)等其他語言的全面支援。唯一強制性的事情是您必須安裝 Wing SDK。 這也將使控制台完全可用於本地偵錯和測試，而無需學習 Wing 語言。 Wing 甚至還有其他[指南](https://www.winglang.io/docs/category/guides)，因此更容易遵循。 ![指南](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/31czxehkg10ezmlpf7ac.png) 您可以閱讀[文件](https://www.winglang.io/docs)並查看[範例](https://www.winglang.io/docs/category/examples)。 您也可以在[Playground](https://www.winglang.io/play/?code=LwAvACAAVABoAGkAcwAgAGkAcwAgAHQAaABlACAAaQBtAHAAbwByAHQAIABzAHQAYQB0AGUAbQBlAG4AdAAgAGkAbgAgAFcAaQBuAGcALgAKAC8ALwAgAEgAZQByAGUAIAB3AGUAIABiAHIAaQBuAGcAIAB0AGgAZQAgAFcAaQBuAGcAIABzAHQAYQBuAGQAYQByAGQAIABsAGkAYgByAGEAcgB5ACAAdABoAGEAdAAgAAoALwAvACAAYwBvAG4AdABhAGkAbgBzACAAYQBiAHMAdAByAGEAYwB0AGkAbwBuAHMAIABvAGYAIABwAG8AcAB1AGwAYQByACAAYwBsAG8AdQBkACAAcwBlAHIAdgBpAGMAZQBzAC4ACgBiAHIAaQBuAGcAIABjAGwAbwB1AGQAOwAKAAoALwAvACAAVABoAGkAcwAgAGMAbwBkAGUAIABkAGUAZgBpAG4AZQBzACAAYQAgAGIAdQBjAGsAZQB0ACAAYQBzACAAcABhAHIAdAAgAG8AZgAgAHkAbwB1AHIAIABhAHAAcAAuAAoALwAvACAAVwBoAGUAbgAgAGMAbwBtAHAAaQBsAGkAbgBnACAAdABvACAAYQAgAHMAcABlAGMAaQBmAGkAYwAgAGMAbABvAHUAZAAgAHAAcgBvAHYAaQBkAGUAcgAKAC8ALwAgAGkAdAAgAHcAaQBsAGwAIABiAGUAIABzAHUAYgBzAHQAaQB0AHUAdABlAGQAIABiAHkAIABhAG4AIABpAG0AcABsAGUAbQBlAG4AdABhAHQAaQBvAG4AIABmAG8AcgAKAC8ALwAgAHQAaABhAHQAIABjAGwAbwB1AGQALgAgAEkALgBlACwAIABmAG8AcgAgAEEAVwBTACAAaQB0ACAAdwBpAGwAbAAgAGIAZQAgAGEAbgAgAFMAMwAgAEIAdQBjAGsAZQB0AC4ACgBsAGUAdAAgAGIAdQBjAGsAZQB0ACAAPQAgAG4AZQB3ACAAYwBsAG8AdQBkAC4AQgB1AGMAawBlAHQAKAApADsACgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAC8ALwAgAFkAbwB1ACAAYwBhAG4AIABpAG4AdABlAHIAYQBjAHQAIAB3AGkAdABoACAAdABoAGUAIABhAHAAcAAgAGkAbgAgAHQAaABlACAAYwBvAG4AcwBvAGwAZQAgAC0ALQA%2BAAoALwAvACAACgAvAC8AIABDAGwAaQBjAGsAIABvAG4AIAB0AGgAZQAgAEYAdQBuAGMAdABpAG8AbgAsACAAYQBuAGQAIAB0AGgAZQBuACAAaQBuAHYAbwBrAGUAIABpAHQAIABpAG4AIAB0AGgAZQAKAC8ALwAgAGwAbwB3AGUAcgAgAHIAaQBnAGgAdAAgAHAAYQBuAGUAbAAsACAAbwByACAAYwBsAGkAYwBrACAAbwBuACAAdABoAGUAIABCAHUAYwBrAGUAdAAKAC8ALwAgAHQAbwAgAHMAZQBlACAAaQB0AHMAIABjAG8AbgB0AGUAbgB0AHMAIABpAG4AIAB0AGgAZQAgAHAAYQBuAGUAbAAsACAAZQB0AGMALgAKAC8ALwAgACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAhACEAIQAKAAoALwAvACAAYABpAG4AZgBsAGkAZwBoAHQAcwBgACAAcgBlAHAAcgBlAHMAZQBuAHQAIABjAG8AZABlACAAdABoAGEAdAAgAHIAdQBuAHMAIABsAGEAdABlAHIALAAgAG8AbgAKAC8ALwAgAG8AdABoAGUAcgAgAG0AYQBjAGgAaQBuAGUAcwAsACAAaQBuAHQAZQByAGEAYwB0AGkAbgBnACAAdwBpAHQAaAAgAGMAYQBwAHQAdQByAGUAZAAgAGQAYQB0AGEAIABhAG4AZAAKAC8ALwAgAHIAZQBzAG8AdQByAGMAZQBzACAAZgByAG8AbQAgAHQAaABlACAAcAByAGUALQBmAGwAaQBnAGgAdAAgAHAAaABhAHMAZQAuAAoAbABlAHQAIABoAGUAbABsAG8AXwB3AG8AcgBsAGQAIAA9ACAAaQBuAGYAbABpAGcAaAB0ACAAKAApACAAPQA%2BACAAewAKACAAIABiAHUAYwBrAGUAdAAuAHAAdQB0ACgAIgBoAGUAbABsAG8ALgB0AHgAdAAiACwAIAAiAEgAZQBsAGwAbwAsACAAVwBvAHIAbABkACEAIgApADsACgB9ADsACgAKAC8ALwAgAEkAbgBmAGwAaQBnAGgAdABzACAAYwBhAG4AIABiAGUAIABkAGUAcABsAG8AeQBlAGQAIABhAHMAIABzAGUAcgB2AGUAcgBsAGUAcwBzACAAZgB1AG4AYwB0AGkAbwBuAHMACgBuAGUAdwAgAGMAbABvAHUAZAAuAEYAdQBuAGMAdABpAG8AbgAoAGgAZQBsAGwAbwBfAHcAbwByAGwAZAApADsACgAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAAIAAgACAACgAvAC8AIACRISAAUwB3AGkAdABjAGgAIABmAGkAbABlAHMAIABhAG4AZAAgAHMAZQBlACAAbwB0AGgAZQByACAAZQB4AGEAbQBwAGwAZQBzACAAdwBpAHQAaAAgAG0AbwByAGUACgAvAC8AIABlAHgAcABsAGUAbgBhAHQAaQBvAG4AcwAgAGEAYgBvAHYAZQAuAA%3D%3D)中使用 Wing 查看結構和範例。 如果你比較像輔導員。看這個！ https://www.youtube.com/watch?v=wzqCXrsKWbo Wing 在 GitHub 上擁有超過 3500 個 Star，發布了 1500 多個版本，但仍未進入 v1 版本，這意味著意義重大。 去嘗試一下，做一些很酷的事情吧！ https://git.new/wing-repo 星翼 ⭐️ --- 開發者生態系統不斷發展，許多開發者圍繞 React 建置了一些獨特的東西。 我不會介紹如何使用 React，因為這是一個非常廣泛的主題，我在最後貼了一些資源來幫助您學習 React。 但為了幫助您建立出色的 React 專案，我們介紹了 25 個開源專案，您可以使用它們來使您的工作更輕鬆。 這將有大量的資源、想法和概念。 我甚至會給你一些學習資源，以及一些產品的專案範例來學習 React。 一切都是免費的，而且只有 React。 讓我們涵蓋這一切！ --- 1. [Mantine Hooks](https://www.npmjs.com/package/@mantine/hooks) - 用於狀態和 UI 管理的 React hooks。 -------------------------------------------------------------------------------------------- ![曼丁鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9gxhpt4zpmxgg2cfbqi.png) 這可能不是專門針對 React 的，但是您可以使用這些鉤子來使您的工作更輕鬆。這些鉤子隨時可用，每個鉤子都有許多選項。 如果我必須評價的話，這將是每個人都可以使用的最有用的專案，而不是從頭開始編寫程式碼。 相信我，獲得 60 多個 Hooks 是一件大事，因為他們有一個簡單的方法讓您可以透過簡單的文件查看每個 Hooks 的演示。 開始使用以下 npm 指令。 ``` npm install @mantine/hooks ``` 這就是如何使用`useScrollIntoView`作為 mantine 掛鉤的一部分。 ``` import { useScrollIntoView } from '@mantine/hooks'; import { Button, Text, Group, Box } from '@mantine/core'; function Demo() { const { scrollIntoView, targetRef } = useScrollIntoView<HTMLDivElement>({ offset: 60, }); return ( <Group justify="center"> <Button onClick={() => scrollIntoView({ alignment: 'center', }) } > Scroll to target </Button> <Box style={{ width: '100%', height: '50vh', backgroundColor: 'var(--mantine-color-blue-light)', }} /> <Text ref={targetRef}>Hello there</Text> </Group> ); } ``` 它們幾乎擁有從本地儲存到分頁、滾動視圖、交叉點，甚至一些非常酷的實用程式（例如滴管和文字選擇）的所有功能。這實在太有幫助了！ ![滴管](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pighzv57fvyp5uxvw8dz.png) 您可以閱讀[文件](https://mantine.dev/hooks/use-click-outside/)。 如果您正在尋找更多選項，您也可以使用[替代庫](https://antonioru.github.io/beautiful-react-hooks/)。 他們在 GitHub 上擁有超過 23k star，但這不僅僅是為了 hooks，因為他們是 React 的元件庫。 隨著`v7`版本的發布，它的每週下載量已超過 38 萬次，這表明它們正在不斷改進且值得信賴。 https://github.com/mantinedev/mantine Star Mantine Hooks ⭐️ --- 2. [React Grid Layout](https://github.com/react-grid-layout/react-grid-layout) - 可拖曳且可調整大小的網格佈局，具有響應式斷點。 -------------------------------------------------------------------------------------------------------- ![反應網格佈局](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyg7g1bm1d3hvkexrnh3.png) React-Grid-Layout 是專為 React 應用程式建構的響應式網格佈局系統。 透過支援可拖曳、可調整大小和靜態小部件，它提供了使用網格的簡單解決方案。 與 Packery 或 Gridster 等類似系統不同，React-Grid-Layout 不含 jQuery，確保輕量級且高效的實作。 它與伺服器渲染應用程式的無縫整合以及序列化和恢復佈局的能力使其成為開發人員在 React 專案中使用網格佈局的寶貴工具。 開始使用以下 npm 指令。 ``` npm install react-grid-layout ``` 這就是如何使用響應式網格佈局。 ``` import { Responsive as ResponsiveGridLayout } from "react-grid-layout"; class MyResponsiveGrid extends React.Component { render() { // {lg: layout1, md: layout2, ...} const layouts = getLayoutsFromSomewhere(); return ( <ResponsiveGridLayout className="layout" layouts={layouts} breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }} cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }} > <div key="1">1</div> <div key="2">2</div> <div key="3">3</div> </ResponsiveGridLayout> ); } } ``` 您可以閱讀[文件](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#installation)並查看[演示](https://react-grid-layout.github.io/react-grid-layout/examples/0-showcase.html)。有一系列[演示](https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#demos)，甚至可以透過點擊“查看下一個範例”來獲得。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 該專案在 GitHub 上有超過 19k+ 的星星，有超過 16k+ 的開發者使用，並且[npm 套件](https://www.npmjs.com/package/react-grid-layout)的每週下載量超過 600k+。 https://github.com/react-grid-layout/react-grid-layout 明星 React 網格佈局 ⭐️ --- 3. [React Spectrum](https://github.com/adobe/react-spectrum) - 提供出色使用者體驗的程式庫和工具的集合。 ----------------------------------------------------------------------------------- ![反應譜](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4wkgbdpd1gve36vgjne.png) React Spectrum 是一個庫和工具的集合，可幫助您建立自適應、可存取且強大的使用者體驗。 它們提供了太多的東西，以至於很難在一篇文章中涵蓋所有內容。 總的來說，他們提供了這四個庫。 ![反應譜](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m97vdq3x7nllmhyjy7p9.png) - [反應譜](https://react-spectrum.adobe.com/react-spectrum/index.html) - [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) - 一組龐大的 React Hooks，為您的設計系統提供跨平台狀態管理。 - [反應詠嘆調](https://react-spectrum.adobe.com/react-aria/index.html) - [國際化](https://react-spectrum.adobe.com/internationalized/index.html) 我們將了解一些有關 React Aria 的內容，它是一個無樣式 React 元件和鉤子庫，可幫助您為應用程式建立可存取的、高品質的 UI 元件。 它經過了各種設備、互動方式和輔助技術的精心測試，以確保為所有用戶提供最佳體驗。 開始使用以下 npm 指令。 ``` npm i react-aria-components ``` 這就是建立自訂`select`的方法。 ``` import {Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue} from 'react-aria-components'; <Select> <Label>Favorite Animal</Label> <Button> <SelectValue /> <span aria-hidden="true">▼</span> </Button> <Popover> <ListBox> <ListBoxItem>Cat</ListBoxItem> <ListBoxItem>Dog</ListBoxItem> <ListBoxItem>Kangaroo</ListBoxItem> </ListBox> </Popover> </Select> ``` 相信我，出於學習目的，這是一座金礦。 ![選擇的設計結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndy61o8vtjjbq78e8vl8.png) 他們使用自己強大的[40 多個樣式元件](https://opensource.adobe.com/spectrum-css/)，這比通常提供的要多得多。他們也有自己的一套[設計系統，](https://spectrum.adobe.com/)例如字體、UI、版面、動作等等。 ![造型元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a047jcb2ou7h057yf2d4.png) ![造型元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1w5jq1vfbhd6o9c9ehm.png) 您可以詳細了解[Spectrum](https://react-spectrum.adobe.com/index.html)及其[架構](https://react-spectrum.adobe.com/architecture.html)。 他們在 GitHub 上擁有超過 11,000 顆星，這表明了他們的質量，儘管他們並不廣為人知。研究它們可以為您建立圖書館提供寶貴的見解。 https://github.com/adobe/react-spectrum Star React Spectrum ⭐️ --- 4.[保留 React](https://github.com/StaticMania/keep-react) - Tailwind CSS 和 React.js 的 UI 元件庫。 ------------------------------------------------------------------------------------------- ![保持反應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s2z1xig75on0j2gjt1g.png) Keep React 是一個基於 Tailwind CSS 和 React.js 建立的開源元件庫。它提供了一組多功能的預先設計的 UI 元件，使開發人員能夠簡化現代、響應式且具有視覺吸引力的 Web 應用程式的建立。 開始使用以下 npm 指令。 ``` npm i keep-react ``` 這就是使用時間軸的方法。 ``` "use client"; import { Timeline } from "keep-react"; import { CalendarBlank } from "phosphor-react"; export const TimelineComponent = () => { return ( <Timeline horizontal={true}> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.0.0</Timeline.Title> <Timeline.Time>Released on December 2, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.1.0</Timeline.Title> <Timeline.Time>Released on December 23, 2021</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> <Timeline.Item> <Timeline.Point icon={<CalendarBlank size={16} />} /> <Timeline.Content> <Timeline.Title>Keep Library v1.3.0</Timeline.Title> <Timeline.Time>Released on January 5, 2022</Timeline.Time> <Timeline.Body> Get started with dozens of web components and interactive elements. </Timeline.Body> </Timeline.Content> </Timeline.Item> </Timeline> ); } ``` 輸出如下。 ![時間軸元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22pagugp45z68jap3en.png) 流暢的小動畫讓這一切都是值得的，如果你想快速建立一個 UI，沒有任何麻煩，你可以使用它。 ![上傳](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfy9f9w0nc6ipn6wigil.png) ![通知](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zpwcnozi5ye3wpnev1g.png) 您可以閱讀[文件](https://react.keepdesign.io/docs/getting-started/Introduction)並查看[故事書](https://react-storybook.keepdesign.io/?path=/docs/components-accordion--docs)以進行詳細的使用測驗。 該專案在 GitHub 上有超過 1000 顆星，而且它的一些元件使用起來非常方便。 https://github.com/StaticMania/keep-react Star Keep React ⭐️ --- 5. [React Content Loader](https://github.com/danilowoz/react-content-loader) - SVG 支援的元件，可輕鬆建立骨架載入。 --------------------------------------------------------------------------------------------------- ![反應內容載入器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8g2yc0zush5vfgwo6hv.png) 該專案為您提供了一個由 SVG 驅動的元件，可以輕鬆建立佔位符載入（如 Facebook 的卡片載入）。 在載入狀態期間使用骨架來向使用者指示內容仍在載入。 總的來說，這是一個非常方便的專案，可以增強整體使用者體驗。 開始使用以下 npm 指令。 ``` npm i react-content-loader --save ``` 您可以這樣使用它。 ``` import React from "react" import ContentLoader from "react-content-loader" const MyLoader = (props) => ( <ContentLoader speed={2} width={400} height={160} viewBox="0 0 400 160" backgroundColor="#f3f3f3" foregroundColor="#ecebeb" {...props} > <rect x="48" y="8" rx="3" ry="3" width="88" height="6" /> <rect x="48" y="26" rx="3" ry="3" width="52" height="6" /> <rect x="0" y="56" rx="3" ry="3" width="410" height="6" /> <rect x="0" y="72" rx="3" ry="3" width="380" height="6" /> <rect x="0" y="88" rx="3" ry="3" width="178" height="6" /> <circle cx="20" cy="20" r="20" /> </ContentLoader> ) export default MyLoader ``` ![輸出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvqlf6fmg2fayd29ojr.png) 您甚至可以拖曳單一骨架或使用為 Facebook 和 Instagram 等不同社群媒體預先定義的骨架。 您可以閱讀[文件](https://github.com/danilowoz/react-content-loader?tab=readme-ov-file#gettingstarted)並查看[演示](https://skeletonreact.com/)。 該專案在 GitHub 上擁有 13k+ Stars，並在 GitHub 上有 45k+ 開發人員使用。 https://github.com/danilowoz/react-content-loader Star React 內容載入器 ⭐️ --- 6. [React PDF](https://github.com/diegomura/react-pdf) - 使用 React 建立 PDF 檔案。 ---------------------------------------------------------------------------- ![反應 pdf](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jd7sz8eqda09rgjpf13.png) 該套件用於使用 React 建立 PDF。 開始使用以下 npm 指令。 ``` npm install @react-pdf/renderer --save ``` 您可以這樣使用它。 ``` import React from 'react'; import { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer'; // Create styles const styles = StyleSheet.create({ page: { flexDirection: 'row', backgroundColor: '#E4E4E4', }, section: { margin: 10, padding: 10, flexGrow: 1, }, }); // Create Document Component const MyDocument = () => ( <Document> <Page size="A4" style={styles.page}> <View style={styles.section}> <Text>Section #1</Text> </View> <View style={styles.section}> <Text>Section #2</Text> </View> </Page> </Document> ); ``` ![輸出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb5fpfzijv3g5fi5utmw.png) ![輸出pdf分頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f46t80n0redm14icia1r.png) 您可以閱讀[文件](https://react-pdf.org/)並查看[演示](https://react-pdf.org/repl)。 React-pdf 現在提供了一個名為`usePDF`的鉤子，可以透過 React hook API 存取所有 PDF 建立功能。如果您需要更多控製文件的呈現方式或更新頻率，這非常有用。 ``` const [instance, update] = usePDF({ document }); ``` 該專案在 GitHub 上有 13k+ Stars，有超過 270 個版本，[每週下載量超過 400k](https://www.npmjs.com/package/@react-pdf/renderer) ，這是一個好兆頭。 https://github.com/diegomura/react-pdf Star React PDF ⭐️ --- 7. [Recharts](https://github.com/recharts/recharts) - 使用 React 和 D3 建立的重新定義的圖表庫。 -------------------------------------------------------------------------------- ![重新繪製圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6817tmlix6n7wtgp1yq.png) 該庫的主要目的是幫助您輕鬆地在 React 應用程式中編寫圖表。 Recharts 的主要原則是。 1. 只需使用 React 元件進行部署即可。 2. 原生 SVG 支持，輕量級，僅依賴一些 D3 子模組。 3. 聲明性元件、圖表元件純粹是表示性的。 開始使用以下 npm 指令。 ``` npm install recharts ``` 您可以這樣使用它。 ``` <LineChart width={500} height={300} data={data} accessibilityLayer> <XAxis dataKey="name"/> <YAxis/> <CartesianGrid stroke="#eee" strokeDasharray="5 5"/> <Line type="monotone" dataKey="uv" stroke="#8884d8" /> <Line type="monotone" dataKey="pv" stroke="#82ca9d" /> <Tooltip/> </LineChart> ``` ![輸出](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqtp999q1ahq8ajmvuwf.png) 您可以閱讀[文件](https://recharts.org/en-US/guide)並查看有關[Storybook](https://recharts.org/en-US/storybook)的更多資訊。 他們提供了大量的選項來自訂它，這就是開發人員喜歡它的原因。他們也提供一般常見問題的[wiki](https://github.com/recharts/recharts/wiki)頁面。 您也可以在此處的codesandbox 上嘗試。 https://codesandbox.io/embed/kec3v?view=Editor+%2B+Preview&module=%2Fsrc%2Findex.tsx 該專案在 GitHub 上有 22k+ Stars，有 200k+ 開發人員使用。 https://github.com/recharts/recharts 明星 Recharts ⭐️ --- 8. [React Joyride](https://github.com/gilbarbara/react-joyride) - 在您的應用程式中建立導遊。 ------------------------------------------------------------------------------- ![反應兜風](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ph7rt2bxqbxi67r47on8.png) ![反應兜風](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ov4wzohwszgv5v06cin4.png) 導覽是向新用戶展示您的應用程式或解釋新功能的絕佳方式。它改善了用戶體驗並可以創造個人化的觸感。 開始使用以下 npm 指令。 ``` npm i react-joyride ``` 您可以這樣使用它。 ``` import React, { useState } from 'react'; import Joyride from 'react-joyride'; /* * If your steps are not dynamic you can use a simple array. * Otherwise you can set it as a state inside your component. */ const steps = [ { target: '.my-first-step', content: 'This is my awesome feature!', }, { target: '.my-other-step', content: 'This another awesome feature!', }, ]; export default function App() { // If you want to delay the tour initialization you can use the `run` prop return ( <div> <Joyride steps={steps} /> ... </div> ); } ``` 它們還提供[元件列表](https://docs.react-joyride.com/custom-components)以及自訂預設用戶介面的簡單方法。 您可以閱讀[文件](https://docs.react-joyride.com/)並查看[演示](https://react-joyride.com/)。 您也可以嘗試[codesandbox](https://codesandbox.io/p/devbox/github/gilbarbara/react-joyride-demo/tree/main/?embed=1)上的東西。 他們在 GitHub 上有超過 6k 顆星，npm 套件每週下載量超過 25 萬次。 https://github.com/gilbarbara/react-joyride Star React Joyride ⭐️ --- 9. [SVGR](https://github.com/gregberge/svgr) - 將 SVG 轉換為 React 元件。 ------------------------------------------------------------------ ![svgr](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94hpre3yl3ttu5zdexsv.png) SVGR 是一個將 SVG 轉換為 React 元件的通用工具。 它需要一個原始的 SVG 並將其轉換為隨時可用的 React 元件。 開始使用以下 npm 指令。 ``` npm install @svgr/core ``` 例如，您採用這個 SVG。 ``` <?xml version="1.0" encoding="UTF-8"?> <svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch --> <title>Rectangle 5</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855" > <g id="Controls/Settings" transform="translate(80.000000, 0.000000)"> <g id="Content" transform="translate(0.000000, 64.000000)"> <g id="Group" transform="translate(24.000000, 56.000000)"> <g id="Group-2"> <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect> </g> </g> </g> </g> </g> </g> </svg> ``` 執行SVGR後，將轉換為. ``` import * as React from 'react' const SvgComponent = (props) => ( <svg width="1em" height="1em" viewBox="0 0 48 1" {...props}> <path d="M0 0h48v1H0z" fill="currentColor" fillRule="evenodd" /> </svg> ) export default SvgComponent ``` 它使用[SVGO](https://github.com/svg/svgo)優化 SVG，並使用 Prettier 格式化程式碼。 將 HTML 轉換為 JSX 需要幾個步驟： 1. 將 SVG 轉換為 HAST (HTML AST) 2. 將 HAST 轉換為 Babel AST (JSX AST) 3. 使用 Babel 轉換 AST（重新命名屬性、更改屬性值…） 您可以在[Playground](https://react-svgr.com/playground/)閱讀[文件](https://react-svgr.com/docs/getting-started)並檢查內容。 該專案在 GitHub 上擁有 10k+ Stars，有超過 800 萬開發者使用，npm 上每週下載量超過 800k。 https://github.com/gregberge/svgr 明星 SVGR ⭐️ --- 10. [React Sortable Tree](https://github.com/frontend-collective/react-sortable-tree) - 用於巢狀資料和層次結構的拖放可排序元件。 ------------------------------------------------------------------------------------------------------------ ![反應可排序樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/907c4rnmev2wx1abq0r7.png) 一個 React 元件，支援對分層資料進行拖放排序。 ![反應可排序樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z4tm32vuteqaw5m7crag.png) 開始使用以下 npm 指令。 ``` npm install react-sortable-tree --save ``` 您可以這樣使用它。 ``` import React, { Component } from 'react'; import SortableTree from 'react-sortable-tree'; import 'react-sortable-tree/style.css'; // This only needs to be imported once in your app export default class Tree extends Component { constructor(props) { super(props); this.state = { treeData: [ { title: 'Chicken', children: [{ title: 'Egg' }] }, { title: 'Fish', children: [{ title: 'fingerline' }] }, ], }; } render() { return ( <div style={{ height: 400 }}> <SortableTree treeData={this.state.treeData} onChange={treeData => this.setState({ treeData })} /> </div> ); } } ``` 檢查由此獲得的各種[道具選項](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#props)和[主題](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#featured-themes)。 您可以閱讀[文件](https://github.com/frontend-collective/react-sortable-tree?tab=readme-ov-file#getting-started)並查看[Storybook](https://frontend-collective.github.io/react-sortable-tree/?path=/story/basics--minimal-implementation) ，以獲取一些基本和高級功能的演示。 它可能不會被積極維護（仍然沒有存檔），因此您也可以使用[維護的 fork 版本](https://github.com/nosferatu500/react-sortable-tree)。 該專案在 GitHub 上擁有超過 4,500 個 Star，並被超過 5,000 名開發人員使用。 https://github.com/frontend-collective/react-sortable-tree Star React 可排序樹 ⭐️ --- 11. [React Hot Toast](https://github.com/timolins/react-hot-toast) - 冒煙的 Hot React 通知。 -------------------------------------------------------------------------------------- ![反應熱吐司](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw4veo990lspkchhwz64.png) React Hot Toast 透過簡單的自訂選項提供了驚人的 🔥 預設體驗。它利用 Promise API 進行自動加載，確保平穩過渡。 它重量輕，不到 5kb，但仍然可以存取，同時為開發人員提供了像`useToaster()`這樣的無頭鉤子。 首先將 Toaster 加入到您的應用程式中。它將負責渲染發出的所有通知。現在您可以從任何地方觸發 toast() ！ 開始使用以下 npm 指令。 ``` npm install react-hot-toast ``` 這就是它的易用性。 ``` import toast, { Toaster } from 'react-hot-toast'; const notify = () => toast('Here is your toast.'); const App = () => { return ( <div> <button onClick={notify}>Make me a toast</button> <Toaster /> </div> ); }; ``` ![主題選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tl8ezjabacdllw8qnd41.png) ![主題選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zksldf8goqbytcuumhac.png) 他們有很多自訂選項，但`useToaster()`掛鉤為您提供了一個無頭系統，可以為您管理通知狀態。這使得建立您的通知系統變得更加容易。 您可以閱讀[文件](https://react-hot-toast.com/docs)、[樣式指南](https://react-hot-toast.com/docs/styling)並查看[示範](https://react-hot-toast.com/)。 該專案在 GitHub 上有 8k+ Stars，有 230k+ 開發者使用。 https://github.com/timolins/react-hot-toast Star React Hot Toast ⭐️ --- 12. [Payload](https://github.com/payloadcms/payload) - 建立現代後端+管理 UI 的最佳方式。 -------------------------------------------------------------------------- ![有效負載](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xev60f07ilzqlfdwni0p.png) Payload 是一個無頭 CMS 和應用程式框架。它旨在促進您的開發過程，但重要的是，當您的應用程式變得更加複雜時，不要妨礙您。 Payload 沒有黑魔法，完全開源，它既是一個應用程式框架，也是一個無頭 CMS。它確實是適用於 TypeScript 的 Rails，並且您會獲得一個管理面板。您可以使用此[YouTube 影片](https://www.youtube.com/watch?v=In_lFhzmbME)了解有關 Payload 的更多資訊。 https://www.youtube.com/watch?v=In\_lFhzmbME 您可以透過使用Payload來了解[其中涉及的概念](https://payloadcms.com/docs/getting-started/concepts)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqn1uqupsdkexoq913mm.png) 有效負載透過您選擇的資料庫適配器與您的資料庫進行互動。目前，Payload 正式支援兩種資料庫適配器： 1. MongoDB 與 Mongoose 2. Postgres 帶毛毛雨 開始使用以下命令。 ``` npx create-payload-app@latest ``` 您必須產生 Payload 金鑰並更新`server.ts`以初始化 Payload。 ``` import express from 'express' import payload from 'payload' require('dotenv').config() const app = express() const start = async () => { await payload.init({ secret: process.env.PAYLOAD_SECRET, express: app, }) app.listen(3000, async () => { console.log( "Express is now listening for incoming connections on port 3000." ) }) } start() ``` ![使用 nextjs 進行有效負載](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ghnnf34k70hpb0zjsf5f.png) 您可以閱讀[文件](https://payloadcms.com/docs/getting-started/what-is-payload)並查看[演示](https://demo.payloadcms.com/?_gl=1*9x0za3*_ga*NzEzMzkwNzIuMTcxMDE2NDk1MA..*_ga_FLQ5THRMZQ*MTcxMDE2NDk1MC4xLjEuMTcxMDE2NDk1MS4wLjAuMA..)。 他們還提供與 Payload + Stripe 無縫整合的[電子商務模板](https://github.com/payloadcms/payload/tree/main/templates/ecommerce)。此範本具有令人驚嘆的、功能齊全的前端，包括購物車、結帳流程、訂單管理等元件。 Payload 在 GitHub 上擁有 18k+ Stars，並且有超過 290 個版本，因此它們不斷改進，尤其是在資料庫支援方面。 https://github.com/payloadcms/payload 明星有效負載 ⭐️ --- 13. [React Player](https://github.com/cookpete/react-player) - 用於播放各種 URL 的 React 元件。 ------------------------------------------------------------------------------------- ![反應玩家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/immw7vlgrdfbfxgts0a0.png) 用於播放各種 URL 的 React 元件，包括檔案路徑、YouTube、Facebook、Twitch、SoundCloud、Streamable、Vimeo、Wistia、Mixcloud、DailyMotion 和 Kaltura。您可以看到[支援的媒體](https://github.com/cookpete/react-player?tab=readme-ov-file#supported-media)清單。 ReactPlayer 的維護工作由 Mux 接管，這使它們成為一個不錯的選擇。 開始使用以下 npm 指令。 ``` npm install react-player ``` 您可以這樣使用它。 ``` import React from 'react' import ReactPlayer from 'react-player' // Render a YouTube video player <ReactPlayer url='https://www.youtube.com/watch?v=LXb3EKWsInQ' /> // If you only ever use one type, use imports such as react-player/youtube to reduce your bundle size. // like this: import ReactPlayer from 'react-player/youtube' ``` 您也可以使用`react-player/lazy`為您傳入的URL 延遲載入適當的播放器。這會為您的輸出加入幾個reactPlayer 區塊，但會減少主包的大小。 ``` import React from 'react' import ReactPlayer from 'react-player/lazy' // Lazy load the YouTube player <ReactPlayer url='https://www.youtube.com/watch?v=ysz5S6PUM-U' /> ``` 您可以閱讀[文件](https://github.com/cookpete/react-player?tab=readme-ov-file#props)並查看[演示](https://cookpete.github.io/react-player/)。他們提供了大量的選項，包括加入字幕並以簡單的方式使其響應。 它們在 GitHub 上擁有超過 8000 顆星，被超過 135,000 名開發人員使用，並且 npm 軟體包[每週的下載量超過 800k](https://www.npmjs.com/package/react-player) 。 https://github.com/cookpete/react-player 明星 React 播放器 ⭐️ --- 14. [Victory](https://github.com/FormidableLabs/victory) - 用於建立互動式資料視覺化的 React 元件。 ---------------------------------------------------------------------------------- ![勝利](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbayfgbrutvffkk2slja.png) Victory 是一個可組合 React 元件的生態系統，用於建立互動式資料視覺化。 ![元件類型](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ua3jegboex4n21aid20.png) 開始使用以下 npm 指令。 ``` npm i --save victory ``` 您可以這樣使用它。 ``` <VictoryChart domainPadding={{ x: 20 }} > <VictoryHistogram style={{ data: { fill: "#c43a31" } }} data={sampleHistogramDateData} bins={[ new Date(2020, 1, 1), new Date(2020, 4, 1), new Date(2020, 8, 1), new Date(2020, 11, 1) ]} /> </VictoryChart> ``` 這就是它的渲染方式。他們還提供通常有用的動畫和主題選項。 ![勝利圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdxztxui9zjtue0fz1jo.png) 您可以閱讀[文件](https://commerce.nearform.com/open-source/victory/docs)並按照[教學](https://commerce.nearform.com/open-source/victory/docs/native)開始。他們提供大約 15 種不同的圖表選項。 它也可用於[React Native（文件）](https://commerce.nearform.com/open-source/victory/docs/native) ，所以這是一個優點。我還建議您查看他們的常見[問題解答](https://commerce.nearform.com/open-source/victory/docs/faq#frequently-asked-questions-faq)，其中描述了常見問題的程式碼解決方案和解釋，例如樣式、註釋（標籤）、處理軸。 該專案在 GitHub 上擁有 10k+ Stars，並在 GitHub 上有 23k+ 開發人員使用。 https://github.com/FormidableLabs/victory 勝利之星 ⭐️ --- 15. [React Slick](https://github.com/akiran/react-slick) - React 輪播元件。 ---------------------------------------------------------------------- ![反應圓滑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fn2aafcxs281yliyyv0.png) React Slick 是一個使用 React 建構的輪播元件。它是一個光滑的旋轉木馬的反應端口 開始使用以下 npm 指令。 ``` npm install react-slick --save ``` 這是使用自訂分頁的方法。 ``` import React, { Component } from "react"; import Slider from "react-slick"; import { baseUrl } from "./config"; function CustomPaging() { const settings = { customPaging: function(i) { return ( <a> <img src={`${baseUrl}/abstract0${i + 1}.jpg`} /> </a> ); }, dots: true, dotsClass: "slick-dots slick-thumb", infinite: true, speed: 500, slidesToShow: 1, slidesToScroll: 1 }; return ( <div className="slider-container"> <Slider {...settings}> <div> <img src={baseUrl + "/abstract01.jpg"} /> </div> <div> <img src={baseUrl + "/abstract02.jpg"} /> </div> <div> <img src={baseUrl + "/abstract03.jpg"} /> </div> <div> <img src={baseUrl + "/abstract04.jpg"} /> </div> </Slider> </div> ); } export default CustomPaging; ``` ![自訂分頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hh3qtgnftoapsrdx8w4y.png) 您可以閱讀有關可用的[prop 選項](https://react-slick.neostack.com/docs/api)和[方法](https://react-slick.neostack.com/docs/api#methods)的資訊。 您可以閱讀[文件](https://react-slick.neostack.com/docs/get-started)和所有帶有程式碼和輸出[的範例集](https://react-slick.neostack.com/docs/example/)。 他們在 GitHub 上有超過 11k 顆星，並且有超過 36 萬開發者在 GitHub 上使用它。 https://github.com/akiran/react-slick Star React Slick ⭐️ --- 16. [Medusa](https://github.com/medusajs/medusa) - 數位商務的建構模組。 ------------------------------------------------------------- ![美杜莎](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7vd1qsx7l1jdsz2cnq0.png) Medusa 是一組商務模組和工具，可讓您建立豐富、可靠且高效能的商務應用程式，而無需重新發明核心商務邏輯。 這些模組可以客製化並用於建立高級電子商務商店、市場或任何需要基礎商務原語的產品。所有模組都是開源的，可以在 npm 上免費取得。 開始使用以下 npm 指令。 ``` npm install medusa-react @tanstack/[email protected] @medusajs/medusa ``` 將其包含在`app.ts`中。 只有 MedusaProvider 的子級才能從其鉤子中受益。因此，Storefront 元件及其子元件現在可以使用 Medusa React 公開的鉤子。 ``` import { MedusaProvider } from "medusa-react" import Storefront from "./Storefront" import { QueryClient } from "@tanstack/react-query" import React from "react" const queryClient = new QueryClient() const App = () => { return ( <MedusaProvider queryClientProviderProps={{ client: queryClient }} baseUrl="http://localhost:9000" > <Storefront /> </MedusaProvider> ) } export default App ``` 例如，這就是您如何使用突變來建立購物車。 ``` import { useCreateCart } from "medusa-react" const Cart = () => { const createCart = useCreateCart() const handleClick = () => { createCart.mutate({}) // create an empty cart } return ( <div> {createCart.isLoading && <div>Loading...</div>} {!createCart.data?.cart && ( <button onClick={handleClick}> Create cart </button> )} {createCart.data?.cart?.id && ( <div>Cart ID: {createCart.data?.cart.id}</div> )} </div> ) } export default Cart ``` 他們提供了一套電子商務模組（大量選項），例如折扣、價目表、禮品卡等。 ![電子商務模組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x00lbkpny66esa1yep4u.png) 它們還提供了一種簡單的管理員和客戶身份驗證方法，您可以在[文件](https://docs.medusajs.com/)中閱讀。 他們提供了[nextjs 入門模板](https://docs.medusajs.com/starters/nextjs-medusa-starter)和[Medusa React](https://docs.medusajs.com/medusa-react/overview)作為 SDK。 該專案在 GitHub 上有 22k+ Stars，有 4k+ 開發者使用。 https://github.com/medusajs/medusa 明星美杜莎 ⭐️ --- 17. [React Markdown](https://github.com/remarkjs/react-markdown) - React 的 Markdown 元件. --------------------------------------------------------------------------------------- ![反應降價](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcl4bq3m0r415mknvv5h.png) Markdown 至關重要，使用 React 渲染它對於各種場景都非常有用。 它提供了一個 React 元件，能夠安全地將一串 Markdown 渲染到 React 元素中。您可以透過傳遞外掛程式並指定要使用的元件而不是標準 HTML 元素來自訂 Markdown 的轉換。 開始使用以下 npm 指令。 ``` npm i react-markdown ``` 您可以這樣使用它。 ``` import React from 'react' import {createRoot} from 'react-dom/client' import Markdown from 'react-markdown' import remarkGfm from 'remark-gfm' const markdown = `Just a link: www.nasa.gov.` createRoot(document.body).render( <Markdown remarkPlugins={[remarkGfm]}>{markdown}</Markdown> ) ``` 等效的 JSX 是。 ``` <p> Just a link: <a href="http://www.nasa.gov">www.nasa.gov</a>. </p> ``` 他們還提供了一份[備忘錄](https://commonmark.org/help/)和一個十分鐘的逐步[教學](https://commonmark.org/help/tutorial/)。 ![教學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oboj1ooemoo2j9uh2d7.png) 您可以閱讀[文件](https://github.com/remarkjs/react-markdown?tab=readme-ov-file#install)並查看[演示](https://remarkjs.github.io/react-markdown/)。 該專案在 GitHub 上有 12k+ Stars，[每週下載量超過 2700k](https://www.npmjs.com/package/react-markdown) ，並被 200k+ 開發人員使用，證明了它的真正有用性。 https://github.com/remarkjs/react-markdown Star React Markdown ⭐️ --- 18. [React JSONSchema Form](https://github.com/rjsf-team/react-jsonschema-form) - 用於從 JSON Schema 建立 Web 表單。 ------------------------------------------------------------------------------------------------------------ ![反應 jsonform 模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36bma59hylme02fg5mmi.png) `react-jsonschema-form`會自動從 JSON Schema 產生 React 表單，使其非常適合僅使用 JSON schema 為任何資料產生表單。它提供了像 uiSchema 這樣的自訂選項來自訂預設主題之外的表單外觀。 開始使用以下 npm 指令。 ``` npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save ``` 您可以這樣使用它。 ``` import { RJSFSchema } from '@rjsf/utils'; import validator from '@rjsf/validator-ajv8'; const schema: RJSFSchema = { title: 'Todo', type: 'object', required: ['title'], properties: { title: { type: 'string', title: 'Title', default: 'A new task' }, done: { type: 'boolean', title: 'Done?', default: false }, }, }; const log = (type) => console.log.bind(console, type); render( <Form schema={schema} validator={validator} onChange={log('changed')} onSubmit={log('submitted')} onError={log('errors')} />, document.getElementById('app') ); ``` 他們提供[高級定制](https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/)選項，包括定制小部件。 您可以閱讀[文件](https://rjsf-team.github.io/react-jsonschema-form/docs/)並查看[即時遊樂場](https://rjsf-team.github.io/react-jsonschema-form/)。 它在 GitHub 上擁有超過 13k 個 Star，並被 5k+ 開發人員使用。他們在`v5`上發布了 190 多個版本，因此他們正在不斷改進。 https://github.com/rjsf-team/react-jsonschema-form Star React JSONSchema 表單 ⭐️ --- 19. [Craft.js](https://github.com/prevwong/craft.js) - 建立可擴充的拖放頁面編輯器。 --------------------------------------------------------------------- ![craft.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ydxmz82mswa2tlk5onbs.png) 頁面編輯器可以增強使用者體驗，但從頭開始建立頁面編輯器可能會令人望而生畏。現有庫提供具有可編輯元件的預先建置編輯器，但自訂通常需要修改庫本身。 Craft.js 透過模組化頁面編輯器元件、透過拖放功能簡化自訂以及渲染管理來解決這個問題。在 React 中設計你的編輯器，無需複雜的插件系統，專注於你的特定需求和規格。 開始使用以下 npm 指令。 ``` npm install --save @craftjs/core ``` 他們還提供了有關如何入門的[簡短教程](https://craft.js.org/docs/guides/basic-tutorial)。我不會介紹它，因為它非常簡單且詳細。 您可以閱讀[文件](https://craft.js.org/docs/overview)並查看[即時演示](https://craft.js.org/)以及另一個[即時範例](https://craft.js.org/examples/basic)。 它在 GitHub 上有大約 6k+ Stars，但考慮到它們正在改進，仍然很有用。 https://github.com/prevwong/craft.js Star Craft.js ⭐️ --- 20. [Gatsby](https://github.com/gatsbyjs/gatsby) - 最好的基於 React 的框架，具有內建的效能、可擴展性和安全性。 ------------------------------------------------------------------------------------ ![蓋茲比](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ybxi9gplvm2kr8abbtzy.png) Gatsby 是一個基於 React 的框架，使開發人員能夠建立閃電般快速的網站和應用程式，將動態渲染的靈活性與靜態網站生成的速度融為一體。 憑藉可自訂的 UI 和對各種資料來源的支援等功能，Gatsby 提供了無與倫比的控制和可擴展性。此外，它還可以自動進行效能最佳化，使其成為靜態網站的首選。 開始使用以下 npm 指令。 ``` npm init gatsby ``` 這就是如何在 Gatsby（反應元件）中使用`Link` 。 ``` import React from "react" import { Link } from "gatsby" const Page = () => ( <div> <p> Check out my <Link to="/blog">blog</Link>! </p> <p> {/* Note that external links still use `a` tags. */} Follow me on <a href="https://twitter.com/gatsbyjs">Twitter</a>! </p> </div> ) ``` 他們提供了一組[入門模板，](https://www.gatsbyjs.com/starters/)其中包含如何使用它、涉及的依賴項以及每個模板的演示。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8l35rwb1is60d5q506qu.png) 您可以閱讀有關 Gatsby 的一些[常見概念，](https://www.gatsbyjs.com/docs/conceptual/gatsby-concepts/)例如 React Hydration、Gatsby 建置流程等。 您可以閱讀[文件](https://www.gatsbyjs.com/docs/)並查看入門[教學課程](https://www.gatsbyjs.com/docs/tutorial/)。 Gatsby 在 GitHub 上擁有超過 55,000 顆星，並被超過 240,000 名開發者使用 https://github.com/gatsbyjs/gatsby 明星蓋茲比 ⭐️ --- 21. [Chat UI Kit React](https://github.com/chatscope/chat-ui-kit-react) - 在幾分鐘內使用 React 建立您的聊天 UI。 -------------------------------------------------------------------------------------------------- ![chatscope 聊天 ui 套件反應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ynb25x1se0riwbvq5uv.png) Chatscope 的聊天 UI 工具包是一個用於開發網頁聊天應用程式的開源 UI 工具包。 儘管該專案並未廣泛使用，但這些功能對於剛剛查看該專案的初學者來說還是很有用的。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1y87b1clbi00tojxgzi.png) 開始使用以下 npm 指令。 ``` npm install @chatscope/chat-ui-kit-react ``` 這就是建立 GUI 的方法。 ``` import styles from '@chatscope/chat-ui-kit-styles/dist/default/styles.min.css'; import { MainContainer, ChatContainer, MessageList, Message, MessageInput } from '@chatscope/chat-ui-kit-react'; <div style={{ position:"relative", height: "500px" }}> <MainContainer> <ChatContainer> <MessageList> <Message model={{ message: "Hello my friend", sentTime: "just now", sender: "Joe" }} /> </MessageList> <MessageInput placeholder="Type message here" /> </ChatContainer> </MainContainer> </div> ``` 您可以閱讀[文件](https://chatscope.io/docs/)。 故事書中有更[詳細的文件](https://chatscope.io/storybook/react/?path=/docs/documentation-introduction--docs)。 它提供了一些方便的元件，例如[`TypingIndicator`](https://chatscope.io/storybook/react/?path=/docs/components-typingindicator--docs) 、 [`Multiline Incoming`](https://chatscope.io/storybook/react/?path=/story/components-message--multiline-incoming)等等。 我知道你們中的一些人更喜歡透過部落格來了解整個結構，因此你可以閱讀使用 Chat UI Kit React 的 Rollbar 的[如何將 ChatGPT 與 React 整合](https://rollbar.com/blog/how-to-integrate-chatgpt-with-react/)。 您可以看到的一些演示： - [聊天機器人使用者介面](https://mars.chatscope.io/) - [與朋友聊天](https://chatscope.io/demo/chat-friends/)- 看看這個！ ![聊天朋友演示快照](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hyhqti9yl02rludkocy.png) https://github.com/chatscope/chat-ui-kit-react Star Chat UI Kit React ⭐️ --- 22. [Botonic](https://github.com/hubtype/botonic) - 用於建立會話應用程式的 React 框架。 ------------------------------------------------------------------------- ![植物性的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxeslrg9cjbkej0hcth4.png) Botonic 是一個全端 Javascript 框架，用於建立在多個平台上執行的聊天機器人和現代對話應用程式：Web、行動和訊息應用程式（Messenger、WhatsApp、Telegram 等）。它建構在 ⚛️ React、Serverless 和 Tensorflow.js 之上。 如果您不了解對話應用程式的概念，可以在[官方部落格](https://www.hubtype.com/blog/what-are-conversational-apps)上閱讀它們。 使用 Botonic，您可以建立包含最佳文字外介面（簡單性、自然語言互動）和圖形介面（多媒體、視覺上下文、豐富互動）的會話應用程式。 這是一個強大的組合，可以提供比僅依賴文字和 NLP 的傳統聊天機器人更好的用戶體驗。 這就是 Botonic 的簡單方式。 ``` export default class extends React.Component { static async botonicInit({ input, session, params, lastRoutePath }) { await humanHandOff(session)) } render() { return ( <Text> Thanks for contacting us! One of our agents will attend you as soon as possible. </Text> ) } } ``` 它們也支援 TypeScript，所以這是一個優點。 您可以看到一些使用 Botonic 建置的[範例](https://botonic.io/examples/)及其原始程式碼。 您可以閱讀[文件](https://botonic.io/docs/welcome)以及如何[從頭開始建立會話應用程式](https://botonic.io/docs/create-convapp)。 https://github.com/hubtype/botonic Star Botonic ⭐️ --- 23. [React Flowbite](https://github.com/themesberg/flowbite-react) - 為 Flowbite 和 Tailwind CSS 建構的 React 元件. ------------------------------------------------------------------------------------------------------------ ![反應流咬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vt1coti9k3ppmv0y28u.png) 每個人對他們想要用來建立網站的使用者介面都有不同的偏好。 Flowbite React 是 UI 元件的開源集合，在 React 中建置，具有來自 Tailwind CSS 的實用程式類，您可以將其用作使用者介面和網站的起點。 開始使用以下 npm 指令。 ``` npm i flowbite-react ``` 這是一起使用表格和鍵盤元件的方法。 ``` 'use client'; import { Kbd, Table } from 'flowbite-react'; import { MdKeyboardArrowDown, MdKeyboardArrowLeft, MdKeyboardArrowRight, MdKeyboardArrowUp } from 'react-icons/md'; function Component() { return ( <Table> <Table.Head> <Table.HeadCell>Key</Table.HeadCell> <Table.HeadCell>Description</Table.HeadCell> </Table.Head> <Table.Body className="divide-y"> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Shift</Kbd> <span>or</span> <Kbd>Tab</Kbd> </Table.Cell> <Table.Cell>Navigate to interactive elements</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <Kbd>Enter</Kbd> or <Kbd>Spacebar</Kbd> </Table.Cell> <Table.Cell>Ensure elements with ARIA role="button" can be activated with both key commands.</Table.Cell> </Table.Row> <Table.Row className="bg-white dark:border-gray-700 dark:bg-gray-800"> <Table.Cell className="whitespace-nowrap font-medium text-gray-900 dark:text-white"> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowUp} /> <Kbd icon={MdKeyboardArrowDown} /> </span> <span> or </span> <span className="inline-flex gap-1"> <Kbd icon={MdKeyboardArrowLeft} /> <Kbd icon={MdKeyboardArrowRight} /> </span> </Table.Cell> <Table.Cell>Choose and activate previous/next tab.</Table.Cell> </Table.Row> </Table.Body> </Table> ); } ``` ![kbd 和表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnu5xqlqob72t9oxkb4k.png) 您可以閱讀[文件](https://www.flowbite-react.com/docs/getting-started/introduction)並查看[Storybook](https://storybook.flowbite-react.com/?path=/story/components-accordion--always-open)中的功能。您也可以查看[元件](https://www.flowbite-react.com/docs/components/accordion)清單。 在我看來，如果您想快速設定 UI，但又不想最終為高品質的開源專案使用預先定義的庫元件，那麼這很好。 該專案在 GitHub 上擁有超過 1,500 顆星，擁有超過 37,000 名開發者的用戶群，並受到社群的廣泛認可和信任，使其成為一個可靠的選擇。 https://github.com/themesberg/flowbite-react Star React Flowbite ⭐️ --- 24. [DND 套件](https://github.com/clauderic/dnd-kit)- 輕量級、高效能、可存取且可擴展的拖放功能。 ------------------------------------------------------------------------- ![免打擾套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oz5m8hf4t4u4v2jzusl1.png) 這是一個強大的 React 拖放工具包，擁有可自訂的碰撞檢測、多個啟動器和自動滾動等功能。 它的設計考慮到了 React，提供了方便集成的鉤子，無需進行重大的架構更改。支援從清單到網格和虛擬化清單的各種用例，它既是動態的又是輕量級的，沒有外部相依性。 開始使用以下 npm 指令。 ``` npm install @dnd-kit/core ``` 這就是建立可拖放元件的方法。 `Example.jsx` ``` import React, {useState} from 'react'; import {DndContext} from '@dnd-kit/core'; import {Draggable} from './Draggable'; import {Droppable} from './Droppable'; function Example() { const [parent, setParent] = useState(null); const draggable = ( <Draggable id="draggable"> Go ahead, drag me. </Draggable> ); return ( <DndContext onDragEnd={handleDragEnd}> {!parent ? draggable : null} <Droppable id="droppable"> {parent === "droppable" ? draggable : 'Drop here'} </Droppable> </DndContext> ); function handleDragEnd({over}) { setParent(over ? over.id : null); } } ``` `Droppable.jsx` ``` import React from 'react'; import {useDroppable} from '@dnd-kit/core'; export function Droppable(props) { const {isOver, setNodeRef} = useDroppable({ id: props.id, }); const style = { opacity: isOver ? 1 : 0.5, }; return ( <div ref={setNodeRef} style={style}> {props.children} </div> ); } ``` `Draggable.jsx` ``` import React from 'react'; import {useDraggable} from '@dnd-kit/core'; import {CSS} from '@dnd-kit/utilities'; function Draggable(props) { const {attributes, listeners, setNodeRef, transform} = useDraggable({ id: props.id, }); const style = { // Outputs `translate3d(x, y, 0)` transform: CSS.Translate.toString(transform), }; return ( <button ref={setNodeRef} style={style} {...listeners} {...attributes}> {props.children} </button> ); } ``` 我將可拖曳元件放在可放置元件上。 ![自訂元件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cf98be5hq9am3f2s1dwv.png) 您可以閱讀[文件](https://docs.dndkit.com/)以及滑鼠和指標等[感測器的選項](https://docs.dndkit.com/introduction/installation#core-library)。 它在 GitHub 上擁有 10k+ Stars，並被 GitHub 上 47k+ 開發人員使用。 https://github.com/clauderic/dnd-kit 明星免打擾套件 ⭐️

0個讚   0留言 104瀏覽

✌️我在日常生活中使用的 4 個核心開發工具🚀😎

長話短說 ---- 本文列出了 2024 年我作為開發人員在日常生活中最常使用的 4 個工具。✅ 這些工具旨在提高您的編輯技能、終端導航、筆記以及在應用程式容器化之外使用 Docker。另外，最後我還幫大家準備了一個小驚喜。 😉 > 如果您沒有使用本文中至少提到的 1-2 個工具，那麼我告訴您，朋友，您就錯過了。絕對至少嘗試其中的一些。以後你會感謝我的。 😎 ![贓物人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66ivyn1gsm2s1393lclg.gif) --- 1. [Tmux——](https://github.com/tmux/tmux/wiki)**終端復用器** ------------------------------------------------------- > ℹ️我認為沒有任何理由不使用Tmux。只要您必須在航站樓工作，相信我，這會讓您的生活變得更加輕鬆。 ![終端機多工器 - Tmux](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnmx0h067f1se6qmzkah.png) 每次需要在終端機中處理其他事情時，您是否都會開啟新選項卡，並且目前的終端視窗已被佔用？相信我，這件事會讓你大吃一驚。 🤯 您可以將選項卡/視窗分割為多個窗格。此外，還有一個會話的概念，它允許您打開多個窗口，完全獨立於其他會話，從而可以輕鬆地同時處理多個專案。 看到圖片了嗎？我的筆記在另一個視窗中，點檔案配置在另一個視窗中。它們之間的切換非常簡單和方便。 **劇透警告**：在終端機中工作時，您將永遠不想使用滑鼠。 😉 > 我開始使用 Tmux 的時間並不長，但現在它已經成為我離不開的主要核心實用程式。 🔥 --- 2. [Neovim](https://neovim.io/) **- 首選程式碼編輯器** --------------------------------------------- > ❓ 你喜歡在航站樓工作嗎？如果是，那麼您可能不知道您需要這個程式碼編輯器。試一試。 ![Neovim 程式碼編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4sk4o3tpc8lp68po6rj5.png) 我是 VSCode 的忠實粉絲，現在仍然如此。幾個月前我對 Vim 和 Neovim 一無所知。但現在，請相信我，在這幾個月裡，我一次都沒有碰過 VSCode。 🫠 也許您和我一樣是 VSCode 的忠實粉絲，但請嘗試將自己切換到 Vim 動作。這是您可以為自己做的提高生產力的最佳事情。一旦您將編輯器轉移到終端，您將慢慢開始生活在終端本身。 儘管終端中的編輯器可能不適合每個人的口味，但至少嘗試使用一次，看看它是否是您的選擇。 --- 3. [Obsidian](https://obsidian.md) **- 很棒的筆記** ---------------------------------------------- > 🧠 我的第二個大腦，如果你現在開始使用它，它也會是你的。 ![黑曜石筆記工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9a5qjgzbo3515434s8j.png) 我知道您可能正在使用一些很酷的筆記工具，例如 Notion、Evernote 等。但是，您還記得上次打開這些筆記應用程式來實際參考您幾個月前寫的東西是什麼時候嗎？ 🤔 看，你們大多數人沒有答案。所以卸載這些，現在就做！ ![就去做吧 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/07t80j71gyn2txgyyica.gif) 這正是 Obsidian 解決的問題。將其視為您的**第二個大腦**。這個工具非常好，我可以在虛擬桌面上一直打開 GUI，或者在 Tmux 視窗中打開它，這樣每當我編寫程式碼並需要引用我的筆記時，我都可以使用**obsidian.nvim**輕鬆完成此操作來自我的編輯。 🔥 在[obsidian.nvim](https://github.com/epwalsh/obsidian.nvim)上了解更多。 > 我也從 Notion 切換到 Obsidian。相信我，這是我做出的最好的轉變之一，我將終生珍惜這一轉變。別擔心，您可以輕鬆地將現有筆記從筆記工具匯入到 Obsidian。 --- 4. [Docker](https://docker.com) **- 超越容器化** ------------------------------------------- > 🐳 它不僅僅用於容器化您的應用程式嗎？如果沒有，我想是時候了。 ![碼頭工人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m5r0gsamq2rbevq43hh.png) 大多數情況下，當我們想到 Docker 時，我們只是將其視為容器化應用程式的一種方式。我們知道使用 Docker 的方法有很多，但我們只是忽略它們。但是，更像是您的日常司機，而不僅僅是為了一個目的。 最近，我想嘗試使用 Arch，所以我可以說，「**我使用 Arch，順便說一句！** 」 😉 但我不想從頭開始安裝一個全新的 Linux 發行版，只是為了看看我是否不想繼續使用 Arch。為此，我只是用 Arch 映像啟動了一個 Docker 容器並開始使用它。如果我將來不喜歡它，我會簡單地刪除該死的圖像及其容器。就這樣，我恢復正常了。🔥 > ⁉️**為什麼不針對該用例使用虛擬機器？** 在虛擬機器中，你必須分配所有資源，說實話，這會感覺更臃腫。但透過這種方法，您將擁有一個完整、完全流暢的作業系統，而無需從頭開始手動執行任何操作。 另外，最近我必須處理透過 SSH 連接到遠端伺服器的問題，而我的基於金鑰的身份驗證不起作用。為了除錯問題是否出在我這邊，我只需使用 Alpine 啟動一個 Docker 容器，在那裡設定我的 SSH 金鑰，然後它就成功連接了。主要問題是`ssh-daemon`錯誤配置，由於`/etc/ssh/sshd_config`檔案中`PubKeyAuthentication no`因此伺服器本身不接受基於金鑰的身份驗證。 Docker 太漂亮了😻，試著經常使用它。 --- 只為您帶來驚喜！ 😉 ---------- Microsoft 提供有關雲端、DevOps 和開發的免費認證課程！ ✅ 無需付款、無需訂閱、無需註冊。剛開始學習！ 🚀 > ⚠️**注意**：您將被重定向到 Microsoft 官方網站。 https://learn.microsoft.com/training?wt.mc\_id=studentamb\_366508 感謝您的閱讀！我希望你至少嘗試其中的一些。 🫡 https://dev.to/shricodev --- 原文出處：https://dev.to/shricodev/4-core-developer-tools-i-use-in-my-daily-life-2524

0個讚   0留言 124瀏覽

html/css 小分享：設定複選框和開關的樣式

我可能不是唯一一個對瀏覽器的預設`<input type="checkbox">`感到沮喪的開發人員。 首先：**它不可擴展。**在此範例中，字體大小已縮放至`200%` ，但複選框仍保持其根大小，即`13.333333px` ： ![預設複選框](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/delpw47gyetj091jeun0.png) 在本教程中，我們將剖析瀏覽器的預設複選框，看看是否可以做得更好。 --- 首先，我們需要使用`appearance:none`清除預設樣式並設定初始大小 - 這將是一個相對單位`em` ： ``` [type=checkbox] { appearance: none; aspect-ratio: 1; box-sizing: border-box; font-size: 1em; width: 1em; } ``` `background-color`應該適應深色模式，因此我們將檢查它是否與任何[系統顏色](https://developer.mozilla.org/en-US/docs/Web/CSS/system-color)相符。它似乎與`Field`系統顏色匹配，所以讓我們使用它。 對於 Chrome 中的邊框顏色，它與系統顏色`ButtonBorder`匹配，但由於 Safari 使用*更輕的*`ButtonBorder` ，我們將使用適用於兩種瀏覽器的`GrayCanvas` 。 我們將加入一些 CSS 自訂屬性，稍後我們將使用它們來建立變體。 對於`border-radius`和`margin` ，我們將使用預設值，但將它們轉換為相對單位`em` 。 `border-width`似乎使用以下公式進行縮放： ``` (4/3) / root size ``` 由於根大小為`13.333333px` ，我們現在有： ``` [type=checkbox] { --_bdw: calc(1em * (4/3) / 13.333333); appearance: none; aspect-ratio: 1; background: var(--_bg, Field); border: var(--_bdw) solid var(--_bdc, GrayText); border-radius: var(--_bdrs, .2em); box-sizing: border-box; font-size: 1em; margin: var(--_m, .1875em .1875em .1875em .25em); position: relative; width: 1em; } ``` 讓我們看看它是否可擴展： ![可擴充複選框](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dp6npvshq378jt0yk8o6.png) 好的！深色模式呢？ ![深色模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm0aq2eixhf9or4ho67a.png) 這就是為什麼我**喜歡**系統顏色！接下來，讓我們新增瀏覽器在**未選取的**複選框上使用的相同懸停效果。 我們將混合`CanvasText` ，它在淺色模式下為黑色，在深色模式下為白色，並簡單地更新我們在上一步中加入的`--_bdc`屬性： ``` @media (hover: hover) { &:not(:checked):hover { --_bdc: color-mix(in srgb, GrayText 60%, CanvasText 40%); } } ``` --- 複選標記 ---- 現在是複選標記。我們**可以**在`::after`元素中使用旋轉的 CSS 方塊來做到這一點： ``` [type=checkbox]::after { border-color: GrayText; border-style: solid; border-width: 0 0.15em 0.15em 0; box-sizing: border-box; content: ''; aspect-ratio: 1 / 1.8; rotate: 40deg; width: 0.375em; } ``` ![CSS 中的複選標記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/56ff7lvbtsljaxtoyt3h.png) 雖然這工作得很好，但我更喜歡在蒙版中使用 SVG，因為它更靈活。為此，我們將為遮罩加入一個屬性，並為`::after`元素的背景加入另一個`--_bga` ，該屬性將是複選標記的**顏色**。 ``` [role=checkbox] { --_bga: Field; --_mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>'); &::after { background: var(--_bga, transparent); content: ""; inset: 0; position: absolute; mask: var(--_mask) no-repeat center / contain; -webkit-mask: var(--_mask) no-repeat center / contain; } } ``` 所以，我們現在**確實**有一個複選標記，只是看不到它，因為蒙版顏色設定為`transparent` 。 讓我們使用`:checked` -state 更新點擊時複選框的顏色。但在此之前，我們需要先弄清楚**哪種**顏色！ Safari 是唯一支援系統顏色`AccentColor`瀏覽器，因此我們需要為此建立自己的變數`--_accent` ，在 Mac 上對應於`#0075ff` ： ``` [type=checkbox] { --_accent: #0075ff; &:checked { --_bdc: transparent; --_bg: var(--_accent); --_bga: Field; } } ``` 讓我們看看我們建構了什麼： ![複選框樣式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9l3tzwwqkmrr4bpzrg19.png) 還有深色模式？我們需要先更新`--_accent`屬性，因為`AccentColor`尚未在所有瀏覽器中運作： ``` @media (prefers-color-scheme: dark) { --_accent: #99C8FF; } ``` 讓我們檢查： ![複選框深色模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kuid7fnr3obftfjr85s.png) 涼爽的！現在我們需要加入的是`:checked:hover` -state，它類似於我們之前新增的 border-hover： ``` @media (hover: hover) { &:checked:hover { --_bg: color-mix(in srgb, var(--_accent) 60%, CanvasText 40%); } } ``` 讓我們比較一下它在 Chrome、Safari 和 Firefox 中的外觀： ![瀏覽器比較](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hi9qej87nns2wjd4jqiw.png) 看來我們通過考驗了！ --- 變體 -- 建立變體非常簡單：您只需要更新一些屬性。例子： ``` .rounded { --_bdrs: 50%; } .square { --_bdrs: 0; } ``` 然後在 HTML 中： ``` <input type="checkbox" class="rounded"> <input type="checkbox" class="square"> ``` ![變體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vu5g82hu5zv65izekwsn.png) — 或全力以赴並建立*老式*複選框： ![老派複選框](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngan912ja853wx4q8gil.png) > **關於圓形複選框的註釋：**這是*不好的*做法，正如您可以在[這篇精彩的文章](https://tonsky.me/blog/checkbox/)中讀到的那樣。不過，也有一些例外，例如這個「影像選擇器」： ![圓形影像選擇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j36lzrpf7sxvimocpoud.png) 開關 -- 對於開關，我們將加入一個`role="switch"` ，所以它是： ``` <input type="checkbox" role="switch"> ``` 蘋果最近加入了[自己的 switch-control](https://dev.to/madsstoumann/a-first-look-at-apples-new-switch-control-3pnd) ，但`role="switch"`是跨瀏覽器的。同樣，我們只需要更新我們之前建立的許多屬性： ``` [role=switch] { --_bdc--hover: transparent; --_bdrs: 1em; --_bg: #d1d1d1; --_bga: Field; --_mask: none; aspect-ratio: 1.8 / 1; border: 0; display: grid; padding: .125em; place-content: center start; width: 1.8em; &::after { border-radius: 50%; height: .75em; inset: unset; position: static; width: .75em; } &:checked { --_bg: var(--_bg--checked, var(--_accent)); justify-content: end; } } ``` 這給了我們： ![開關](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rlfyayxyzkqcr78qovn.png) --- 示範 -- 就是這樣！下面是帶有演示的 Codepen： https://codepen.io/stoumann/pen/OJqQNgm --- 駭客與縫合 ----- 以下是我在 Codepen 上使用複選框所做的一系列工作： ### 複選框電影院 選擇座位。還可以修改為在火車、飛機上選擇座位...... https://codepen.io/stoumann/pen/eYXpEBa ### 天際線複選框 點擊窗戶打開公寓裡的燈… https://codepen.io/stoumann/pen/KKbGJqd ### 按數字繪畫 先選擇一種顏色（使用`<input type="radio">` ），然後按一下對應的數字（複選框）... https://codepen.io/stoumann/pen/VwRejpR ### 點對點 不需要 JavaScript，但我把它留在那裡供你玩… https://codepen.io/stoumann/pen/zYbNRNL ### 來自地獄的條款和條件 檢查全部… https://codepen.io/stoumann/pen/GRwRjYP --- 每日 toggle ---- Alvaro Montoro 正在建立大量開關/撥動開關 - 2024 年每天一個。請[在此處](https://codepen.io/collection/aMPYMo)查看。 --- 原文出處：https://dev.to/madsstoumann/styling-checkboxes-and-switches-pf0

1個讚   1留言 125瀏覽

使用外掛程式和主題在 OhMyZsh 和 Hyper 上設定自動完成功能的初學者指南！

您的普通 bash 可能具有您通常需要的功能，但**如果您是常規終端用戶，zsh 將改變您鍵入命令的方式。** zsh、ohmyzsh 和 hyper 一起提供的功能將讓您大吃一驚。 > 您知道您可以從終端控制 Spotify 嗎？是的，超級插件可以讓您做到這一點。 對於初學者來說，設定這些東西可能會讓人不知所措，所以這裡有一個非常簡單的入門指南！ 🤩 --- 🔥 簡介 ---- 如果您使用的是如下所示的常規終端，則您會錯過 OhMyZsh 提供的許多功能。 ![Flaviocope 的 MacOS 終端](https://flaviocopes.com/macos-terminal-setup/Screenshot%202019-01-29%20at%2018.34.04.png) 今天，您將進行終端改造，使其看起來像這樣... ![我的超級終端](https://i.ibb.co/DW05RzF/Hyper-Terminal-Kumar-Abhirup.jpg) 不僅僅是外觀，OhMyZsh 還具有豐富的功能來點亮您的程式設計之旅。 在教程結束時，這就是您可以在終端機中執行的操作... - NPM、Git 自動完成 - 在終端機中輸入時自動建議 - 語法高亮顯示指令是否已定義 - 使用遊標編輯終端命令 - 查看目前目錄的`git branch`和`git status` - 開啟與目前分頁相同目錄的新分頁 - 使用 OhMyZsh 功能，例如不使用`cd`進行導航、使用`ll` 、更簡單的基於 Tab 鍵單擊的導航等等！ --- ❤️ 開始吧 ------ 首先，您必須安裝`zsh` 。在某些情況下（取決於您正在執行的作業系統），它可能已經安裝。因此，請透過在終端機中執行`zsh --version`檢查它是否已安裝。 `zsh`在不同作業系統的安裝過程有所不同。查看[Zsh 安裝指南](https://github.com/robbyrussell/oh-my-zsh/wiki/Installing-ZSH)來安裝 zsh。 安裝 Zsh 後，請確保將其設為預設 shell。為此，請在終端機中執行以下命令。 ``` $ sudo chsh -s $(which zsh) ``` 登出並登入回預設 shell。執行`echo $SHELL`並預期輸出`/bin/zsh`或類似內容。 --- 🔰 安裝 OhMyZsh ------------ > 請注意，zsh 和 OhMyZsh 是不同的。 透過在終端機中執行以下命令來安裝`OhMyZsh` 。 ``` $ sudo sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)" ``` 當您安裝 OhMyZsh 時，它會附帶許多插件來幫助您！ 若要新增實用的插件，請在 TextEdit/Notepad/Vim/VSCode 中開啟`~/.zshrc` 。 在檔案中看到的插件清單中，只需新增一個名為`npm`的插件，如下所示 👇 ``` plugins=( git bundler dotenv osx rake rbenv ruby npm # you added this ) ``` 瞧！您已經完成了 OhMyZsh！若要查看更改，請在終端機中執行`source ~/.zshrc` ，現在您就擁有了 OhMyZsh shell 的功能。 --- 🔰 依時間安裝 HyperTerm ----------------- Zeit（now.sh 和 Next.js 的建立者）為我們建立了一個很棒的終端應用程式，它是用 Electron 建置的。 從[這裡](https://hyper.is/)下載 Hyper。 --- ### ⚛️ 使用 OhMyZsh 設定 Hyper 打開超級終端機。您不會看到 OhMyZsh 在那裡執行。因此，請轉到超級設定。在 OSX 上，它是`Hyper > Preferences` 。 這將在您最喜歡的編輯器中開啟一個`.hyper.js`檔案。該文件包含您的終端的所有設置，非常容易控制！ 若要在 Hyper 中啟用 OhMyZsh 作為預設 shell，請在`.hyper.js`中進行此變更 👇 ``` - shell: '/bin/bash' + shell: '/bin/zsh' ``` **這將使 OhMyZsh 成為您的預設超級終端 shell！** --- ### 🤩 輸入指令時自動完成 Git 將`zsh-autocomplete`插件複製到 OhMyZsh 插件資料夾中。 ``` $ sudo git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions ``` 完成後，將外掛程式新增至`~/.zshrc`檔案的外掛程式清單中。 ``` plugins=( ... zsh-autosuggestions ) ``` --- ### 🎉 Zsh 語法高亮 Git 將`zsh-syntax-highlighting`外掛程式克隆到 OhMyZsh 外掛程式資料夾中。 ``` $ sudo git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting ``` 並再次將其新增至`.zshrc`檔案的外掛程式清單。 ``` plugins=( ... zsh-syntax-highlighting ) ``` > 注意：若要反映您所做的每項更改，請在終端機中執行`source ~/.zshrc` 。 --- ### 📯 啟用 Hyper 相關功能與主題 透過切換超級終端的設定來開啟`.hyper.js` 。 請查看`plugins: [...]`部分並將這些插件名稱貼到此處。 ``` plugins: [ ... 'hypercwd', 'hyper-statusline', 'hyper-alt-click', 'hyperterm-safepaste', 'hyper-search', 'hypergoogle', 'hyperborder', 'hyper-tab-icons', 'hyper-hide-title', 'shades-of-purple-hyper' ], ``` 儲存文件，Hyper 會自動為您安裝這些外掛程式和主題。要反映更改，只需關閉並再次啟動超級終端即可。 萬歲！**現在，您的終端機中已擁有本 DEV.to 文章開頭列出的所有功能。** --- 獎勵：在 VSCode 中為整合終端設定相同的終端配置 --------------------------- 在 VSCode 設定中，新增以下 JSON 鍵值對，然後就可以開始了！ ``` { ... "terminal.integrated.shell.osx": "/bin/zsh", "terminal.integrated.fontSize": 16 } ``` **就是這樣，夥計們！** --- 🔥 資源 ---- - <https://ohmyz.sh> - <https://hyper.is> --- 🏆 關於我 ----- **我是 Kumar Abhirup，一位來自印度的 16 歲 JavaScript React 開發人員，每天都在學習新事物。** [在 Twitter 上與我聯絡 🐦](https://twitter.com/kumar_abhirup) [我的個人網站和作品集🖥️](https://kumar.now.sh) *請在下面評論您更好的方法以及改進本文的建議。 :)* --- 原文出處：https://dev.to/kumareth/a-beginner-s-guide-for-setting-up-autocomplete-on-ohmyzsh-hyper-with-plugins-themes-47f2

0個讚   0留言 73瀏覽

為初學者到專家提供的 101 個 Bash 指令和提示

> **2019 年 9 月 25 日更新：**感謝[ラナ・kuaru](https://twitter.com/rana_kualu)的辛勤工作，本文現已提供日文版。請點擊下面的連結查看他們的工作。如果您知道本文被翻譯成其他語言，請告訴我，我會將其發佈在這裡。 [🇯🇵 閱讀日語](https://qiita.com/rana_kualu/items/7b62898d373901466f5c) > **2019 年 7 月 8 日更新：**我最近發現大約兩年前發佈在法語留言板上的[這篇非常相似的文章](https://bookmarks.ecyseo.net/?EAWvDw)。如果您有興趣學習一些 shell 命令——並且您*會說 français* ，那麼它是對我下面的文章的一個很好的補充。 直到大約一年前，我幾乎只在 macOS 和 Ubuntu 作業系統中工作。在這兩個作業系統上， `bash`是我的預設 shell。在過去的六、七年裡，我對`bash`工作原理有了大致的了解，並想為那些剛入門的人概述一些更常見/有用的命令。如果您認為您了解有關`bash`所有訊息，請無論如何看看下面的內容 - 我已經提供了一些提示和您可能忘記的標誌的提醒，這可以讓您的工作更輕鬆一些。 下面的命令或多或少以敘述風格排列，因此如果您剛開始使用`bash` ，您可以從頭到尾完成操作。事情到最後通常會變得不那麼常見並且變得更加困難。 <a name="toc"></a> 目錄 -- - [基礎](#the-basics) ``` - [First Commands, Navigating the Filesystem](#first-commands) ``` ``` - [`pwd / ls / cd`](#pwd-ls-cd) ``` ``` - [`; / && / &`](#semicolon-andand-and) ``` ``` - [Getting Help](#getting-help) ``` ``` - [`-h`](#minus-h) ``` ``` - [`man`](#man) ``` ``` - [Viewing and Editing Files](#viewing-and-editing-files) ``` ``` - [`head / tail / cat / less`](#head-tail-cat-less) ``` ``` - [`nano / nedit`](#nano-nedit) ``` ``` - [Creating and Deleting Files and Directories](#creating-and-deleting-files) ``` ``` - [`touch`](#touch) ``` ``` - [`mkdir / rm / rmdir`](#mkdir-rm-rmdir) ``` ``` - [Moving and Copying Files, Making Links, Command History](#moving-and-copying-files) ``` ``` - [`mv / cp / ln`](#mv-cp-ln) ``` ``` - [Command History](#command-history) ``` ``` - [Directory Trees, Disk Usage, and Processes](#directory-trees-disk-usage-processes) ``` ``` - [`mkdir –p / tree`](#mkdir--p-tree) ``` ``` - [`df / du / ps`](#df-du-ps) ``` ``` - [Miscellaneous](#basic-misc) ``` ``` - [`passwd / logout / exit`](#passwd-logout-exit) ``` ``` - [`clear / *`](#clear-glob) ``` - [中間的](#intermediate) ``` - [Disk, Memory, and Processor Usage](#disk-memory-processor) ``` ``` - [`ncdu`](#ncdu) ``` ``` - [`top / htop`](#top-htop) ``` ``` - [REPLs and Software Versions](#REPLs-software-versions) ``` ``` - [REPLs](#REPLs) ``` ``` - [`-version / --version / -v`](#version) ``` ``` - [Environment Variables and Aliases](#env-vars-aliases) ``` ``` - [Environment Variables](#env-vars) ``` ``` - [Aliases](#aliases) ``` ``` - [Basic `bash` Scripting](#basic-bash-scripting) ``` ``` - [`bash` Scripts](#bash-scripts) ``` ``` - [Custom Prompt and `ls`](#custom-prompt-ls) ``` ``` - [Config Files](#config-files) ``` ``` - [Config Files / `.bashrc`](#config-bashrc) ``` ``` - [Types of Shells](#types-of-shells) ``` ``` - [Finding Things](#finding-things) ``` ``` - [`whereis / which / whatis`](#whereis-which-whatis) ``` ``` - [`locate / find`](#locate-find) ``` ``` - [Downloading Things](#downloading-things) ``` ``` - [`ping / wget / curl`](#ping-wget-curl) ``` ``` - [`apt / gunzip / tar / gzip`](#apt-gunzip-tar-gzip) ``` ``` - [Redirecting Input and Output](#redirecting-io) ``` ``` - [`| / > / < / echo / printf`](#pipe-gt-lt-echo-printf) ``` ``` - [`0 / 1 / 2 / tee`](#std-tee) ``` - [先進的](#advanced) ``` - [Superuser](#superuser) ``` ``` - [`sudo / su`](#sudo-su) ``` ``` - [`!!`](#click-click) ``` ``` - [File Permissions](#file-permissions) ``` ``` - [File Permissions](#file-permissions-sub) ``` ``` - [`chmod / chown`](#chmod-chown) ``` ``` - [User and Group Management](#users-groups) ``` ``` - [Users](#users) ``` ``` - [Groups](#groups) ``` ``` - [Text Processing](#text-processing) ``` ``` - [`uniq / sort / diff / cmp`](#uniq-sort-diff-cmp) ``` ``` - [`cut / sed`](#cut-sed) ``` ``` - [Pattern Matching](#pattern-matching) ``` ``` - [`grep`](#grep) ``` ``` - [`awk`](#awk) ``` ``` - [Copying Files Over `ssh`](#ssh) ``` ``` - [`ssh / scp`](#ssh-scp) ``` ``` - [`rsync`](#rsync) ``` ``` - [Long-Running Processes](#long-running-processes) ``` ``` - [`yes / nohup / ps / kill`](#yes-nohup-ps-kill) ``` ``` - [`cron / crontab / >>`](#cron) ``` ``` - [Miscellaneous](#advanced-misc) ``` ``` - [`pushd / popd`](#pushd-popd) ``` ``` - [`xdg-open`](#xdg-open) ``` ``` - [`xargs`](#xargs) ``` - [獎勵：有趣但大多無用的東西](#bonus) ``` - [`w / write / wall / lynx`](#w-write-wall-lynx) ``` ``` - [`nautilus / date / cal / bc`](#nautilus-date-cal-bc) ``` --- <a name="the-basics"></a> 基礎 == <a name="first-commands"></a> 第一個指令，瀏覽檔案系統 ------------ 現代檔案系統具有目錄（資料夾）樹，其中目錄要么是*根目錄*（沒有父目錄），要么是*子目錄*（包含在單一其他目錄中，我們稱之為“父目錄”）。向後遍歷檔案樹（從子目錄到父目錄）將始終到達根目錄。有些檔案系統有多個根目錄（如 Windows 的磁碟機： `C:\` 、 `A:\`等），但 Unix 和類別 Unix 系統只有一個名為`\`的根目錄。 <a name="pwd-ls-cd"></a> ### `pwd / ls / cd` [\[ 返回目錄 \]](#toc) 在檔案系統中工作時，使用者始終*在*某個目錄中工作，我們稱之為當前目錄或*工作目錄*。使用`pwd`列印使用者的工作目錄： ``` [ andrew@pc01 ~ ]$ pwd /home/andrew ``` 使用`ls`列出該目錄的內容（檔案和/或子目錄等）： ``` [ andrew@pc01 ~ ]$ ls Git TEST jdoc test test.file ``` > **獎金：** > > 使用`ls -a`顯示隱藏（“點”）文件 > > 使用`ls -l`顯示文件詳細訊息 > > 組合多個標誌，如`ls -l -a` > > 有時您可以連結諸如`ls -la`之類的標誌，而不是`ls -l -a` 使用`cd`更改到不同的目錄（更改目錄）： ``` [ andrew@pc01 ~ ]$ cd TEST/ [ andrew@pc01 TEST ]$ pwd /home/andrew/TEST [ andrew@pc01 TEST ]$ cd A [ andrew@pc01 A ]$ pwd /home/andrew/TEST/A ``` `cd ..`是「 `cd`到父目錄」的簡寫： ``` [ andrew@pc01 A ]$ cd .. [ andrew@pc01 TEST ]$ pwd /home/andrew/TEST ``` `cd ~`或只是`cd`是「 `cd`到我的主目錄」的簡寫（通常`/home/username`或類似的東西）： ``` [ andrew@pc01 TEST ]$ cd [ andrew@pc01 ~ ]$ pwd /home/andrew ``` > **獎金：** > > `cd ~user`表示「 `cd`到`user`的主目錄 > > 您可以使用`cd ../..`等跳轉多個目錄等級。 > > 使用`cd -`返回到最近的目錄 > > `.`是「此目錄」的簡寫，因此`cd .`不會做太多事情 <a name="semicolon-andand-and"></a> ### `; / && / &` [\[ 返回目錄 \]](#toc) 我們在命令列中輸入的內容稱為*命令*，它們總是執行儲存在電腦上某處的一些機器碼。有時這個機器碼是一個內建的Linux命令，有時它是一個應用程式，有時它是你自己寫的一些程式碼。有時，我們會想依序執行一個指令。為此，我們可以使用`;` （分號）： ``` [ andrew@pc01 ~ ]$ ls; pwd Git TEST jdoc test test.file /home/andrew ``` 上面的分號表示我首先 ( `ls` ) 列出工作目錄的內容，然後 ( `pwd` ) 列印其位置。連結命令的另一個有用工具是`&&` 。使用`&&`時，如果左側命令失敗，則右側命令將不會執行。 `;`和`&&`都可以在同一行中多次使用： ``` # whoops! I made a typo here! [ andrew@pc01 ~ ]$ cd /Giit/Parser && pwd && ls && cd -bash: cd: /Giit/Parser: No such file or directory # the first command passes now, so the following commands are run [ andrew@pc01 ~ ]$ cd Git/Parser/ && pwd && ls && cd /home/andrew/Git/Parser README.md doc.sh pom.xml resource run.sh shell.sh source src target ``` ....但是與`;` ，即使第一個命令失敗，第二個命令也會執行： ``` # pwd and ls still run, even though the cd command failed [ andrew@pc01 ~ ]$ cd /Giit/Parser ; pwd ; ls -bash: cd: /Giit/Parser: No such file or directory /home/andrew Git TEST jdoc test test.file ``` `&`看起來與`&&`類似，但實際上實現了完全不同的功能。通常，當您執行長時間執行的命令時，命令列將等待該命令完成，然後才允許您輸入另一個命令。在命令後面加上`&`可以防止這種情況發生，並允許您在舊命令仍在執行時執行新命令： ``` [ andrew@pc01 ~ ]$ cd Git/Parser && mvn package & cd [1] 9263 ``` > **額外的好處：**當我們在命令後使用`&`來「隱藏」它時，我們說該作業（或「進程」；這些術語或多或少可以互換）是「後台的」。若要查看目前正在執行的背景作業，請使用`jobs`指令： > ````bash \[ andrew@pc01 ~ \]$ 職位 \[1\]+ 執行 cd Git/Parser/ && mvn package & ``` <a name="getting-help"></a> ## Getting Help <a name="minus-h"></a> ### `-h` [[ Back to Table of Contents ]](#toc) Type `-h` or `--help` after almost any command to bring up a help menu for that command: ``` \[ andrew@pc01 ~ \]$ du --help 用法：你\[選項\]...\[檔案\]... 或： du \[選項\]... --files0-from=F 對目錄遞歸地總結文件集的磁碟使用情況。 長期權的強制性參數對於短期權也是強制性的。 -0, --null 以 NUL 結束每個輸出行，而不是換行符 -a, --all 計算所有檔案的寫入計數，而不僅僅是目錄 ``` --apparent-size print apparent sizes, rather than disk usage; although ``` ``` the apparent size is usually smaller, it may be ``` ``` larger due to holes in ('sparse') files, internal ``` ``` fragmentation, indirect blocks, and the like ``` -B, --block-size=SIZE 在列印前按 SIZE 縮放大小；例如， ``` '-BM' prints sizes in units of 1,048,576 bytes; ``` ``` see SIZE format below ``` … ``` <a name="man"></a> ### `man` [[ Back to Table of Contents ]](#toc) Type `man` before almost any command to bring up a manual for that command (quit `man` with `q`): ``` LS(1) 使用者指令 LS(1) 姓名 ``` ls - list directory contents ``` 概要 ``` ls [OPTION]... [FILE]... ``` 描述 ``` List information about the FILEs (the current directory by default). ``` ``` Sort entries alphabetically if none of -cftuvSUX nor --sort is speci- ``` ``` fied. ``` ``` Mandatory arguments to long options are mandatory for short options ``` ``` too. ``` … ``` <a name="viewing-and-editing-files"></a> ## Viewing and Editing Files <a name="head-tail-cat-less"></a> ### `head / tail / cat / less` [[ Back to Table of Contents ]](#toc) `head` outputs the first few lines of a file. The `-n` flag specifies the number of lines to show (the default is 10): ``` 列印前三行 ===== \[ andrew@pc01 ~ \]$ 頭 -n 3 c 這 文件 有 ``` `tail` outputs the last few lines of a file. You can get the last `n` lines (like above), or you can get the end of the file beginning from the `N`-th line with `tail -n +N`: ``` 從第 4 行開始列印文件末尾 ============== \[ andrew@pc01 ~ \]$ tail -n +4 c 確切地 六 線 ``` `cat` concatenates a list of files and sends them to the standard output stream (usually the terminal). `cat` can be used with just a single file, or multiple files, and is often used to quickly view them. (**Be warned**: if you use `cat` in this way, you may be accused of a [_Useless Use of Cat_ (UUOC)](http://bit.ly/2SPHE4V), but it's not that big of a deal, so don't worry too much about it.) ``` \[ andrew@pc01 ~ \]$ 貓 a 歸檔一個 \[ andrew@pc01 ~ \]$ 貓 ab 歸檔一個 文件b ``` `less` is another tool for quickly viewing a file -- it opens up a `vim`-like read-only window. (Yes, there is a command called `more`, but `less` -- unintuitively -- offers a superset of the functionality of `more` and is recommended over it.) Learn more (or less?) about [less](http://man7.org/linux/man-pages/man1/less.1.html) and [more](http://man7.org/linux/man-pages/man1/more.1.html) at their `man` pages. <a name="nano-nedit"></a> ### `nano / nedit` [[ Back to Table of Contents ]](#toc) `nano` is a minimalistic command-line text editor. It's a great editor for beginners or people who don't want to learn a million shortcuts. It was more than sufficient for me for the first few years of my coding career (I'm only now starting to look into more powerful editors, mainly because defining your own syntax highlighting in `nano` can be a bit of a pain.) `nedit` is a small graphical editor, it opens up an X Window and allows point-and-click editing, drag-and-drop, syntax highlighting and more. I use `nedit` sometimes when I want to make small changes to a script and re-run it over and over. Other common CLI (command-line interface) / GUI (graphical user interface) editors include `emacs`, `vi`, `vim`, `gedit`, Notepad++, Atom, and lots more. Some cool ones that I've played around with (and can endorse) include Micro, Light Table, and VS Code. All modern editors offer basic conveniences like search and replace, syntax highlighting, and so on. `vi(m)` and `emacs` have more features than `nano` and `nedit`, but they have a much steeper learning curve. Try a few different editors out and find one that works for you! <a name="creating-and-deleting-files"></a> ## Creating and Deleting Files and Directories <a name="touch"></a> ### `touch` [[ Back to Table of Contents ]](#toc) `touch` was created to modify file timestamps, but it can also be used to quickly create an empty file. You can create a new file by opening it with a text editor, like `nano`: ``` \[ andrew@pc01 前 \]$ ls \[ andrew@pc01 ex \]$ 奈米 a ``` _...editing file..._ ``` \[ andrew@pc01 前 \]$ ls A ``` ...or by simply using `touch`: ``` \[ andrew@pc01 ex \]$ touch b && ls ab ``` > **Bonus**: > > Background a process with \^z (Ctrl+z) > > ```bash > [ andrew@pc01 ex ]$ nano a > ``` > > _...editing file, then hit \^z..._ > > ```bash > Use fg to return to nano > > [1]+ Stopped nano a > [ andrew@pc01 ex ]$ fg > ``` > > _...editing file again..._ --- > **Double Bonus:** > > Kill the current (foreground) process by pressing \^c (Ctrl+c) while it’s running > > Kill a background process with `kill %N` where `N` is the job index shown by the `jobs` command <a name="mkdir-rm-rmdir"></a> ### `mkdir / rm / rmdir` [[ Back to Table of Contents ]](#toc) `mkdir` is used to create new, empty directories: ``` \[ andrew@pc01 ex \]$ ls && mkdir c && ls ab ABC ``` You can remove any file with `rm` -- but be careful, this is non-recoverable! ``` \[ andrew@pc01 ex \]$ rm a && ls 西元前 ``` You can add an _"are you sure?"_ prompt with the `-i` flag: ``` \[ andrew@pc01 前 \]$ rm -ib rm：刪除常規空文件“b”？ y ``` Remove an empty directory with `rmdir`. If you `ls -a` in an empty directory, you should only see a reference to the directory itself (`.`) and a reference to its parent directory (`..`): ``` \[ andrew@pc01 ex \]$ rmdir c && ls -a 。 .. ``` `rmdir` removes empty directories only: ``` \[ andrew@pc01 ex \]$ cd .. && ls 測試/ \*.txt 0.txt 1.txt a a.txt bc \[ andrew@pc01 ~ \]$ rmdir 測試/ rmdir：無法刪除“test/”：目錄不為空 ``` ...but you can remove a directory -- and all of its contents -- with `rm -rf` (`-r` = recursive, `-f` = force): ``` \[ andrew@pc01 ~ \]$ rm –rf 測試 ``` <a name="moving-and-copying-files"></a> ## Moving and Copying Files, Making Links, Command History <a name="mv-cp-ln"></a> ### `mv / cp / ln` [[ Back to Table of Contents ]](#toc) `mv` moves / renames a file. You can `mv` a file to a new directory and keep the same file name or `mv` a file to a "new file" (rename it): ``` \[ andrew@pc01 ex \]$ ls && mv ae && ls A B C D BCDE ``` `cp` copies a file: ``` \[ andrew@pc01 ex \]$ cp e e2 && ls BCDE E2 ``` `ln` creates a hard link to a file: ``` ln 的第一個參數是 TARGET，第二個參數是 NEW LINK ================================= \[ andrew@pc01 ex \]$ ln bf && ls bcde e2 f ``` `ln -s` creates a soft link to a file: ``` \[ andrew@pc01 ex \]$ ln -sbg && ls BCDE E2 FG ``` Hard links reference the same actual bytes in memory which contain a file, while soft links refer to the original file name, which itself points to those bytes. [You can read more about soft vs. hard links here.](http://bit.ly/2D0W8cN) <a name="command-history"></a> ### Command History [[ Back to Table of Contents ]](#toc) `bash` has two big features to help you complete and re-run commands, the first is _tab completion_. Simply type the first part of a command, hit the \<tab\> key, and let the terminal guess what you're trying to do: ``` \[ andrew@pc01 目錄 \]$ ls 另一個長檔名 這是一個長檔名 一個新檔名 \[ andrew@pc01 目錄 \]$ ls t ``` _...hit the TAB key after typing `ls t` and the command is completed..._ ``` \[ andrew@pc01 dir \]$ ls 這是檔名 這是長檔名 ``` You may have to hit \<TAB\> multiple times if there's an ambiguity: ``` \[ andrew@pc01 目錄 \]$ ls a \[ andrew@pc01 目錄 \]$ ls an 一個新檔名另一個長檔名 ``` `bash` keeps a short history of the commands you've typed previously and lets you search through those commands by typing \^r (Ctrl+r): ``` \[ andrew@pc01 目錄 \] ``` _...hit \^r (Ctrl+r) to search the command history..._ ``` （反向搜尋）``： ``` _...type 'anew' and the last command containing this is found..._ ``` (reverse-i-search)`anew': 觸碰新檔名 ``` <a name="directory-trees-disk-usage-processes"></a> ## Directory Trees, Disk Usage, and Processes <a name="mkdir--p-tree"></a> ### `mkdir –p / tree` [[ Back to Table of Contents ]](#toc) `mkdir`, by default, only makes a single directory. This means that if, for instance, directory `d/e` doesn't exist, then `d/e/f` can't be made with `mkdir` by itself: ``` \[ andrew@pc01 ex \]$ ls && mkdir d/e/f ABC mkdir：無法建立目錄「d/e/f」：沒有這樣的檔案或目錄 ``` But if we pass the `-p` flag to `mkdir`, it will make all directories in the path if they don't already exist: ``` \[ andrew@pc01 ex \]$ mkdir -pd/e/f && ls A B C D ``` `tree` can help you better visualise a directory's structure by printing a nicely-formatted directory tree. By default, it prints the entire tree structure (beginning with the specified directory), but you can restrict it to a certain number of levels with the `-L` flag: ``` \[ andrew@pc01 前 \]$ 樹 -L 2 。 |-- 一個 |-- b |-- c `--d ``` `--e ``` 3個目錄，2個文件 ``` You can hide empty directories in `tree`'s output with `--prune`. Note that this also removes "recursively empty" directories, or directories which aren't empty _per se_, but which contain only other empty directories, or other recursively empty directories: ``` \[ andrew@pc01 ex \]$ 樹 --prune 。 |-- 一個 `--b ``` <a name="df-du-ps"></a> ### `df / du / ps` [[ Back to Table of Contents ]](#toc) `df` is used to show how much space is taken up by files for the disks or your system (hard drives, etc.). ``` \[ andrew@pc01 前 \]$ df -h 已使用的檔案系統大小 可用 使用% 安裝於 udev 126G 0 126G 0% /dev tmpfs 26G 2.0G 24G 8% /執行 /dev/mapper/ubuntu--vg-root 1.6T 1.3T 252G 84% / … ``` In the above command, `-h` doesn't mean "help", but "human-readable". Some commands use this convention to display file / disk sizes with `K` for kilobytes, `G` for gigabytes, and so on, instead of writing out a gigantic integer number of bytes. `du` shows file space usage for a particular directory and its subdirectories. If you want to know how much space is free on a given hard drive, use `df`; if you want to know how much space a directory is taking up, use `du`: ``` \[ andrew@pc01 ex \]$ 你 4 ./d/e/f 8./d/e 12 ./天 4./c 20 . ``` `du` takes a `--max-depth=N` flag, which only shows directories `N` levels down (or fewer) from the specified directory: ``` \[ andrew@pc01 ex \]$ du -h --max-深度=1 12K./天 4.0K./c 20K。 ``` `ps` shows all of the user's currently-running processes (aka. jobs): ``` \[ andrew@pc01 前 \]$ ps PID TTY 時間 CMD 16642 分/15 00:00:00 ps 25409 點/15 00:00:00 重擊 ``` <a name="basic-misc"></a> ## Miscellaneous <a name="passwd-logout-exit"></a> ### `passwd / logout / exit` [[ Back to Table of Contents ]](#toc) Change your account password with `passwd`. It will ask for your current password for verification, then ask you to enter the new password twice, so you don't make any typos: ``` \[ andrew@pc01 目錄 \]$ 密碼 更改安德魯的密碼。 （目前）UNIX 密碼： 輸入新的 UNIX 密碼： 重新輸入新的 UNIX 密碼： passwd：密碼更新成功 ``` `logout` exits a shell you’ve logged in to (where you have a user account): ``` \[ andrew@pc01 目錄 \]$ 註銷 ────────────────────────────────────────────────── ── ────────────────────────────── 會話已停止 ``` - Press <return> to exit tab ``` ``` - Press R to restart session ``` ``` - Press S to save terminal output to file ``` ``` `exit` exits any kind of shell: ``` \[ andrew@pc01 ~ \]$ 退出 登出 ────────────────────────────────────────────────── ── ────────────────────────────── 會話已停止 ``` - Press <return> to exit tab ``` ``` - Press R to restart session ``` ``` - Press S to save terminal output to file ``` ``` <a name="clear-glob"></a> ### `clear / *` [[ Back to Table of Contents ]](#toc) Run `clear` to move the current terminal line to the top of the screen. This command just adds blank lines below the current prompt line. It's good for clearing your workspace. Use the glob (`*`, aka. Kleene Star, aka. wildcard) when looking for files. Notice the difference between the following two commands: ``` \[ andrew@pc01 ~ \]$ ls Git/Parser/source/ PArrayUtils.java PFile.java PSQLFile.java PWatchman.java PDateTimeUtils.java PFixedWidthFile.java PStringUtils.java PXSVFile.java PDelimitedFile.java PNode.java PTextFile.java Parser.java \[ andrew@pc01 ~ \]$ ls Git/Parser/source/PD\* Git/Parser/source/PDateTimeUtils.java Git/Parser/source/PDelimitedFile.java ``` The glob can be used multiple times in a command and matches zero or more characers: ``` \[ andrew@pc01 ~ \]$ ls Git/Parser/source/P *D* m\* Git/Parser/source/PDateTimeUtils.java Git/Parser/source/PDelimitedFile.java ``` <a name="intermediate"></a> # Intermediate <a name="disk-memory-processor"></a> ## Disk, Memory, and Processor Usage <a name="ncdu"></a> ### `ncdu` [[ Back to Table of Contents ]](#toc) `ncdu` (NCurses Disk Usage) provides a navigable overview of file space usage, like an improved `du`. It opens a read-only `vim`-like window (press `q` to quit): ``` \[ andrew@pc01 ~ \]$ ncdu ncdu 1.11 ~ 使用箭頭鍵導航，按 ?求助 \--- /home/安德魯 ------------------------------------------- ------------------ 148.2 MiB \[##########\] /.m2 91.5 MiB \[######\] /.sbt 79.8 MiB \[######\] /.cache 64.9 MiB \[####\] /.ivy2 40.6 MiB \[##\] /.sdkman 30.2 MiB \[##\] /.local 27.4 MiB \[#\] /.mozilla 24.4 MiB \[#\] /.nanobackups 10.2 MiB \[ \] .confout3.txt ``` 8.4 MiB [ ] /.config ``` ``` 5.9 MiB [ ] /.nbi ``` ``` 5.8 MiB [ ] /.oh-my-zsh ``` ``` 4.3 MiB [ ] /Git ``` ``` 3.7 MiB [ ] /.myshell ``` ``` 1.7 MiB [ ] /jdoc ``` ``` 1.5 MiB [ ] .confout2.txt ``` ``` 1.5 MiB [ ] /.netbeans ``` ``` 1.1 MiB [ ] /.jenv ``` 564.0 KiB \[ \] /.rstudio-desktop 磁碟使用總量：552.7 MiB 表觀大小：523.6 MiB 專案：14618 ``` <a name="top-htop"></a> ### `top / htop` [[ Back to Table of Contents ]](#toc) `top` displays all currently-running processes and their owners, memory usage, and more. `htop` is an improved, interactive `top`. (Note: you can pass the `-u username` flag to restrict the displayed processes to only those owner by `username`.) ``` \[ andrew@pc01 ~ \]$ htop 1 \[ 0.0%\] 9 \[ 0.0%\] 17 \[ 0.0%\] 25 \[ 0.0%\] 2 \[ 0.0%\] 10 \[ 0.0%\] 18 \[ 0.0%\] 26 \[ 0.0%\] 3 \[ 0.0%\] 11 \[ 0.0%\] 19 \[ 0.0%\] 27 \[ 0.0%\] 4 \[ 0.0%\] 12 \[ 0.0%\] 20 \[ 0.0%\] 28 \[ 0.0%\] 5 \[ 0.0%\] 13 \[ 0.0%\] 21 \[| 1.3%\] 29 \[ 0.0%\] 6 \[ 0.0%\] 14 \[ 0.0%\] 22 \[ 0.0%\] 30 \[| 0.6%\] 7 \[ 0.0%\] 15 \[ 0.0%\] 23 \[ 0.0%\] 31 \[ 0.0%\] 8 \[ 0.0%\] 16 \[ 0.0%\] 24 \[ 0.0%\] 32 \[ 0.0%\] Mem\[|||||||||||||||||||1.42G/252G\] 任務：188、366 個； 1 執行 交換電壓\[| 2.47G/256G\]平均負載：0.00 0.00 0.00 ``` Uptime: 432 days(!), 00:03:55 ``` PID USER PRI NI VIRT RES SHR S CPU% MEM% TIME+ 指令 9389 安德魯 20 0 23344 3848 2848 R 1.3 0.0 0:00.10 htop 10103 根 20 0 3216M 17896 2444 S 0.7 0.0 5h48:56 /usr/bin/dockerd ``` 1 root 20 0 181M 4604 2972 S 0.0 0.0 15:29.66 /lib/systemd/syst ``` 533 根 20 0 44676 6908 6716 S 0.0 0.0 11:19.77 /lib/systemd/syst 546 根 20 0 244M 0 0 S 0.0 0.0 0:01.39 /sbin/lvmetad -f 1526 根 20 0 329M 2252 1916 S 0.0 0.0 0:00.00 /usr/sbin/ModemMa 1544 根 20 0 329M 2252 1916 S 0.0 0.0 0:00.06 /usr/sbin/ModemMa F1Help F2Setup F3SearchF4FilterF5Tree F6SortByF7Nice -F8Nice +F9Kill F10Quit ``` <a name="REPLs-software-versions"></a> ## REPLs and Software Versions <a name="REPLs"></a> ### REPLs [[ Back to Table of Contents ]](#toc) A **REPL** is a Read-Evaluate-Print Loop, similar to the command line, but usually used for particular programming languages. You can open the Python REPL with the `python` command (and quit with the `quit()` function): ``` \[ andrew@pc01 ~ \]$ python Python 3.5.2（默認，2018 年 11 月 12 日，13:43:14）... > > > 辭職（） ``` Open the R REPL with the `R` command (and quit with the `q()` function): ``` \[ andrew@pc01 ~ \]$ R R版3.5.2（2018-12-20）--「蛋殼冰屋」... > q() 儲存工作區影像？ \[是/否/c\]: 否 ``` Open the Scala REPL with the `scala` command (and quit with the `:quit` command): ``` \[ andrew@pc01 ~ \]$ scala 歡迎使用 Scala 2.11.12 ... 斯卡拉>：退出 ``` Open the Java REPL with the `jshell` command (and quit with the `/exit` command): ``` \[ andrew@pc01 ~ \]$ jshell |歡迎使用 JShell——版本 11.0.1 ... jshell> /退出 ``` Alternatively, you can exit any of these REPLs with \^d (Ctrl+d). \^d is the EOF (end of file) marker on Unix and signifies the end of input. <a name="version"></a> ### `-version / --version / -v` [[ Back to Table of Contents ]](#toc) Most commands and programs have a `-version` or `--version` flag which gives the software version of that command or program. Most applications make this information easily available: ``` \[ andrew@pc01 ~ \]$ ls --version ls (GNU coreutils) 8.25 ... \[ andrew@pc01 ~ \]$ ncdu -版本 NCDU 1.11 \[ andrew@pc01 ~ \]$ python --version Python 3.5.2 ``` ...but some are less intuitive: ``` \[ andrew@pc01 ~ \]$ sbt scalaVersion … \[資訊\]2.12.4 ``` Note that some programs use `-v` as a version flag, while others use `-v` to mean "verbose", which will run the application while printing lots of diagnostic or debugging information: ``` SCP(1) BSD 通用指令手冊 SCP(1) 姓名 ``` scp -- secure copy (remote file copy program) ``` … -v 詳細模式。導致 scp 和 ssh(1) 列印偵錯訊息 ``` about their progress. This is helpful in debugging connection, ``` ``` authentication, and configuration problems. ``` … ``` <a name="env-vars-aliases"></a> ## Environment Variables and Aliases <a name="env-vars"></a> ### Environment Variables [[ Back to Table of Contents ]](#toc) **Environment variables** (sometimes shortened to "env vars") are persistent variables that can be created and used within your `bash` shell. They are defined with an equals sign (`=`) and used with a dollar sign (`$`). You can see all currently-defined env vars with `printenv`: ``` \[ andrew@pc01 ~ \]$ printenv SPARK\_HOME=/usr/local/spark 術語=xterm … ``` Set a new environment variable with an `=` sign (don't put any spaces before or after the `=`, though!): ``` \[ andrew@pc01 ~ \]$ myvar=你好 ``` Print a specific env var to the terminal with `echo` and a preceding `$` sign: ``` \[ andrew@pc01 ~ \]$ echo $myvar 你好 ``` Environment variables which contain spaces or other whitespace should be surrounded by quotes (`"..."`). Note that reassigning a value to an env var overwrites it without warning: ``` \[ andrew@pc01 ~ \]$ myvar="你好，世界！" && 回顯 $myvar 你好世界！ ``` Env vars can also be defined using the `export` command. When defined this way, they will also be available to sub-processes (commands called from this shell): ``` \[ andrew@pc01 ~ \]$ export myvar="另一" && echo $myvar 另一個 ``` You can unset an environment variable by leaving the right-hand side of the `=` blank or by using the `unset` command: ``` \[ andrew@pc01 ~ \]$ 取消設定 mynewvar \[ andrew@pc01 ~ \]$ echo $mynewvar ``` <a name="aliases"></a> ### Aliases [[ Back to Table of Contents ]](#toc) **Aliases** are similar to environment variables but are usually used in a different way -- to replace long commands with shorter ones: ``` \[ andrew@pc01 apidocs \]$ ls -l -a -h -t 總計 220K drwxr-xr-x 5 安德魯 安德魯 4.0K 12 月 21 日 12:37 。 -rw-r--r-- 1 安德魯 安德魯 9.9K 十二月 21 12:37 help-doc.html -rw-r--r-- 1 安德魯 安德魯 4.5K 12 月 21 日 12:37 script.js … \[ andrew@pc01 apidocs \]$ 別名 lc="ls -l -a -h -t" \[ andrew@pc01 apidocs \]$ lc 總計 220K drwxr-xr-x 5 安德魯 安德魯 4.0K 12 月 21 日 12:37 。 -rw-r--r-- 1 安德魯 安德魯 9.9K 十二月 21 12:37 help-doc.html -rw-r--r-- 1 安德魯 安德魯 4.5K 12 月 21 日 12:37 script.js … ``` You can remove an alias with `unalias`: ``` \[ andrew@pc01 apidocs \]$ unalias lc \[ andrew@pc01 apidocs \]$ lc 目前未安裝程式“lc”。 … ``` > **Bonus:** > > [Read about the subtle differences between environment variables and aliases here.](http://bit.ly/2TDG8Tx) > > [Some programs, like **git**, allow you to define aliases specifically for that software.](http://bit.ly/2TG8X1A) <a name="basic-bash-scripting"></a> ## Basic `bash` Scripting <a name="bash-scripts"></a> ### `bash` Scripts [[ Back to Table of Contents ]](#toc) `bash` scripts (usually ending in `.sh`) allow you to automate complicated processes, packaging them into reusable functions. A `bash` script can contain any number of normal shell commands: ``` \[ andrew@pc01 ~ \]$ echo "ls && touch file && ls" > ex.sh ``` A shell script can be executed with the `source` command or the `sh` command: ``` \[ andrew@pc01 ~ \]$ 源 ex.sh 桌面 Git TEST c ex.sh 專案測試 桌面 Git TEST c ex.sh 檔案專案測試 ``` Shell scripts can be made executable with the `chmod` command (more on this later): ``` \[ andrew@pc01 ~ \]$ echo "ls && touch file2 && ls" > ex2.sh \[ andrew@pc01 ~ \]$ chmod +x ex2.sh ``` An executable shell script can be run by preceding it with `./`: ``` \[ andrew@pc01 ~ \]$ ./ex2.sh 桌面 Git TEST c ex.sh ex2.sh 檔案專案測試 桌面 Git TEST c ex.sh ex2.sh 檔案 file2 專案測試 ``` Long lines of code can be split by ending a command with `\`: ``` \[ andrew@pc01 ~ \]$ echo "for i in {1..3}; do echo \\ > \\"歡迎\\$i次\\";完成” > ex3.sh ``` Bash scripts can contain loops, functions, and more! ``` \[ andrew@pc01 ~ \]$ 源 ex3.sh 歡迎1次 歡迎2次 歡迎3次 ``` <a name="custom-prompt-ls"></a> ### Custom Prompt and `ls` [[ Back to Table of Contents ]](#toc) Bash scripting can make your life a whole lot easier and more colourful. [Check out this great bash scripting cheat sheet.](https://devhints.io/bash) `$PS1` (Prompt String 1) is the environment variable that defines your main shell prompt ([learn about the other prompts here](http://bit.ly/2SPgsmT)): ``` \[ andrew@pc01 ~ \]$ printf "%q" $PS1 $'\\n\\\[\\E\[1m\\\]\\\[\\E\[30m\\\]\\A'$'\\\[\\E\[37m\\\]|\\\[\\E\[36m\\\]\\u\\\[\\E\[37m \\\]@\\\[\\E\[34m\\\]\\h'$'\\\[\\E\[32m\\\]\\W\\\[\\E\[37m\\\]|'$'\\\[\\E(B\\E\[m\\\] ' ``` You can change your default prompt with the `export` command: ``` \[ andrew@pc01 ~ \]$ export PS1="\\n此處指令> " 此處指令> echo $PS1 \\n此處指令> ``` ...[you can add colours, too!](http://bit.ly/2TMbEit): ``` 此處指令> export PS1="\\e\[1;31m\\n程式碼: \\e\[39m" （這應該是紅色的，但在 Markdown 中可能不會這樣顯示） =============================== 程式碼：回顯$PS1 \\e\[1;31m\\n程式碼: \\e\[39m ``` You can also change the colours shown by `ls` by editing the `$LS_COLORS` environment variable: ``` （同樣，這些顏色可能不會出現在 Markdown 中） =========================== 程式碼：ls 桌面 Git TEST c ex.sh ex2.sh ex3.sh 檔案 file2 專案測試 程式碼：匯出 LS\_COLORS='di=31:fi=0:ln=96:or=31:mi=31:ex=92' 程式碼：ls 桌面 Git TEST c ex.sh ex2.sh ex3.sh 檔案 file2 專案測試 ``` <a name="config-files"></a> ## Config Files <a name="config-bashrc"></a> ### Config Files / `.bashrc` [[ Back to Table of Contents ]](#toc) If you tried the commands in the last section and logged out and back in, you may have noticed that your changes disappeared. _config_ (configuration) files let you maintain settings for your shell or for a particular program every time you log in (or run that program). The main configuration file for a `bash` shell is the `~/.bashrc` file. Aliases, environment variables, and functions added to `~/.bashrc` will be available every time you log in. Commands in `~/.bashrc` will be run every time you log in. If you edit your `~/.bashrc` file, you can reload it without logging out by using the `source` command: ``` \[ andrew@pc01 ~ \]$ nano ~/.bashrc ``` _...add the line `echo “~/.bashrc loaded!”` to the top of the file_... ``` \[ andrew@pc01 ~ \]$ 源 ~/.bashrc ~/.bashrc 已載入！ ``` _...log out and log back in..._ ``` 最後登入：2019 年 1 月 11 日星期五 10:29:07 從 111.11.11.111 ~/.bashrc 已加載！ \[ 安德魯@pc01 ~ \] ``` <a name="types-of-shells"></a> ### Types of Shells [[ Back to Table of Contents ]](#toc) _Login_ shells are shells you log in to (where you have a username). _Interactive_ shells are shells which accept commands. Shells can be login and interactive, non-login and non-interactive, or any other combination. In addition to `~/.bashrc`, there are a few other scripts which are `sourced` by the shell automatically when you log in or log out. These are: - `/etc/profile` - `~/.bash_profile` - `~/.bash_login` - `~/.profile` - `~/.bash_logout` - `/etc/bash.bash_logout` Which of these scripts are sourced, and the order in which they're sourced, depend on the type of shell opened. See [the bash man page](https://linux.die.net/man/1/bash) and [these](http://bit.ly/2TGCwA8) Stack Overflow [posts](http://bit.ly/2TFHFsf) for more information. Note that `bash` scripts can `source` other scripts. For instance, in your `~/.bashrc`, you could include the line: ``` 來源~/.bashrc\_addl ``` ...which would also `source` that `.bashrc_addl` script. This file can contain its own aliases, functions, environment variables, and so on. It could, in turn, `source` other scripts, as well. (Be careful to avoid infinite loops of script-sourcing!) It may be helpful to split commands into different shell scripts based on functionality or machine type (Ubuntu vs. Red Hat vs. macOS), for example: - `~/.bash_ubuntu` -- configuration specific to Ubuntu-based machines - `~/.bashrc_styles` -- aesthetic settings, like `PS1` and `LS_COLORS` - `~/.bash_java` -- configuration specific to the Java language I try to keep separate `bash` files for aesthetic configurations and OS- or machine-specific code, and then I have one big `bash` file containing shortcuts, etc. that I use on every machine and every OS. Note that there are also _different shells_. `bash` is just one kind of shell (the "Bourne Again Shell"). Other common ones include `zsh`, `csh`, `fish`, and more. Play around with different shells and find one that's right for you, but be aware that this tutorial contains `bash` shell commands only and not everything listed here (maybe none of it) will be applicable to shells other than `bash`. <a name="finding-things"></a> ## Finding Things <a name="whereis-which-whatis"></a> ### `whereis / which / whatis` [[ Back to Table of Contents ]](#toc) `whereis` searches for "possibly useful" files related to a particular command. It will attempt to return the location of the binary (executable machine code), source (code source files), and `man` page for that command: ``` \[ andrew@pc01 ~ \]$ whereis ls ls: /bin/ls /usr/share/man/man1/ls.1.gz ``` `which` will only return the location of the binary (the command itself): ``` \[ andrew@pc01 ~ \]$ 其中 ls /bin/ls ``` `whatis` prints out the one-line description of a command from its `man` page: ``` \[ andrew@pc01 ~ \]$ 什麼是哪裡是哪個什麼是 whereis (1) - 尋找指令的二進位、原始檔和手冊頁文件 which (1) - 定位指令 Whatis (1) - 顯示一行手冊頁描述 ``` `which` is useful for finding the "original version" of a command which may be hidden by an alias: ``` \[ andrew@pc01 ~ \]$ 別名 ls="ls -l" “original” ls 已被上面定義的別名“隱藏” =========================== \[ andrew@pc01 ~ \]$ ls 總計 36 drwxr-xr-x 2 安德魯 andrew 4096 Jan 9 14:47 桌面 drwxr-xr-x 4 安德魯 安德魯 4096 十二月 6 10:43 Git … 但我們仍然可以使用返回的位置來呼叫「原始」ls ======================= \[ andrew@pc01 ~ \]$ /bin/ls 桌面 Git TEST c ex.sh ex2.sh ex3.sh 檔案 file2 專案測試 ``` <a name="locate-find"></a> ### `locate / find` [[ Back to Table of Contents ]](#toc) `locate` finds a file anywhere on the system by referring to a semi-regularly-updated cached list of files: ``` \[ andrew@pc01 ~ \]$ 找到 README.md /home/andrew/.config/micro/plugins/gotham-colors/README.md /home/andrew/.jenv/README.md /home/andrew/.myshell/README.md … ``` Because it's just searching a list, `locate` is usually faster than the alternative, `find`. `find` iterates through the file system to find the file you're looking for. Because it's actually looking at the files which _currently_ exist on the system, though, it will always return an up-to-date list of files, which is not necessarily true with `locate`. ``` \[ andrew@pc01 ~ \]$ find ~/ -iname "README.md" /home/andrew/.jenv/README.md /home/andrew/.config/micro/plugins/gotham-colors/README.md /home/andrew/.oh-my-zsh/plugins/ant/README.md … ``` `find` was written for the very first version of Unix in 1971, and is therefore much more widely available than `locate`, which was added to GNU in 1994. `find` has many more features than `locate`, and can search by file age, size, ownership, type, timestamp, permissions, depth within the file system; `find` can search using regular expressions, execute commands on files it finds, and more. When you need a fast (but possibly outdated) list of files, or you’re not sure what directory a particular file is in, use `locate`. When you need an accurate file list, maybe based on something other than the files’ names, and you need to do something with those files, use `find`. <a name="downloading-things"></a> ## Downloading Things <a name="ping-wget-curl"></a> ### `ping / wget / curl` [[ Back to Table of Contents ]](#toc) `ping` attempts to open a line of communication with a network host. Mainly, it's used to check whether or not your Internet connection is down: ``` \[ andrew@pc01 ~ \]$ ping google.com PING google.com (74.125.193.100) 56(84) 位元組資料。 使用 32 位元組資料 Ping 74.125.193.100： 來自 74.125.193.100 的回覆：位元組=32 時間<1ms TTL=64 … ``` `wget` is used to easily download a file from the Internet: ``` \[ andrew@pc01 ~ \]$ wget \\ > http://releases.ubuntu.com/18.10/ubuntu-18.10-desktop-amd64.iso ``` `curl` can be used just like `wget` (don’t forget the `--output` flag): ``` \[ andrew@pc01 ~ \]$ 捲曲 \\ > http://releases.ubuntu.com/18.10/ubuntu-18.10-desktop-amd64.iso \\ > \--輸出ubuntu.iso ``` `curl` and `wget` have their own strengths and weaknesses. `curl` supports many more protocols and is more widely available than `wget`; `curl` can also send data, while `wget` can only receive data. `wget` can download files recursively, while `curl` cannot. In general, I use `wget` when I need to download things from the Internet. I don’t often need to send data using `curl`, but it’s good to be aware of it for the rare occasion that you do. <a name="apt-gunzip-tar-gzip"></a> ### `apt / gunzip / tar / gzip` [[ Back to Table of Contents ]](#toc) Debian-descended Linux distributions have a fantastic package management tool called `apt`. It can be used to install, upgrade, or delete software on your machine. To search `apt` for a particular piece of software, use `apt search`, and install it with `apt install`: ``` \[ andrew@pc01 ~ \]$ apt 搜尋漂白位 ...bleachbit/bionic、bionic 2.0-2 全部 從系統中刪除不需要的文件 您需要“sudo”來安裝軟體 ============== \[ andrew@pc01 ~ \]$ sudo apt installbleachbit ``` Linux software often comes packaged in `.tar.gz` ("tarball") files: ``` \[ andrew@pc01 ~ \]$ wget \\ > https://github.com/atom/atom/releases/download/v1.35.0-beta0/atom-amd64.tar.gz ``` ...these types of files can be unzipped with `gunzip`: ``` \[ andrew@pc01 ~ \]$gunzipatom-amd64.tar.gz && ls 原子 amd64.tar ``` A `.tar.gz` file will be `gunzip`-ped to a `.tar` file, which can be extracted to a directory of files using `tar -xf` (`-x` for "extract", `-f` to specify the file to "untar"): ``` \[ andrew@pc01 ~ \]$ tar -xfatom-amd64.tar && mv \\ 原子-beta-1.35.0-beta0-amd64 原子 && ls 原子atom-amd64.tar ``` To go in the reverse direction, you can create (`-c`) a tar file from a directory and zip it (or unzip it, as appropriate) with `-z`: ``` \[ andrew@pc01 ~ \]$ tar -zcf 壓縮.tar.gz 原子 && ls 原子atom-amd64.tar壓縮.tar.gz ``` `.tar` files can also be zipped with `gzip`: ``` \[ andrew@pc01 ~ \]$ gzipatom-amd64.tar && ls 原子 原子-amd64.tar.gz 壓縮.tar.gz ``` <a name="redirecting-io"></a> ## Redirecting Input and Output <a name="pipe-gt-lt-echo-printf"></a> ### `| / > / < / echo / printf` [[ Back to Table of Contents ]](#toc) By default, shell commands read their input from the standard input stream (aka. stdin or 0) and write to the standard output stream (aka. stdout or 1), unless there’s an error, which is written to the standard error stream (aka. stderr or 2). `echo` writes text to stdout by default, which in most cases will simply print it to the terminal: ``` \[ andrew@pc01 ~ \]$ 回顯“你好” 你好 ``` The pipe operator, `|`, redirects the output of the first command to the input of the second command: ``` 'wc'（字數）傳回檔案中的行數、字數、位元組數 ======================== \[ andrew@pc01 ~ \]$ echo "範例文件" |廁所 ``` 1 2 17 ``` ``` `>` redirects output from stdout to a particular location ``` \[ andrew@pc01 ~ \]$ echo "test" > 文件 && 頭文件 測試 ``` `printf` is an improved `echo`, allowing formatting and escape sequences: ``` \[ andrew@pc01 ~ \]$ printf "1\\n3\\n2" 1 3 2 ``` `<` gets input from a particular location, rather than stdin: ``` 'sort' 依字母/數字順序對檔案的行進行排序 ======================== \[ andrew@pc01 ~ \]$ sort <(printf "1\\n3\\n2") 1 2 3 ``` Rather than a [UUOC](#viewing-and-editing-files), the recommended way to send the contents of a file to a command is to use `<`. Note that this causes data to "flow" right-to-left on the command line, rather than (the perhaps more natural, for English-speakers) left-to-right: ``` \[ andrew@pc01 ~ \]$ printf "1\\n3\\n2" > 文件 && 排序 < 文件 1 2 3 ``` <a name="std-tee"></a> ### `0 / 1 / 2 / tee` [[ Back to Table of Contents ]](#toc) 0, 1, and 2 are the standard input, output, and error streams, respectively. Input and output streams can be redirected with the `|`, `>`, and `<` operators mentioned previously, but stdin, stdout, and stderr can also be manipulated directly using their numeric identifiers: Write to stdout or stderr with `>&1` or `>&2`: ``` \[ andrew@pc01 ~ \]$ 貓測試 回顯“標準輸出”>&1 回顯“標準錯誤”>&2 ``` By default, stdout and stderr both print output to the terminal: ``` \[ andrew@pc01 ~ \]$ ./測試 標準錯誤 標準輸出 ``` Redirect stdout to `/dev/null` (only print output sent to stderr): ``` \[ andrew@pc01 ~ \]$ ./test 1>/dev/null 標準錯誤 ``` Redirect stderr to `/dev/null` (only print output sent to stdout): ``` \[ andrew@pc01 ~ \]$ ./test 2>/dev/null 標準輸出 ``` Redirect all output to `/dev/null` (print nothing): ``` \[ andrew@pc01 ~ \]$ ./test &>/dev/null ``` Send output to stdout and any number of additional locations with `tee`: ``` \[ andrew@pc01 ~ \]$ ls && echo "測試" | tee 文件1 文件2 文件3 && ls 文件0 測試 文件0 文件1 文件2 文件3 ``` <a name="advanced"></a> # Advanced <a name="superuser"></a> ## Superuser <a name="sudo-su"></a> ### `sudo / su` [[ Back to Table of Contents ]](#toc) You can check what your username is with `whoami`: ``` \[ andrew@pc01 abc \]$ whoami 安德魯 ``` ...and run a command as another user with `sudo -u username` (you will need that user's password): ``` \[ andrew@pc01 abc \]$ sudo -u 測試觸摸 def && ls -l 總計 0 -rw-r--r-- 1 次測試 0 Jan 11 20:05 def ``` If `–u` is not provided, the default user is the superuser (usually called "root"), with unlimited permissions: ``` \[ andrew@pc01 abc \]$ sudo touch ghi && ls -l 總計 0 -rw-r--r-- 1 次測試 0 Jan 11 20:05 def -rw-r--r-- 1 root root 0 Jan 11 20:14 ghi ``` Use `su` to become another user temporarily (and `exit` to switch back): ``` \[ andrew@pc01 abc \]$ su 測試 密碼： test@pc01:/home/andrew/abc$ whoami 測試 test@pc01:/home/andrew/abc$ 退出 出口 \[ andrew@pc01 abc \]$ whoami 安德魯 ``` [Learn more about the differences between `sudo` and `su` here.](http://bit.ly/2SKQH77) <a name="click-click"></a> ### `!!` [[ Back to Table of Contents ]](#toc) The superuser (usually "root") is the only person who can install software, create users, and so on. Sometimes it's easy to forget that, and you may get an error: ``` \[ andrew@pc01 ~ \]$ apt 安裝 ruby E：無法開啟鎖定檔案 /var/lib/dpkg/lock-frontend - 開啟（13：權限被拒絕） E: 無法取得 dpkg 前端鎖定 (/var/lib/dpkg/lock-frontend)，您是 root 嗎？ ``` You could retype the command and add `sudo` at the front of it (run it as the superuser): ``` \[ andrew@pc01 ~ \]$ sudo apt install ruby 正在閱讀包裝清單... ``` Or, you could use the `!!` shortcut, which retains the previous command: ``` \[ andrew@pc01 ~ \]$ apt 安裝 ruby E：無法開啟鎖定檔案 /var/lib/dpkg/lock-frontend - 開啟（13：權限被拒絕） E: 無法取得 dpkg 前端鎖定 (/var/lib/dpkg/lock-frontend)，您是 root 嗎？ \[ andrew@pc01 ~ \]$ sudo !! sudo apt 安裝 ruby 正在閱讀包裝清單... ``` By default, running a command with `sudo` (and correctly entering the password) allows the user to run superuser commands for the next 15 minutes. Once those 15 minutes are up, the user will again be prompted to enter the superuser password if they try to run a restricted command. <a name="file-permissions"></a> ## File Permissions <a name="file-permissions-sub"></a> ### File Permissions [[ Back to Table of Contents ]](#toc) Files may be able to be read (`r`), written to (`w`), and/or executed (`x`) by different users or groups of users, or not at all. File permissions can be seen with the `ls -l` command and are represented by 10 characters: ``` \[ andrew@pc01 ~ \]$ ls -lh 總計 8 drwxr-xr-x 4 安德魯 安德魯 4.0K 1 月 4 日 19:37 品嚐 -rwxr-xr-x 1 安德魯 安德魯 40 Jan 11 16:16 測試 -rw-r--r-- 1 安德魯 安德魯 0 一月 11 16:34 tist ``` The first character of each line represents the type of file, (`d` = directory, `l` = link, `-` = regular file, and so on); then there are three groups of three characters which represent the permissions held by the user (u) who owns the file, the permissions held by the group (g) which owns the file, and the permissions held any other (o) users. (The number which follows this string of characters is the number of links in the file system to that file (4 or 1 above).) `r` means that person / those people have read permission, `w` is write permission, `x` is execute permission. If a directory is “executable”, that means it can be opened and its contents can be listed. These three permissions are often represented with a single three-digit number, where, if `x` is enabled, the number is incremented by 1, if `w` is enabled, the number is incremented by 2, and if `r` is enabled, the number is incremented by 4. Note that these are equivalent to binary digits (`r-x` -> `101` -> `5`, for example). So the above three files have permissions of 755, 755, and 644, respectively. The next two strings in each list are the name of the owner (`andrew`, in this case) and the group of the owner (also `andrew`, in this case). Then comes the size of the file, its most recent modification time, and its name. The `–h` flag makes the output human readable (i.e. printing `4.0K` instead of `4096` bytes). <a name="chmod-chown"></a> ### `chmod / chown` [[ Back to Table of Contents ]](#toc) File permissions can be modified with `chmod` by setting the access bits: ``` \[ andrew@pc01 ~ \]$ chmod 777 測試 && chmod 000 tit && ls -lh 總計 8.0K drwxr-xr-x 4 安德魯 安德魯 4.0K 1 月 4 日 19:37 品嚐 -rwxrwxrwx 1 安德魯 安德魯 40 Jan 11 16:16 測試 \---------- 1 安德魯 安德魯 0 一月 11 16:34 tist ``` ...or by adding (`+`) or removing (`-`) `r`, `w`, and `x` permissions with flags: ``` \[ andrew@pc01 ~ \]$ chmod +rwx Tist && chmod -w 測試 && ls -lh chmod：測試：新權限是 r-xrwxrwx，而不是 r-xr-xr-x 總計 8.0K drwxr-xr-x 4 安德魯 安德魯 4.0K 1 月 4 日 19:37 品嚐 -r-xrwxrwx 1 安德魯 安德魯 40 Jan 11 16:16 測試 -rwxr-xr-x 1 安德魯 安德魯 0 一月 11 16:34 tist ``` The user who owns a file can be changed with `chown`: ``` \[ andrew@pc01 ~ \]$ sudo chown 碼頭測試 ``` The group which owns a file can be changed with `chgrp`: ``` \[ andrew@pc01 ~ \]$ sudo chgrp hadoop tit && ls -lh 總計 8.0K drwxr-xr-x 4 安德魯 安德魯 4.0K 1 月 4 日 19:37 品嚐 \-----w--w- 1 瑪麗娜·安德魯 2011 年 1 月 40 日 16:16 測試 -rwxr-xr-x 1 安德魯 hadoop 0 一月 11 16:34 tist ``` <a name="users-groups"></a> ## User and Group Management <a name="users"></a> ### Users [[ Back to Table of Contents ]](#toc) `users` shows all users currently logged in. Note that a user can be logged in multiple times if -- for instance -- they're connected via multiple `ssh` sessions. ``` \[ andrew@pc01 ~ \]$ 用戶 安德魯·科林·科林·科林·科林·科林·克里希納·克里希納 ``` To see all users (even those not logged in), check `/etc/passwd`. (**WARNING**: do not modify this file! You can corrupt your user accounts and make it impossible to log in to your system.) ``` \[ andrew@pc01 ~ \]$ alias au="cut -d: -f1 /etc/passwd \\ > |排序| uniq”&& au \_易於 一個廣告 安德魯... ``` Add a user with `useradd`: ``` \[ andrew@pc01 ~ \]$ sudo useradd aardvark && au \_易於 土豚 一個廣告... ``` Delete a user with `userdel`: ``` \[ andrew@pc01 ~ \]$ sudo userdel aardvark && au \_易於 一個廣告 安德魯... ``` [Change a user’s default shell, username, password, or group membership with `usermod`.](http://bit.ly/2D4upIg) <a name="groups"></a> ### Groups [[ Back to Table of Contents ]](#toc) `groups` shows all of the groups of which the current user is a member: ``` \[ andrew@pc01 ~ \]$ 組 andrew adm cdrom sudo dial plugdev lpadmin sambashare hadoop ``` To see all groups on the system, check `/etc/group`. (**DO NOT MODIFY** this file unless you know what you are doing.) ``` \[ andrew@pc01 ~ \]$ alias ag=“cut -d: -f1 /etc/group \\ > |排序”&& ag 管理員 一個廣告 安德魯... ``` Add a group with `groupadd`: ``` \[ andrew@pc01 ~ \]$ sudo groupadd aardvark && ag 土豚 管理員 一個廣告... ``` Delete a group with `groupdel`: ``` \[ andrew@pc01 ~ \]$ sudo groupdel aardvark && ag 管理員 一個廣告 安德魯... ``` [Change a group’s name, ID number, or password with `groupmod`.](https://linux.die.net/man/8/groupmod) <a name="text-processing"></a> ## Text Processing <a name="uniq-sort-diff-cmp"></a> ### `uniq / sort / diff / cmp` [[ Back to Table of Contents ]](#toc) `uniq` can print unique lines (default) or repeated lines: ``` \[ andrew@pc01 man \]$ printf "1\\n2\\n2" > a && \\ > printf "1\\n3\\n2" > b \[ andrew@pc01 人 \]$ uniq a 1 2 ``` `sort` will sort lines alphabetically / numerically: ``` \[ andrew@pc01 man \]$ 排序 b 1 2 3 ``` `diff` will report which lines differ between two files: ``` \[ andrew@pc01 人 \]$ diff ab 2c2 < 2 --- > 3 ``` `cmp` reports which bytes differ between two files: ``` \[andrew@pc01 人\]$ cmp ab ab 不同：字元 3，第 2 行 ``` <a name="cut-sed"></a> ### `cut / sed` [[ Back to Table of Contents ]](#toc) `cut` is usually used to cut a line into sections on some delimiter (good for CSV processing). `-d` specifies the delimiter and `-f` specifies the field index to print (starting with 1 for the first field): ``` \[ andrew@pc01 人 \]$ printf "137.99.234.23" > c \[ andrew@pc01 man \]$ cut -d'.' c-f1 137 ``` `sed` is commonly used to replace a string with another string in a file: ``` \[ andrew@pc01 man \]$ echo "舊" | sed s/舊/新/ 新的 ``` ...but `sed` is an extremely powerful utility, and cannot be properly summarised here. It’s actually Turing-complete, so it can do anything that any other programming language can do. `sed` can find and replace based on regular expressions, selectively print lines of a file which match or contain a certain pattern, edit text files in-place and non-interactively, and much more. A few good tutorials on `sed` include: - [https://www.tutorialspoint.com/sed/](https://www.tutorialspoint.com/sed/) - [http://www.grymoire.com/Unix/Sed.html](http://www.grymoire.com/Unix/Sed.html) - [https://www.computerhope.com/unix/used.htm](https://www.computerhope.com/unix/used.htm) <a name="pattern-matching"></a> ## Pattern Matching <a name="grep"></a> ### `grep` [[ Back to Table of Contents ]](#toc) The name `grep` comes from `g`/`re`/`p` (search `g`lobally for a `r`egular `e`xpression and `p`rint it); it’s used for finding text in files. `grep` is used to find lines of a file which match some pattern: ``` \[ andrew@pc01 ~ \]$ grep -e " *.fi.* " /etc/profile /etc/profile：Bourne shell 的系統範圍 .profile 檔案 (sh(1)) =================================================== ``` # The file bash.bashrc already sets the default PS1. ``` ``` fi ``` ``` fi ``` … ``` ...or contain some word: ``` \[ andrew@pc01 ~ \]$ grep "andrew" /etc/passwd 安德魯:x:1000:1000:安德魯,,,:/home/andrew:/bin/bash ``` `grep` is usually the go-to choice for simply finding matching lines in a file, if you’re planning on allowing some other program to handle those lines (or if you just want to view them). `grep` allows for (`-E`) use of extended regular expressions, (`-F`) matching any one of multiple strings at once, and (`-r`) recursively searching files within a directory. These flags used to be implemented as separate commands (`egrep`, `fgrep`, and `rgrep`, respectively), but those commands are now deprecated. > **Bonus**: [see the origins of the names of a few famous `bash` commands](https://kb.iu.edu/d/abnd) <a name="awk"></a> ### `awk` [[ Back to Table of Contents ]](#toc) `awk` is a pattern-matching language built around reading and manipulating delimited data files, like CSV files. As a rule of thumb, `grep` is good for finding strings and patterns in files, `sed` is good for one-to-one replacement of strings in files, and `awk` is good for extracting strings and patterns from files and analysing them. As an example of what `awk` can do, here’s a file containing two columns of data: ``` \[ andrew@pc01 ~ \]$ printf "A 10\\nB 20\\nC 60" > 文件 ``` Loop over the lines, add the number to sum, increment count, print the average: ``` \[ andrew@pc01 ~ \]$ awk 'BEGIN {sum=0;計數=0； OFS=“”} {sum+=$2; count++} END {print "平均值:", sum/count}' 文件 平均：30 ``` `sed` and `awk` are both Turing-complete languages. There have been multiple books written about each of them. They can be extremely useful with pattern matching and text processing. I really don’t have enough space here to do either of them justice. Go read more about them! > **Bonus**: [learn about some of the differences between `sed`, `grep`, and `awk`](http://bit.ly/2AI3IaN) <a name="ssh"></a> ## Copying Files Over `ssh` <a name="ssh-scp"></a> ### `ssh / scp` [[ Back to Table of Contents ]](#toc) `ssh` is how Unix-based machines connect to each other over a network: ``` \[ andrew@pc01 ~ \]$ ssh –p安德魯@137.xxx.xxx.89 上次登入：2019 年 1 月 11 日星期五 12:30:52，來自 137.xxx.xxx.199 ``` Notice that my prompt has changed as I’m now on a different machine: ``` \[ andrew@pc02 ~ \]$ 退出 登出 與 137.xxx.xxx.89 的連線已關閉。 ``` Create a file on machine 1: ``` \[ andrew@pc01 ~ \]$ echo "你好" > 你好 ``` Copy it to machine 2 using `scp` (secure copy; note that `scp` uses `–P` for a port #, `ssh` uses `–p`) ``` \[ andrew@pc01 ~ \]$ scp –P你好安德魯@137.xxx.xxx.89:~ 你好 100% 0 0.0KB/秒 00:00 ``` `ssh` into machine 2: ``` \[ andrew@pc02 ~ \]$ ssh –p安德魯@137.xxx.xxx.89 上次登入：2019 年 1 月 11 日星期五 22:47:37，來自 137.xxx.xxx.79 ``` The file’s there! ``` \[ andrew@pc02 ~ \]$ ls 你好多xargs \[ andrew@pc02 ~ \]$ 貓你好 你好 ``` <a name="rsync"></a> ### `rsync` [[ Back to Table of Contents ]](#toc) `rsync` is a file-copying tool which minimises the amount of data copied by looking for deltas (changes) between files. Suppose we have two directories: `d`, with one file, and `s`, with two files: ``` \[ andrew@pc01 d \]$ ls && ls ../s f0 f0 f1 ``` Sync the directories (copying only missing data) with `rsync`: ``` \[ andrew@pc01 d \]$ rsync -off ../s/\* . 正在發送增量文件列表... ``` `d` now contains all files that `s` contains: ``` \[ andrew@pc01 d \]$ ls f0 f1 ``` `rsync` can be performed over `ssh` as well: ``` \[ andrew@pc02 r \]$ ls \[ andrew@pc02 r \]$ rsync -avz -e "ssh -p “ [email protected]:~/s/\* 。 接收增量檔案列表 f0 f1 發送 62 位元組 接收 150 位元組 141.33 位元組/秒 總大小為 0 加速率為 0.00 \[ andrew@pc02 r \]$ ls f0 f1 ``` <a name="long-running-processes"></a> ## Long-Running Processes <a name="yes-nohup-ps-kill"></a> ### `yes / nohup / ps / kill` [[ Back to Table of Contents ]](#toc) Sometimes, `ssh` connections can disconnect due to network or hardware problems. Any processes initialized through that connection will be “hung up” and terminate. Running a command with `nohup` insures that the command will not be hung up if the shell is closed or if the network connection fails. Run `yes` (continually outputs "y" until it’s killed) with `nohup`: ``` \[ andrew@pc01 ~ \]$ nohup 是 & \[1\]13173 ``` `ps` shows a list of the current user’s processes (note PID number 13173): ``` \[ andrew@pc01 ~ \]$ ps | sed -n '/是/p' 13173 分/10 00:00:12 是 ``` _...log out and log back into this shell..._ The process has disappeared from `ps`! ``` \[ andrew@pc01 ~ \]$ ps | sed -n '/是/p' ``` But it still appears in `top` and `htop` output: ``` \[ andrew@pc01 ~ \]$ 頂部 -bn 1 | sed -n '/是/p' 13173 安德魯 20 0 4372 704 636 D 25.0 0.0 0:35.99 是 ``` Kill this process with `-9` followed by its process ID (PID) number: ``` \[ andrew@pc01 ~ \]$ 殺死 -9 13173 ``` It no longer appears in `top`, because it’s been killed: ``` \[ andrew@pc01 ~ \]$ 頂部 -bn 1 | sed -n '/是/p' ``` <a name="cron"></a> ### `cron / crontab / >>` [[ Back to Table of Contents ]](#toc) `cron` provides an easy way of automating regular, scheduled tasks. You can edit your `cron` jobs with `crontab –e` (opens a text editor). Append the line: ``` - - - - - 日期 >> ~/datefile.txt ``` This will run the `date` command every minute, appending (with the `>>` operator) the output to a file: ``` \[ andrew@pc02 ~ \]$ head ~/datefile.txt 2019 年 1 月 12 日星期六 14:37:01 GMT 2019 年 1 月 12 日星期六

0個讚   0留言 116瀏覽

💻Visual Studio Code 快捷指南、更高的生產力、以及您需要學習的 30 個快捷指令

介紹 == Visual Studio Code 允許您透過命令面板或鍵盤上的快捷鍵存取它提供的幾乎所有功能。 您可能每個工作日工作 8 小時，希望您能在這些工作時間中大部分時間進行編碼。所以你花了很多時間盯著你選擇的程式碼編輯器。 了解一些快捷方式可以幫助您更快地完成工作。知道如何更快地找到您需要的文件。您需要立即執行 NPM 命令，而不是開啟外部終端。 ![雙手在鍵盤上快速打字](https://media.giphy.com/media/eMxZ6lPl8dW9O/giphy.gif) 捷徑備忘單 ===== Visual Studio Code 的開發者 - [視窗](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf) - [Linux](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf) - [蘋果系統](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf) 您可以下載這些備忘單，列印出來，然後將其放在辦公桌上以供快速參考，或嘗試在上班途中學習它們。不要試圖一次學會所有這些。這需要時間。所以要有耐心，你就會掌握它們。 鍵位圖 === 您是 Vim 用戶嗎？也許 Emacs 快捷方式已經刻在你的大腦裡了？或者，無論出於何種原因，您使用記事本++並欣賞記事本++的鍵盤快捷鍵😵？ Visual Studio 為大家提供了一個擴充功能！讓我們安裝 ⚛ `Atom Keymap` 。我們將在沒有我們心愛的滑鼠的幫助下（幾乎）做到這一點。 1\) 開啟 Visual Studio 程式碼。 2\) Visual Studio Code 開啟後，按： `CTRL+SHIFT+X` 。該快捷方式將打開擴展列表，並且您的遊標將聚焦在搜尋欄上。輸入以下`@category:keymaps` 。 （如果您想了解更多有關本節中擴展程序如何工作的訊息，請在下面發表評論！） 3\) 您現在會看到鍵盤映射清單。按`Tab` ，然後按`Down Arrow ⬇` 。 4\) 按`⬇`直到選擇`Atom Keymap` 。現在按`Enter` 。 5）遺憾的是我找不到選擇「安裝」按鈕的方法。您現在需要點擊🖱！ 您可以找到幾乎所有您能想像到的編輯器的鍵盤映射。安裝您最喜歡的那個，您就有了快捷方式！很酷吧？ 鍵盤快速鍵設定 (JSON) ============== 有多種方法可以查看鍵盤快捷鍵設定。其中一種是透過圖形介面，也可以選擇使用透過 JSON 檔案來編輯捷徑。 圖形介面 ---- 我們可以按`CTRL+k`開啟圖形介面，然後仍然按住`CTRL` ，您應該按`CTRL+s` 。 ![鍵盤快捷鍵設定 GUI](https://thepracticaldev.s3.amazonaws.com/i/3etyosi4ljtp1d9lvk5i.png) 頂部有一個搜尋欄，您可以在其中搜尋要查看的命令或鍵盤快捷鍵。這些對話框在 Visual Studio Code 中看起來往往相同，您將開始經常看到它們。 您可以看到四列。讓我們來看看它們。 \*指令：Visual Studio Code 執行的操作。 - 鍵綁定：執行操作時必須按下的按鍵組合。 - 何時：這是 Visual Studio Code 的過濾器，它告訴 Visual Studio Code 捷徑是否應該在該上下文中可操作。有些過濾器可能是整合終端、原始碼中的錯誤等等。 - 來源：Visual Studio 程式碼可以透過多種方式了解捷徑。最常見的是`Default` ，這些命令是 Visual Studio Code 隨附的開箱即用命令。顧名思義`User`是由用戶建立的命令。第三種方式是透過`Extension` 。擴展作者還可以決定加入快捷方式。如果您最喜歡的快捷方式不起作用，這可能是它停止工作的原因。 若要變更鍵綁定，請雙擊該行，然後會彈出一個模式。然後按下所需的組合鍵並按下`Enter` 。 鍵綁定 JSON 文件 ----------- 現在我們知道了鍵綁定的一般工作原理，讓我們來看看`keybindings.json`檔案。 其中有兩個：預設的`keybindings.json`和使用者特定的`keybindings.json`檔案。按`CTRL+SHIFT+P`或`F1`開啟命令匣並鍵入`keyboard shortcuts`現在您應該在命令托盤中看到至少兩個條目。 - 首選項：開啟預設鍵盤快速鍵 (JSON)。 這是 Visual Studio Code 儲存所有預設快捷方式的文件，以及底部未使用的可用捷徑清單。我會避免在這裡更改它們。 - 首選項：開啟鍵盤快速鍵 (JSON) 這是用戶特定的鍵綁定文件，您應該編輯此文件。一開始，它只是一個空陣列而已！ 要在 JSON 檔案中新增快捷方式，您只需新增一個如下所示的物件： ``` [ { "key": "CTRL+ALT+P", "command": "git.pull", "when": "" } ] ``` 您需要指定密鑰和命令。 `when`告訴 Visual Studio Code 應在何處執行此命令。如果你把它留空，它會到處監聽。我們在上一部分談到了這一點。 有用的快捷鍵 ====== 打開命令面板 ------ 您已經知道這一點，但也許您跳到了這一部分 😉 - `CRTL+SHIFT+P`或`F1` 這將開啟 Visual Studio Code 中最強大的功能。命令面板。只需輸入您認為想要的內容，它仍然可以找到它！ 打開和關閉側邊欄 -------- 有時您想要更多的水平空間，但側邊欄卻妨礙了您！只需按 - `CTRL+B` 您可以打開和關閉側邊欄 輸入禪宗模式 ------ 你喜歡 Visual Studio 程式碼中的 Zen Mod 嗎？是的，它是內建的！ 為此，您需要按： - `CTRL+k` ，放開兩個按鍵並按`z` 。 這將打開和關閉 Zen Mod。 聚焦綜合終端 ------ 我最喜歡的功能之一是 Visual Studio Code 中的整合終端機。我99%的時間都在用它！因此要快速打開或關閉它，您需要按： - `CTRL+j` 這將打開整合終端並將遊標聚焦在其中。如果您再次按下它，它將關閉，並且您的遊標將返回到原來的位置。 在您的專案中搜尋文件 ---------- Visual Studio Code 有一個很棒的檔案搜尋內建功能。當您使用遠端擴展時，它也非常快。要打開它，您只需按： - `CTRL+p` 這將打開一個對話框，您可以在其中查看最近打開的文件，這本身就非常好。它還支援模糊搜尋。這意味著您可以鍵入任何單字，它會在檔案的路徑中找到。所以你不必精確！該對話還支持更多的事情。例如`go-to line`或除錯以及更多功能！如果您想了解更多請在下面評論。 切換到最近開啟的工作區 ----------- 您在微服務架構中工作並且需要一直切換資料夾？因為你不使用 mono 倉庫？我有捷徑給你！按： - `CTRL+r` 這將開啟一個對話框，其中包含最近開啟的工作區/資料夾的清單。 額外提示：如果您在該對話方塊中按`CTRL+ENTER` Visual Studio Code 將在新視窗中開啟它。 分割編輯器視窗 ------- 人們喜歡 vim，因為它很容易在編輯器之間分割視圖。 Visual Studio Code 也內建了功能。只需按 - `CTRL+\` 若要建立 2 列或 - `CTRL+k` ，放開`k`並按住`CTRL`並按`\` 建立一個新行。第二個聽起來比它更難，但是一旦它進入你的大腦，它需要你幾秒鐘的時間，你現在知道如何更改或建立新的快捷方式😉 聚焦編輯器視窗 ------- 既然您知道如何拆分編輯器窗口，您還需要學習如何快速跳轉這些視圖。這非常簡單，並且還有預設的鍵綁定。你需要按 - `CTRL+[1-9]` 這表示您需要按`CTRL`加您想要關注的視窗的編號。對於第一個視窗按`CTRL+1` ，第二個視窗`CTRL+2` ，您明白了 Easy 的想法嗎？ 關閉目前編輯器視窗 --------- 現在您打開了太多編輯器窗口，並且您想要關閉它們。這可以透過按快速完成 - `CTRL+w` 這將關閉目前開啟的視窗。 僅關閉已儲存的編輯器視窗 ------------ 有時您會開啟如此多的編輯器，以至於您不再知道要儲存了什麼。是的，我知道您可以透過選項卡欄中的那個點看到這一點，但是，您仍然無法集中精力並找到正確的檔案。 Visual Studio Code 為您提供支援！只需按 - `CTRL+k`然後放開`CTRL`和`k`並按`u` 這將保存所有窗口，以便您可以檢查未保存的窗口並保存它們。 開啟一個新文件 ------- 您需要一個新檔案來繪製一些程式碼嗎？或者，您需要為您的寵物專案建立一個新檔案？按 - `CTRL+n` 這將開啟一個新編輯器。 更改目前文件的語言 --------- 您想切換目前文件中選定的語言，因為您想要`Javascript (react)`而不是`Javascript` ？按 - `CTRL+k` 然後放開`CTRL`和`k`並按 'm`。 這將打開一個新的對話，您可以在其中搜尋所需的語言。 前往線路 ---- 現在讓我們專注於如何讓編輯變得更容易。第 1042 行有錯誤（如果您的文件那麼長，那麼問題就來了）。你不想滾動！按 - `CTRL+g` 這將開啟一個對話框，您需要輸入要跳到的行號。與`CTRL+p`結合使用會非常強大。 轉到符號 ---- 您的第一個問題是，什麼是符號？在程式語言中，符號通常是變數。在 CSS 中，它們是選擇器。若要查看對話，請按 - `CTRL+SHIFT+O` 這將開啟一個對話框，其中包含目前文件中可用符號的清單。 - `CTRL+t` 您會看到一個只有`#`的對話框，您需要鍵入所需的符號，Visual Studio Code 會在空工作區中搜尋該符號（如果您使用的語言支援該符號）。所以你需要自己檢查一下。 向上或向下移動一條線。 ----------- 有時您需要移出`if`內的那行程式碼，或只是移動一行，因為它被提前呼叫了。您可以透過按 - `Alt+Down` 將目前選定的行向下移動一行 - `Alt+Up` 將目前選定的行向上移動一行 複製目前行 ----- 您想用一些變數填充該陣列，但您懶得寫一個循環。那麼要如何填滿`array[0]` `array[1]`和`array[2]`呢？透過複製第一行兩次並僅更改您需要的內容。對於那個新聞界 - `ALT+SHIFT+Up` 這將複製當前選定的行並將其貼上到上面的一行中 - `ALT+SHIFT+Down` 這將複製目前選定的行並將其貼上到下面的一行中 （這個快捷方式在這裡會很方便） 顯示建議 ---- Visual Studio Code 有內建建議。大多數時候它會自動為您彈出，但有時不會，而您確實需要它。簡單，按 - `CTRL+Spacebar` 這將打開建議對話框 註解掉目前選擇 ------- 有時您需要隔離程式碼並註解掉它周圍的所有內容。按 - `CTRL+/` 如果您選擇了多行，則會將其註解掉。如果您沒有選擇任何內容，它只會註解掉這一行。 選擇多行程式碼 ------- 要註解掉該程式碼區塊，您需要選擇多行。這是透過按完成的 - `CTRL+Shift+Up` 從目前行開始選擇並向上移動遊標。 - `CTRL+Shift+down` 從目前行開始選擇並向下移動遊標。 折疊和展開您的程式碼 ---------- 你有這麼大的功能，但你真的看不到它了，因為它太大了，需要重構，但你沒有時間，所以你想忘記它嗎？您可以折疊和展開程式碼，以便在 100 行中可以產生 1 行。若要執行此操作，請按 - `CTRL+SHIFT+[` 折疊（隱藏）程式碼 - `CTRL+SHIFT+]` 展開（顯示）程式碼 切一條孔線 ----- 對於此，您不能選擇任何程式碼。按 - `CTRL+x` 當沒有選擇任何內容時，這會剪切整行。 縮排/減少線 ------ 人們通常知道如何縮排程式碼。您可以選擇要縮排的程式碼並按 - `Tab` 按下您想要的次數按 Tab 鍵，這樣效果就適合您了。 您知道可以取消縮排嗎？將程式碼從右移到左？您可以透過按 - `SHIFT+tab` 結論 == 還有更多的捷徑。這些快捷鍵是我最常使用的快捷鍵。我希望這可以幫助您更多地了解 Visual Studio Code 中的快捷方式，並且您現在可以建立自己的快捷方式。 我是否忽略了每個人都需要知道的有用命令？ 你錯過了什麼嗎？有什麼不清楚嗎？ 請寫評論。我盡我所能回答你所有的問題！ **👋問好！** [Instagram](https://www.instagram.com/lampewebdev/) |[推特](https://twitter.com/lampewebdev)|[領英](https://www.linkedin.com/in/michael-lazarski-25725a87)|[中等](https://medium.com/@lampewebdevelopment)|[抽搐](https://dev.to/twitch_live_streams/lampewebdev)| [Youtube](https://www.youtube.com/channel/UCYCe4Cnracnq91J0CgoyKAQ) --- 原文出處：https://dev.to/lampewebdev/the-guide-to-visual-studio-code-shortcuts-higher-productivity-and-30-of-my-favourite-shortcuts-you-need-to-learn-mb3

0個讚   0留言 211瀏覽

為什麼我從 Visual Studio Code 切換到 Sublime Text

最近，我改用[Sublime Text](https://www.sublimetext.com/)作為我的主要程式碼編輯器。一年多來，我一直使用[Visual Studio Code](https://code.visualstudio.com/)來編寫程式碼。這兩個編輯器非常相似，但也有足夠的差異，我想分享一下是什麼讓我全職使用 Sublime。 *注意：這篇文章並不是要為了一項技術而抨擊另一項技術。我嘗試根據我的個人經驗進行誠實的比較，但選擇程式碼編輯器是一個主觀過程，因此每個人都會對自己的最愛有不同的看法。* 是什麼讓我跳槽 ------- ### 偉大的符號分析 當您在 Sublime Text 中開啟一個專案時，它會自動啟動一個稱為「符號分析」的過程，這是在程式碼中尋找關鍵字的一個奇特術語。符號分析的好處在於，我可以輸入 Cmd + Shift + R 來調出符號搜尋選單，並在整個程式碼中快速找到類別名稱和方法。我主要使用 PHP，因此如果我已經知道我正在處理的類別名稱是`PostController` ，我可以在符號搜尋中搜尋它並立即在編輯器中開啟我的 PHP 類別檔案。 VS Code 也支援符號搜尋，但是，它只支援幾種開箱即用的語言。有一個與 VS Code 一起使用的第三方 PHP 符號分析器，但是，我發現它在處理大型程式碼庫時遇到困難，而 Sublime 則沒有問題。 ### 超快 Sublime Text 是可用於編寫程式碼的最快的文字編輯器。它幾乎立即打開並執行非常快速的搜尋。 Microsoft 在保持 VS Code 效能方面做得很好，但是 VS Code 是基於[Electron](https://electronjs.org/)的。 Electron 是一個用於捆綁 Chromium 實例和用 JavaScript/Node.js 編寫的程式碼的框架。它使編輯器具有很強的可擴展性，但使用 Chromium 的整個實例作為文字編輯器會使應用程式啟動緩慢並使用更多記憶體。 Sublime Text 是一個用 C++ 編寫的本機應用程式，因此其佔用空間要少得多。 ### 更好的 Vim 綁定 我非常喜歡在編寫程式碼時使用 Vim 鍵綁定。儘管我喜歡 Vim 鍵盤快捷鍵，但我仍然喜歡使用標準文字編輯器來利用側邊欄文件清單和文件標籤等現代功能。我發現 Sublime 的 Vim 支援比 VS Code 更準確，這有助於我更快地編寫程式碼。 Sublime 支援開箱即用的 Vim 綁定，但如果您使用[Vintageous](https://github.com/guillermooo/Vintageous)插件，您可以獲得更多功能。 我在 Visual Studio Code 中懷念的事情 ---------------------------- ### 功能豐富的側邊欄 VS Code 有一個非常好的側邊欄，可以更靈活地建立和移動檔案。 Sublime 有一個更好的側邊欄插件，還有其他鍵盤快捷鍵插件（例如[AdvancedNewFile）](https://github.com/skuroda/Sublime-AdvancedNewFile)可以使轉換更容易，但有時我會懷念 VS Code 側邊欄的開箱即用功能。 ### 內建偵錯工具 VS Code 有一個內建的偵錯器，適用於多種程式語言。它使得使用 PHP 的 xdebug 變得非常簡單。儘管 Sublime 有除錯插件，但它們並不像 VS Code 提供的開箱即用的那樣可靠。在這種情況下，如果我正在除錯一些棘手的東西，我仍然會打開 VS Code。 結論 -- 最後，文字編輯器完全取決於個人喜好和工作要求。對於我的用例來說，Sublime 是一次非常愉快的體驗，它幫助我更快地編寫程式碼。如果您想了解有關 Sublime Text 的更多訊息，Jeffrey Way 在 Laracasts 上開設了相關[課程](https://laracasts.com/series/sublime-text-mastery)，Wes Bos 也寫了一本相關[書籍](http://wesbos.com/sublime-text-book/)。 請在評論中告訴我您最喜歡的編輯器是什麼！ --- 原文出處：https://dev.to/restoreddev/why-i-switched-from-visual-studio-code-to-sublime-text-28k0

0個讚   0留言 191瀏覽

🎀 讓您的 K8 體驗更愉快的五種工具 🎀

對外行人來說，**K8s 代表Kubernetes**，數字8 代表**K** 和**s 之間的八個字母。** Kubernetes 在當前的技術環境中幾乎不可避免，但仍然不受歡迎，因為它的複雜性和陡峭的學習曲線。 基於終端的交互在這個故事中發揮著重要作用。如果您曾經有幸觀看一位經驗豐富的 DevOps 使用 Kubernetes 集群工作的方式，您可能會像看一位經驗豐富的武術家展示他的戰鬥技巧一樣看待他。這是因為透過終端完成的所有事情總是看起來更可怕，似乎需要多年的培訓。 🥋 現在的問題是：我們怎麼能讓這樣一個複雜的問題（甚至它的名字還被美化了）變得更有趣呢？好吧，以同樣的方式，我們讓一切變得更愉快 → 讓它變得更容易，讓它更漂亮！ 🎀 你可能會問，你會怎麼做呢？具有**圖形使用者介面**或簡稱 GUI！讓我們來看看在處理 Kubernetes 時為您提供使用者介面的**五個工具**。 ### 向我們展示您的支持🙏🏻 ![ProductHunt 發佈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khmbqrmp51l64u80tae3.gif) 在開始之前，我們想提一下，我們已經安排了 [Product Hunt 的首次發布](https://www.producthunt.com/products/cyclops)！點擊“通知我”按鈕，以便在我們外出並準備好接收您的回饋時收到提醒 🔔 如果您為我們的[儲存庫](https://github.com/cyclops-ui/cyclops)加註星標並幫助我們在其他開發人員面前獲得我們的工具，我們將非常高興 ⭐ ## Kubernetes 儀表板 讓我們深入了解 **Kubernetes 管理的精髓工具** – [**Kubernetes 儀表板**](https://kubernetes.io/docs/tasks/access-application-cluster/web-ui-dashboard/)。它會自動與您的叢集捆綁在一起，提供 Kubernetes 環境的圖形概覽。您可以使用它來概覽叢集上執行的應用程式、將容器化應用程式部署到 Kubernetes 叢集以及管理叢集資源。 Kubernetes 儀表板不僅提供概述，還有助於排除故障。它提供對 Kubernetes 資源運作狀況的洞察，突出任何操作錯誤。 透過它，您還可以部署應用程式。您可以使用您編寫的清單或透過您剛剛填寫的表單來完成此操作。但是，值得注意的是，該表單雖然用戶友好，但缺乏基本範例之外的自訂靈活性。 雖然 K8s 儀表板是**萬能**，但許多人發現它是一個多面手，缺乏深入的功能。這種限制鼓勵我們探索更多工具，每種工具都是為特定目的而設計的，因此我們透過我們探索過的工具清單開始我們的旅程。 ![K8s 儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p971mxj9xkjng9vecrdd.png) ##K9s 透過終端探索集群時，[**K9s**](https://k9scli.io/) 是你最好的朋友（明白了嗎？🐶）。它與 Vim 的互動風格有共同點，即使用快捷鍵和以 `:` 開頭的命令，但不要因此而洩氣。 K9s 密切關注 Kubernetes 活動，為資源互動提供**即時**資訊和直覺的命令。 它幾乎可以取代標準的“kubectl”，並且在與 Kubernetes 互動時不需要您身邊有“備忘單”。您只需選擇資源並深入到最低級別即可遍歷資源。這樣可以輕鬆提取日誌並存取其外殼。 K9s 可讓您查看每個資源的清單，並能夠編輯和套用變更。正如我所提到的，它**幾乎**取代了“kubectl”。區別之一是您**無法**透過 K9 部署新資源。 K9s 具有過濾資源並使用「/」指令進行搜尋的功能，可以更輕鬆地在資源海洋中找到您要尋找的資源或透過特定 pod 的日誌進行過濾。 螢幕頂部隨時可以使用的命令和快捷方式清單是一個不錯的設計，它的皮膚和插件自訂為您提供了額外實用程式的空間。 ![K9s UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aq0z9w8iocwzut4qq545.png) ## 獨眼巨人 如果您在處理清單檔案時遇到困難，[**Cyclops**](https://cyclops-ui.com/) 就是適合您的工具！ Cyclops 透過將清單轉換為基於 Web 的結構化形式，消除了處理清單時的混亂和複雜性，從而消除了手動配置和命令列互動的需要。 這使得具有不同技術專業知識水平的個人**更容易理解**部署過程。 在 Cyclops 的架構中，核心元件是 [Helm](https://helm.sh/) 引擎。 Helm 在 Kubernetes 社群中非常受歡迎；很可能你已經遇到過它。 Helm 的流行因其簡單的整合而發揮了 Cyclops 的優勢。 ![獨眼巨人表格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxyt0ydwckyjcxfp3j8g.png) 有了 Cyclops，您就不再局限於一刀切的方法。 **您可以自訂表單以滿足您的獨特需求。** 例如，團隊成員可以產生 Helm 圖表，讓其他人可以使用 Cyclops 定義必要的值，以實現輕鬆的應用程式部署。 一旦您聲明了應用程式的所需狀態，部署它就像單擊按鈕一樣簡單。此外，一旦部署應用程式，也可以透過 Cyclops 輕鬆更改所需狀態。 在 Cyclops 中，每個應用程式都列出了它使用的資源的詳細清單 - 部署、服務、pod 等，所有這些都在簡單的視圖中。您可以輕鬆追蹤它們的狀態，幫助您快速發現並修復應用程式中的任何問題。這就像有一個清晰的路線圖來導航和解決出現的任何問題。 ![獨眼巨人資源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3x7n7zvfl50ipnowiufz.png) ## 開發空間 考慮每次儲存程式碼時自動刷新本機伺服器的便利性和節省時間，從而提供程式碼變更的即時視覺化。 想像一下將這種流暢的體驗進一步應用到 Kubernetes 叢集中； [**DevSpace**](https://www.devspace.sh/) 讓這一切成為可能。借助 DevSpace，您可以在編碼過程中**即時部署應用程式**，從而促進快速迭代。 DevSpace 透過自動將變更套用到 K8s 叢集來簡化流程，而無需整個映像建置和部署管道。它在本地建立映像，而不將其推送到註冊表，儘管在開發過程中需要它的人可以使用自動推送映像的選項。 此外，DevSpace 具有一個使用者介面，雖然有些限制，但可以快速概述叢集中的所有 Pod。它允許您**輕鬆存取 Pod 日誌，甚至直接在其中執行命令**，從而增強您的開發工作流程。 儘管我專注於本地開發，但 DevSpace 也用於建立工作流程。您的所有工作流程都保存在一個檔案中，從而可以使用單一「devspace deploy」命令輕鬆在任何電腦上重現環境。 ![DevSpace UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylegdy0nnn4kjdhkdq4z.png) ## 庫貝前一個 與本文中提到的其他工具不同，[**Kubevious**](https://kubevious.io/) 無法更改叢集狀態。它僅用作可觀察性工具，重點關注集群中的潛在問題。它突出顯示了您可能執行的每種資源的潛在威脅和風險。 圖形視圖提供對容器、網路、暴露、RBAC 和 Helm 圖表的深入了解，以進行直觀的故障排除。 Kubevious 有一個**規則引擎**，有助於偵測並防止錯誤配置。它附帶了開箱即用的規則，但它也允許您建立自訂規則（例如，「不允許圖像位於*最新*標籤上」）。 它還配備了很酷的**時間機器**功能，允許用戶回到過去、審核應用程式、根本原因中斷和恢復清單，確保完全了解叢集歷史記錄。 我不得不提一下它提供的**全文**搜尋！您可以搜尋任何資源，而無需知道其特定名稱。一個很好的例子是，只需輸入「*port 3000*」即可搜尋使用特定連接埠的任何資源，Kubevious 就會找到您的資源。 ![Kubevious 儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tdnmefdwc5i36vsul3m.png) ## 最後的想法 為了增強 Kubernetes 體驗，我們推出了五個令人愉悅的工具，每個工具都有其獨特的魅力，讓您的旅程更加順暢和愉快。 這些並不是為 Kubernetes 提供 UI 的唯一工具，但我們希望專注於一些可能不太知名的工具。 所有這些工具都是開源的，所以請嘗試一下；他們是免費的！ 我想用一個針對讀者的問題來結束這篇文章：您對 Kubernetes 的圖形表示有何看法？是否需要，或者「kubectl」是否佔據主導地位？ --- 原文出處：https://dev.to/cyclops-ui/five-tools-to-make-your-k8s-experience-more-enjoyable-5d85

0個讚   0留言 169瀏覽

🐍 Python Playground：16 種入門方法📚

## 簡介 本文是一份指南，旨在透過易於使用且引人入勝的資源來幫助 Python 程式設計新手。從適合初學者的庫到互動式編碼平台，您應該找到最適合您的！ ![介紹 GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t9my6x9r0e94l27b92o5.gif) --- # 圖書館 以下 Python 函式庫易於使用，非常適合 Python 入門。 ![Python 函式庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h692caetdehj9360jceg.png) ## 1- [Taipy](https://github.com/Avaiga/taipy) Taipy 是 Python 領域的一個新程式庫，非常適合用最少的程式碼建立強大的 Web 應用程式。使用 Taipy 開始使用 Web 應用程式。 🔑特點： - 豐富的互動性 - 為您的佈局、樣式等提供更多自訂功能（無需 CSS） - 多頁和多用戶應用程式 --- ![QueenB GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0un08vhstrk6zpst5yti.gif) 您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- ## 2- [海龜圖形](https://docs.python.org/3/library/turtle.html) 絕對初學者的起點。這個預先安裝的 Python 程式庫以有趣且直覺的方式教您 Python 程式設計的基礎知識。 --- ## 3- [EasyGUI](https://easygui.sourceforge.net/) 開始使用此庫的圖形使用者介面 (GUI)。 它的簡單性使其成為初學者建立基本 GUI 的首選。 --- ## 4- [Matplotlib](https://github.com/matplotlib/matplotlib) 這個小部件庫成為 Python 領域的首選是有充分理由的。憑藉廣泛的圖表類型，您可以繪製任何 2D 圖表。 該庫允許透過細粒度的圖形元素進行顯著的客製化。 --- ## 5- [Pandas](https://github.com/pandas-dev/pandas) 即使所有 Pythonista 都使用 Pandas，這個函式庫也很容易理解，並且允許您做很多事情。 您可以了解資料框和系列以及如何有效地處理資料。 🔑特點： - 從各種來源載入資料 - 重塑資料框 - 透過基本統計進行基本資料分析 --- ## 6-[桑尼](https://thonny.org/) Thonny 對於初學者來說是一個很棒的 IDE。 它具有幫助理解程式設計過程以及直接編寫和除錯 Python 程式碼的出色功能。您可以在這個輕鬆的環境中嘗試以前的庫。 --- # 編碼平台 程式設計平台提供類似學術的環境，非常適合快速、結構化的學習。 ![編碼平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqkaqb15vava1iuwg42l.png) ## 7- [Datacamp](https://www.datacamp.com/) 這是我開始使用Python的平台，怎麼能不包括它呢？ Datacamp 是一個互動式學習平台，專注於圍繞資料科學和分析進行程式設計。他們有不同程度的課程，使其成為開始學習 Python 和資料分析概念的好地方。 --- ## 8-【程式碼實戰】(https://codecombat.com/) Code Combat 讓學習變得有趣，就像您在玩遊戲的同時學習 Python 一樣。 這個平台有一個世界，您可以在遊戲中提升角色，同時學習如何編碼。 這個網站適合年輕一代，但我建議任何年齡的初學者嘗試！ --- ## 9- [Sololearn](https://www.sololearn.com/) 這個平台透過他們的社區旋轉和發展。 Sololearn 專注於簡短的 Python 課程，是隨時隨地學習 Python 的絕佳工具。 --- # 教學與挑戰 教學和挑戰是透過小型且可管理的專案來增強和測試 Python 技能的絕佳方法。 ![教學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v195zko860x4d3bffznm.png) ## 10- [Codechef](https://www.codechef.com/) 該網站以程式設計競賽為特色。 對於那些透過競賽學得更好的人來說，Codechef 適合您。它們提供各種挑戰來滿足所有程式設計等級的需求。 --- ## 11- [Codewars](https://www.codewars.com/) 該社區網站還提供程式設計挑戰。 這是使用 Python 學習和挑戰自己的好方法。 --- ## 12- [精通機器學習](https://machinelearningmastery.com/) Machine Learning Mastery 提供機器學習和 Python 的教學和書籍。 這些教程對我的一些機器學習專案很有幫助，我仍然不時回顧它們！ --- # 完整專案 使用 Python 建立整個專案是在現實場景中測試您的技能的好方法。一般來說，這些專案是對你的投資組合的一個很好的補充。 ![完整專案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/la3zqq1e7kr7gmncblxa.png) ## 13- [Kaggle](https://www.kaggle.com/) 這個平台是我測試 Python 和機器學習技能的首選平台。該平台展示資料科學專案。 Kaggle 也是加入到您的履歷中的一個很好的資源。 --- ## 14- [freeCodeCamp](https://www.freecodecamp.org/) 儘管 freeCodeCamp 專注於 Web 開發，但該平台也使用 Python 專案。邊做邊學的好方法。 --- # 黑客松 黑客馬拉松是在動態和協作的環境中學習的好方法。參加黑客馬拉鬆在學術和專業上都很有價值。 ![黑客松](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9xcuqaoj7tsw7a7ri0b.png) ## 15- [駭客大聯盟](https://mlh.io/) MLH 為來自世界各地的學生舉辦黑客馬拉松。他們的黑客馬拉松可以在現場進行，也可以在網路上進行。 黑客馬拉松非常適合將 Python 技能應用到實際專案中。 此外，這是在面試或履歷中展示專案的好方法。 --- ## 16- [Devpost](https://devpost.com/) Devpost 是一個線上黑客馬拉松網站。他們提供的活動<在主題和獎品方面有很多選擇！ --- ## 結論 這些資源提供了多種方式來透過這些易於使用的函式庫、互動式學習平台和實際挑戰來啟動您的 Python 程式設計之旅。 --- ![GIF 結束](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvimkpxsq91d6m1jfei1.gif) 如果您有任何問題或回饋，請隨時與我們聯繫！ --- 原文出處：https://dev.to/taipy/python-playground-16-ways-to-get-started-4fgg

0個讚   0留言 168瀏覽

✨2024 我的決心：更以開源專案為中心思想！

## 簡介 當（幾乎）總是有一個開源替代品可以完成同樣的工作（如果不是更好的話）時，為什麼還要依賴專有軟體和服務呢？ 以下是我一直在使用的 10 個開源替代方案，涵蓋從專案管理和通訊到資料分析的所有內容。 ![Gif 簡介](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypv9s82s7843ecb1a36t.gif) --- ## 1- [Taipy](https://github.com/Avaiga/taipy) 而不是 Tableau Tableau 可能是資料視覺化領域的頂級參與者之一，但 Taipy 提供了強大的替代方案。 Taipy 是一個開源 Python 程式庫，可讓您建立全面的 Web 應用程式來展示資料視覺化。 Taipy 程式碼量低、高度可自訂，並且在建立儀表板時提供更大的靈活性。 ![Taipy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lai9u2uqawun2j5mf7ur.gif) --- ![QueenB GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0un08vhstrk6zpst5yti.gif) 您的支持意義重大🌱，並且在許多方面為我們帶來了很大的幫助，例如寫文章！ 🙏 --- ## 2- [Cal.com](http://Cal.com) 而非 Calendly Calendly 是簡化日程安排的變革者，但 [Cal.com](http://Cal.com) 成功地將其提升到了一個新的水平。這個開源 gem 有以下功能： - 團隊調度 - 整合視訊會議 - 自動時區偵測 ![Cal](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bjea3cr44s86z5deirt.gif) --- ## 3- [Plausible](https://github.com/plausible/analytics) 而非 Google Analytics 當然，Google Analytics 是一個大牌，但有時較小的工具也能提供同樣多的功能，一個很好的例子就是 Plausible。 這個開源工具提供像Google一樣的網站分析功能，不，他們不會損害資料隱私。 ![看似合理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmonhrmf5gch5kn6fe0e.gif) --- ## 4- [AppFlowy](https://github.com/AppFlowy-IO/AppFlowy) 而非 Notion Notion 是一個非常適合做筆記和專案管理的工作空間，但如果您想要一個更簡單的選項，請嘗試 AppFlowy。 該工具提供了一種極簡主義的替代方案，專注於簡單地建立和組織清單、註釋和任務。 介面非常人性化；您很快就會成為專業人士。 ![AppFlowy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wko5i9mphadcq1pa6bsh.gif) --- ## 5- [Penpot](https://github.com/penpot/penpot) 而非 Figma Figma 是一個設計巨頭，但它的開源表弟 Penpot 在過去一年中一直在增長勢頭。 以下是 Penpot 的主要功能： - 協同設計能力 - 向量編輯 - 互動式原型 - 成本效益 ![Penpot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pkg8ayeuw0y1q0tme50t.gif) --- ## 6- [Fonoster](https://github.com/fonoster) 而非 Twilio Twilio 是一個通訊平台，提供簡訊、語音、視訊和身份驗證 API，並提供無縫的客戶體驗。 讓我向您介紹 Fonoster，這是一種經濟高效的替代方案。 Fonoster 提供類似的語音和訊息服務。 Fonoster 專注於可擴展性，同時為您提供無縫的客戶體驗。 ![Fonoster](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jk20ziqppgcpbfr6e37.gif) --- ## 7- [NextCloud](https://github.com/nextcloud/server) 而不是 Dropbox NextCloud 是 Dropbox 的開源競爭對手。 它提供文件託管、協作和同步功能，同時保持資料的隱私性並處於您的控制之下。 ![NextCloud](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/szichu2pjf9xzah9v64y.gif) --- ## 8- [Jitsi](https://github.com/jitsi/jitsi-meet) 而非 Google Meets Jitsi 是 Google Meets 的替代品，提供類似的視訊會議功能。 他們的主要特徵： - 端對端加密 - 螢幕分享 - 並且無需註冊！ ![Jitsi](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwnxa8hy6a0svqb4yo1d.gif) --- ## 9- [Padloc](https://github.com/padloc/padloc) 與 1Password 1Password 在密碼管理領域享有盛譽，但開源工具 Padloc 同樣注重隱私和安全性。 您可以使用 Padloc 安全地儲存和管理您的敏感和私人訊息，就像 1Password 一樣。 ![Padloc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4st8nymwlf3wlslz029k.gif) --- ## 10- [Crowd.dev](https://github.com/CrowdDotDev/crowd.dev) 而非公共房間 Common Room 在社區建設領域一直勢頭強勁，但不要忽視他們的開源替代方案「crowd.dev」。 無論是專案管理、資金還是協作，「crowd.dev」對於建立和發展線上社群都是不可忽視的。 ![人群](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9j3mxkbk6wuwyt2g1fdh.gif) --- ## 結論 選擇工具時，請記住查看開源選項。 開源帶來了透明度、可自訂性和成本效益，在大多數情況下都是不錯的選擇。 ![GIF 結束](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvimkpxsq91d6m1jfei1.gif) 恭喜你，你已經走到最後了！如果您有任何疑問，請隨時諮詢。 --- 原文出處：https://dev.to/taipy/2024-resolution-be-more-open-source-centric-1jje

0個讚   0留言 248瀏覽

提高工作效率的 3 個 CMD 命令

以下是一些重要的快捷方式，可以幫助我全天提高工作效率： - 為指令建立別名。 - 使用 pbcopy。 - 在終端機中使用反向搜尋。 - 獎勵技巧和技巧。 --- ## 指令的別名 Alias可以是我們手中最強大的工具之一，它為我們提供了編寫自己的快捷方式的能力。讓我們透過一個例子來看看我的意思。 ``` alias dev="cd ~/Project/development" ``` 每當我輸入 dev 並按 Enter 鍵時，它都會執行此命令。當導航到不同的資料夾時，這變得非常有用。我們可以執行別名中的幾乎所有命令。以下是我最常用的一些指令的清單： ``` alias ..="cd .." alias gs="git status" alias gp="git pull" alias gb="git branch" alias ga="git add ." ``` 因此，使用這些別名，我可以在白天節省大量時間來建立我鍵入的目錄，而不是 cd...我認為其餘的都是不言自明的。我們也可以使用 $1、$2 等參數來提高可擴展性，如下例所示： ``` alias gc="git commit -m $1" ``` 現在，我只需輸入 gc“Commit message”，它就會使用提供的訊息提交我的更改。您所要做的就是找到最常用的命令，並嘗試使用別名來縮短它們，從而提高工作效率。 現在我們知道別名可以做什麼，讓我們看看如何設定它們。我們可以透過兩種方法來實現這一點，第一種是臨時的，可以透過執行命令來設定： ``` alias dev="cd ~/Project/development" ``` 這將一直有效，直到會話結束。另一種方法是永久設定這些別名。為此，我們需要在 shell 中進行設置，我使用 Zsh，所以我將更新我的 ~/.zshrc 檔案。 如果您使用的是 Bash，請使用 ~/.bashrc 檔案。將命令新增至文件中，您的文件應如下所示： ![.zshrc 檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sjvxp2o7i3t6o5v3jl36.png) 更改此文件後，您需要執行命令： ``` source ~/.zshrc ``` 然後，您的所有別名都可供您使用。 --- ## pbcopy 該命令在 Mac 上可用，如果您想在 Linux 發行版上使用它，可以按照本指南進行操作。 pbcopy 是類固醇複製。您可以使用此命令將文件的內容複製到剪貼簿。讓我舉一個例子。假設您必須將 SSH 身分複製到剪貼簿，可以使用以下命令來完成： ``` pbcopy < ~/.ssh/id_rsa.pub ``` 您可以將其他密碼保存在不同的檔案中，並在登入時使用它。 假設您正在使用和存取遠端伺服器，並且您必須提供密碼，您可以將其 pbcopy 到剪貼簿，而不是打開文件，而無需打開和關閉文件的所有麻煩，您將獲得密碼。 當它與 grep 等其他命令一起通過管道傳輸時，它會變得更有用。它將把 grep 結果複製到剪貼簿。讓我們來看一個例子： ``` grep "<keyword>" | pbcopy ``` 我在偵錯日誌檔案時使用此命令，並提供要搜尋的關鍵字（例如時間戳記），並將所有行複製到剪貼簿中。 我可以將其貼到文件中以查看所需的日誌而不是整個文件。如果您使用 tee 命令作為 grep 的管道，它會更有用，它會將結果寫入檔案。 它具有以下語法： ``` grep "<keyword>" | tee myfile.txt ``` --- ## 使用反向搜尋 反向搜尋是 Unix 系統上最酷的功能之一。 假設你忘記了完整的命令，只記住了一部分，你能做的就是去反向搜尋並輸入你記住的單字。讓我們來看一個例子。 我必須重新啟動在臨時環境中執行的伺服器，我只記得臨時關鍵字，而忘記了命令的其餘部分。因此，我輸入 ctrl + r 進入反向搜尋模式並輸入： ``` (reverse-i-search)`stag': cd /home/ubuntu/server; pm2 stop app.js && export NODE_ENV="staging" && pm2 start app.js && pm2 logs ``` 它會記住之前輸入的命令並找到您正在尋找的正確匹配項。 --- ## 獎勵技巧和技巧 ### 卡爾 它在終端上列印當前月份。它有許多不同的可用選項，可以使用 man cal 進行檢查。 ![日曆檢視](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ronihzsjagme3dp5fifp.png) ### 使用 vim 加密文件 您可以使用 vim 加密文件，只需輸入 :X 即可。它會要求您設定密碼，如下所示： ![加密檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4uunprvj2jm2do8azxe1.png) 當您再次造訪該文件時，它會要求您輸入密碼。 ![開啟加密檔案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke8oweb76p36djzxf0kz.png) --- ## 結論 請提及您最常用的命令並將其加入到清單中。 --- 原文出處：https://dev.to/pankajgupta221b/3-terminal-commands-to-increase-your-productivity-57dm

0個讚   0留言 137瀏覽

程式設計師的 100 個願望清單想法

科技愛好者常有遠大的夢想，渴望實現突破創新和個人發展界限的目標。為了幫助建立這些雄心壯志，我為科技愛好者量身定制了廣泛的願望清單。此清單不僅概述了各種目標，還包括「靈感」、「如何」、「年份」、「狀態」和「紀念品」等附加欄，為您的技術之旅提供全面的路線圖。 ## 清單中有什麼？ 該清單涵蓋了廣泛的目標，從培養特定技能（例如達到 150 WPM 的打字速度）到雄心勃勃的專案（例如製作 DIY 電動滑板或自行車）。它包括參加重大活動，例如參加大型技術會議，以及個人發展的里程碑，例如指導初級開發人員。每個目標都經過分類以便於參考，涵蓋 DIY 專案、程式設計、開發、學習等領域。 ## 列表 [我的遺願清單進度](https://syki.dev/bucket-list) |目標|類別|靈感|年份|狀態|紀念品| |---------------------------|----------------|----------------| ----|------|--------| |成為大型專案的貢獻者 |開發 |[如何像專業人士一樣開源](https://www.youtube.com/watch?v=MT6M_sqAuZo) | | | | |建立新聞聚合器 |開發 |[Feedly](https://feedly.com/) | | | | |建立實體引擎 |開發 |[我正在從頭開始編寫整個實體引擎](https://www.youtube.com/watch?v=iSMbRGTBOHU) | | | | |建立推薦系統 |開發 |[推薦系統如何運作 (Netflix/Amazon)](https://www.youtube.com/watch?v=n3RKsY2H-NE) | | | | |建構情緒分析工具 |開發 |【2023 如何掌握人工智慧驅動的情緒分析？】(https://brand24.com/blog/sentiment-analysis/) | | | | |建立擴增實境 (AR) 應用程式 |開發 |[關於如何在 2023 年建立擴增實境應用程式的指南](https://www.tekrevol.com/blogs/how-to-build-an-augmented-reality -應用程式/) | | | | |建置與部署聊天伺服器 |開發 |[IRC](https://en.wikipedia.org/wiki/Internet_Relay_Chat) | | | | |建立網路安全工具|開發|[Kali Tools](https://www.kali.org/tools/) | | | | |建立多人線上遊戲|開發|[Dani](https://www.youtube.com/watch?v=_ze26M_Fm6g) | | | | |建立 PWA（漸進式 Web 應用程式）|開發 |[PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps) | | | | |建立 AI 影響者 |開發 |[AI 影響者變得非常富有...讓我們建立一個](https://www.youtube.com/watch?v=ky5ZB-mqZKM&t=11s) | | | | |開發區塊鏈應用程式 |開發 |[使用以太坊智能合約和 Solidity 建置您的第一個區塊鏈應用程式](https://www.youtube.com/watch?v=coQ5dg8wM2o) | | | | |開發一種加密貨幣 |開發 |[您需要立即建立一種加密貨幣！！](https://www.youtube.com/watch?v=befUVytFC80) | | | | |開發VR 應用程式|開發|[教學 - 在Meta Quest 耳機上建立您的第一個VR 應用程式](https://developer.oculus.com/documentation/unity/unity-tutorial-hello-vr/) | | | | |開發一個電子商務網站 |開發 |[Next.js Commerce](https://nextjs.org/commerce) | | | | |開發開源遊戲引擎 |開發 |[C++ 中的 GameDev](https://www.youtube.com/watch?v=LyJkcv_rL9Y&list=PLpM-Dvs8t0Va6RoHkaLuPbRh7Fwpy4nbV) | | | | |開發瀏覽器擴充 |開發 |[Chrome 擴充應該會嚇到你。](https://www.youtube.com/watch?v=xIKwkPWUgOA) | | | | |在 github 上有一個擁有 100 顆星的專案 |開發 |[Linus Torvalds](https://github.com/torvalds?achievement=starstruck&tab=achievements) | | | | |擁有自己的 Tor 頁面 |開發 |[我在 Raspberry Pi 上放置了一個 DARK WEB 網站！!](https://www.youtube.com/watch?v=bllS9tkCkaM) | | | | |發明手勢控制介面 |開發 |[鋼鐵人](https://www.youtube.com/watch?v=P5k-4-OEuTk) | | | | |建立持續整合/持續部署管道|開發|[自動化您的工作流程](https://github.com/features/actions)從想法到生產]| | | | |設定 Kubernetes 叢集 |開發 |[為什麼要建置 Raspberry Pi 叢集？](https://www.youtube.com/watch?v=8zXG4ySy1m8) | | | | |贊助開源專案 |開發 |[投資為您的世界提供動力的軟體](https://github.com/sponsors) | | | | |使用查詢機制編寫自己的資料庫|開發|[製作我們自己的資料庫](https://acmiitr.medium.com/making-our-own-database-part-1-6cd9c49ed924) | | | | |在靜態網站產生器中撰寫頁面 |開發 |[Gatsby](https://www.gatsbyjs.com/) | | | | |編寫單頁應用程式 |開發 |[React](https://react.dev/) | | | | |使用 Raspberry Pi 專案實現家居自動化 |DIY |[我建立了一個更聰明的智慧家庭](https://www.youtube.com/watch?v=0rIvB3LZiKA) | | | | |建立自訂鍵盤 |DIY |[建立自己的機械鍵盤......正確的方式](https://www.youtube.com/watch?v=bBon6WwkdJE) | | | | |DIY電動滑板或自行車 |DIY |[我做了一個電動滑板！](https://www.youtube.com/watch?v=3bcvFzecg2Q) | | | | |以自訂遊戲建立迷你街機 |DIY |[終極 DIY 街機指南](https://www.youtube.com/watch?v=oTydZBIGAuk) | | | | |組裝一台 PC |DIY |[為 Minecraft 組裝一台價值 100,000 美元的 PC](https://www.youtube.com/watch?v=AHR80l7od2Q) | | | | |建立個人雲端儲存系統 |DIY |【這是我的終局之戰 - Mother Vault 伺服器機房更新】(https://www.youtube.com/watch?v=pLC0FUnko-M) | | | | |利用 IoT 建造自動澆水花園系統 |DIY |[Arduino 花園控制器 - 自動澆水和資料記錄](https://www.youtube.com/watch?v=O_Q1WKCtWiA) | | | | |打造小型自動駕駛汽車或機器人 |DIY |[快速巡線機器人](https://www.youtube.com/watch?v=lnP32gzHdvI) | | | | |建造水下ROV |DIY |[建造一艘DIY潛水艇](建造一艘DIY潛水艇) | | | | |搭建並飛行 FPV 無人機 |DIY |[為什麼要以 800mW 功率自由式飛行？ | [FPV](https://www.youtube.com/watch?v=bBb_kSO3vTo) | | | | |設計具有互動功能的智慧鏡子|DIY |[DIY智慧鏡子 - 完整教學](https://www.youtube.com/watch?v=OYlloiaBINo) | | | | | 以 3D 方式設計和列印一些東西 |DIY |[我在房間中央製作了一個機器人手臂！](https://www.youtube.com/watch?v=nRsaf16EdNM) | | | | |設計您自己的 PCB |DIY |[PCB 建立初學者 - 10 分鐘內開始完成教程](https://www.youtube.com/watch?v=MsdJgEinb34) | | | | |修復損壞的電子產品 |DIY |[ElectroBOOM](https://www.youtube.com/@ElectroBOOM) | | | | |在本地擁有自己的伺服器 |DIY |[為什麼要建立 Raspberry Pi 叢集？](https://www.youtube.com/watch?v=8zXG4ySy1m8) | | | | |實現智慧家庭|DIY |[我建造了一個更聰明的智慧家庭](https://www.youtube.com/watch?v=0rIvB3LZiKA) | | | | |製作機械手臂 |DIY |[我在房間中央製作了機械手臂！](https://www.youtube.com/watch?v=nRsaf16EdNM) | | | | | 用 Flipper Zero 開啟一些東西 |DIY |[這讓駭客攻擊太容易了 - Flipper Zero](https://www.youtube.com/watch?v=nLIp4wd0oXs) | | | | |成為智慧型手機應用程式的擁有者|創業|[VoidLog](https://www.youtube.com/watch?v=LY4rxYe-jKI&list=PLN3n1USn4xllDDLwgJ4avEqgj4dWynofp) | | | | |開發 SaaS 產品 |創業精神|[我如何在一天內建立一個新的 SaaS 產品](https://www.youtube.com/watch?v=v_3lcqUOaOA) | | | | |在店裡擁有自己的遊戲 |創業|[Dani](https://www.youtube.com/watch?v=_ze26M_Fm6g) | | | | |在新創公司工作 |創業精神|[新創工程師在家工作的一天](https://www.youtube.com/watch?v=TLysAkFM4cA) | | | | |一週多相睡眠|創業|| | | | |參加播客 |創業|[Lex Fridman](https://www.youtube.com/lexfridman) | | | | |完全存取伺服器 - 黑客 |黑客 |[先生。機器人](https://www.youtube.com/watch?v=QqknSms8VVI&t=16s) | | | | |獲得錯誤賞金 |駭客 |[HackerOne](https://www.hackerone.com/) | | | | |在奪旗大賽中進行駭客攻擊 |駭客攻擊 |[Mr.機器人](https://www.youtube.com/watch?v=6MrQ-mN8HM8) | | | | |編寫惡意軟體 |駭客 |[惡意軟體開發：進程、執行緒與句柄](https://www.youtube.com/watch?v=aNEqC-U5tHM) | | | | |150 wpm 速度打字 |程式設計 |[Monkeytype](https://github.com/monkeytypegame/monkeytype) | | | | |使用 Python 腳本自動化您的日常任務 |程式設計 |[開始使用 Python 自動化您的生活！ （Python檔案管理教學）](https://www.youtube.com/watch?v=NCvI-K0Gp90) | | | | |建立 Twitter 機器人 |程式設計 |[如何使用人工智慧發布熱門推文 // Twitter 機器人教學](https://www.youtube.com/watch?v=V7LEihbOv3Y) | | | | |編譯您自己的 Linux 核心 |程式設計 |[如何編譯自訂 Linux 核心](https://www.youtube.com/watch?v=APQY0wUbBow) | | | | |建立聊天機器人 |程式設計 |[使用深度學習、Python 和 TensorFlow 建立聊天機器人 p.1](https://www.youtube.com/watch?v=dvOnYLDg8_Y&list=PLQVvvaa0QuDdc2k5dwtDTyT9aCja0on8j) | | | | |使用 D3.js 建立資料視覺化專案 |程式設計 |[使用 D3.js 進行資料視覺化 - 完整教學課程](https://www.youtube.com/watch?v=_8V5o2UHG0E) | | | | |建立照片編輯工具 |程式設計 |[如何製作照片編輯應用程式的完整指南](https://www.cleveroad.com/blog/how-to-build-a-photo-editing-app-like-棱鏡並使其蓬勃發展/) | | | | |開發數位藝術作品產生器 |程式設計 |[如何為初學者產生瘋狂的人工智慧藝術（Midjourney V4）](https://www.youtube.com/watch?v=zf4z8A-OWBY) | | | | |開發檔案加密工具 |程式設計 |[製作您自己的加密程式](https://www.youtube.com/watch?v=TZT7wvTeVyY) | | | | |開發影片編輯軟體|程式設計|[我寫了一個影片編輯器（有點糟糕）](https://www.youtube.com/watch?v=iydG-e1dQGA) | | | | |開發語音助理應用程式 |程式設計 |[建立由 OpenAI 和 Python 驅動的 Jarvis | ChatGPT](https://www.youtube.com/watch?v=BEw5EFqCCEI) | | | | |開發智慧手錶應用程式 |程式設計 |[使用 Android Studio 在 WearOS 上建立並執行穿戴式應用程式](https://www.youtube.com/watch?v=-JO5oHRkybk) | | | | |開發您自己的 Slack/Discord 機器人 |程式設計 |[使用 Python 編寫 Discord 機器人 - 在雲端免費託管](https://www.youtube.com/watch?v=SPTfmiYiuok) | | | | |實現臉部辨識系統 |程式設計 |[從紙張到程式碼建立深度臉部辨識應用程式](https://www.youtube.com/watch?v=bK_k7eebGgc&list=PLgNJO2hghbmhHuhURAGbe6KWpiYZt0AMH) | | | | |學習函數式程式語言 |程式設計 |[函數式程式設計 - 概述](https://www.youtube.com/watch?v=8z_bUIl_uPo) | | | | |學習古老的語言 |程式設計 |[100 秒內的 COBOL](https://www.youtube.com/watch?v=7d7-etf-wNI) | | | | |學習並使用 Docker 進行容器化 |程式設計 |[Docker](https://www.docker.com/) | | | | |學習極快的語言 |程式設計 |[ThePrimeagen](https://www.youtube.com/@ThePrimeagen) | | | | |學習一門不尋常的語言（例如 Brainfuck） |程式設計 |[100 秒內完成 Brainfuck](https://www.youtube.com/watch?v=hdHjjBS4cs8) | | | | |學習量子運算基礎 |程式設計 |[在量子電腦上編碼](https://www.youtube.com/watch?v=q3ecPsMd4tA) | | | | |掌握高階演算法與資料結構（100道LeatCode） |程式設計|【569道 Leetcode 題後的我的大腦】(https://www.youtube.com/watch?v=8wysIxzqgPI) | | | | |對自訂語音控製家庭助理進行程式設計 |程式設計 |[建立由 OpenAI 和 Python 提供支援的 Jarvis | ChatGPT](https://www.youtube.com/watch?v=BEw5EFqCCEI) | | | | |對微控制器進行程式設計 |程式設計 |[微控制器程式設計駭客指南 [教學]](https://www.youtube.com/watch?v=XlFO5Iat178) | | | | |在 Vim 中編程 |程式設計 |[Vim 作為你的編輯器](https://www.youtube.com/watch?v=X6AR2RMB5tE&list=PLm323Lc7iSW_wuxqmKx_xxNtJC_hJbQ7R) | | | | |使用分離式鍵盤|編程|[拆箱新鍵盤！！！ （也進行打字測試！）](https://www.youtube.com/watch?v=nh-BAxbithc&t=156s) | | | | |網頁抓取資料 |程式 |[使用 AI 和代理網路進行工業規模的網頁抓取](https://www.youtube.com/watch?v=qo_fUjb02ns) | | | | |用組合語言寫程式 |程式設計 |[Tsoding](https://www.youtube.com/watch?v=WnBXLmKk_qw&t=82s) | | | | |寫一個 NPM 模組 |程式設計 |[NPM](https://www.npmjs.com/) | | | | |編寫伺服器端應用程式 |程式設計 |[Next.js](https://nextjs.org/) | | | | |編寫您自己的人工智慧模型 |程式設計 |[讓我們建立 GPT：從頭開始，用程式碼，拼寫出來。](https://www.youtube.com/watch?v=kCc8FmEb1nY) | | | | |編寫您自己的作業系統 |程式設計 |[Linus Torvalds](https://github.com/torvalds) | | | | |寫你自己的程式語言 |程式設計 |[我製作了自己的程式語言](https://www.youtube.com/watch?v=pgeSGBwtHW8&t=132s) | | | | |擁有私人部落格 |教學 |[Dan Abramov](https://overreacted.io/) | | | | |對學生的講座 |教學 |[馬克·祖克柏的 CS50 講座 - 2005 年 12 月 7 日](https://www.youtube.com/watch?v=xFFs9UgOAlE&t=807s) | | | | |指導初級開發人員 |教學 |[如何正確指導初級開發人員](https://stablekernel.com/article/how-to-properly-mentor-a-junior-developer/) | | | | |寫一篇關於科技主題的論文並發表 |教學 |[兩分鐘論文](https://www.youtube.com/@TwoMinutePapers) | | | | |編寫技術書籍或電子書 |教學 |[編寫技術書籍](https://paulcunningham.me/writing-technical-books/) | | | | |參加大型科技會議 |旅遊 |[CES](https://www.ces.tech/) | | | | |參加黑客松 |旅行 |[我挑戰自己贏得黑客馬拉松](https://www.youtube.com/watch?v=mAJlZUKhOGs) | | | | |參觀電腦歷史博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀 NASA 約翰遜航天中心 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀國家航空暨太空博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀歷史科學儀器收藏 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀大型強子對撞機 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀麻省理工學院博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | |參觀國家核科學與歷史博物館 |旅行 |[工程師的旅行願望清單](https://www.mwrf.com/community/article/21848496/the-engineers-travel-bucket-list) | | | | ### 下載列表 [下載 CSV](https://syki.dev/uploads/bucket-list.csv) [下載 JSON](https://syki.dev/uploads/bucket-list.json) ## 附加列解釋 ### 靈感 本專欄反映了是什麼激發了追求特定目標的想法或願望。它可以是一個人、一個事件、一本書，甚至一部電影，點燃了人們對特定成就的熱情。例如，DIY 電動滑板的靈感可能是對永續交通的熱情或最喜歡的科技影片部落客的專案。 ### 年 本專欄提出了實現該目標的時間表或目標年份。它有助於規劃和設定現實的時間表。例如，您可能計劃在 2025 年之前參加一次大型技術會議。 ### 地位 狀態追蹤您的進度。它可以是“未開始”“進行中”“已完成”或“暫停”這有助於追蹤您的旅程並保持動力。 ### 紀念品 本專欄是一個獨特的補充，旨在紀念這一成就。它可以是實體、數位徽章、部落格文章，甚至是照片。例如，組裝 PC 的紀念品可能是已完成設定的第一張照片。 ## 結論 技術愛好者的願望清單不僅僅是目標的集合；這是技術領域個人和職業成長的路線圖。透過附加專欄提供靈感、方法、計時、追蹤和紀念成就的框架，此列表對於任何熱衷於技術的人來說都是一個動態工具。 快樂的科技冒險！ --- 原文出處：https://dev.to/syki/100-bucket-list-ideas-for-programmers-506m

1個讚   0留言 342瀏覽

我使用了幾款文字編輯器的心得：sublime、vim、emacs、vscode

我將談論我使用每個文字編輯器的經驗，也許這對於評估文字編輯器的人花時間學習可能有用。 ## Sublime Text 我在高中時開始學習編程，編寫一些程式碼並在瀏覽器上查看結果非常有趣。我使用 Sublime Text 是因為我正在透過部落格文章和影片進行學習，而且大部分內容都提到了 Sublime Text。而且，它速度很快，而且我安裝了一些外掛程式來處理 php、html、javascript 和 css。我在工作中也使用了它幾年，直到有一天我加入了一家擁有 vim 和 emacs 用戶的公司。 ## vim vim 使用者從事的專案與我自己的專案更接近，所以我開始檢查他們是如何做事的，然後我開始學習 vim。這並不酷，學習如何使用它太難了，要加載新的配置文件我每次都必須重新啟動 vim 以及許多其他問題，但既然他們這樣做了，我說服自己我也可以學習它，所以我做過。 我使用 vim 幾個月了，我最喜歡 vim 的是它針對編輯檔案而不是建立新檔案進行了最佳化。大多數時候，我們都在編輯檔案並在程式碼行之間移動，這樣才有意義。最後，我對 vim 的使用感到高興並且富有成效。 ## neovim 有一天，我聽說了 neovim，但不確定為什麼我轉而使用它，但請查看這兩個專案的 github 專案： ![](https://thepracticaldev.s3.amazonaws.com/i/mr475vfxouxinfcgxeaa.png) ![](https://thepracticaldev.s3.amazonaws.com/i/oogdvczt4j9mt5v49jxu.png) 等等什麼？ vim 儲存庫上只有一位貢獻者？怎麼只有一個人就能做到這一點？檢查拉取請求列表，我發現作者應用了其他人的更改，因為這是他的更改。好吧，我不喜歡這樣，所以我改用 neovim，當人們做出貢獻時，它會給他們帶來榮譽。 更新：我同意我的調查太淺薄。我看到[此評論](https://dev.to/heast/comment/4gk4)。但我還是不喜歡這樣。 ## nvim + tmux 當時人們正在談論“tmux”，它是一個終端多路復用器，因此您可以拆分終端並擁有選項卡並自定義所有內容，從快捷方式到tmux 的外觀，例如向狀態欄加入有用的訊息。我嘗試過並且喜歡。由於我在終端中使用 nvim，它執行得非常好，我甚至找到了一些插件來順利整合它們。它是這樣的： ![](https://thepracticaldev.s3.amazonaws.com/i/u4ncf7ir9rfeb0lx700j.gif) 我不再使用 nvim，但你仍然可以找到我的 [vim](https://github.com/lucasprag/vimlociraptor) 和 [tmux](https://github.com/lucasprag/dotfiles/blob) 設定/ master/tmux.conf）。 我使用這個堆疊三年了，我很高興。 然後我看到自己管理 nvim、tmux、zsh 的配置和插件，以便在工作中的 Debian 上的 terminator 和家裡的 macOS 上的 iTerm 上執行良好。插件之間也不是一切都工作得很好，例如，我在nvim 上有自動完成功能，它工作得很好，除非我使用多個遊標，這是另一個插件的功能，自動完成功能僅適用於第一個遊標，因為它們沒有彼此融為一體。我還遇到了類似的其他令人沮喪的問題，而且我發現自己花了太多時間除錯或嘗試替代插件，所以我傾向於嘗試一些不同的東西，這就是 emacs 引起我注意的地方。 ## emacs Emacs 有一個 GUI 應用程式，它讓我不再需要 terminator 或 iTerm，它有自己的 shell，用 elist 編寫，稱為 eshell，所以我對所有事情都有一個配置和插件。我嘗試像使用 vim 一樣從頭開始寫下每個配置，但要學的東西太多了，而且我必須完成一些工作，所以我嘗試了 spacemacs，在一些幫助下我很快就能提高工作效率。 Spacemacs 有 vim 鍵綁定，所以我在家裡，我只需要學習處理 spacemacs 的不同方面，例如佈局和工作區。做事情更容易，因為它會即時顯示可用的鍵綁定，所以當您鍵入時，您可以看到您的選項，它也是助記符，所以如果您想要佈局，您可以使用“SPC + l” ，如果需要的話要切換某些內容，請使用“SPC + t”，如果需要緩衝區，請使用“SPC + b”，對於專案，請使用“SPC + p”，對於文件，請使用“SPC + f”，並儲存您需要的檔案組合“SPC + fs”（意指“spacemacs -> 檔案 -> save”）和“SPC + pt”等指令來檢視檔案的專案樹。非常簡單吧？ 我花了大約一個月的時間才理解一切並順利工作。我對一切都不滿意，我遇到了一些錯誤，這沒關係，我報告了並嘗試修復它們，但我必須再學習一種語言（elisp）才能做到這一點。這是一次很棒的經歷，因為我學習了很多 elisp，在我看來這是一門很棒的語言，所以我玩得很開心，這讓我使用了 spacemacs 6 個月。 然後我看到了這個影片： https://www.youtube.com/watch?v=8kCd4w4kc68 等等什麼？一週的 VSCode 就毀了對 Emacs 10 年的熱愛？我有一些朋友也對 vscode 很滿意，他們強烈推薦它。好吧，讓我們試試看。 ## vscode 我必須在周末做一些編碼，所以我切換到 vscode，總的來說，體驗很棒，但一開始我不得不經常使用滑鼠。 我安裝了vim 鍵綁定，令我驚訝的是，它還支援常見的vim 插件，例如「vim-easymotion」、「vim-surround」、「vim-commentary」以及其他我從未聽說過的插件。 我在 vscode 中發現的殺手級功能： - `cmd + p` 使用模糊搜尋開啟檔案更快、更聰明（它將最近的檔案放在頂部） - 快捷方式與瀏覽器快捷方式更相似，這讓我作為網頁開發人員的生活更輕鬆 - 設定檔是「JSON」文件，不需要太多自訂（我的設定檔有 22 行，僅此而已） - 整合的多終端運作得非常好，並且像 tmux 一樣有分割功能 - vscode 由 Microsoft 維護，我認為有一個團隊致力於它並加入彼此集成良好的功能真是太好了 - 我不需要除錯 vscode 並且到目前為止我沒有發現任何錯誤 - 我不需要安裝太多插件 - 跳到 React 的定義 我安裝的VScode外掛： - [Vim 鍵綁定](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim) - [專案管理器](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) - 使用「ALT + CMD + p」更輕鬆地在專案之間切換 - [書籤](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) - `ALT + CMD + k` 加書籤，`ALT + CMD + l` 跳到下一個書籤 - [檔案實用程式](https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils) - 無需使用滑鼠即可輕鬆複製或重新命名文件 - [對 Ruby 的支持](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby) - [對 Ruby Haml 的支持](https://marketplace.visualstudio.com/items?itemName=vayan.haml) - [Ruby 自動補全](https://marketplace.visualstudio.com/items?itemName=castwide.solargraph) - [Ruby 的 Linting](https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop) - [Python 支援](https://marketplace.visualstudio.com/items?itemName=ms-python.python) - [Elixir 支援](https://marketplace.visualstudio.com/items?itemName=mjmcloug.vscode-elixir) - [React 支援](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - [One Dark Pro Monokai Darker 主題](https://marketplace.visualstudio.com/items?itemName=eserozvataf.one-dark-pro-monokai-darker) - 我最喜歡的配色方案 ![](https://thepracticaldev.s3.amazonaws.com/i/thtlo6h65n8hmfksan23.gif) 這是我使用文字編輯器的經驗。今天，我不必除錯我的編輯器來使簡單的事情發生，而且我仍然可以根據我的需要對其進行自訂。是的，我對 vscode 非常滿意，也許你也應該嘗試一下。我希望它對某人有用。 我也期待聽到您對這些文字編輯器的意見和經驗。謝謝。 --- 原文出處：https://dev.to/lucasprag/my-editor-journey-sublime-vim-emacs-vscode-19k0

0個讚   0留言 461瀏覽

JavaScript 系列九:發表作業＆心得分享

第1課 ── 學習 Vue 元件基本觀念 [作業](https://tinyurl.com/yst8ytys) 第2課 ── 學習 Vue 的 props 觀念 [作業](https://play.vuejs.org/#eNrtF11vFFX0r1w3MW0JM7MYiWRZQCE+YBSJPLo+zO7c7oydvTPeuftRm000lQCWpESMoCFRowIJKU2MMVWqv6azLE/+Bc/9mrl3dtvSiPHFPmznnu9z7vm6a7U30tQd9HGtUWtmHRql7GyLRL00oQy9s3reD7r4MsWDCA/RMk16qFVzPRvOuVu101WuGfKCrkXwSFAGeNnvxwyttQhCnQTYCSYsa6C1iurjhdDxcU4b+MxfXJJ8CFHM+pToE0JpkjGQoY9cdJzQBtgyDCMGNggZ8o/hEbug0e3Y76xY6Nhv45ijLChN+iTAQQUuTeN/bW7qmyO/l8YYvHn/A4UZg/OarodZmATcV4lL+0xxlI6BeWGUuZY4N+1n4eIacl1XILmzaLwkJEtfSZbE2I2T7uIst6aTNsjfoc86YWmHHbwA47SBGO3jwrvQJ0GMqWkmBCrp+PEVllAfLjrD7CLDvcVWrSevjV4GqRAq9NaVdy+5GaMR6UbLq9JArnGpdECHUf+vBPMFWVagEb93U4V102iuxXZIS+r9nFA3DlnDcFBaV97fGakm9WmGFy2Du/uEcmkJnTtXSlCKZ61DZ7RJh2uohMFQYWGKJObp3PSKpgEHkJPGPsNwQqgZRAPUif0sOwOyk2C1VRPwCiYikPoXEsL8iGBa0ACVKL7iiND00cazT3cmt69N129Ovt5+9v3m9MbPJbopJCG2mmIQK2q+VSvUiPNFTgHAgdNLAhwDmAfP1bReqduzle9vy+Sra/nWnRdnS9GQDrZHyDc6nJIsqJRko8lJM7hoE1zRLHhNPFxlB4dJHGAKNODxdHcnv/qTSIb86gPwvKQ2TK2GanJ3O791f3LvRn7v9vTBFzNB0rarrqrjomMX4s5KOxnNRkrRmzbMhKndZywh6PVOHHVWOGPRZSHR8q27k+u3nm5/tvfnRtOTpDpDPUjRedmayoE0N1/DE2fVvGp68F3AK2O0UZyTVIgUBW1GEJh1sdmSTEuUlLJejZBrlXJ+AfElPHxbXq8chjzcPHR6lBnaD+Yu0vNoEgy9XYoxOYTPbMADZ1nwmT0IJcv2XDDTFqGGVmvSzOY3EJruWMRGGVoM2guLWNW3Rajcq5LOJK1VOmbWFd/6q+kZ7RWOGVuN+ecxOU96Pu1GpIHqoj+nfhDAyJLHcYu4vAFrwpEzjAIGM/9U/WVB3YuIE+KoG8LoP1XPBqGABlEG6lYbaDnGI1PMWaR0coTT9rMIBvOJuhDGieyWLkmrwhRzEFHcYVEChkMU+z0iUB/2MwbT1oFlhsFGCDj4xVTg/DjqEgf2uB4oNeBdH9aBExT3lBHVSv2PzKiU6YFWDCln5r/zRMGoVTdeO66rX2/uLzkOH0n5k9+fPtrQyzJHovzq+t6TX//avbm3c3/y5fZk85e9nY38+p3882+n63+0iMhdBJ/5j99NH27lj7+xpysvBAhAlcgee6K05uBhSuSPf2sRXeuThz/ku5stkm+uTz9Zb4SMpVnD8z7q+5lP3QAPPDAZtOmXgCdqx0OOo1Je7xrzHhAp76fFgqh2/itic1PbmLHsW3C15VuwYsc/n8A67ZNikXuOrUdZoFcf4/513TfEVQKyWFTb8PToCqUiBRNabKHKk8L48pmRUBjN7/lB1Ae/dYzPoYWT9XS0gBpoob6g91CpWPWWtTXpMhpDWh3eYKz1T8Y3hooqOkbdVUkKaQyV4mTRx5hDT2loke4REYxtWEBXBEa6AFmejhA8W6IAiTdYKWuodLxWr/Y191Ut3juGBpiyCJZaR5QlBCtJT6Nj3r51Yzxd/y8fu3zKp7c8j/9B1qswP1/Wm3rlSK2WgEVxWD1YxHOLA/7vVx4W89FrRa96s7Uyr1Je+Xfr5OTR62T8N2L3XWg=) 一開始方向錯誤，沒有懂老師出題的用意，就照先前的想法做了控制面板，後來才想清楚不是單純用vue做東西，而是做出quasar這種開發模板用的componen 第3課 ── 學習 Vue 的 events 觀念 [作業](https://play.vuejs.org/#eNrNV1tvG0UU/iuTVVHsNL7kIUJaArQplwgRhIjEC4vU8e7YXrI3ZmedGMtPIaJtIvJAaWkkbiK0qaqmCCGakhT+C/I6zlP+Amdmdta7rhPaChCWsto555uzc8755ptJR7sYBOVWRDRdmwtNagfsFcOz3cCnDC225yPGfA/Vqe8iQytXlIXPMLSXDM/wyKrAWqSOI4ehjuEhZPoQwCMeC3XUGYbpTnOnhRkuFCUQIUpYRD01QijE7QX7bTtkOvpA2dDQzX8BphD69RY8dMSadlgWk0Rw9XNwjTg6rHnRdw0t5zJ9x6fcRYk14mJklV1S7gYlxBsBhPYnREfV8mzOSv3Is3RUx05I8vCPI1grLJJGWYesw1NltmyH4Xw7HzXN7TU8mkCam2M3mqzm8C6dnmEQ0cAZRagUXxyX4kgiwwxHc3+GFHmdme01xuf4FjaXT0vSwnQZZrfPzNH2RufLDGeeKb9/qYOLtIwuehahoT9KtXwr28Rx/JWzEh3T7P8XW8+flmDNebLHudRWmjYbn9vYJj5XZv9EhqX/KsPn2IYfJm9dEG1ldwlr+hbXaOkTMlrwUm1GCDuEsoKhLdiwSHQeefBnaBMThlYUcYZfSAozdjbY89P//HrnZH/rySBKCsZGeTNxnr0S+VzBzGxCXnLEj6OIEShcYnChjDDmpxA38JrMVdLTDwaMuIGDGYERQnOW3UKmg8PwZWilb4HeCDt41NGm1toq1X0KKAcOMOTXh6eZoSnIBUmqEuGsSqDlDNGGSF0QS0HEIOMU5FJOMcg4OblKOURKtwyKM0z5+XvGJYimfGKAXhW0QwnJsmEE+dJAYnQKuiILWoGKwttcJVNnGIas7fDXKdl8F9OG7YGAiQYH2LKg+7AjKHHB0jW8Mm+GxK7YFoOGz1SrLwh0k3DVFIaw1RQmyw7hW21YkUNWhaWBAyGPMiASjtIK5Vb+FDYM8uuVYHe6sE9ChimT3wa+JKvVprXstYhfpCZKJTS4t9F7/MfR9d1476v+jUdH25/G62u9g18Hd28ffX43fvhjvP7w5HD7fSjS0huX0LuwtIYoNC9Fk7Eg1CuVsG7ymB+FZZ82KtzDqwih44Pfju5tpFcrDkIy/snhZm//dv/6g/7WL739jfjKzfjat4O1x3Kq4ASCYbzz3WD3fry3PVjb7N96cPz91uDqzxIzJE8O2L/xWXz/ZhYoKDkGE6/fifceJZoCvMpDNq8eX/ky3rkT/7SVXAEFvfq7P8SHiSXhUNZ0wXRsczkX6fjgm/4X1+LfN6G2vYODeOMWKpU4rdKdPO5uGlAfSqvkJZHoJUaHN5CMMufsic7nbFKk34ncGqGJKdHoed93CPYULhHorPVppKeWkRclQa4SnWRTydKA4xxxbVaYzIjJ5LRcdVFhdcFawKbyWoOjSRJPl9VIj4ykNmk5UkfNp3BleQ9bdgSVXMSsWca1sFBQOjFbhX1fLaISKqRqMCtMRVDtyWB1Mg3l2B5ZSPbqZRM7ZuFch9e0i6aSnVm8nILrvseWRMFz0CkhCRlcKhV/G1FmMg5YFUgU+o5tIXF+q1ldWUt5BHQ6yS7ogiZwZZMNO0Pcyqp9koLZ8nvwP5MQnWRZ6diM4IJI9cC34diiifipOHrTbxEKwQwWQhpEnynP8HUKiuWEqvsXUnaEYQ==) 嘗試從quasar的原始碼反向工程做出一樣的效果 第4課 ── 學習 Vue 的 v-model 觀念 [作業](https://play.vuejs.org/#eNrNVltv3EQU/iuDVdQN2mtuTc0m4iIh8YAEqtQXzIPXnt012B4zHm8SrRa1TSuVhrA8tAmKkKDqRakCSSsQDckGfgzr3eQpf4EzF3udTSraPvXB9pwz5z7nfOO29n4QFFsR1nStGlrUCdiC4TteQChDnyx/7AcRQ3VKPGRoxZJicHlDe9fw8ZKQs3HdjFyG2oaPkEVA2cc+C3XUTk108nzPNpmZm5ByCFHMIuonFEIOl7xquhHWkR+5rlBBqAOO4C0oD7MmsbllSS+azGqmFHcdMWynDI9EPtDcJWdwS9VSmiUQDHuBazIMFEJV22khyzXDcN7QasReNjTBhx2VRhKp7hEbuyJUEB3FbWiJxHtRAMni04I5Hy+K9QSaX0C5kR6aR+nWyIZr1rALanXHdbE94itaUKU3IkISMdfxszGmnEyU1RIUGFbVUqbsQIZs2eXLd2QreCZtOL6OyuLcA9O2Hb8hyY7hF/nBSMFFx2Zw+JVy+W0h2sROo8kEI2w1Bct2QnC0rKO6i5cEhy8KtkOxxRwCXiziRp4vtmqm9VWDQsvYBeASqiPaqOWm5vJo6hJ/JmQE0EEqYC2vZSaCT9BbhQI62l7tH/4zvLsV7/w4WP9ruHkzvrXSP/jz6Mnj4fdP4ueP4lvPT3qbV6GoVz76EH0K8UmvvBhNxoJQL5XCusVtfhkWCW2U+A6vI5iOD/aH26vJXHEZJM2f9L7r7z0e3N0ddP/o763GtzfiOz8frRxKzVZBnDMCRvzwl6Ot3+Kdzfha799r1+Puevz3BqyloDjSU2KDX2/2D9fiH9aGW89Oerfj7m7/4FF/b41nuNJFn0VmaFIUr94b3ts+vvFgsPXgqLt7vL8BAcVPnw2f3o/Xd47v7w4f7sc/bQ02rh/fuBOv/Q5mTnrfSp+yoRFoxr2uZCX9o5ioUFC9kgzvedATUALFSwBFZKKjK4xC/ygskZ509AEhLjZ9xU2cjfNHo8GhjC0H8FXmEscZuFIQJd/YczgAfm5oZ8bM0L54RSyyiM9MCJCOAElMZgqcdjLjowHUE+V2mrT85jPpplXujBR5mqDG8FLWWksBRDaNFEmEa9i8wLPOXTyT8cU8uoBbcCUUGcw2hq4dwxGKv45gJMcxTfZindBRegvttmrRTqdaEquXwpZiWkPVKiR0JABQDNJOCwsISLBnphxwuIBpN3zpbkzLrIUAHExqubguYEfoQAVJkKWo6ada0CWT5bIXIl52kwqBDNZU5qbyqHLpsngpuIHbWNygWcgDG8p6Co+TwHlppyOzep1YUYi+kUWFvpRcOCDHTrjStcgqsZ+JeW4mjyYrk/CameEhIxRapgszUS5eTlwV1YSrH4QX55sFYSkyC9A7O8sftU+ojUHdh3+MDKNQI4wRD+oAZYCjgejP01YNn6rzC0WNR5O0MIUCJLQsjIj4hS4Wm45qAVBiPKwa5XeQj8MwVymKesgCpJP2GiWYhhtoGpKYHitB5VSq5xg6L9t0+NN8U86ZjMddnD3q1MP/CZ5bn8rZG7XzH5rEyeY=) 同上 第5課 ── 學習 Vue 的 slots 觀念 [作業](https://play.vuejs.org/#eNqdVd1uG0UUfpWDEeJH3o0TCqkWUylBofiiroQbIaS9Ge+O7VHXM6uZsR0TWSoqkVADBFAFFarUIgpEKj8XVCjQwtNk3fQKHoEzM7trO2mo2ht7zpnv/M45325X1tLUHw5oJajUVSRZqs+FnPVTITVcGK8TzqmEjhR9CCv+UqExFmHljZDTLYuMaYcMEg3bIQeIBJpzyrUKYHvmZFI1lzHR5KWXHRBAUj2QHLYn6ApyRJ/qnoiNrZNHREe9UjLOB5rGpaIvBhxl49MojKf6UlkJCpr204RoihJAPWZDiBKi1JthpS3icVixerwpE5XoMaZxrgd4j0JE+IsaOozHMBYDCYoMaYzZRyylCjABlpgLUKzLgXHfBHbGZXgYeioROiCRZoKXzhHRHmiNmrcuNi81mpsbsNaCNTi/udG6VF/K7wpMq3G+CY1mqS+jLC1UaRRFObYJ/19go+OSJyPQPaagbWFVFGh+xkdANWW8C4pSDu2xsXimMt/faJ0oq3nxhOrfWzduPGWZRsTnxdMCDkWlx4k5vuLmrk9kl/EAanbqUhLHWJgTJyH3zVg44IjFGkdvuVZ7wUJ7lHV72irUsGdVMVMYaBxAV7LYarokRYSkfSuRBEfCiwTOKEdLpYnULk7IXXUuVFvImMoAOG6ONWyT6HLXvlSAE9Wjkhk7swCJQBz6jWg7GThwB/17in1AsQr/bBE7GkhlsKlgGF4eq9Z/rcClQjHzWgFONDaNDY1TzNDlFwSkg9bFbueFhBW7//PGpK1Egrtp1YwrijDX4lkt2Amb/qjHcqBIScQ0NtBBtSS8cJhfYaorChLGKTE1zLUu6IkhNm0+wZk7f8WBkQ3y569UK/MEZijvOc+DkB/d3c3u//nw7m7JVuYesp2rh/d//+fBJ4cHP0yv/zrdu3d4sJt9/HV27dbR1b9C/uj250f7Pz/85iMwIw+oy+7cnl7/O9v5Ptv5KfviWrbzY/bLHyF3yzCPym7uo6/DgyvTz76c3ryS7f2WfXjPmT769tPszleFab6rMN3/LnuwB55nxrukt8fRbypFapk3Nw1gXYiEEm759Wn40Tw2wbbLGUma66C4nwuRH6o5XwT4jtjACRrWTdXnMKT7cwta+ipcuQ4VcOCkTxe0x82ftOl+mXvelFNG3M/5LeeFLW+28mo4esxurZZbY/WjnBHO1Nz4min1SprwV0p0QjXOqKfMeLr1qy2vnn193leH9FmCk/uuaAstquCRNE2op8YKa6zC2pByhqy8jjEuXyBRy+rfRssqtGhXUNhs2C8iwDs0GVLNIoJWkpGkitzOlaeQRDqnLOTzq+3lDjErcwrFlMRhqC1nD3jVlWcamc/4sW4vcIIWyIy5CX77XZNKuWTSTkK3XFfw4I2k4VPze4JdLRP4xYbM0agnScwGuARnUuNpkQQm/wFjNTqv) 嘗試模仿quasar拼裝不同呃component 第6課 ── 學習用外部狀態管理 vue 元件 [作業](https://play.vuejs.org/#eNrtVktvFEcQ/ivFhshrsi+bWEo2hgBOohwgQiBx2gO9M727HWamx909axtrTwQFsBUOIRA45KEQHkJAFEUBYkj+jGdtn/gLqX7M7KyxwcohyiF7mO2u/rq6q+qrql4uHY3jWj+hpWZpVnqCxepwK2JhzIWCE0vHEqV4BB3BQ2iVavVMone0Sh8UkB8xEvBuEWklObIV0UWD9WmHJIGC5VYE4HFUENFIySYsw/wxFTXzYyswb3VokdM/qOhdPlGkPGk1AAiqEhHhdhJQoZrQIYGkFVQddZgI3RwGeAdw+0OqetzXR1oNZuPU9MGRTicro3DSbMy22u8CUV4Pt9uZNiJR1M8FIU8inGt1WqCPnq3n3sWJomEcEEVxBjA7X20rlOpDAtKmwaFW6ag+vVWyQo8HXKCwHRDvXCZUdFFVs5WFHlPoZrvSlOw8ReFUJhB4Hd8Oj8REoLertI9fxBgr4RDsMwO74fBs3dwou5xvXd+vhtw3l3NYs44In/XdEOA4FzQEFsskBF9fDiRTQNDhOh6SekoHC4jPYiaZx6Iu0ICpGpyiArcIGtMgoJGfyEyj3t/nQRIr9Fc2kqANYKgVKSV4th0dFPlMMSYhpqJD0VQfx4orEprA6B8lQBTwMMKVPg0gSsL5hIRAF6nwGJ7CkJAhkERVICIqkRAy5Dmp2LN0iNDImjO+PrK+GMdRJOeOc5mHZpdYvi6aO8RzLKJ7i6n+dQJO9Lpg3V4uHg82jm20dyXmnM2qf4GaLn+1IW64R3rm6P8J+t8k6G6R/Qckna0XSilOpVoK9PCALeQhEV2GLaVhanhMfB8DaqeDVtTm/pLFLTBfYT2fajTeNsge1ccbgez3jKiN7ugas6wbmvDWND3oHaRWF9Z3d3SpUio2v7HGulMLjAWPTfcz/D1DgoQ24RjnASWRaTdvah8YYPACIqV1rSIsoqJVwoxgHRSN1I5lRL5F9ojPF3BtjCpFxAKLECE1RAZcIdD9ZfhstFs0avm1nMkckwZZ3ATSlpgwSjsRgGH+odNtsDAvUNNSE7qC+TZ8yEiKzsfWGiHMwy8V1vujA5pt2kH2Z68Lh0Ui6TfI3k5+NdKi2y5PvT9dgemp9/Az494EPCaYj3jFRm3GCDoswCs1oW3YG1Epy7hkweer6EW6mJOv5rzqPJJRcwrL025863Q6Zikki1XH2JlGI160eC58KqoCK1eCdHrXifNjp7Ydexi250htxp79KptHjz7N5n3VKmw+WFl/8dfGtXvpo2+H159t3PoivXhhfe33zft3Nr66nz75Ob345OXzW2cSCqc/mYOTGElrjOZFTylkfL0uO57W+bmscdGt6xVNPVSdrv2x8WAlfwhqEFj9L5+vrj+9M7z2eHj1t/WnK+mlG+mV7zcvvCh0I8BpevuHzXsP00e3Ni+sDm8+3vrx6ublX7c3pzHg8PqX6cMbRaCpjztg0ot300fPLEYXvnHI6uWtS9+kt++mv1wtdDgY3vspfe4kEqs5MrQoOuIFzDs3pmlr7bvh11fSP1fRt+tra+nKTahWdY7tqZgU/NGE00ogt1x/0fbP7SA35m6TafOa8FkStqlwIlOft8GMiXnNyvYaK7dL+3MBdpuTMY+TeHxtL5WubejgbHPFKXQkyXqFdSUu7KchU+UJ23s+1q1nomKtnBw9RzTLEZu/+kdZhwVGeynvys6XufvyBZt4p1zenSCqV8PaUi7bwH+IKQqYXJNQhbKLPMqMaBLegYl4cSJXFWAF+9S1nrMeCbzy/mUdgwHmqk3PybM5uIPF7bQJ0Bj0gCkhBVxeWt6o0VqyE7BhkIAVk/n6EeOdK9zDMsL8OeHAvdTsbHnZ5dIAK4tuFjaMr+sXWVAtkYtBifDtU6h3BYGXCKkjFHPmGgOSXZAoK/gSraIw3WiE+Dgj0vXt/Khmj/ez/mSgWDJrrmgWyuHgb/u4VhA=) 稍微翻了quasar的原始碼，還是搞不懂為何上一個v-close-popup的attribute就可以讓按鈕有關掉modal的功能 很神奇 第7課 ── 學習開發狀態複雜的 vue 元件 [作業](https://play.vuejs.org/#eNrlWdty20YS/ZUJJSekQ4CgHMkWLXkTpdbaVG22UrJrX0SlNCSGJMoggABDijKL/57TcwGGAEQ5l7fYLgno6enL6Qt6xtvOD1nmr1eiM+pcFNM8yuS7cRItszSX7Lcf0zjN2SxPl2zc8Qc/PyoCsY87b8eJ2Ci2UMz4KpZsO04Ym6bYm4hEFiO2tRJ2fVoKueTdnmZjLBdylSf2jbGF2Iyg5SgYBsM3b8YdtYWxHfTgp3pbCrlIQxKs3x+4nC7KN9K8kiIsCct0leCdVBKBJF0MSh/xIsUyi7kUeGPsIozWbBrzorgcd6ZpInmUiHzcUYtYnqykTBP2/TSOpp/AAnvZJfvm6L368w0YpSjkxUDzKQVqH8QaEXj5zZsqQNbeMg1FrMWMO2xgtQwsu326GDhW4rWQjzE9vtTILXk+j5IRCxRMGQ/DKJnr19048Sdp+KgZH6JQAqthELxQrAsRzRdSEYr1wrCXbus9pbhhkG0aLO9YzYaKCzAbMzv9jpM1e0nWlj2HUySfT0bs9s5kBmNrHkfhzfXVHtHkUWsCZXmaqbxU6P+fxysxYh9kDicNh1hGlLm3484qgzFiVHGOO1pJlYVaARR+TG/mky4eStMpHZNC0uIN0gS//GI1KZSq7rDPXvWUWXuM1w3GV3122sJ41WA87bPXFaPB7TbjeSF+SiRZdtNnw7NeHzGtaNcttCtFuzOyNCgK+Y/pf8Smi4enfPzfajkROXHcBnc9X6Ya2C7E+cikD5LnsnvSR2yCcecJ9x0Zwz8jg5BxZJz8ARkGtPuj4y05tFO/rvWvq919DRBAj0yphXww+CRExmZRDmtiISWq5MguRjPW/Wrw61H3NvDOf/De322D/tmudzyIfGocSpQjizG5iApfdxm0RTSJb5tpZHn8WCRzuWAeG1YeoRAr1Xuan9d7TIXQba2CPpnR0GKBUTWJLShLEwjhSAcoxLESVZyEj4DMhfQVvZJLRhsWvcLeXbKAff213WioF5fs5PS06YGJkHou09e+9So9ht32Ehh26/u+ZbSFAAeZiAvRUAMed4sV4+yrVZIohASSUUj2OGY74VaPFeS11FvwJIxRrvjY/YjnuXCl6EqY8Fx/eGFZZe89bO0eb63ZqNJdnwX417svu6fhAtVhHCrGNq6g77Cd3O0cngoBbRN9OHI+/XR1yLafuVz4fFKUgYKRSGoK8GFbmxuH7sanbG9uOym3tfqiiyMXM3AT9ioM/izN/82ni25XxH0WJSF1hct3bq5oDJZRArdF7OPBSUCzyCn2tMjpM7q/iLzSiyrrnWWQ1LfWR1r9gs+byOUj6tbzkANq1qCCtflwq2y7c5N/MGAQfB/jk85zb57zMMLwhlDU9gDFJq1n2+KeJRNEeZ5j+Ao/RJ+p0rtUq4AVXvcwNGDk6LEB65LDhvgtWtwLNZyowdJUTmWnA/tDzjN42dD105LPSdk9AIumlSdqevXOg1DMy3geb+vZSMXAgheHOFAF7NWrgyyoAHZ2dpCF9JCfJXS6rBsTq15sazEItNNgnmxeLWyHuotGGEOZ/Ij5tgsT3ATW25uNx/qgHxpzuPlWKkvcLmW+tdYoPT7V7Cpl27YnNu8BpkLxKVmmYbxkgX9yfo6scrsBUU/fvHapKHaiDoffsXJGZ2z45qx6+RcycxIjghgpSyINmA+LSOpjUD2K9liiV9xRszrsKCj3/PiSYP+BgH9R0J8P/BcEv1aqNl4VIs8dvL7yPHZRrOf2DCRhC9vgbHSKAY092gd7NqNlnLa2W0oJttvRCWlDgunQRGKY5zVPdKZtQA66iPtutbrMEGyGneroFpHrlcdaChh/4YmI3eRwhCi43DX5mInShYpcOw46iYYeqUc7rL3eW1H9D1T0O1TESM2pZYHs3laN0VMUMFTh3729d2V9r3yDLGeq3VufxKscy7XZpWJpHl9rgCIxlY4C+K89fC5B60bltzKd0QnDRbvIeFLuxtp/+YRQbritqhDOOOWLxMDx7Ya+e+POtf51hcOb+WghY0otA1LzTIirz3xbkNtXTZjVokvHtw5kJLND4pTpGDja84G6lLb7UMD2jmctcWn6Zu1P1CzdcOCLDWiO+8dijc/uweT463cbjE3SjVdEnxVlkuahyD2QzCWFKe69m4+TQF9PwKCXZgeuLLINK1K4QPlHByr613vLXg5KHQsepg/Qir+n4AYfp5FTzaLGEqWd5o0VbgW+M1qqyxNs05S0iGSUwqNcwOloTW3YMXc0EagMc8SgwQE46qsMtT1KUH0lGqUsTK9pjO+tIn/2VKxKkKomoMuFqXpRa2nGp5F8BKt/ou2AJbZnaRvSlaS5cMQS3Ojt3RqdWizr10rU2TxMPEkBV5YjtiLHprzQ29UqMmYOu6fwTuSKPIOv3oMRfR5o28voa+D33RseBrRsN+Yeq43PiRDFVSutKQijAukJjGax0BYo4z1guESoSxdIZ9UJTABXeUGIZ2lUOlpN5SOmQMLNC2Q4aeSmZBUrgDP5FAE6oMmxb+rGxIbAXL9Z5LxYzNT93j41t9d+hlxG1LxXKQO0KNfRmvp0IDI/Av/MpH2VWxGN3iNWP0Osed6tPMY9U43QWj5NO6jMIf11oA8I9dVcABM4kKTm0SYzylyH4+MCnUmVtBOk0ciCWgBrGCAVlwrdQbjLi1NrqcW/tLzmUMPkUR0ItW7zRTzAD3K5anNOCzqhVG3d/2QxPOfzaJGuba8spjyGs0Nf539bA2zT3lCzTD8DABD+IbDW/P17IFUt7HZ/lrgjZcU/BVXj6N8DJ6Q7087+bHBm4HjiA0XqZzHpWERhKOjuZv9/OXa/A88llUk=) 研究了前輩的作業才發向若要讓input的值可以被檢查就不能限定number，要不然輸入非number會直接show出來，卡這個很久... 因為想學quasar的樣式(range條的顏色變化等)做了些研究，後來嘗試把所有想法塞進去，結果做出來是蠻炫的但不是很好看... 心得：覺得老師的出題方向就是幫助學生從業界的需求去學習，然後一點一點從小地方開始做，並且能夠自行研究，而且不強調怎麼寫，而是確實做出來，很務實的取向，覺得獲益良多，上完9堂課默默繳了不貴的學費，有新的課堂會再回來做。 目前正嘗試自行開發一個網頁應用，寫cdoe真的要很有耐心，其實想想現在有很多輔助/查詢工具真的很方便，越寫越佩服那些做框架的人...

1個讚   1留言 508瀏覽

Svelte 程式範例：動手寫一個「蕃茄鐘工作法」小專案

原文出處：https://dev.to/vintharas/discovering-svelte-getting-started-with-svelte-writing-a-pomodoro-technique-app-2lph ## 開始使用 Svelte [開始使用 Svelte 的最簡單方法](https://svelte.dev/blog/the-easiest-way-to-get-started) 是： 1. 瀏覽 [svelte.dev 中的 Svelte 教程](https://svelte.dev/tutorial) 2. 在 [svelte.dev 中的 Svelte REPL](https://svelte.dev/repl) 中進行試玩 3. 使用 svelte 模板從頭開始建立應用程式 儘管我認為通讀教程對於學習 Svelte 的語法和可用的東西確實很有幫助，但我認為**學習某些東西的最佳方法是在盡可能接近它的環境中實際操作**會在現實世界中開發一個 Svelte 應用程式。 **[你需要自己努力解決問題才能真正學到東西](https://amzn.to/2soWN5m)**。 ## 建立一個新專案 我們使用 [degit](https://github.com/Rich-Harris/degit)（也是由 Svelte 的建立者 Rich Harris 編寫的專案腳手架工具）生成一個新專案。類型： ``` $ npx degit sveltejs/template il-pomodoro ``` 這將在 `il-pomodoro` 目錄中建立一個全新的 Svelte 專案。我們跳進去，安裝依賴項並執行開發伺服器： ``` # Jump in $ cd il-pomodoro # Install the dependencies $ npm install # Run the development server $ npm run dev ``` 現在我們在 localhost:5000 上打開瀏覽器，讓我們看看我們得到了什麼…… **塔達！測試成功！** ![](https://thepracticaldev.s3.amazonaws.com/i/zyr2vgqeub11k253xsdx.png) ## 設置你的編輯器 Svelte 是一個編譯器優先的框架，它編譯代表 Svelte 元件的 .svelte 文件來建置 Web 應用程式。我在教程中看到的那個特殊的 .svelte 擴展和非 Web 標準語法告訴我，我需要在我的編輯器中提供一些額外的支持來處理 Svelte。 Svelte 博客有一篇關於[如何設置編輯器以使用 Svelte](https://svelte.dev/blog/setting-up-your-editor) 的好文章。我通常使用 Vim 或 VSCode，所以讓我們設置這兩個編輯器以使用 Svelte。 ### 設置 VSCode 以使用 Svelte 對於 VSCode，有 [svelte-code](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode) 插件，它支持 `.svelte` 語法突出顯示、診斷、自動完成和 [更多](https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode)。 ### 設置 Vim 以使用 Svelte 對於 Vim，[設置你的編輯器文章](https://svelte.dev/blog/setting-up-your-editor) 沒有提供很多支持。它基本上告訴您將 .svelte 文件的文件類型更改為 HTML。經過一番挖掘，我發現了一些插件，它們可以讓你在 Vim 中獲得更好的 Svelte 體驗，並達到 VSCode 的標準： * [vim-svelte](https://github.com/evanleck/vim-svelte) 為 .svelte 文件提供語法高亮和縮進 * [coc-svelte](https://github.com/coc-extensions/coc-svelte) 通過連接到 Svelte LSP [^2] 為 Svelte 開發提供類似 IDE 的高級支持。這是 [coc.nvim](https://github.com/neoclide/coc.nvim) 自動補全插件（恰好是我最喜歡的 vim 補全插件）的擴展。 好的，現在我們已經設置好了編輯器，讓我們仔細看看我們的新 Svelte 專案。 ## 檔案結構 我們在編輯器中打開 il-pomodoro 文件夾，我們會看到一堆文件和文件夾： * 一個 `src` 文件夾，其中包含 Svelte hello world 應用程式的源程式碼 * 一個 `public` 文件夾，在 Svelte 編譯器編譯和處理後將包含我們的 Web 應用程式 * `rollup.config.js`，其中包含我們的捆綁器 ([rollup](https://rollupjs.org/)) 的配置。 Rollup 負責使用 Svelte 處理我們的源程式碼文件，以生成可以在瀏覽器中執行的開發和生產包。 對於初學者來說非常有趣的部分發生在 `src` 文件夾中，所以我們接下來要看的地方。該文件夾僅包含兩個文件： * `App.svelte` 這是我們應用程式的根元件 * `main.js`，其中包含用於初始化我們的應用程式的引導程式碼 作為我們應用程式入口點的文件是“main.js”： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { name: 'world' } }); export default app; ``` 這會建立一個新的 Svelte `App` 元件，並將其附加到 `document.body`，並使用一個名為 `title` 的屬性，其值為 `world`。 讓我們看看 `App` 到底是什麼： ``` <script> export let name; </script> <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> <style> main { text-align: center; padding: 1em; max-width: 240px; margin: 0 auto; } h1 { color: #ff3e00; text-transform: uppercase; font-size: 4em; font-weight: 100; } @media (min-width: 640px) { main { max-width: none; } } </style> ``` 我懂了！所以 Svelte 元件是一些可重用的 UI，它封裝了元件的標記 (HTML)、它的行為（`<script>` 標籤內的 JavaScript）及其外觀和感覺（`<style>` 標籤內的 CSS） .涼爽的！這就說得通了。 如果我們回到標記中，我們可以理解當我們將它指向 localhost:5000 時我們在瀏覽器中看到的內容： ``` <main> <h1>Hello {name}!</h1> <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p> </main> ``` prop `name` 在實例化時傳遞給元件，並保存在該 `name` 變數中： ``` <script> export let name; </script> ``` 然後傳播到元件的標記，並呈現在我們在瀏覽器中看到的“h1”標籤內。涼爽的！有點奇怪但熟悉的“export let name”語法必須是**Svelte 元件將其 API 定義為 props 的方式**。 ## 加入標題 讓我們開始修補一些簡單的東西，比如為應用程式的第一個視圖加入標題並將其綁定到一些資料。初始模板給了我如何做到這一點的提示。我只需要向我的元件加入一個新變數以包含該標題。因為我在原始模板中沒有用到 `name` 變數，所以我將替換它： ``` <script> export let title </script> ``` 並更新 `main.js` 以注入我的應用程式的標題： ``` import App from './App.svelte'; const app = new App({ target: document.body, props: { title: 'il Pomodoro' } }); export default app; ``` 再想一想，我真的不需要將該變數公開為道具。我們不希望此元件的用戶更改此標題，因此我們將其保留為元件內部的一部分。 讓我們重寫我們的 App 元件來執行此操作： ``` <script> let title = "il Pomodoro"; </script> ``` 最後，我將更新 HTML 模板以使用“title”而不是“name”： ``` <main> <h1>{title}</h1> </main> ``` **搞定了！** ![](https://www.barbarianmeetscoding.com/images/svelte-il-pomodoro.jpg) ## 任務列表 驚人的！讓我們繼續建立一個非常簡單的任務列表。由於這感覺像是一個完全獨立的責任，我們將把它放在它自己的元件中。 我建立了一個新文件“TaskList.svelte”來表示該新元件並加入了一些標記，以便在我從“App.svelte”中使用它時盡可能少地出錯： ``` <p>I'm a list of tasks</p> ``` 我將它加入到 `App.svelte`： ``` <script> let title = "il Pomodoro"; </script> <main> <h1>{title}</h1> <TaskList /> </main> <style> /* styles omitted for sake of clarity. They'd be here. */ </style> ``` 而且……沒用。嗯……我做錯了什麼…… VSCode 和瀏覽器都會警告我以下內容： ``` 'TaskList' is not defined. svelte(missing-declaration) ``` 這告訴我兩件事： 1. 我的 vim 設置沒有按預期工作，因為我在編輯器中沒有收到錯誤（稍後要解決的問題），並且 2.我好像忘記導入元件了！ 當然！所以我將它加入到“App.svelte”元件中： ``` <script> let title = "il Pomodoro"; import TaskList from './TaskList.svelte'; </script> <main> <h1>{title}</h1> <TaskList /> </main> ``` 是的！** ![](https://www.barbarianmeetscoding.com/images/svelte-tasks-list-text.jpg) 現在讓我們加入一些任務。我今天的前 3 項任務是： ``` <script> const tasks = [ "plan some fun trip with Teo", "buy some flowers to my wife", "write an article about Svelte" ]; </script> ``` 現在我需要在列表中的螢幕上顯示這些內容。 Svelte 有一種特殊的方法來迭代模板內的列表：[{#each} 塊](https://svelte.dev/docs#each)。 它是這樣工作的： ``` <ul> {#each tasks as task} <li>{task}</li> {/each} </ul> ``` 因此，我們遍歷 tasks 列表中的每個 task 並將其放入列表項 li 元素中。我們還從列表中刪除了點，因為它們看起來很糟糕： ``` <style> ul { list-style: none; } </style> ``` 這就是我們得到的： ![](https://www.barbarianmeetscoding.com/images/svelte-tasks-list.jpg) **叮叮叮！** 番茄鐘結束了。得走了！我們將很快繼續使用更多 Svelte、交互式任務列表和番茄鐘。 > ### 尋找番茄鐘應用程式的源程式碼？ > https://github.com/Vintharas/il-pomodoro-in-svelte > https://svelte.dev/repl/27164871e86d4ce1a9815489dc323500?version=3.16.7 ## 到目前為止的一些思考 驚人的！這是開始使用 Svelte 的快速方法。到目前為止，這是我的印象： * [svelte.dev](https://svelte.dev/docs) 真的很棒。 * [交互式教程](https://svelte.dev/tutorial) 有一個循序漸進的介紹，帶您了解 Svelte 的所有功能和重要概念。 * [Svelte playground](https://svelte.dev/repl) 真的很酷，它可以讓你修改 Svelte 建立多文件應用程式，保存它們並與你的朋友和同事分享。 * [開發文件非常好](https://svelte.dev/docs) 也非常全面並且有很多示例。將它們加入書籤並根據需要用作參考。 * **以上所有內容都提供了與 Svelte 的美妙初次接觸**，當您第一次進入一個新的生態系統時，您會非常感激。 * 開始新專案的方式有點奇怪。我已經習慣了所有具有 CLI 的流行框架，使用 `npx degit etc...` 來建立一個新專案有點令人困惑。但在前 5 秒的混亂之後，我只是執行命令並繼續我的生活。 * **我對文本編輯器支持的第一印象並不好**，例如，VSCode 沒有在 Svelte 模板內為我提供語句完成功能，而我希望它能工作（例如，允許我過濾“任務” `）。在我試用 Svelte 的短暫時間內，我沒有讓 Vim 設置正常工作。 * **使用 Svelte 本身就是一種非常好的體驗**。 * 初次接觸時，感覺 Web 標準非常友好，並且一切如您所願。最小驚奇原則非常適用於 Svelte。 * 我喜歡 Svelte 元件的平面結構，以及它在 HTML 標記、Javascript (`<script>`) 和 CSS (`<style>`) 中劃分元件的方式，這很有意義。樣板文件的數量幾乎可以忽略不計。 * 在標記中註入資料很簡單 * 使用 `export` 暴露 props 雖然不是標準的但很有意義並且很容易理解。 * 我想知道為什麼 Svelte 使用 `{#each tasks as task}` 而它可以使用 `{#for task of tasks}` 並減少學習 Svelte 的人的認知負荷。 （也就是需要學習更多的自定義語法） 這就是今天的全部內容！希望你喜歡這篇文章。保重並期待更多 Svelte 即將推出。 > 您是一位經驗豐富的 Svelte 用戶嗎？如果是這樣，請不要猶豫，告訴我我做事有多麼錯誤 :D 我很樂意聽取您的意見，我們都會因此變得更好。 ## 在 Vim 中修復 Svelte 經過一些故障排除後，我意識到按照 Svelte 博客中的建議，我之前使用自動命令設置 Svelte 以將 .svelte 文件的文件類型更新為 html： ``` augroup svelte au! BufNewFile,BufRead *.svelte set ft=html augroup END ``` 這意味著沒有應用 coc-vim 和 svelte 語法文件，因為它們需要 svelte 的文件類型。刪除自動命令後，一切都像在 Visual Studio Code 中一樣好用。哇哇！ [^1]：查看 [這個超級古老的番茄工作法應用程式](https://www.barbarianmeetscoding.com/projects/ilpomodoro/) 我在開始進行 Web 開發的那一天使用 Knockout.js 編寫的。 [^2]: LSP 代表語言伺服器協議。 （來自維基百科）它是一個開放的、基於 JSON-RPC 的協議，用於文本編輯器或 IDE 和提供編程語言特定功能的伺服器之間。該協議的目標是允許獨立於任何給定的編輯器或 IDE 實現和分發編程語言支持。

0個讚   1留言 649瀏覽

最新前端框架 Svelte：參考資源整理大全

*與基於元件的框架（例如 React、Angular 或 Vue）不同，使用 Svelte，您可以將建置用戶界面提升到一個新的水平。許多開發人員有興趣了解如何使用 Svelte 進行建置，以下是一份精選的有價值資源列表，可幫助您開始使用 Svelte。* 原文出處：https://dev.to/dailydotdev/building-with-svelte-all-you-need-to-know-before-you-start-2knj --- ## 為什麼選擇 Svelte？ Svelte 最近在前端開發人員中越來越受歡迎。以下簡要介紹主要優勢。 ###有什麼好處？ * Svelte 不是在瀏覽器中完成大部分工作，而是在您建置應用程式時完成它的工作，並將其**編譯為高效的 vanilla JavaScript**。 * **減少您正在使用的 JavaScript 框架的成本**。通過將 Svelte 編譯為 vanilla JavaScript，可以提高程式碼的可讀性，實現重用性，並生成更快的 Web 應用程式。 * Svelte 不需要聲明式的、狀態驅動的程式碼，瀏覽器必須將其轉換為 DOM 操作。這意味著**你不再需要使用虛擬 DOM**。 ### 缺點是什麼？ * **IDE 支持** 還不能與常用框架相媲美。它還有很大的改進空間。雖然有一些很好的在線資源可以解決一些問題，但目前，它可以被視為一個主要缺點。 * **目前沒有多少 Svelte 開發工具**。它仍然是一個年輕且不斷發展的生態系統。然而，這也是為 Svelte 社區開發一些內容的絕佳機會。 * **小型開源生態系統**。與許多其他框架一樣，圍繞特定框架建置大型社區需要時間。儘管 Svelte 已經走了相當不錯的路，但仍然沒有足夠的開源貢獻者。同樣在這裡，您也可以將其視為機會。 想詳細了解使用 Svelte 進行建置的優缺點嗎？ * [CTO 的 Svelte 指南——最新的這個前端框架能為你做什麼？](https://tsh.io/blog/svelte-framework/) * [相同但不同：Svelte 簡介](https://blog.codecentric.de/en/2020/02/same-but-different-introduction-to-svelte/) * [Svelte：與其他框架的比較](https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de) * [強調 Svelte 優缺點的簡單示例](https://dev.to/geeksrishti/building-a-dashboard-in-svelte-2fkp) ## 幫助您入門的資源 ### Svelte 生態系統 101 👋🏼 * [Svelte 的主頁](https://svelte.dev/) * [Selvte 官方社區](https://svelte-community.netlify.app/) * [Svelte GitHub 存儲庫](https://github.com/sveltejs/svelte) * [Svelte Discord 伺服器](https://svelte.dev/chat) * [Svelte sub-reddit](https://www.reddit.com/r/sveltejs/) ###教程🤓 以下精選了**實用、全面且用戶友好**的教程： * [官方教程](https://svelte.dev/tutorial/basics) 由 Svelte 開發人員提供。 * [建置我的第一個 Svelte 應用程式：想法和印象](https://scotch.io/tutorials/building-my-first-svelte-app-thoughts-and-impressions) 由 [Chris on Code](https://twitter.com/chrisoncode) ### 用例和演示 🚀 與任何事情一樣，在開始新事物時，靈感很重要。查看一些使用 Svelte 的很棒的專案。 * [OmniaWrite](https://omniawrite.com/) - 專為創意寫作而設計的文本編輯器。同樣在 [GitHub](https://github.com/TorstenDittmann/OmniaWrite) * [TypeRunner.js](https://tsh.io/typerunner) - 一個簡單的打字遊戲，有 2-4 名人類玩家相互競爭。先打出整個文本塊的人獲勝。 * [Hacker News 克隆](https://hn.svelte.dev/) 使用 Svelte 建置。同樣在 [GitHub](https://github.com/sveltejs/hn.svelte.dev) 上。 * [Nomie](https://nomie.app/) - 使用 Svelte 建置的情緒和生活追踪器。同樣在 [GitHub](https://github.com/open-nomie/nomie) 上。 * 許多其他應用程式的炫酷展示 [使用 Svelte 製作](https://madewithsvelte.com/) ### 有用的程式碼庫💻 * [svelte-grid](https://github.com/vaheqelyan/svelte-grid) - 響應式、可拖動和可調整大小的網格佈局，適用於 Svelte * [Vime](https://github.com/vime-js/vime) - 專注於簡化網絡媒體元素的嵌入和使用 * [svelte-mui](https://github.com/vikignt/svelte-mui) - 一組受 [Google 的 Material Design] 啟發的 Svelte UI 組件(https://material.io/design) * [svelte-component-template](https://github.com/YogliB/svelte-component-template) - 建置可共享的 Svelte 3 組件的基礎 * [svelte-loader](https://github.com/sveltejs/svelte-loader) - Svelte 組件的 Webpack 加載器 * [svelte-routing](https://github.com/EmilTholin/svelte-routing) - 具有 SSR 支持的聲明式 Svelte 路由庫 * [Routify](https://github.com/roxiness/routify) - 自動化 Svelte 路線 * [svelte-inetllij](https://github.com/tomblachut/svelte-intellij) - 提供 WebStorm 和朋友中 Svelte 組件的語法突出顯示 * [@testing-library/svelte](https://github.com/testing-library/svelte-testing-library) - 鼓勵良好實踐的簡單而完整的 DOM 測試實用程序 * [svelte-apollo](https://github.com/timhall/svelte-apollo) - Apollo GraphQL 的 Svelte 集成 * 搜尋更多 [此處](https://svelte-community.netlify.app/code/) * 探索一些基本的[程式碼示例](https://svelte.dev/examples#hello-world) ### 開發者工具🔧 正如我們所說……目前可用的經過現場測試的開發人員工具不多。但是，這個非常有用：[Chrome](https://chrome.google.com/webstore/detail/svelte-devtools/ckolcbmkjpjmangdbmnkpjigpkddpogn) 和 [Firefox](https://addons.mozilla.org/en-US/firefox/addon/svelte-devtools/) ### 隨時了解 Svelte 新聞🏄🏻 * [Svelte 官方部落格](https://svelte.dev/blog) * [Why Svelte](https://why-svelte-js.web.app/) - 專為 Svelte 新聞打造的新聞聚合器 * [daily.dev](https://daily.dev/topic/svelte) - 不要錯過有關 Svelte 的更新。讓 daily.dev 在每個新標籤頁為您收集最新的科技新聞並進行排名 * [Svelte 時事通訊](https://shershen08.github.io/sveltejsnews/) - 每兩週將最新的 Svelte 新聞發送到您的收件箱 --- 以上分享，希望對你有幫助！

0個讚   1留言 497瀏覽
歡迎發文
💡 記錄日常工作的實踐、心得
💡 發表對生活和職場的感悟
💡 針對感興趣的事件發表隨筆或者雜談
💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣
💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）
熱門文章
🔥 22 個很好用的 CSS 小訣竅＆特殊小技巧
🔥 SOLID－簡單的理解方式
🔥 使用更多的終端機和更少的滑鼠來提高您的工作效率 (🚀)。
🔥 你不是軟體工程師，你只是個「框架使用者」
🔥 🕸️ 2024 年我們將看到的 Web 開發趨勢 👀
  近期留言
熱門搜尋： module Git user nodes 使用 題 c 19 go ci 4 第一 2 C 學習 開發 1 . 前 前端 git % 20 10 專案 作為 JS 語言 工作 Github 網站 javascript app id github COM html 主題 api 後端 ＣＳＳ AI 50 作業 網頁 GIT bi 查詢 ui js REACT 技術 CSS ` Ai " 分享 API with 套件 搜尋 for jav JavaScript 非同步 HTML create 測試 local Can Node 研究 自學網頁の嬰兒教材： Javascript class 研 履歷 react python 聊天 unity Java Vue 面試 result JAVA import ruby console QT CD 工程師 Line prisma 分離 fetch 遊戲 COMPO 資料庫 rest
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。