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

👉 讀技術文章 👉 上自學課程 👉 討論區交流

最新出爐作業包

⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理

⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面

⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念

⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格

⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式

🔍 搜尋結果：編輯

🔍 搜尋結果：編輯

‹
1
2
3
4
5
6
7
8
9
10
›

站長阿川 · 05月09日

Git 入門上手教材：第7課 ── 學會處理 git 衝突

## 課程目標 - 學會處理 git 衝突 ## 課程內容這課來學一下 commit 彼此有衝突，而 git 沒辦法自動合併的情況吧先挑一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content b</p> <p>new content c</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content abc' git push ``` 順利送出！然後去另一個資料夾，把 `my-work-1.html` 裡面隨意加上幾行內容 ``` <p>我的第一個網頁檔案</p> <p>new content x</p> <p>new content y</p> <p>new content z</p> ``` 接著 ``` git add my-work-1.html git commit -m 'new content xyz' git push ``` 結果失敗了！一如預期，被 git 喊停了 ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 預期之中，這時應該 pull 對吧？ ``` git pull ``` ``` remote: Enumerating objects: 14, done. remote: Counting objects: 100% (12/12), done. remote: Compressing objects: 100% (4/4), done. remote: Total 8 (delta 3), reused 8 (delta 3), pack-reused 0 Unpacking objects: 100% (8/8), 792 bytes | 79.00 KiB/s, done. From github.com:howtomakeaturn/my-first-testing-repo d999c25..2cf01f4 main -> origin/main hint: Pulling without specifying how to reconcile divergent branches is hint: discouraged. You can squelch this message by running one of the following hint: commands sometime before your next pull: hint: hint: git config pull.rebase false # merge (the default strategy) hint: git config pull.rebase true # rebase hint: git config pull.ff only # fast-forward only hint: hint: You can replace "git config" with "git config --global" to set a default hint: preference for all repositories. You can also pass --rebase, --no-rebase, hint: or --ff-only on the command line to override the configured default per hint: invocation. Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 在前一課，我們 pull 之後，會被 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起，然後在終端機編輯器內，請你打一段小訊息，備註這次合併這次，卻沒有進入終端機編輯器內，而是跳出一串訊息！注意看最後幾行！ ``` Auto-merging my-work-1.html CONFLICT (content): Merge conflict in my-work-1.html Automatic merge failed; fix conflicts and then commit the result. ``` 這就是 commit 衝突的情況：兩個 commit 都有改到同樣檔案，雖然先後時間不同，但是 git 不敢直接用新的蓋掉舊的！ git status 看一下 ``` Unmerged paths: (use "git add <file>..." to mark resolution) both modified: my-work-1.html ``` 清楚寫出了：both modified，兩邊都修改過！打開 `my-work-1.html` 看一下 ``` <p>我的第一個網頁檔案</p> <<<<<<< HEAD <p>new content x</p> <p>new content y</p> <p>new content z</p> ======= <p>new content a</p> <p>new content b</p> <p>new content c</p> >>>>>>> 2cf01f4f63f5ea9040610495688f08032761a170 ``` 看起來很嚇人，其實，只是 git 怕你看不清楚，用一種誇飾法，列出衝突的地方而已！ HEAD 段落，是你剛提交的 commit 部份 `2cf01f4f63f5ea9040610495688f08032761a170` 的部份呢？則是剛剛從 github 抓下來的 commit 代號！要如何處理衝突呢？其實，你就決定一下，衝突這幾行，到底要怎麼合併就可以了，然後把 git 誇飾法的地方刪掉比方說，我決定讓行數交錯呈現吧 ``` <p>我的第一個網頁檔案</p> <p>new content a</p> <p>new content x</p> <p>new content b</p> <p>new content y</p> <p>new content c</p> <p>new content z</p> ``` 改完之後 ``` git add my-work-1.html ``` ``` git commit -m 'handle conflict' ``` 手動合併的 commit，我個人通常習慣訊息就寫 handle conflict ``` git push ``` 大功告成！這就是所謂的 git 衝突處理 ## 課後作業接續前一課的作業在上一次的作業，我們嘗試了兩個資料夾，同時 push 送出 commit，導致 git 比對 github 上的雲端版本時，發現有衝突，請你先 pull 再 push 的情況上次的情況比較單純，因為雖然有衝突，但是 git 一看就知道影響不大，所以 pull 時自動處理了衝突，把事情都安排好了這次的作業，我們要模擬「遇到衝突，而且 git 無法自動處理衝突」的情況 --- 請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，打開檔案 `about.html` 的內容，原本是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的前端工程師</p> ``` 然後送出 commit，接著 `git push` 出去你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，假設你今天出門工作，忘記先 pull 了，也忘記檔案其實你已經改好了打開檔案 `about.html` 的內容，依然是 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發</p> ``` 請改成 ``` <h1>我是誰</h1> <p>我是XXX，目前在自學網頁開發，目標是成為厲害的軟體工程師</p> ``` 然後送出 commit，接著 `git push` 出去這時 git 會請你先更新，於是你輸入 `git pull` 你會發現 git 表示遇到衝突，無法自動合併，請你處理！原來有一邊是寫「前端工程師」，另一邊是寫「軟體工程師」 git 無法自動判斷你到底是想要以哪個為準！（其實用哪個都可以吧！）請處理這個 conflict 衝突，處理完之後 push 到 github 上面完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法：可以把 github 專案連結，貼到留言區

1個讚 14留言 822瀏覽

站長阿川 · 05月09日

Git 入門上手教材：第6課 ── 學會 git pull

## 課程目標 - 學會 git pull ## 課程內容學會把專案上傳 github 了，這次來試試把專案從 github 載下來吧假設你現在使用另一台新電腦，專案還不在你的電腦上打開專案頁面 https://github.com/howtomakeaturn/my-first-testing-repo 頁面上有一個 `Code` 的按鈕，點下去有 clone（複製）的指示在電腦上先移動到別的資料夾底下，使用 clone 指令把專案抓下來 ``` git clone [email protected]:howtomakeaturn/my-first-testing-repo.git ``` 完成之後，會看到在新資料夾底下，有一份一模一樣的專案！ --- 在新資料夾底下，把 `my-work-3.html` 裡面隨意加上幾個字，接著 ``` git add my-work-3.html git commit -m 'commit from new folder' git push ``` 打開 github，會在上面看到有被更新！ --- 回到之前的「舊資料夾」底下，把 `my-work-4.html` 裡面隨意加上幾個字，接著 ``` git add my-work-4.html git commit -m 'commit from old folder' git push ``` 會發現上傳失敗！ ``` To github.com:howtomakeaturn/my-first-testing-repo.git ! [rejected] main -> main (fetch first) error: failed to push some refs to 'github.com:howtomakeaturn/my-first-testing-repo.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details. ``` 原因是，git 發現，你從兩個不同的地方，分別更新過不同檔案，git 怕你會搞混編輯歷史紀錄（github 上現在有4筆 commit，目前資料夾上也是4筆 commit，git 無法分辨哪個第4筆是最新的）所以 git 希望你能先把最新版本抓下來，再送出你的版本，比較不會有爭議！把新版本抓下來的指令是 ``` git pull ``` 抓完之後，因為 git 自動把雲端版本、跟本機你剛改過的版本，合併在一起了會請你打一段小訊息，備註這次合併通常你就使用 `ctrl + x` 或者 `:q` 離開終端機編輯器就可以了完成之後，使用 `git log` 會看到，現在有6筆 commit 紀錄，最後一筆是剛剛自動合併的 commit ``` Merge branch 'main' of github.com:howtomakeaturn/my-first-testing-repo ``` 使用 `git status` 也會看到 ``` On branch main Your branch is ahead of 'origin/main' by 2 commits. (use "git push" to publish your local commits) nothing to commit, working tree clean ``` git 提示你目前比雲端版本還多了 2 筆 commit（一筆是你剛加的，一筆是關於自動合併的）使用 `git push` 通通推上去 github 吧！ --- 看到這邊你可能會想，剛剛那筆自動合併的 commit 好像有點多餘？就把 `commit from new folder` 以及 `commit from old folder` 按照時間順序排列，不就好了嗎？其實，那是因為這兩筆 commit 內容沒有重疊，所以看起來很單純實務上很多時候，兩筆 commit 會更新到「相同的檔案」之中的「同樣幾行程式碼」這時 git 如果按照時間順序排列，就會讓「較晚送出 commit 的人」把「較早送出 commit 的人」的工作內容覆蓋掉！這樣一來，根本沒辦法團隊工作：晚提交的人，會一直破壞掉早提交的內容！所以 git 一律會多一筆「合併 commit」。平常就自動合併沒問題，有衝突時，就可以在這筆 commit 處理有點不懂沒關係，我們下一課會練習 ## 課後作業接續前一課的作業，專案已經傳到 github 了假設你原本是用家裡的電腦開發，現在你打算帶著筆電，出門到咖啡廳繼續開發請拿出你的筆電，把 github 上那個專案 `git clone` 到筆電上面如果你沒有筆電，沒關係，在電腦上另外找個資料夾，用 `git clone` 從 github 抓專案下來這樣兩個資料夾對應同一個專案，也可以，模擬跨裝置同步專案 --- 現在分別有兩個資料夾，內容一模一樣，我這邊分別用 `at-home` 以及 `at-laptop` 稱呼兩個資料夾請按照以下步驟，送出 commit **第一步** 到 `at-home` 資料夾，建立一個檔案 `create-this-file-at-home.html` 內容放 ``` <p>我在家裡新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去你會看到 github 上面就被更新了 **第二步** 到 `at-laptop` 資料夾，建立一個檔案 `create-this-file-at-laptop.html` 內容放 ``` <p>我在咖啡廳新增這個檔案</p> ``` 然後送出 commit，接著 `git push` 出去你會看到錯誤訊息！ git 會跟你說，有衝突，請先將資料夾內容下載同步，再更新 **第三步** 所以請輸入 `git pull` 先把資料夾更新到最新版本接著用 `git log` 看一下，會看到有關 `create-this-file-at-home.html` 那個檔案的 commit **第四步** 這時再 `git push` 出去你會看到 github 上面就被更新了完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法：可以把 github 專案連結，貼到留言區

1個讚 8留言 1,007瀏覽

站長阿川 · 05月09日

Git 入門上手教材：第4課 ── 學會 git 重置指令

## 課程目標 - 學會 git 重置指令 ## 課程內容我們已經會「新增檔案 -> 編寫草稿 -> 放進滿意區」這個流程了接著來學一下反過來的流程，也就是作家又覺得滿意區的內容不怎麼樣，想要移回草稿區，最後決定整個取消的過程 --- 請修改 `my-work-4.html` 的內容，原本是 ``` <p>我的第四個網頁檔案</p> ``` 改成 ``` <p>我的最後一個網頁檔案</p> ``` 使用 `git status` 看一下，應該會是紅色的可以用 `git diff` 查看，git 會幫你比對差異的部份給你看、方便你確認草稿變化！ --- 確認沒問題的話，就可以用 `git add my-work-4.html` 放進暫存區（滿意區）使用 `git status` 看一下，應該會是綠色的這時用 `git diff` 查看，應該沒東西了，因為 `git diff` 只會檢查草稿區的內容 --- 假如就在此時，我們反悔了，想要把它移回草稿區，該怎麼辦呢？ ``` git reset my-work-4.html ``` 使用 `git status` 看一下，應該會是紅色的使用 `git diff` 看一下，應該又會看到差異內容了 --- 如果對草稿區的內容不滿意，想要取消回去怎麼辦呢？ ``` git checkout -- my-work-4.html ``` 使用 `git status` 看一下，應該又是乾乾淨淨了！ --- 在前一課，我們使用 git checkout 切換版本，這一課卻用 git checkout 來取消草稿內容，怎麼回事？其實，取消草稿內容，某種角度來說，也算是切換版本的一種，對嗎？只是這次是針對單一檔案，不是針對整個資料夾而已語法跟觀念覺得有點不清晰，沒關係，反正跟你用文書編輯軟體時，`ctrl + z` 的意義也差不了多少就先照做、用下去、享受方便記錄與管理的好處就對了！ ## 課後作業接續前一課的作業，你回到上一個版本看了一下，但又覺得還是拆成多個檔案比較好請先使用 `git checkout master` 切回最新的版本這次來模擬實際開發的時候，檔案放進暫存區，但又反悔了，放回草稿，然後取消的過程 --- 繼續開發個人品牌網站，繼續加入更多資訊請先在 `background.html` 加入以下資訊 ``` <p>國小：開心國小</p> <p>國中：快樂國中</p> ``` 然後用 add 指令把這次更新放進暫存區這時用 `git status` 查看，檔案名稱應該是綠色的 --- 想了一下，你突然又覺得，國中國小學歷，應該沒人關心，還是別放進去好了請使用 reset 指令把 `background.html` 檔案從暫存區移出這時用 `git status` 查看，檔案名稱應該是紅色的 --- 接著，使用 checkout 指令取消掉上述的修改最後請輸入 `git status`，應該會看到乾乾淨淨的，沒有任何變動！完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法：可以把第一次、第二次、第三次 `git status` 的結果，分別貼到留言區

0個讚 12留言 1,014瀏覽

站長阿川 · 05月09日

Git 入門上手教材：第1課 ── 學會 git 初始化

## 課程目標 - 學會 git 初始化 ## 課程內容這次的課程，主要是透過每課作業練習實務情境關於 git 的基本安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法不論是使用「終端機」讓你輸入指令，或者是有 GUI（圖形化介面）讓你點擊 UI 執行指令，都可以關於 git 的基本觀念，學起來可深可淺，我只會簡單說明工作上需要的觀念覺得黑箱或者想深入研究的話，可以上網搜尋相關關鍵字，深入理解 git 底層機制 --- 在要使用 git 追蹤的資料夾內，首先要使用的指令是 ``` git init ``` 這會初始化資料夾環境，讓 git 開始追蹤資料夾內所有檔案變化的一舉一動其實不用想得太神奇，這指令只是在資料夾內建立一個隱藏的資料夾 `.git/` 而已（你可以根據你的作業系統，想辦法找到這個隱藏的資料夾）後續的 git 指令，背後都是去查看 `.git/` 的內容而已 --- 初次使用 git，打指令可能會被要求設定名稱信箱，這些要用來記錄在 git 歷史訊息內，辨識操作者 ``` git config --global user.name "您的名稱" git config --global user.email "您的信箱" ``` --- 接著來試用兩個指令首先是查看目前的工作狀態 ``` git status ``` 因為還沒有任何程式碼，所以應該會顯示「沒東西」的中文或英文訊息接著來查看歷史編輯紀錄 ``` git log ``` 一樣會顯示「沒紀錄」的中文或英文訊息這兩個基本指令，對於學習非常有幫助在每次打任何 git 指令之前與之後，都打打看這兩個指令，可以幫助認識當前追蹤狀況 ## 課後作業請開一個新資料夾，用 git 初始化這個資料夾接著分別輸入 `git status` 與 `git log` 應該會看到 git 回應「沒東西」與「沒紀錄」的訊息完成以上任務，你就完成這次的課程目標了！ --- 交作業的方法：可以把 `git status` 與 `git log` 顯示的文字內容複製，貼到留言區也可以直接截圖視窗內 `git status` 與 `git log` 的內容，上傳到留言區

2個讚 16留言 2,492瀏覽

小編精選 - 技術文章翻譯 · 04月24日

10 個可以改善開發體驗的 VSCode 外掛

- 原文出處：https://dev.to/j471n/vs-code-extensions-to-take-your-coding-to-the-next-level-50od ## Documatic 此外掛將 [Documatic](https://www.documatic.com/) 引入 VSCode：使用簡單查詢快速搜尋大型程式碼庫。 Documatic 使用 AI 連結您的查詢和程式碼片段之間的關係，因此您不必知道要查找的確切關鍵字！ **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines) ![](https://i.imgur.com/KYutr9T.gif) ## Sort lines 此外掛允許您按字母或數字快速對程式碼進行排序，從而在處理大文件時節省時間。當您有要排序的資料時，這會非常方便。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=Tyriar.sort-lines) ![使用動畫](https://github.com/Tyriar/vscode-sort-lines/raw/HEAD/images/usage-animation.gif) ## TabNine 此外掛使用 AI 提供程式碼自動完成建議，可以幫助您節省時間並提高程式碼品質。它支援很多語言和框架。但是要小心使用它，因為它會佔用你系統的很多資源。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) ![Tabnine 主要完成](https://raw.githubusercontent.com/codota/tabnine-vscode/master/assets/completions-main.gif) ## **Template String Converter** 可以在程式碼編輯器中鍵入“${”時將普通字串轉換為模板字串。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) ![鍵入一個美元符號然後在字串中打開大括號將引號轉換為反引號](https://raw.githubusercontent.com/meganrogge/template-string-converter/master/images/demo.gif) ## **Error Lens** ErrorLens 增強了語言診斷功能，突出顯示語言生成診斷的整行，並連結相關訊息。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) ![演示圖片](https://raw.githubusercontent.com/usernamehw/vscode-error-lens/master/img/demo.png) ## **WakaTime** [WakaTime](https://wakatime.com/vs-code) 是一個開源 VS Code 外掛，用於從您的寫程式工時中，自動生成指標、分析和時間追蹤。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) ![專案概覽](https://wakatime.com/static/img/ScreenShots/Screen-Shot-2016-03-21.png) ## **Chat** 通過使用此外掛，您可以在 VS Code 中與您的 Slack 和 Discord 團隊聊天。 * **安靜的通知**：聊天應用程式可能會讓人分心。此外掛使聊天變得有用、上下文相關且不會分散注意力。 * **豐富的格式**：分享 Markdown 程式碼片段，並在您的聊天訊息中加入表情符號。 * **本地外觀**：在您喜歡的主題和網格編輯器佈局中使用聊天。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=karigari.chat) ![截圖](https://raw.githubusercontent.com/karigari/vscode-chat/master/readme/Live%20Share%20Chat.gif) ## **SVG Preview** 允許您直接在 VS 程式碼中查看 SVG 文件。如果您在 vs 程式碼中打開 SVG 文件，那麼預設情況下它會顯示 SVG 程式碼。使用它後，您可以看到 SVG 的預覽。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=SimonSiefke.svg-preview) ![演示](https://github.com/SimonSiefke/vscode-svg-preview/raw/master/demo_images/demo.gif) ## **Headwind** Headwind 是用於 Visual Studio Code 的 Tailwind CSS 類排序器。它通過解析您的程式碼並重新打印類別標籤來強制執行一致的類別排序。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind) ![解釋器](https://github.com/heybourn/headwind/blob/master/img/explainer.gif?raw=true) ## **Material Design Palette Generator** [Material Design Palette Generator](https://marketplace.visualstudio.com/items?itemName=piyush-bhatt.vscode-mat-palette) 是一個 VSCode 外掛，用於生成 [material 調色板](https://material.io/design/color/the-color-system.html#tools-for-picking-colors)。 **⬇️** [**下載**](https://marketplace.visualstudio.com/items?itemName=piyush-bhatt.vscode-mat-palette) ![獲取從給定的十六進制顏色生成的完整調色板](https://raw.githubusercontent.com/piyush-bhatt/vscode-mat-palette/master/assets/readme/Primary.gif) --- 以上，簡單分享，希望對您有幫助！

0個讚 0留言 1,565瀏覽

小編精選 - 技術文章翻譯 · 04月24日

使用 Tailwind 開發時，適合搭配的 4 款 VSCode 外掛

這些外掛都在這個 VSCode 外掛包裡面 [TailwindCSS Kit](https://marketplace.visualstudio.com/items?itemName=KalimahApps.tailwindcss-kit) 原文出處：https://dev.to/kalimahapps/4-vscode-extensions-i-use-for-tailwind-2him ## 1. [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) ![tailwind css 智能圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4w36g7owmtrmljbesu24.png) Tailwind CSS IntelliSense 是一個強大的工具，可以幫助開發人員更快、更高效地編寫程式碼。它為 Tailwind CSS 類別提供即時建議，減少錯誤並提高程式碼品質。使用 IntelliSense，開發人員可以提高工作效率、縮短學習曲線並改進應用程式的可存取性。如果您是使用 Tailwind CSS 的開發人員，一定要試試這個強大的外掛。 ## 2. [Tailwind Fold](https://marketplace.visualstudio.com/items?itemName=stivo.tailwind-fold) ![tailwind 折疊擴展圖像](https://github.com/stivoat/tailwind-fold/raw/HEAD/images/docs/demo.gif) 在使用 Tailwind 時，此外掛非常有用。長長的類列表會使 html 有點混亂，此外掛提供了一種隱藏它們並僅在需要時顯示的好方法。除了預設功能外，這些選項經過細心設計，幾乎可以滿足任何偏好。例如，我喜歡在點擊線條而不是類別本身時展開類別。 ## 3. [Tailwind Documentation](https://marketplace.visualstudio.com/items?itemName=alfredbirk.tailwind-documentation) ![Tailwind 文件圖片](https://user-images.githubusercontent.com/11172530/163716626-8d74a1bb-f05b-4b45-aa12-70f66e0efad8.gif) Tailwind Documentation 提供對官方 Tailwind CSS 文件的快速存取。此外掛使開發人員能夠直接從 VSCode 編輯器中存取 Tailwind CSS 文件，而無需打開瀏覽器或離開編輯器。 ## 4. [Tailwind Config Viewer](https://marketplace.visualstudio.com/items?itemName=KalimahApps.tailwind-config-viewer) ![Tailwind 配置查看器圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxwuaxi8v4o9olb4g06d.png) Tailwind 配置可能會令人困惑。它們可能呈指數級增長，並使用戶更難了解已解析的設定。這外掛使用戶能夠查看 **resolved** Tailwind 配置，它還會顯示任何與顏色相關的類別（text-\*、bg-\*、accent-\* ... 等）的顏色 --- 以上，簡單分享，希望對您有幫助！

0個讚 0留言 1,697瀏覽

我愛JS · 03月23日

[資源分享] 超好用的擴充套件你還不裝？裝了人生直接逆襲，日子過得好舒服！！

## Midnight Lizard ![](https://i.imgur.com/PKrYQfh.png) ``` 這個擴展改變了頁面的顏色，亮度和對比度以提高可讀性，並且為所有網站開啟夜間模式。將幫助您定制整個互聯網的外觀，以便於使用。您可以為每個喜愛的網站設置不同的配色方案，並為所有其他網站設置一個默認主題。從預定義的方案中選擇或創建自己的方案。用戶配色方案的數量是無限的。 ━━━━━ 的優點 ━━━━━ ✔智能黑暗的主題 ✔增加對比度 ✔反轉的亮度，而不是倒置的顏色 ✔選擇灰度 ✔在類似的背景顏色之間增加差異 ✔將圖像恢復到鼠標懸停時的原始狀態 ✔顯著提高可讀性 ✔增強的語法突出顯示（對於程序員） ✔有藍色濾鏡可以用紅光代替藍色光 ``` ## Stylebot ![](https://i.imgur.com/MQN95R6.png) ``` 壹個方便改變網頁外觀的擴展選擇壹個元素，然後從編輯器中選擇要進行的任何更改。您可以更改字體，顏色，邊距，可見性等。您也可以自定義 CSS。 ★易於使用：使用 UI 操作挑選元素並設置樣式 ★簡單快捷：更改立即保存 ★代碼編輯器-在這裏編寫自己的 CSS ★可讀性模式-通過隱藏非必要的頁面元素（如側邊欄，頁腳和廣告），提升網頁閱讀體驗。 ★灰度模式-啟用灰度以減少來自網頁的刺激 ``` ## 後記未來可能還會新增更多唷！

4個讚 3留言 705瀏覽

小編精選 - 技術文章翻譯 · 03月23日

新框架 Svelte 的優點以及與眾不同的特色介紹

*先說清楚一件事：* *這不是要抨擊其他框架，如 React、Vue 或 Angular。我使用了所有這些工具，而 React（使用 NextJS）仍然是我的首選。* 原文出處：https://dev.to/jannikwempe/why-svelte-is-different-and-awesome-4381 # 什麼是 Svelte？ > Svelte 是一種全新的用戶界面建置方法。 React 和 Vue 等傳統框架在瀏覽器中完成大部分工作，而 Svelte 將這些工作轉移到建置應用程式時發生的**編譯步驟**。 TLDR; 它類似於 React 或 Vue，但主要區別在於它是 [編譯器](https://svelte.dev/blog/frameworks-without-the-framework)。上面連結的博客文章中引用了一句話： >等等，這個新框架有 runtime 嗎？啊。謝謝，我先不用了。 > – 2018 年的前端開發人員儘管這在 2018 年沒有發生，但我認為我們會在某個時候達到這種心態。 ## “Svelte 是一個編譯器”是什麼意思？它本質上意味著特定於 Svelte 的程式碼被編譯（考慮轉換）為 JavaScript，可由瀏覽器執行。您可能知道的另一個編譯器是 TypeScript 編譯器 (`tsc`)，它將 TypeScript 編譯為 JavaScript。這是同一個概念。那麼這是怎麼回事呢？您還可以將 React 程式碼編寫為 `.js` 並發布。的確如此，但是如果沒有發布 React 執行時系統，JavaScript 程式碼將無法在瀏覽器中執行。 > 執行時系統是指使軟體程序能夠在計算機系統上執行的軟體和硬件資源的集合。 *注意：儘管我很多人都在談論“（無）runtime 時”，但更準確地說應該是“（無）runtime **系統**”。* 閱讀來自 [Dan Abramov](https://mobile.twitter.com/dan_abramov) 的精彩 [React as a UI Runtime](https://overreacted.io/react-as-a-ui-runtime/) 博文.它深入解釋了 React 是一個 runtime（系統）。除了不需要 runtime 之外，還有另一個好處。 Svelte 可以擴展和更改 JavaScript 語法，因為編譯器最終將其編譯為 JavaScript。因此 Svelte 可以擺脫 JavaScript 語法提供的一些限制。這也可能是一個缺點，因為如果 Svelte 嚴重偏離 JavaScript 語法，它實際上將成為另一種需要學習的語言。不用擔心，Svelte 試圖堅持 JavaScript 語法。 # Svelte 作為編譯器的好處由於 Svelte 是一個編譯器，因此不需要將執行時系統加載到客戶端中，因此有幾個優點。這些都是 Svelte 的特別之處。我想到的最重要的優勢將在下一節中展示。 ## 效能這應該是顯而易見的：沒有為客戶端加載的執行時會導致更快的加載時間。下圖顯示了 JS 框架基準測試的摘錄（請參閱 [this GitHub repo](https://github.com/krausest/js-framework-benchmark)）。它基於一個帶有隨機條目的大表，並測量各種操作的時間，包括渲染持續時間。 ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619355158508/Olvdi5zOk.png) 使用 Svelte 的應用程式提供了最少的程式碼。 *（不知何故，Svelte 似乎需要比普通 JS 更少的程式碼，我不知道這是怎麼發生的 😀）* 但它不僅向客戶端發送更少的程式碼，而且執行速度更快： ![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1619355565050/accrTZHyr.png) 原因之一是 Svelte 不使用虛擬 DOM (vDOM)。 Svelte 不依賴於 vDOM 和 DOM 之間的差異來更新 DOM。其他提到的框架，如 React、Vue ~~和 Angular~~ *（編輯：Angular 使用增量 DOM）* 確實使用 vDOM。您可以在 Sveltes 博客文章 [Virtual DOM is pure overhead](https://svelte.dev/blog/virtual-dom-is-pure-overhead) 中了解有關此內容的詳細訊息。該帖子的快速引用： > Svelte 是一個編譯器，它知道**在建置時**你的應用程式會發生什麼變化，而不是等到執行時才開始工作。 ## 微前端架構中的 Svelte 微前端 (MFE) 本身就是一個主題（在 [本文](https://martinfowler.com/articles/micro-frontends.html) 中閱讀它）由 [Martin Fowler](https://twitter.com/martinfowler)）。但這個概念基本上是不同的團隊可以分別開發前端的不同部分。團隊還可以選擇他們想要使用的技術堆棧。因此，客戶端最終可能會加載不同版本的 Angular、Vue、React 等： > 一些微前端的實現會導致重複依賴，*增加我們的用戶必須下載的字節數*。 *（來自上面連結的 Martin Fowler 文章）* 但是 Svelte 呢？ Svelte（也使用它的不同版本）並沒有增加客戶端必須加載的 kbs 的缺點。 Svelte 是 MFE 架構的絕佳選擇。 # 其他福利這些好處並不是因為 Svelte 是一個編譯器，而是它們讓 Svelte 脫穎而出。 ## REPL Svelte 有一個很棒的 REPL。您可以毫不費力地開始玩耍和嘗試。這太棒了！ [試用](https://svelte.dev/repl/hello-world?version=3.37.0)。也可以分別點擊“JS Output”或“CSS Output”查看編譯後的JS和輸出的CSS（可以寫在同一個`.svelte`文件中）。這足以證明 Svelte 是一個編譯器嗎？ 😉 REPL 也用在他們很棒的教程中。您可以動手學習 Svelte：[Svelte 教程](https://svelte.dev/tutorial/basics)。 ## 內置功能 Svelte 內置了一些幾乎所有應用程式（至少是大型應用程式）都需要的功能，例如過渡、動畫和 store。首先不需要額外的依賴或在各種選擇之間做出決定。 > store 只是一個具有訂閱方法的物件，只要 store 值發生變化，就可以通知感興趣的各方。 ``` import { writable } from 'svelte/store'; export const count = writable(0); export const increment = () => { count.update(n => n + 1); } ``` 就是這樣。您可以在您的應用中導入 `count` 和 `increment`。簡單的！ [試用 Svelte store 教程](https://svelte.dev/tutorial/writable-stores) Svelte 中的動畫和過渡很容易使用。你能猜出下面的程式碼在做什麼嗎？ ``` {#if visible} <p in:fly="{{ y: 200, duration: 2000 }}" out:fade> Flies in, fades out </p> {/if} ``` [試用 Svelte 轉換教程](https://svelte.dev/tutorial/in-and-out) 但它們也可以用於更複雜的事情，如下所示： ![動畫.gif](https://cdn.hashnode.com/res/hashnode/image/upload/v1619357232242/hS_6eOg5V.gif) 享受在 React 中建置它的樂趣🤪 [試用 Svelte 動畫教程](https://svelte.dev/tutorial/animate) #SvelteKit [SvelteKit](https://kit.svelte.dev/) 是它自己的主題。但這是我如此興奮的主要原因之一。想想 SvelteKit 之於 Svelte，就像 NextJS 之於 React。但為什麼它很棒？ >SvelteKit **完全接受無伺服器範式**，並將在支持所有主要無伺服器提供商的情況下推出，並帶有一個“適配器”API，用於針對我們未正式迎合的任何平台。閱讀 [SvelteKit 有何關係？](https://svelte.dev/blog/whats-the-deal-with-sveltekit) 在我撰寫本文時，SvelteKit 目前處於測試階段。等不及發布了！ # 結論我可以繼續下去（我有沒有提到 Svelte 是用 TypeScript 編寫的？）。但這結束了。你可以看到我很興奮，對吧？我會賭 Svelte。學習 Svelte 以及與基於執行時系統的框架的區別絕對不是浪費時間。我期待 Sveltes 未來的發展。我希望它能很快得到更廣泛的使用，我可以使用 Svelte 開始客戶專案😉 *閱讀更多關於 [我的博客上的前端和無伺服器](https://blog.jannikwempe.com/)。*

0個讚 0留言 1,409瀏覽

小編精選 - 技術文章翻譯 · 03月23日

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留言 746瀏覽

小編精選 - 技術文章翻譯 · 03月23日

最新前端框架 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留言 552瀏覽

小編精選 - 技術文章翻譯 · 02月22日

適用於各種軟體開發技能：2023 推薦練習的專案開發

作為一名開發人員，了解最新的技術和工具對於在就業市場上保持競爭力至關重要。在這篇文章中，我們整理了一份 2023 年最熱門開發專案的完整列表，以及掌握每個專案的教程和資源。無論您是希望提高技能的初學者，還是希望擴展您的技能組合的資深開發人員，此列表都適合每個人。 - 原文出處：https://dev.to/rahul3002/2023s-top-development-projects-for-programmers-a-complete-list-of-tutorials-and-tools-for-mastering-the-latest-technologies-37o3 --- ## 專案教程列表： ### Web開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 NextJS 建置 Reddit 2.0 克隆 | React、SQL、Supabase、Next.js、GraphQL | [連結](https://projectlearn.io/learn/web-development/project/build-reddit-2.0-clone-with-nextjs-205?from=github)| |使用 React 建置 YouTube 克隆 | Express、Node、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/build-a-youtube-clone-with-react-200?from=github)| |使用 JavaScript 圖表庫建立發散條形圖 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/create-a-diverging-bar-chart-with-a-javascript-charting-library-197?from=github)| |通過建置卡片組件學習 CSS 基礎知識 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/learn-css-basics-by-building-a-card-component-196?from=github)| |建立無伺服器模因即服務 | JavaScript、Rust、CSS、HTML | [連結](https://projectlearn.io/learn/web-development/project/create-a-serverless-meme-as-a-service-194?from=github)| |天氣預報網站 | JavaScript、HTML、CSS、React | [連結](https://projectlearn.io/learn/web-development/project/weather-forecast-website-193?from=github)| |連結縮短網站 | JavaScript、Vue、HTML、CSS、React | [連結](https://projectlearn.io/learn/web-development/project/link-shortener-website-192?from=github)| |抄襲檢查器網站 | Python, 引導 | [連結](https://projectlearn.io/learn/web-development/project/plagiarism-checker-website-189?from=github)| |建置自定義 Google 地圖主題 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/build-a-custom-google-maps-theme-187?from=github)| |使用 JavaScript 建置超級馬里奧主題的 Google 地圖 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/build-a-super-mario-themed-google-map-with-javascript-180?from=github)| |建置社區驅動的交付應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | [連結](https://projectlearn.io/learn/web-development/project/build-a-community-driven-delivery-application-176?from=github)| |建置本地商店搜尋和發現應用程式 | Python、Django、PostgreSQL、JavaScript、Mapbox | [連結](https://projectlearn.io/learn/web-development/project/build-a-local-store-search-and-discovery-application-175?from=github)| |使用 React.js 和 Node.js 的中型克隆 |React、Node、CSS3、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/medium-clone-using-react.js-and-node.js-174?from=github)| |使用 React JS 克隆 Facebook |React、Firebase、CSS3、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/facebook-clone-with-react-js-171?from=github)| | JavaScript30 - 30 天 Vanilla JS 編碼挑戰 | JavaScript | [連結](https://projectlearn.io/learn/web-development/project/javascript30---30-day-vanilla-js-coding-challenge-170?from=github)| |使用 Gatsby 和 GraphCMS 的旅行遺願清單地圖 |Gatsby、Leaflet、GraphCMS、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/travel-bucket-list-map-with-gatsby-and-graphcms-168?from=github)| |使用 Vue.js 的記憶卡遊戲 | Vue、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/memory-card-game-with-vue.js-167?from=github)| | Strapi 和 GatsbyJS 課程 - 投資組合專案 | Strapi、Gatsby、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/strapi-and-gatsbyjs-course---portfolio-project-166?from=github)| | Storybook - Node、Express、MongoDB 和 Google OAuth | MongoDB、Node、JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/storybook---node,-express,-mongodb-and-google-oauth-165?from=github)| |呼吸和放鬆應用程式 - JavaScript 和 CSS 動畫 | JavaScript、HTML、CSS | [連結](https://projectlearn.io/learn/web-development/project/breathe-and-relax-app---javascript-and-css-animations-164?from=github)| |用於加密貨幣價格的 Node.js CLI |Node，JavaScript | [連結](https://projectlearn.io/learn/web-development/project/node.js-cli-for-cryptocurrency-prices-163?from=github)| | React 和 Tailwind CSS 圖片庫 |React，順風，JavaScript，HTML，CSS | [連結](https://projectlearn.io/learn/web-development/project/react-and-tailwind-css-image-gallery-162?from=github)| |使用 React 的番茄鐘 |React，JavaScript，HTML，CSS | [連結](https://projectlearn.io/learn/web-development/project/pomodoro-clock-using-react-161?from=github)| | Laravel 從零開始的關鍵字密度工具 | Laravel、PHP、JQuery、AJAX、SEO | [連結](https://projectlearn.io/learn/web-development/project/keyword-density-tool-with-laravel-from-scratch-160?from=github)| |使用 Yii2 PHP 框架克隆 YouTube | Yii2, PHP | [連結](https://projectlearn.io/learn/web-development/project/youtube-clone-using-yii2-php-framework-159?from=github)| |使用 React、GraphQL 和 Amplify 克隆 Reddit | React、Amplify、AWS、GraphQL、Node | [連結](https://projectlearn.io/learn/web-development/project/reddit-clone-with-react,-graphql-and-amplify-157?from=github)| |使用 React 和 GraphQL 的全棧 Yelp 克隆 |React、GraphQL、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/full-stack-yelp-clone-with-react-and-graphql-155?from=github)| |帶有 React Hooks 和 Context API 的 Pokémon Web App |React、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/pokémon-web-app-with-react-hooks-and-context-api-154?from=github)| |使用 JavaScript 和 Rails 進行分水嶺監控 | Ruby、Rails、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/watershed-monitor-using-javascript-and-rails-153?from=github)| |使用 React 和 Redux 的氣候資料儀表板 | React、Redux、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/climate-data-dashboard-using-react-and-redux-152?from=github)| |僅使用 CSS 翻轉 UNO 卡片 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/flipping-uno-cards-using-only-css-151?from=github)| |使用 Redis、WebSocket 和 Go 的聊天應用程式 | Redis、Web Socket、Go、Azure | [連結](https://projectlearn.io/learn/web-development/project/chat-app-with-redis,-websocket-and-go-146?from=github)| |使用 React 導航的 Spotify 登錄動畫 |React、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/spotify-login-animation-with-react-navigation-145?from=github)| |僅使用 CSS 的動態天氣界面 | HTML, CSS | [連結](https://projectlearn.io/learn/web-development/project/dynamic-weather-interface-with-just-css-144?from=github)| |使用 Airtable 和 Vue 的簡單 CRUD 應用程式 | Airtable、Vue、Vuetify、API、HTML | [連結](https://projectlearn.io/learn/web-development/project/simple-crud-app-with-airtable-and-vue-143?from=github)| |帶有 MEVN 堆棧的全棧 RPG 角色生成器 | MongoDB、Express、Vue、Node、HTML | [連結](https://projectlearn.io/learn/web-development/project/full-stack-rpg-character-generator-with-mevn-stack-142?from=github)| |帶有 PERN 堆棧的 Todo 應用 | PostgreSQL、Express、React、Node、HTML | [連結](https://projectlearn.io/learn/web-development/project/todo-app-with-the-pern-stack-141?from=github)| |帶有 Gatsby 的夏季公路旅行地圖應用程式 |React，Gatsby，Leaflet | [連結](https://projectlearn.io/learn/web-development/project/summer-road-trip-mapping-app-with-gatsby-140?from=github)| |使用 Socket.io 的多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/multiplayer-card-game-with-socket.io-139?from=github)| |帶有 Gatsby 的 COVID-19 儀表板和地圖應用程式 |React，Gatsby，Leaflet | [連結](https://projectlearn.io/learn/web-development/project/covid-19-dashboard-and-map-app-with-gatsby-138?from=github)| | React 抽認卡測驗 |React、API、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/flashcard-quiz-with-react-125?from=github)| |用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/whack-a-mole-with-pure-javascript-124?from=github)| |使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/nokia-3310-snake-game-using-javascript-123?from=github)| |原版 JavaScript 中的石頭剪刀布 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/rock-paper-scissors-in-vanilla-javascript-122?from=github)| |純 JavaScript 的俄羅斯方塊 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/tetris-with-pure-javascript-121?from=github)| |使用 React 製作 Meme Maker |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/meme-maker-with-react-119?from=github)| |使用 React 克隆 Evernote |React、Firebase、Node、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/evernote-clone-with-react-118?from=github)| |開發者 Meetup App with Vue | Vue、Firebase、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/developer-meetup-app-with-vue-117?from=github)| | Vue 實時聊天應用 | Vue、Firebase、Vuex、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/real-time-chat-app-with-vue-116?from=github)| |使用 Vue 的加密貨幣追踪器 | Vue、Vuetify、API、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/cryptocurrency-tracker-with-vue-115?from=github)| | Vue 多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/multiplayer-quiz-game-with-vue-114?from=github)| | Vue 掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/minesweeper-game-with-vue-113?from=github)| |使用 Vue 克隆 Instagram | Vue、CSSGram、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/instagram-clone-with-vue-112?from=github)| |使用 Angular 克隆黑客新聞 |角度、燈塔、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/hacker-news-clone-with-angular-111?from=github)| |聊天界面 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/chat-interface-110?from=github)| |純 CSS3 工具提示 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/pure-css3-tooltip-109?from=github)| |社交媒體按鈕 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/social-media-buttons-108?from=github)| |推薦卡 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/testimonial-card-107?from=github)| |帶有 CSS3 Flexbox 的導航欄 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/navigation-bar-with-css3-flexbox-106?from=github)| |使用 CSS3 Flexbox 的移動應用程式佈局 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/mobile-app-layout-with-css3-flexbox-105?from=github)| |受 Reddit 啟發的加載微調器 | HTML5, CSS3 | [連結](https://projectlearn.io/learn/web-development/project/reddit-inspired-loading-spinner-104?from=github)| |帶 CSS3 網格的日曆 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/calendar-with-css3-grid-103?from=github)| | React 中的俄羅斯方塊遊戲 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/tetris-game-in-react-102?from=github)| | 2D 突圍遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/2d-breakout-game-101?from=github)| |精靈動畫 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/sprite-animation-100?from=github)| |蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/snake-game-99?from=github)| |記憶遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/memory-game-98?from=github)| |簡單的身份驗證和授權 | GraphQL、Apollo、Node、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/simple-authentication-and-authorization-97?from=github)| |加密貨幣追踪器 | NextJS、GraphQL、Apollo、Node、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/cryptocurrency-tracker-96?from=github)| |使用 Vanilla Javascript 進行即時搜尋 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/instant-search-with-vanilla-javascript-95?from=github)| |計算器應用 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/calculator-app-94?from=github)| |待辦事項 | Vue、JavaScript、CSS3、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/todo-app-45?from=github)| |博客應用 | Vue、GraphQL、阿波羅、JavaScript、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/blog-app-44?from=github)| |簡單的預算應用程式 | Vue、布爾瑪、JavaScript、CSS3、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/simple-budgeting-app-43?from=github)| |搜尋機器人 |Node、Twilio、Cheerio、API、自動化 | [連結](https://projectlearn.io/learn/web-development/project/search-bot-42?from=github)| |推特機器人 |Node、JavaScript、API、自動化 | [連結](https://projectlearn.io/learn/web-development/project/twitter-bot-41?from=github)| |實時 Markdown 編輯器 |Node、JavaScript、Express、Redis、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/real-time-markdown-editor-40?from=github)| |待辦事項 | Angular、TypeScript、RxJS、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/todo-app-39?from=github)| |黑客新聞客戶端 |角度、RxJS、Webpack、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/hacker-news-client-38?from=github)| |隨機報價機 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/random-quote-machine-37?from=github)| | Todoist克隆| React, Firebase, JavaScript, 測試, HTML5 | [連結](https://projectlearn.io/learn/web-development/project/todoist-clone-36?from=github)| |帶有情感分析的聊天應用 | NextJS、Pusher、Sentiment、Node、React | [連結](https://projectlearn.io/learn/web-development/project/chat-app-with-sentiment-analysis-35?from=github)| |預約安排 | React、Twilio、CosmicJS、Material-UI、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/appointment-scheduler-34?from=github)| |生命遊戲 |React、2D、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/game-of-life-33?from=github)| |新聞應用 | React Native、Node、API、React、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/news-app-32?from=github)| |聊天應用 | React、Redux、Redux Saga、Web 套接字、Node | [連結](https://projectlearn.io/learn/web-development/project/chat-app-31?from=github)| |待辦事項 | React Native、GraphQL、Apollo、API、Hasura | [連結](https://projectlearn.io/learn/web-development/project/todo-app-30?from=github)| | Chrome 擴展 |React，包裹，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/chrome-extension-29?from=github)| |電影投票應用 | React、Redux、API、不可變、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/movie-voting-app-27?from=github)| |特雷洛克隆 | React、Elixir、Phoenix、JWT、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/trello-clone-25?from=github)| | Wiki 風格的 CMS | C#、.NET、Razor 頁面 | [連結](https://projectlearn.io/learn/web-development/project/wiki-style-cms-18?from=github)| |使用 ReactJS 克隆 Spotify |React，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/spotify-clone-with-reactjs-15?from=github)| |微軟主頁克隆 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/microsoft-homepage-clone-14?from=github)| |簡單甘特圖 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/simple-gantt-chart-13?from=github)| |工作抓取應用 |Node、JavaScript、REST、API、Express | [連結](https://projectlearn.io/learn/web-development/project/job-scraping-app-12?from=github)| |電子商務應用 |React，引導程序，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/web-development/project/e-commerce-app-11?from=github)| | Netflix 著陸頁 | HTML5、CSS3、JavaScript | [連結](https://projectlearn.io/learn/web-development/project/netflix-landing-page-10?from=github)| |人工智能聊天機器人 | Web 語音 API、Node、JavaScript、Express、Socket.io | [連結](https://projectlearn.io/learn/web-development/project/ai-chatbot-9?from=github)| |社交網絡應用 |React、Node、Redux、Firebase、REST | [連結](https://projectlearn.io/learn/web-development/project/social-networking-app-8?from=github)| |在 Node.js 中建置一個簡單的加密貨幣區塊鏈 |Node、JavaScript、密碼學、區塊鏈 | [連結](https://projectlearn.io/learn/web-development/project/build-a-simple-cryptocurrency-blockchain-in-node.js-7?from=github)| | BT 客戶端 |Node、JavaScript、TCP、計算機網絡 | [連結](https://projectlearn.io/learn/web-development/project/bittorrent-client-6?from=github)| |使用 JavaScript 的待辦事項列表應用 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/web-development/project/todo-list-app-with-javascript-4?from=github)| |使用 Anime.js 的 JavaScript 動畫 | JavaScript、CSS3、庫、HTML5、API | [連結](https://projectlearn.io/learn/web-development/project/javascript-animations-with-anime.js-3?from=github)| |帶有 React 的工作板應用程式 |React、Node、Cron、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/web-development/project/job-board-app-with-react-1?from=github)| ### 移動開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 React Native 建置一個 Uber Eats 克隆 | React Native、Javascript、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/build-an-uber-eats-clone-with-react-native-204?from=github)| |使用 React Native 建置一個 Uber 克隆 | React Native、Javascript、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/build-an-uber-clone-with-react-native-203?from=github)| |使用 Flutter SDK 建置帶有故事的聊天應用程式 |顫振，飛鏢 | [連結](https://projectlearn.io/learn/mobile-development/project/build-a-chat-app-with-stories-using-the-flutter-sdk-199?from=github)| |建置 Robinhood 風格的應用程式來跟踪 COVID-19 病例 |科特林, 安卓 | [連結](https://projectlearn.io/learn/mobile-development/project/build-a-robinhood-style-app-to-track-covid-19-cases-198?from=github)| | Tinder 風格的 Swipe 移動應用程式 |科特林、Java、斯威夫特 | [連結](https://projectlearn.io/learn/mobile-development/project/tinder-style-swipe-mobile-app-186?from=github)| |加密貨幣價格列表移動應用程式 | React Native、Swift、Flutter、Dart | [連結](https://projectlearn.io/learn/mobile-development/project/cryptocurrency-price-listing-mobile-app-185?from=github)| |餐廳社交移動應用程式 | React Native、Swift、Flutter、Dart | [連結](https://projectlearn.io/learn/mobile-development/project/restaurants-social-mobile-app-184?from=github)| |休息時間提醒移動應用 | React Native、Kotlin、Java、Swift | [連結](https://projectlearn.io/learn/mobile-development/project/break-time-reminder-mobile-app-183?from=github)| |發票和付款提醒移動應用程式 | React、Node、Express、MongoDB | [連結](https://projectlearn.io/learn/mobile-development/project/invoicing-and-payment-reminder-mobile-app-182?from=github)| |倒計時移動應用 | Swift、Java、React Native | [連結](https://projectlearn.io/learn/mobile-development/project/countdown-mobile-app-181?from=github)| |使用 Swift 的 Flappy Bird iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/flappy-bird-ios-game-using-swift-130?from=github)| |使用 Swift 的 Bull's Eye iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/bull's-eye-ios-game-using-swift-129?from=github)| |使用 SwiftUI 的任務列表 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/task-list-ios-app-using-swiftui-128?from=github)| |使用 SwiftUI 的餐廳 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/restaurant-ios-app-using-swiftui-127?from=github)| |使用 Swift 的骰子 iOS 應用 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/dice-ios-app-with-swift-126?from=github)| | TrueCaller 克隆 | Java、MySQL、XAMPP、Android | [連結](https://projectlearn.io/learn/mobile-development/project/truecaller-clone-83?from=github)| |天氣應用 | Java, API, Android | [連結](https://projectlearn.io/learn/mobile-development/project/weather-app-82?from=github)| |電子商務應用 | Java、Firebase、Android | [連結](https://projectlearn.io/learn/mobile-development/project/e-commerce-app-81?from=github)| |聊天應用 | Java、Firebase、Android | [連結](https://projectlearn.io/learn/mobile-development/project/chat-app-80?from=github)| |待辦事項 | Flutter、Dart、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/todo-app-79?from=github)| |旅遊應用程式用戶界面 | Flutter、Dart、Android、iOS | [連結](https://projectlearn.io/learn/mobile-development/project/travel-app-ui-78?from=github)| | Reddit 客戶端 |安卓，科特林 | [連結](https://projectlearn.io/learn/mobile-development/project/reddit-client-46?from=github)| |待辦事項 | React Native、Android、iOS、JavaScript | [連結](https://projectlearn.io/learn/mobile-development/project/todo-app-24?from=github) |照片庫查看器 | C#、iOS、Xamarin、Visual Studio、Android | [連結](https://projectlearn.io/learn/mobile-development/project/photo-library-viewer-19?from=github)| |使用 React Native 克隆 WhatsApp | React Native、Node、GraphQL、Apollo、JavaScript | [連結](https://projectlearn.io/learn/mobile-development/project/whatsapp-clone-with-react-native-2?from=github)| ### 遊戲開發： |專案 |技術 |連結 | | :--- |:---|:---| |使用 Kaboom.js 建置超級馬里奧兄弟、塞爾達傳說和太空侵略者 | JavaScript，Kaboom | [連結](https://projectlearn.io/learn/game-development/project/build-super-mario-bros,-zelda,-and-space-invaders-with-kaboom.js-201?from=github) | |使用 TypeScript 建立打磚塊遊戲 |打字稿、HTML、CSS、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/create-an-arkanoid-game-with-typescript-195?from=github)| |簡單遊戲 | Lua、LÖVE、Python、Pygame 零 | [連結](https://projectlearn.io/learn/game-development/project/simple-games-179?from=github)| | Python在線多人遊戲|蟒蛇 | [連結](https://projectlearn.io/learn/game-development/project/python-online-multiplayer-game-173?from=github)| |打敗他們格鬥遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/beat-em-up-fight-game-172?from=github)| |使用 Godot 3.1 的簡單 3D 遊戲 |戈多，C#，3D | [連結](https://projectlearn.io/learn/game-development/project/simple-3d-game-using-godot-3.1-150?from=github)| | Godot 中的簡單益智遊戲- Box and Switch |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/simple-puzzle-game-in-godot---box-and-switch-149?from=github)| | Godot 3 中的遊戲界面從頭開始 |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/game-interface-from-scratch-in-godot-3-148?from=github)| | Godot 的 2D 遊戲：玩家與敵人 |戈多，C#，二維 | [連結](https://projectlearn.io/learn/game-development/project/2d-game-with-godot:-player-and-enemy-147?from=github)| |使用 Socket.io 的多人紙牌遊戲 | Phaser 3、Express、Socket.io、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-card-game-with-socket.io-139?from=github)| |使用 Unity 2D 和 Mirror 的多人紙牌遊戲 | C#、Unity、二維、鏡像 | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-card-game-with-unity-2d-and-mirror-137?from=github)| | Rust 中的 Roguelike 教程 |生鏽，二維 | [連結](https://projectlearn.io/learn/game-development/project/roguelike-tutorial-in-rust-136?from=github)| | Rust 歷險記 - 一款基本的 2D 遊戲 |生鏽，二維 | [連結](https://projectlearn.io/learn/game-development/project/adventures-in-rust---a-basic-2d-game-135?from=github)| |使用 Ruby 的終端貪吃蛇遊戲 |紅寶石，二維 | [連結](https://projectlearn.io/learn/game-development/project/terminal-snake-game-with-ruby-134?from=github)| |使用 OpenGL 的太空入侵者 | OpenGL、C/C++、2D | [連結](https://projectlearn.io/learn/game-development/project/space-invaders-using-opengl-133?from=github)| | C 中的數獨求解器 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/sudoku-solver-in-c-132?from=github)| | C 中的國際象棋引擎 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/chess-engine-in-c-131?from=github)| |使用 Swift 的 Flappy Bird iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/game-development/project/flappy-bird-ios-game-using-swift-130?from=github)| |使用 Swift 的 Bull's Eye iOS 遊戲 |斯威夫特、XCode、iOS | [連結](https://projectlearn.io/learn/game-development/project/bull's-eye-ios-game-using-swift-129?from=github)| |用純 JavaScript 打地鼠 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/whack-a-mole-with-pure-javascript-124?from=github)| |使用 JavaScript 的諾基亞 3310 貪吃蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/nokia-3310-snake-game-using-javascript-123?from=github)| |原版 JavaScript 中的石頭剪刀布 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/rock-paper-scissors-in-vanilla-javascript-122?from=github)| |純 JavaScript 的俄羅斯方塊 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/tetris-with-pure-javascript-121?from=github)| | Vue 多人問答遊戲 | Vue、Pusher、Node、Express、JavaScript | [連結](https://projectlearn.io/learn/game-development/project/multiplayer-quiz-game-with-vue-114?from=github)| | Vue 掃雷遊戲 | Vue、Vuex、Vuetify、JavaScript、HTML5 | [連結](https://projectlearn.io/learn/game-development/project/minesweeper-game-with-vue-113?from=github)| | React 中的俄羅斯方塊遊戲 |React，JavaScript，HTML5，CSS3 | [連結](https://projectlearn.io/learn/game-development/project/tetris-game-in-react-102?from=github)| | 2D 突圍遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/2d-breakout-game-101?from=github)| |精靈動畫 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/sprite-animation-100?from=github)| |蛇遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/snake-game-99?from=github)| |記憶遊戲 | JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/memory-game-98?from=github)| |坦克射手 | 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/tanks-shooter-93?from=github)| | 2D Roguelike |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/2d-roguelike-92?from=github)| |約翰·萊蒙鬧鬼的短途旅行 3D | 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/john-lemon's-haunted-jaunt-3d-91?from=github)| | VR 初學者：密室逃脫 |虛擬現實、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/vr-beginner:-the-escape-room-90?from=github)| |露比的冒險 |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/ruby's-adventure-89?from=github)| |角色扮演遊戲 |二維、Unity、C# | [連結](https://projectlearn.io/learn/game-development/project/rpg-game-88?from=github)| |滾球| 3D、統一、C# | [連結](https://projectlearn.io/learn/game-development/project/roll-a-ball-87?from=github)| | FPS 微型遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/fps-microgame-86?from=github)| |平台微遊戲 | Unity、C#、2D | [連結](https://projectlearn.io/learn/game-development/project/platformer-microgame-85?from=github)| |卡丁車小遊戲 |統一，C# | [連結](https://projectlearn.io/learn/game-development/project/karting-microgame-84?from=github)| |街機射擊 | Lua，愛 | [連結](https://projectlearn.io/learn/game-development/project/arcade-shooter-47?from=github)| |生命遊戲 |React、2D、JavaScript、HTML5、CSS3 | [連結](https://projectlearn.io/learn/game-development/project/game-of-life-33?from=github)| |手工英雄 | C/C++、OpenGL、2D | [連結](https://projectlearn.io/learn/game-development/project/handmade-hero-23?from=github)| |突圍 | C/C++、OpenGL、2D | [連結](https://projectlearn.io/learn/game-development/project/breakout-22?from=github)| |俄羅斯方塊 | C/C++, 二維 | [連結](https://projectlearn.io/learn/game-development/project/tetris-21?from=github)| |紅白機遊戲 | C/C++、Python、二維 | [連結](https://projectlearn.io/learn/game-development/project/nes-game-20?from=github)| | Roguelike 遊戲 | C#、.NET、RogueSharp、MonoGame、RLNet | [連結](https://projectlearn.io/learn/game-development/project/roguelike-game-17?from=github)| |簡單的角色扮演遊戲 | C#、SQL、二維 | [連結](https://projectlearn.io/learn/game-development/project/simple-rpg-game-16?from=github)| ### 機器學習與人工智能： |專案 |技術 |連結 | | :--- |:---|:---| |使用 BeautifulSoup 建置網絡爬蟲 | Python, BeautifulSoup | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/build-a-web-scraper-using-beautifulsoup-202?from=github)| |從胸部 X 光檢測肺炎的 CNN |美國有線電視新聞網，蟒蛇 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/cnn-that-detects-pneumonia-from-chest-x-rays-169?from=github)| |使用 AWS 在 Python 中自動更新資料可視化 | Python、AWS、Matplotlib | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/auto-updating-data-visualizations-in-python-with-aws-158?from=github)| |使用 GCP 和 Node 的 Twitter 情感分析工具 | API、GCP、Node、JavaScript | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-tool-using-gcp-and-node-156?from=github)| |使用 CNN 進行 Twitter 情緒分析 | Python、Matplotlib、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-using-cnn-120?from=github)| |泰勒斯威夫特歌詞生成器 | Python、Keras、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/taylor-swift-lyrics-generator-77?from=github)| | MNIST 數字辨識器 | Python、Keras、TensorFlow、Numpy、SciKit | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/mnist-digit-recognizer-76?from=github)| |訓練模型生成顏色 | Python、Keras、TensorFlow、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/train-a-model-to-generate-colors-75?from=github)| |圖片說明生成器 | Python、TensorFlow、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/image-caption-generator-74?from=github)| |使用 CNN 破解驗證碼系統 | Python、Keras、TensorFlow、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/break-a-captcha-system-using-cnn-73?from=github)| |生成一張平均臉 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/generate-an-average-face-72?from=github)| |圖像拼接 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/image-stitching-71?from=github)| |手部關鍵點檢測 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/hand-keypoint-detection-70?from=github)| |特徵臉 | Python、OpenCV、Numpy、C/C++ | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/eigenface-69?from=github)| |無人機目標檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/drone-target-detection-68?from=github)| |使用 Mask R-CNN 進行目標檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/object-detection-using-mask-r-cnn-67?from=github)| |面部地標檢測 | Python、OpenCV、DLib、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/facial-landmark-detection-66?from=github)| |文本傾斜校正 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/text-skew-correction-65?from=github)| | OCR 和文本辨識 | Python、OpenCV、Tesseract、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/ocr-and-text-recognition-64?from=github)| |人數統計 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/people-counter-63?from=github)| |文本檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/text-detection-62?from=github)| |語義分割 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/semantic-segmentation-61?from=github)| |物件跟踪 | Python、OpenCV、Numpy、CamShift | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/object-tracking-60?from=github)| |人臉聚類 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/face-clustering-59?from=github)| |條碼掃描儀 | Python、OpenCV、ZBar、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/barcode-scanner-58?from=github)| |顯著性檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/saliency-detection-57?from=github)| |人臉檢測 | Python、OpenCV、Numpy | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/face-detection-56?from=github)| |文件掃描儀 | Python、OpenCV、Numpy、SciKit | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/document-scanner-55?from=github)| |音樂推薦 | Python、SciKit、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/music-recommender-54?from=github)| |預測葡萄酒質量 | Python、Matplotlib、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/predict-quality-of-wine-53?from=github)| |遺傳算法 | Python、SciKit、Numpy、熊貓 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/genetic-algorithms-52?from=github)| |深夢 | Python、TensorFlow、可視化 | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/deepdream-51?from=github)| |股價預測| Python、SciKit、Matplotlib | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/stock-price-prediction-50?from=github)| |電影推薦系統 | Python, LightFM | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/movie-recommendation-systems-49?from=github)| | Twitter 情緒分析 | Python, API | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/twitter-sentiment-analysis-48?from=github)| |帶有情感分析的聊天應用 | NextJS、Pusher、Sentiment、Node、React | [連結](https://projectlearn.io/learn/machine-learning-and-ai/project/chat-app-with-sentiment-analysis-35?from=github)| --- **結論** 2023 年將成為令人振奮的發展年，新技術和工具層出不窮。希望這篇文章對您有幫助。

0個讚 0留言 1,675瀏覽

站長阿川 · 02月16日

JavaScript 系列八：第2課 ── 筆記應用程式

## 課程目標 - 能夠寫出筆記應用程式 ## 課程內容應用程式簡單沒關係，只要精準解決用戶通點甚至可以收一點點月租費，替開發者「賺到一點零用錢」這一課來寫筆記應用程式關鍵字 `write notes online` `online note tool` 研究看看目前市面上，大家都做得怎樣最簡潔的是這兩款 - https://justnotepad.com/ - http://simplenotes.online/ ## 課後作業請使用 https://replit.com/ 來寫作業這次作業的規格如下： - 有一大塊輸入文字的地方，用戶可以當成臨時打筆記的地方 - 以 `textarea` 實作即可，純文字即可，不需要複雜的文章格式編輯器 - 筆記內容要隨時記錄到 local storage，用戶隨時關閉、開啟網頁，都不會失去資料 - 側邊或底部，有一排「筆記清單」，用戶可以在多則筆記之間切換 - 畫面上有一個「建立新筆記」按鈕 - 「筆記清單」的每個筆記旁邊，都有「刪除」按鈕做出以上功能，你就完成這次的課程目標了！

0個讚 19留言 1,343瀏覽

我愛JS · 02月09日

關於編輯器　　抓取裡面文字該怎麼做？

像這邊的文章輸入是使用textarea 想要用JS得到文章內容可以直接抓但有些地方是編輯器通常長的就比較奇怪會像是html的結構甚至有的貼出來是用iframe去完成我最近想要實作備份文章內容的腳本發現一些問題首先是在it幫這邊測試 ![](https://i.imgur.com/gnjpzdG.png) 我發現就算在開發者工具改動文章內容回到編輯那邊卻又會跳回來如果是textarea 我用value就可以改動不太知道這種狀況要怎麼用JS去改動裡面結構就算我學裡面的span去貼會發現只會跳會原本的內容動彈不得是說該怎麼處理我發現就算我改innerText 表面上會改一下當我要編輯又會跳回去這樣子是什麼問題這樣的效果也會導致假設我想要用JS輸入文章也會遇到障礙這方面該怎麼解決呢～～

2個讚 4留言 309瀏覽

小編精選 - 技術文章翻譯 · 02月01日

軟體開發者推薦使用：50 個好用的 CLI 指令工具

作為開發人員，我們在終端機上花費了大量時間。有很多有用的 CLI 工具，它們可以讓您在命令行中的生活更輕鬆、更快速，而且通常更有趣。這篇文章概述了 50 個必備的好用 CLI 工具。原文出處：https://dev.to/lissy93/cli-tools-you-cant-live-without-57f6 --- ## 工具 ### [`thefuck`](https://github.com/nvbn/thefuck) - 自動更正錯誤輸入的命令 > `thefuck` 是您一旦嘗試過就離不開的實用程式之一。每當您輸入錯誤的命令並出現錯誤時，只需執行 `fuck`，它就會自動更正它。使用向上/向下選擇一個更正，或者只執行 `fuck --yeah` 立即執行最有可能的。 ![他媽的示例用法](https://i.ibb.co/J55hWKX/thefuck.gif) --- ### [`zoxide`](https://github.com/ajeetdsouza/zoxide) - 輕鬆導航 _(更好的 cd)_ > `z` 讓您可以跳轉到任何目錄，而無需記住或指定其完整路徑。它會記住您存取過的目錄，因此您可以快速跳轉——您甚至不需要鍵入完整的文件夾名稱。它還具有互動式選項，使用“fzf”，因此您可以即時過濾目錄結果 ![zoxide-example-usage](https://i.ibb.co/6Z960jq/zoxide.gif) --- ### [`tldr`](https://github.com/tldr-pages/tldr) - 社區維護的文件 _(更好的 `man`)_ > `tldr` 是社區維護的手冊頁的巨大集合。與傳統的手冊頁不同，它們進行了總結，包含有用的用法範例，並且配色良好，便於閱讀 ![tldr-example-usage](https://i.ibb.co/jTW9knx/tlfr.gif) --- ### [`scc`](https://github.com/boyter/scc) - 計算程式碼行數_（更好的`cloc`）_ > `scc` 為您提供了針對特定目錄以每種語言編寫的程式碼行數的細分。它還顯示了一些有趣的統計資料，例如估計的開發成本和復雜性訊息。它的速度非常快，非常準確，並且支持多種語言 ![scc-example-usage](https://i.ibb.co/NygHWXt/scc.png) --- ### [`exa`](https://github.com/ogham/exa) - 列出文件 _(更好的 `ls`)_ > `exa` 是基於 Rust 的現代替代 `ls` 命令，用於列出文件。它可以顯示文件類型圖標、顏色、文件/文件夾訊息，並有多種輸出格式——樹、網格或列表 ![exa-example-usage](https://i.ibb.co/cTs0wQ5/exa.png) --- ### [`duf`](https://github.com/muesli/duf) - 硬碟使用量 _(更好的 `df`)_ > `duf` 非常適合顯示有關已安裝硬碟的訊息和檢查可用空間。它產生清晰多彩的輸出，並包括用於排序和自定義結果的選項。 ![duf-示例用法](https://i.ibb.co/sP59DKd/duf.png) --- ### [`aria2`](https://github.com/aria2/aria2) - 下載實用程式 _（更好的 `wget`）_ > `aria2` 是一種輕量級、多協議、用於 HTTP/HTTPS、FTP、SFTP、BitTorrent 和 Metalink 的恢復下載實用程序，支持通過 RPC 接口進行控制。它的[功能豐富](https://aria2.github.io/manual/en/html/README.html)令人難以置信，並且有大量的[選項](https://aria2.github.io/manual/en/ html/aria2c.html）。還有 [ziahamza/webui-aria2](https://github.com/ziahamza/webui-aria2) - 一個不錯的網路介面搭配。 ![aria2c-example-usage](https://i.ibb.co/pJkkX6x/aria2c.png) --- ### [`bat`](https://github.com/sharkdp/bat) - 讀取文件_(更好的`cat`)_ > `bat` 是 `cat` 的複製品，但具有語法高亮顯示和 git 集成。它是用 Rust 編寫的，性能非常好，並且有多個用於自定義輸出和主題的選項。支持自動管道和文件連接 ![bat-example-usage](https://i.ibb.co/VND3Y9s/bat.png) --- ### [`diff-so-fancy`](https://github.com/so-fancy/diff-so-fancy) - 文件比較_(更好的`diff`)_ > `diff-so-fancy` 為比較字串、文件、目錄和 git 更改提供了更好看的差異。更改突出顯示使發現更改變得更加容易，並且您可以自定義輸出佈局和顏色 ![diff-so-fancy-example-usage](https://i.ibb.co/RGKLhQk/diff-so-fancy.png) --- ### [`entr`](https://github.com/eradman/entr) - 觀察變化 > `entr` 允許您在文件更改時執行任意命令。您可以傳遞一個文件、目錄、符號連結或正則表達式來指定它應該監視哪些文件。它對於自動重建專案、響應日誌、自動化測試等非常有用。與類似專案不同，它使用 kqueue(2) 或 inotify(7) 來避免輪詢，並提高性能 ![entr-example-usage](https://i.ibb.co/HHKQx2H/entr.png) --- ### [`exiftool`](https://github.com/exiftool/exiftool) - 讀取+寫入元資料 > ExifTool 是一個方便的實用程序，用於讀取、寫入、剝離和建立各種文件類型的元訊息。再次分享照片時不要不小心洩露您的位置！ ![exiftool-example-usage](https://i.ibb.co/Gv5PN6v/exiftool.png) --- ### [`fdupes`](https://github.com/jbruchon/jdupes) - 重複文件查找器 > `jdupes` 用於辨識和/或刪除指定目錄中的重複文件。當您有兩個或更多相同的文件時，它對於釋放硬碟空間很有用 ![fdupes-example-usage](https://i.ibb.co/jhSY2Nn/fdupes.png) --- ### [`fzf`](https://github.com/junegunn/fzf) - 模糊文件查找器_(更好的`find`)_ > `fzf` 是一個非常強大且易於使用的模糊文件查找器和過濾工具。它允許您跨文件搜尋字串或模式。 fzf 也有可用於大多數 shell 和 IDE 的[插件](https://github.com/junegunn/fzf/wiki/Related-projects)，用於在搜尋時顯示即時結果。這篇由 Alexey Samoshkin 撰寫的 [文章](https://www.freecodecamp.org/news/fzf-a-command-line-fuzzy-finder-missing-demo-a7de312403ff/) 重點介紹了它的一些用例。 ![fzf-示例用法](https://i.ibb.co/LNcwjWm/fzf.gif) --- ### [`hyperfine`](https://github.com/sharkdp/hyperfine) - 命令基準測試 > `hyperfine` 可以輕鬆準確地對任意命令或腳本進行基準測試和比較。它負責預熱執行、清除緩存以獲得準確的結果並防止來自其他程序的干擾。它還可以將結果導出為原始資料並生成圖表。 ![hyperfine-example-usage](https://i.ibb.co/tKNR5gr/hyperfine.png) --- ### [`just`](https://github.com/casey/just) - 現代命令執行器_(更好的`make`)_ > `just` 與 `make` 類似，但增加了一些不錯的功能。它讓您可以將專案命令分組到副本中，這些副本可以輕鬆列出和執行。支持別名、位置參數、不同的 shell、dot env 集成、字串插入以及幾乎所有您可能需要的東西 --- ### [`jq`](https://github.com/stedolan/jq) - JSON 處理器 > `jq` 類似於 `sed`，但對於 JSON - 您可以使用它輕鬆地切片、過濾、映射和轉換結構化資料。它可用於編寫複雜的查詢以提取或操作 JSON 資料。還有一個 [jq playground](https://jqplay.org/)，您可以用來試用，或通過即時回饋制定查詢 --- ### [`most`](https://www.jedsoft.org/most/) - 多窗口滾動尋呼機_（更好的 less）_ > `most` 是一個尋呼機，用於讀取長文件或命令輸出。 `most` 支持多窗口並且可以選擇不換行 --- ### [`procs`](https://github.com/dalance/procs) - 進程查看器_（更好的 ps）_ > `procs` 是一個易於導航的流程查看器，它具有彩色突出顯示，使流程的排序和搜尋變得容易，具有樹視圖和實時更新 ![procs-example-usage](https://i.ibb.co/y6qhgDX/procs-demo.gif) --- ### [`rip`](https://github.com/nivekuil/rip) - 刪除工具_(更好的 rm)_ > `rip` 是一種安全、符合人體工程學且高性能的刪除工具。它讓您直觀地刪除文件和目錄，並輕鬆恢復已刪除的文件 ![rip-example-usage](https://i.ibb.co/10DTvT2/rip.gif) --- ### [`ripgrep`](https://github.com/BurntSushi/ripgrep) - 在文件中搜尋 _(更好的 `grep`)_ > `ripgrep` 是一種面向行的搜尋工具，可遞歸地在當前目錄中搜尋正則表達式模式。它可以忽略 .gitignore 的內容並跳過二進製文件。它能夠在壓縮檔案中搜尋，或只搜尋特定的擴展名，並使用各種編碼方法理解文件 ![ripgrep-example-usage](https://i.ibb.co/qkMgQm9/ripgrep.png) --- ### [`rsync`](https://rsync.samba.org/) - 快速、增量文件傳輸 > `rsync` 讓您可以在本地複制大文件，或將大文件複製到遠程主機或外部驅動器或從遠程主機或外部驅動器複製。它可用於保持多個位置的文件同步，非常適合建立、更新和恢復備份 --- ### [`sd`](https://github.com/chmln/sd) - 查找並替換_(更好的`sed`)_ > `sd` 是一種簡單、快速且直觀的查找和替換工具，基於字串文字。它可以在文件、整個目錄或任何管道文本上執行 ![sd-示例用法](https://i.ibb.co/G9CfcGS/sd.png) --- ### [`tre`](https://github.com/dduan/tre) - 目錄層次結構_(更好的`tree`)_ > `tre` 輸出當前目錄或指定目錄的樹形文件列表，並帶有顏色。使用“-e”選項執行時，它會為每個專案編號，並建立一個臨時別名，您可以使用該別名快速跳轉到該位置 ![tre-example-usage](https://i.ibb.co/CmMrZLB/tre.png) --- ### [`xsel`](https://github.com/kfish/xsel) - 存取剪貼板 > `xsel` 讓您通過命令行讀取和寫入 X 選擇剪貼板。它對於將命令輸出通過管道傳輸到剪貼板或將復制的資料傳輸到命令中很有用 --- ## CLI 監控和性能應用程式 ### [`bandwhich`](https://github.com/imsnif/bandwhich) - 頻寬利用率監視器 > 即時顯示頻寬使用情況、連接訊息、傳出主機和 DNS 查詢 ![bandwhich-example-usage](https://i.ibb.co/8jHHBD3/Screenshot-from-2023-01-18-22-45-32.png) --- ### [`ctop`](https://github.com/bcicen/ctop) - 容器指標和監控 > 類似於 `top`，但用於監控正在執行的（Docker 和 runC）容器的資源使用情況。它顯示實時 CPU、內存和網絡帶寬以及每個容器的名稱、狀態和 ID。還有一個內置的日誌查看器和管理（停止、啟動、執行等）容器的選項 ![ctop-example-usage](https://i.ibb.co/xGjyzZ2/ctop.gif) --- ### [`bpytop`](https://github.com/aristocratos/bpytop) - 資源監控_(更好的`htop`)_ > `bpytop` 是一種快速、交互式、可視化的資源監視器。它顯示了最熱門的執行進程、最近的 CPU、內存、磁盤和網絡歷史記錄。您可以從界面中導航、排序和搜尋——還支持自定義顏色主題 ![bpytop-example-usage](https://i.ibb.co/nj9jrhr/bpytop.gif) --- ### [`glances`](https://github.com/nicolargo/glances) - 資源監視器 + 網絡和 API > `glances` 是另一個資源監視器，但具有不同的功能集。它包括一個完全響應的 Web 視圖、一個 REST API 和歷史監控。它易於擴展，並且可以與其他服務集成 ![掃視示例用法](https://i.ibb.co/6g65Qy4/glances.gif) --- ### [`gping`](https://github.com/orf/gping) - 交互式 ping 工具 _（更好的 `ping`）_ > `gping` 可以在多個主機上執行 ping 測試，同時以實時圖形顯示結果。當與 --cmd 標誌一起使用時，它還可以用於監視執行時間 ![gping 示例用法](https://i.ibb.co/CvG6xt0/gping.gif) --- ### [`dua-cli`](https://github.com/Byron/dua-cli) - 磁盤使用分析器和監視器 _(更好的 `du`)_ > `dua-cli` 讓您以交互方式查看每個已安裝驅動器的已用和可用磁盤空間，並輕鬆釋放存儲空間 ![dua-cli-usage-example](https://i.ibb.co/x3NbDLR/dua.gif) --- ### [`speedtest-cli`](https://github.com/sivel/speedtest-cli) - 命令行速度測試實用程序 > `speedtest-cli` 只是執行網路速度測試，通過 speedtest.net - 但直接從終端 :) ![speedtest-cli-example-usage](https://i.ibb.co/25QCbdF/speedtest-cli.gif) --- ### [`dog`](https://github.com/ogham/dog) - DNS 查找客戶端_（更好的`dig`）_ > `dog` 是一個易於使用的 DNS 查找客戶端，支持 DoT 和 DoH，漂亮的彩色輸出和發出 JSON 的選項 ![dog-example-usage](https://i.ibb.co/48n617Q/dog.png) --- ## CLI 生產力應用程式 > 上網衝浪、播放音樂、查看電子郵件、管理日曆、閱讀新聞等等，無需離開終端！ ### [`browsh`](https://github.com/browsh-org/browsh) - CLI 網路瀏覽器 > `browsh` 是一個完全交互的、實時的、現代的基於文本的瀏覽器，呈現給 TTY 和瀏覽器。它同時支持鼠標和鍵盤導航，並且對於純基於終端的應用程式來說功能豐富得令人吃驚。它還緩解了困擾現代瀏覽器的電池耗盡問題，並且通過對 MoSH 的支持，由於帶寬減少，您可以體驗更快的加載時間 ![browsh-example-usage](https://i.ibb.co/S7nLFX5/browsh.gif) --- ### [`books`](https://github.com/jarun/books) - 書籤管理器 > `buku` 是一個基於終端的書籤管理器，具有大量的配置、存儲和使用選項。還有一個可選的 [web UI](https://github.com/jarun/buku/tree/master/bukuserver#screenshots) 和 [瀏覽器插件](https://github.com/samhh/bukubrow-webext#installation ), 用於在終端外存取您的書籤 ![buku-example-usage](https://i.ibb.co/CWQsf1x/buku.png) --- ### [`cmus`](https://github.com/cmus/cmus) - 音樂瀏覽器/播放器 > `cmus` 是終端音樂播放器，由鍵盤快捷鍵控制。它支持廣泛的音頻格式和編解碼器，並允許將曲目組織到播放列表中並應用播放設置 ![cmus-example-usage](https://i.ibb.co/dP6b3bd/cmus.png) --- ### [`cointop`](https://github.com/cointop-sh/cointop) - 跟踪加密價格 > `cointop` 顯示當前的加密貨幣價格，並跟踪您的投資組合的價格歷史。支持價格提醒、歷史圖表、貨幣換算、模糊搜尋等。您可以通過網絡 [cointop.sh](https://cointop.sh/) 或執行 `ssh cointop.sh` 來嘗試演示 ![cointop-example-usage](https://i.ibb.co/JBf9y4y/cointop.png) --- ### [`ddgr`](https://github.com/jarun/ddgr) - 從終端搜尋網頁 > `ddgr` 類似於 [googler](https://github.com/jarun/googler)，但適用於 DuckDuckGo。它快速、乾淨、簡單，支持即時回答、搜尋完成、搜尋 bangs 和高級搜尋。它默認尊重您的隱私，也有 HTTPS 代理支持，並與 Tor 一起工作 ![dggr-example-usage](https://i.ibb.co/S0H21QH/dggr.png) --- ### [`micro`](https://github.com/zyedidia/micro) - 程式碼編輯器_(更好的`nano`)_ > `micro` 是一款易於使用、快速且可擴展的程式碼編輯器，支持鼠標。由於它被打包成一個二進製文件，安裝就像`curl https://getmic.ro | 安裝一樣簡單。慶典` --- ### [`khal`](https://github.com/pimutils/khal) - 日曆客戶端 > `khal` 是一個終端日曆應用程式，它顯示即將發生的事件、月份和議程視圖。您可以將它與任何 CalDAV 日曆同步，並直接加入、編輯和刪除事件 ![khal-example-usage](https://i.ibb.co/hLCdjZW/khal.png) --- ### [`mutt`](https://gitlab.com/muttmua/mutt) - 電子郵件客戶端 > `mut` 是一個經典的、基於終端的郵件客戶端，用於發送、閱讀和管理電子郵件。它支持所有主流電子郵件協議和郵箱格式，允許附件、密件抄送/抄送、線程、郵件列表和傳遞狀態通知 ![mutt-example-usage](https://i.ibb.co/zVVsG3s/mutt.webp) --- ### [`newsboat`](https://github.com/newsboat/newsboat) - RSS / ATOM 新聞閱讀器 > `newsboat` 是一個 RSS 提要閱讀器和聚合器，用於直接從終端閱讀新聞、博客和後續更新 ![newsboat-example-usage](https://i.ibb.co/fvT4YzD/newsboat.png) --- ### [`rclone`](https://github.com/rclone/rclone) - 管理雲存儲 > `rclone` 是一個方便的實用程序，用於將文件和文件夾同步到各種雲存儲提供商。它可以直接從命令行呼叫，也可以輕鬆集成到腳本中以替代繁重的桌面同步應用程式 --- ### [`taskwarrior`](https://github.com/GothenburgBitFactory/taskwarrior) - Todo + 任務管理 > `task` 是一個 CLI 任務管理/待辦事項應用程式。它既簡單又不引人注目，但也非常強大和可擴展，內置高級組織和查詢功能。還有很多（700+！）額外的[插件](https://taskwarrior.org/tools/) 用於擴展它的功能和與第三方服務的集成 ![任務戰士示例用法](https://i.ibb.co/7k6M37g/taskwarrior.jpg) --- ### [`tuir`](https://gitlab.com/ajak/tuir) - Reddit 的終端用戶界面 > `tuir` 是一個很好的選擇，如果你想看起來像在工作，同時實際瀏覽 Reddit！它具有直觀的鍵綁定、自定義主題，還可以呈現圖像和多媒體內容。還有 [haxor](https://github.com/donnemartin/haxor-news) 用於黑客新聞 ![tuir-example-usage](https://i.ibb.co/vzSw7s5/tuir.png) --- ## CLI 開發套件 ### [`httpie`](https://github.com/httpie/httpie) - HTTP/API測試測試客戶端 > `httpie` 是一個 HTTP 客戶端，用於測試、除錯和使用 API。它支持您所期望的一切——HTTPS、代理、身份驗證、自定義標頭、持久會話、JSON 解析。具有表達語法和彩色輸出的用法很簡單。與其他 HTTP 客戶端（Postman、Hopscotch、Insomnia 等）一樣，HTTPie 也包含一個 Web UI ![httpie-示例用法](https://i.ibb.co/Wk5S19g/httpie.png) --- ### [`lazydocker`](https://github.com/jesseduffield/lazydocker) - 完整的 Docker 管理應用程式 > `lazydocker` 是一個 Docker 管理應用程式，可讓您查看所有容器和圖像、管理它們的狀態、讀取日誌、檢查資源使用情況、重新啟動/重建、分析層、修剪未使用的容器、圖像和卷等等。它使您無需記住、鍵入和連結多個 Docker 命令。 ![lazy-docker-example-usage](https://i.ibb.co/MD8MWNH/lazydocker.png) --- ### [`lazygit`](https://github.com/jesseduffield/lazygit) - 完整的 Git 管理應用程式 > `lazygit` 是一個可視化的 git 客戶端，在命令行上。輕鬆加入、提交和推送文件、解決衝突、比較差異、管理日誌以及執行壓縮和倒帶等複雜操作。一切都有鍵綁定，顏色，而且很容易配置和擴展 ![lazy-git-example-usage](https://i.ibb.co/KLF3C6s/lazygit.png) --- ### [`kdash`](https://github.com/kdash-rs/kdash/) - Kubernetes 儀表板應用程式 > `kdash` 是一個一體化的 Kubernetes 管理工具。查看節點指標、觀察資源、流容器日誌、分析上下文和管理節點、pod 和命名空間 --- ### [`gdp-dashboard`](https://github.com/cyrus-and/gdb-dashboard) - 可視化 GDP 除錯器 > `gdp-dashboard` 向 GNU 除錯器加入了一個可視元素，用於除錯 C 和 C++ 程序。輕鬆分析內存、單步執行斷點和查看寄存器 ![gdp-dashboard-example-usage](https://i.ibb.co/2g2hVLh/gdp-dashboard.png) --- ## CLI 外部服務 ### [`ngrok`](https://ngrok.com/) - 共享本地主機的反向代理 > `ngrok` 安全* 將您的本地主機暴露在唯一 URL 後面的網路上。這使您可以與遠程同事實時共享您的工作。使用[非常簡單](https://notes.aliciasykes.com/p/RUi22QSyWe)，但它也有很多高級功能，例如身份驗證、webhooks、防火牆、流量檢查、自定義/通配符域等等 ![ngrok-示例用法](https://i.ibb.co/4WPZNGx/ngrok.png) --- ### [`tmate`](https://tmate.io/) - 通過網路共享終端會話 > `tmate` 讓您立即與世界其他地方的人分享實時終端會話。跨系統工作，支持存取控制/授權，可自託管，具備Tmux的所有特性 --- ### [`asciinema`](https://asciinema.org/) - 錄製+分享終端會話 > `asciinema` 對於輕鬆記錄、共享和嵌入終端會話非常有用。非常適合展示您建置的內容，或展示教程的命令行步驟。與屏幕錄製視頻不同，用戶可以復制粘貼內容、動態更改主題和控製播放 --- ### [`navi`](https://github.com/denisidoro/navi) - 交互式備忘單 > `navi` 允許您瀏覽備忘單並執行命令。參數的建議值動態顯示在列表中。減少輸入，減少錯誤，讓自己不必記住數千條命令。它集成了 [tldr](https://github.com/tldr-pages/tldr) 和 [cheat.sh](https://github.com/chubin/cheat.sh) 以獲取內容，但您也可以導入其他備忘單，甚至編寫自己的備忘單 --- ### [`transfer.sh`](https://github.com/dutchcoders/transfer.sh/) - 快速文件共享 > `transfer` 使上傳和共享文件變得非常簡單，直接從命令行即可。它是免費的，支持加密，為您提供唯一的 URL，也可以自行託管。 > 我寫了一個 Bash 輔助函數來讓使用更容易一些，你可以[在這裡找到它](https://github.com/Lissy93/dotfiles/blob/master/utils/transfer.sh) 或嘗試一下通過執行`bash <(curl -L -s https://alicia.url.lol/transfer)` ![transfer-sh-example-usage](https://i.ibb.co/cCqDb1k/transfer-sh.png) --- ### [`surge`](https://surge.sh/) - 在幾秒鐘內部署一個站點 > `surge` 是一個免費的靜態託管服務提供商，您可以通過一個命令直接從終端部署到它，只需在您的 `dist` 目錄中執行 `surge`！它支持自定義域、自動 SSL 憑證、pushState 支持、跨域資源支持——而且是免費的！ ![surge-sh-example-usage](https://i.ibb.co/NynprxZ/surge-sh.png) --- ### [`wttr.in`](https://github.com/chubin/wttr.in) - 查看天氣 > `wttr.in` 是一項以命令行中易於理解的格式顯示天氣的服務。只需執行“curl wttr.in”或“curl wttr.in/London”來嘗試一下。有 URL 參數來自定義返回的資料以及格式 ![wrrt-in-example-usage](https://i.ibb.co/J2JWnYT/Screenshot-from-2023-01-18-21-10-54.png) --- ## CLI 樂趣 ### [`cowsay`](https://en.wikipedia.org/wiki/Cowsay) - 讓 ASCII 牛說出你的訊息 > `cowsay` 是一個可配置的會說話的奶牛。它基於 Tony Monroe 的[原創](https://github.com/tnalpgge/rank-amateur-cowsay) ![cowsay-example-usage](https://i.ibb.co/TRqW3jD/cowsay.png) --- ### [`figlet`](http://www.figlet.org/) - 將文本輸出為大型 ASCII 藝術文本 > `figlet` 將文本輸出為 ASCII 藝術 ![figlet-example-usage](https://i.ibb.co/fk4T7D0/figlet.png) --- ### [`lolcat`](https://github.com/busyloop/lolcat) - 使控制台輸出彩虹色 > `lolcat` 使任何傳遞給它的文本變成彩虹色 ![lolcat-example-usage](https://i.ibb.co/nfp9Ycx/lolcat.png) --- ### [`neofetch`](https://github.com/dylanaraps/neofetch) - 顯示系統資料和 ditstro 訊息 > `neofetch` 打印發行版和系統訊息（這樣你就可以靈活地在 r/unixporn 上使用 Arch btw） ![neofetch-example-usage](https://i.ibb.co/x1PHpFC/Screenshot-from-2023-01-18-22-44-28.png) 例如，我使用 `cowsay`、`figlet`、`lolcat` 和 `neofetch` 來建立一個自定義的基於時間的 MOTD，在用戶首次登錄時顯示給他們。它以他們的名字問候他們，顯示伺服器訊息和時間、日期、天氣和 IP。 [這裡是源程式碼](https://github.com/Lissy93/dotfiles/blob/master/utils/welcome-banner.sh)。 ![歡迎](https://i.ibb.co/cTg0jyn/Screenshot-from-2023-01-18-22-59-28.png) --- ## 安裝和管理我們大多數人都有一套核心的 CLI 應用程式和我們所依賴的實用程序。設置一台新機器並單獨安裝每個程序很快就會讓人厭煩。因此，安裝和更新終端應用程式的任務非常適合自動化。 [此處](https://github.com/Lissy93/dotfiles/tree/master/scripts/installs) 是我編寫的一些示例腳本，可以輕鬆將其放入您的點文件或獨立執行以確保您永遠不會錯過一個應用程式。對於 MacOS 用戶，最簡單的方法是使用 [Homebrew](https://brew.sh/)。只需建立一個 Brewfile（使用 `touch ~/.Brewfile`），然後列出您的每個應用程式，然後執行 `brew bundle`。您可以通過將其放入 Git 存儲庫來備份您的包列表。這是一個示例，讓您入門：https://github.com/Lissy93/Brewfile 在 Linux 上，您通常希望使用本機包管理器（例如 `pacman`、`apt`）。例如，[這裡有一個腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/arch-pacman.sh) 用於在 Arch Linux 系統上安裝上述應用程式 Linux 上的桌面應用程式可以通過 Flatpak 以類似的方式進行管理。同樣，[這是一個示例腳本](https://github.com/Lissy93/dotfiles/blob/master/scripts/installs/flatpak.sh) :) --- ## 結論 ...就是這樣 - 一個方便的 CLI 應用程式列表，以及一種在您的系統中安裝和保持它們最新的方法。希望其中一些對你們中的一些人有用:)

0個讚 0留言 4,696瀏覽

我愛JS · 01月28日

討論－淺談html/js之關係以及，延伸至XSS

>最近在忙著實作我的一些小項目，沒有上來發文，但還是一直學習JS， >累積滿多經驗，也累積不少疑問。 >之前站長阿川有跟我提到相關話題，也就是UJS，想說把它拿過來聊一聊。 >剛好最近弄的東西，跟這個也有一些關聯性。 ## html與JS的交互關係。 Inline JavaScript是什麼呢？就把JS寫在html裡面的一種手段，也就是onclick那些東西，在自學教材會學到唷：））。其中也有個東西叫做JavaScript pseudo-protocol，他好像有點像是給一個js的前綴，讓瀏覽器讀取html的時候知道要開始讀取JS了，用法如： `<a href="javascript:alert(1)">my website</a>` 這樣子的作法都讓JS侵入到html裡面，也就是行為跟結構沒有分離。是否要UJS，站長上次有提到這可以看專案大小來區分，這篇閒聊開起來可以提供更多細節。 --- 不過我不打算就此結束文章，我要額外分享與XSS相關的內容。 XSS其實是CSS，跨站指令碼Cross Site Script的意思，只是因為縮寫重複CSS樣式（Cascading Style Sheets ）所以用X代替。簡單理解它就是一種攻擊手段，讓別人網站上執行我的代碼。 --- 有趣的事情來了，那html跟JS交互關係跟XSS又有什麼關聯呢？想像一下，當今天小明要做一個討論區，讓使用者用html編輯打文章，就必須小心有人會放一些JS的代碼。小明想說，我要過濾`<script>`標籤來保證他們乖乖地寫html。請問這樣子是否就安全了呢？答案是否定的，這時候使用Inline JavaScript會發生什麼狀況？試想一下因為小明沒有CSP相關設定，防止使用者偷偷塞JS到html裡面，導致小明的壞朋友大胖，可以直接寫一個`<img src=x onerror="alert(1)">`在留言區裡面，完全沒有使用到`<script>`標籤，卻也能造成XSS。 --- ## 關於防禦： ### CSP 設定嚴格一點，可以阻止很多XSS，舉例來說文章一開始有`href="javascript:alert(1)"`，可以設定href後面只能接上http開頭的東西。 ### WAF 他是Web Application Firewall 的簡稱，中文通常叫作「網站應用程式防火牆」可以建立及管理避免網際網路威脅的規則，包括IP 位址、HTTP 標頭、HTTP 主體、URI 字串、跨網站命令檔(XSS)、SQL 隱碼攻擊及其他OWASP 定義的漏洞。 ### 自己建立fliter 自己過濾也是可行的（不建議），把字串符碼都轉成HTML Entities，例如把 (<)寫成 ` < or <` ，透過這樣的過濾render出來的就不會是指令了。為什麼不建議，是因為你過濾的東西有可能會被double encoded URL之類的手法繞過。或是你覆蓋了document.write，以為安全了，但是我用孿生函數(twin function)的document.writeIn你可能就忘了過濾。這剛好就是我最近在研究的東西。 ## 相關討論問題： 1.對於文章的內容，有沒有什麼錯誤呢？或相關名詞想法想補充？ 2.是否要UJS的實際使用，有哪些想法？或是有什麼經驗？

3個讚 4留言 379瀏覽

站長阿川 · 01月12日

JavaScript 系列四：第7課 ── TinyMCE 套件

## 課程目標認識並且能使用 TinyMCE 套件 ## 課程內容 WYSIWYG（所見即所得）編輯器，是業界最常被使用、但也最難開發的功能之一開發部落格功能時，需要有寫文章＆格式的編輯面板，這是非常多網站的需求業界實作同樣有非常多套，今天介紹我覺得滿漂亮、好用的一套 https://github.com/tinymce/tinymce https://www.tiny.cloud/ 這種功能如果不找現成套件使用，而需要自己開發... 應該會超花時間吧，我目前也不知道怎麼開發。若真有這種需求的話，需要深入研究 ## 課後作業請使用 https://jsfiddle.net 假設正在開發部落格功能，需要一個 WYSIWYG 編輯器，以及一個「發佈文章」的按鈕請使用本課套件，來達成編輯器功能做出以上功能，你就完成這次的課程目標了！

0個讚 26留言 1,075瀏覽

站長阿川 · 12月28日

初次轉職寫程式：作品集有用嗎？要做什麼作品？面試官會看嗎？

很多朋友轉職寫程式，在補習班或者線上課程，告一段落之後，開始找工作之前，會整理作品集關於作品集，簡單給大家一些建議 ## 作品集有用嗎？公司在徵人的時候，其實來應徵的人五花八門滿多人看起來，根本不會寫程式，連最基本的小網頁或者小程式都寫不出來連基本技能都沒有準備好，感覺是到處碰碰運氣、履歷亂誇大就到處丟。公司面試時，最怕遇到這種狀況作品集，至少代表，你寫得出基本東西。很多人根本寫都不會寫，就去應徵了，作品集至少可以讓公司避免踩雷話說回來，如果你的作品集，只是補習班的幾個分組專案，糊裡糊塗地完成了，就跟在學校敷衍交報告一樣，你對細節其實不了解，那這種作品集，當然幫助不大，對你的信心也沒有多少幫助 ## 要做什麼作品？所以該做什麼作品呢？最好做一些你真的需要的「應用程式」，寫起來才有動力、才好玩，內容也才扎實簡單舉例，如果你在受訓的過程是這些： ### 前端工程師做個待辦事項清單工具吧！按照自己的喜好設計，做完之後找地方上線在找工作的這幾個星期，實際拿這個工具來做紀錄，投履歷時、面試時，很自然可以分享你的心得跟小熱情對面試官來說，看到面試者有即戰力（即便是有一點點）、對自己的程式有熱情（即便只有一點點），都會加分不少請參考 https://todomvc.com/ 這是各種前端工具寫的 todo list 應用程式，你還可以比較自己的程式碼，與社群所寫的差異 ### 後端工程師我鼓勵後端的入行者，寫一個「個人專屬部落格」這個部落格要有以下功能 - 首頁列出文章清單 - 能簡單單篇文章瀏覽 - 自己可以登入後台 - 在後台可以新增、編輯、刪除文章有餘力的話，還可以加個留言功能這種部落格，會實際做完資料的 CRUD 基本功能，還有簡易的註冊、登入、驗證找地方把這個部落格上線，或者買網址、租主機，實際上線在找工作的這幾個星期，實際拿這個部落格，來寫文章、技術筆記、經驗分享面試官絕對會覺得你是積極的人、有備而來（錄取之後就停止寫網誌的習慣也沒關係） ### 全端工程師我鼓勵全端的入行者，寫一個「個人行事曆工具」並且是 single page application (SPA) 這個行事曆要有以下功能 - 有一個行事曆頁面 - 有個按鈕可以新增活動 - 點擊行事曆內的活動，可以編輯、刪除 - 有一個清單業面，可以用條列式顯示全部活動 - 全程使用 ajax，不能整個刷新頁面這種行事曆，會實際做完資料的 CRUD 基本功能，還有基本的 SPA routing 在找工作的這幾個星期，實際拿這個行事曆，紀錄生活是像、活動面試時分享，面試官絕對會覺得你是積極的人、是個即戰力 ## 結論除此之外，做個人履歷表的網頁也不錯可以搜尋 'Portfolio website examples' 看看各種漂亮設計實際把履歷做成網頁，也可稍微證明自己能力在工程師生涯，不斷地做自己的 side project 是一個有趣、進步的好習慣甚至有一天，你做的某個 side project 大受歡迎，還可能變成一個獨立的小產品呢有空可以逛逛 https://www.producthunt.com/ 看看大家都在做什麼 side project 或許模仿其中一些，做個簡易版本，你會學到很多的～！ --- 您有沒有什麼好的點子、推薦的 side project 點子給初心者呢？歡迎留言分享！

4個讚 2留言 2,297瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

# 第1課課程目標學會 h1, h2. p, br 等等HTML元素的用法學完之後，你將可以用HTML來替內容排版 # 第1課課程內容第一課只要學習最基本的HTML元素就可以了請打開這個網站，用這個網站來開發你的網站： https://jsfiddle.net 共有HTML, CSS, JavaScript三塊可以寫，先只要寫HTML就好。閱讀並且練習這五份教學的內容： [HTML Basic](http://www.w3schools.com/html/html_basic.asp) [HTML Elements](http://www.w3schools.com/html/html_elements.asp) [HTML Attributes](http://www.w3schools.com/html/html_attributes.asp) [HTML Headings](http://www.w3schools.com/html/html_headings.asp) [HTML Paragraphs](http://www.w3schools.com/html/html_paragraphs.asp) 不習慣看英文，可以改看這裡： [HTML 基础](http://www.w3school.com.cn/html/html_basic.asp) [HTML 元素](http://www.w3school.com.cn/html/html_elements.asp) [HTML 属性](http://www.w3school.com.cn/html/html_attributes.asp) [HTML 标题](http://www.w3school.com.cn/html/html_headings.asp) [HTML 段落](http://www.w3school.com.cn/html/html_paragraphs.asp) 把教學裡面的HTML程式碼，貼到 jsfiddle 裡面的 HTML 區域，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果。讀完、練習完這五份教學裡面的程式碼，就算是學會HTML的基礎了 # 第1課作業前往這個網站：[風傳媒](https://www.storm.mg) 或者任何你覺得版面很漂亮的媒體網站找一篇你喜歡的文章接著打開jsfiddle，把jsfiddle當成 Microsoft Word文書編輯軟體來用，用HTML的段落、標題、換行等等元素，把文章排版打出來。只要打出文章內容就好，上方的導覽列、旁邊的熱門文章那些區塊都不用。完成這些，你就完成這次的課程目標了！

4個讚 122留言 12,687瀏覽

小編精選 - 技術文章翻譯 · 12月24日

給軟體工程師的各類好用工具清單

向您介紹這個開發人員工具列表。它是一個開源專案，由社群整理。讓我們開始吧！ 🚀 原文出處：https://dev.to/dostonnabotov/ultimate-tools-for-developers-2aj2 --- ## 程式碼編輯器和 IDE 💻 - [Visual Studio Code](https://code.visualstudio.com/) 作為免費的開源程式碼編輯器，Visual Studio Code 是開發人員的絕佳工具。它帶有許多功能和外掛，使其成為開發人員的絕佳選擇。 - [CodeSandbox](https://codesandbox.io/) 簡單來說，CodeSandbox 就是 Visual Studio Code 的在線版本。 - [Dev - Visual Studio Code](https://github.dev/) github.dev 基於網絡的編輯器是一種輕量級的編輯體驗，完全在您的瀏覽器中執行。有兩種方法可以打開基於 Web 的編輯器 1. 在任何存儲庫或拉取請求上按 `.` 鍵 2. 將 URL 中的 .com 替換為 .dev。例如。 `https://github.dev/username/repo` - [CodePen](http://codepen.io/) CodePen 是網絡前端的遊樂場。這是一個試驗、測試和展示您的前端工作的地方。此外，您還可以從其他開發人員那裡找到許多靈感。 - [Replit](https://repl.it/) Replit 是一個簡單、強大且協作的在線 IDE。這是編碼、協作和託管專案的好地方。 - [StackBlitz](https://stackblitz.com/) 面向前端和全棧開發人員的 Web IDE。 - [TypeScript Playground](https://www.typescriptlang.org/play/) 想玩玩看 TypeScript 嗎？ TypeScript Playground 是一個適合你的地方。 ## 圖片 🖼 - [Unsplash](https://unsplash.com/) 為您的下一個專案輕鬆找到精美、高質量的照片。所有照片均可免費用於商業和個人用途。 - [Pexels](https://www.pexels.com/) Pexels 是免費庫存照片的重要來源。所有照片均可免費用於商業和個人用途。 - [Carbon](https://carbon.now.sh/) Carbon 是一個很棒的平台，可以建立和共享程式碼的精美圖像，允許您使用語法突出顯示、主題、字體等自定義圖像。 ## 顏色 🎨 - [Color Space](https://mycolor.space/) 再也不會浪費時間尋找完美的調色板！只需輸入顏色！並生成漂亮的調色板 - [Coolors](https://coolors.co/) 建立完美的調色板或從數千種美麗的配色方案中汲取靈感。 - [Color Wheel](https://www.canva.com/colors/color-wheel/) 想知道什麼顏色搭配起來好看嗎？ Canva 的色輪讓色彩組合變得簡單。 ## 排版 📝 - [Google Fonts](https://fonts.google.com/) Google Fonts 是一個包含免費授權字體系列的庫。只需選擇您想要的字體，將它們下載到您的計算機或使用提供的 CSS 或 HTML 鏈接將它們嵌入您的網頁。 - [Fontsource](https://fontsource.org/) 如果您不想從 CDN 獲取字體，則可以使用整齊打包的 NPM 包中的自託管開源字體。 - [Nerd Fonts](https://www.nerdfonts.com/) Nerd Fonts 使用大量字形（圖標）修補針對開發人員的字體。 ## 設計 🎨 - [Figma](https://www.figma.com/) 一個免費的線上協作界面設計工具和原型製作工具。 - [Pinterest](https://www.pinterest.com/) Pinterest 是一種視覺發現工具，可用於為您的所有專案和興趣尋找創意。 ## 文檔 📚 - [MDN 網絡文檔](https://developer.mozilla.org/en-US/) 學習Web開發的最佳平台。每當您對 HTML、CSS、JavaScript 或任何其他網絡技術有疑問時，請務必先查看 MDN。 - [W3Schools](https://www.w3schools.com/) 幾乎所有您能想到的程式語言的參考。 - [CSS 技巧](https://css-tricks.com/) 提供使用 CSS（層疊樣式表）的提示、技巧和技術的最佳平台之一。 ## 工具 🛠 等一會兒！工具中的工具？是的，你沒有聽錯。這裡有一些工具可以幫助您找到更多工具。 😃 - [Stack Overflow](https://stackoverflow.com/) Stack Overflow 是一個面向專業和狂熱工程師的問答網站。這是提出問題和獲得答案的好地方。 - [Micro Digital Tools](https://mdigi.tools/) 一組對開發人員有用的工具。 - [Small Dev Tools](https://smalldev.tools/) 一組對開發人員有用的工具。 - [Can I Use](https://caniuse.com/) Can I Use 提供了最新的瀏覽器支持表，以支持桌面和移動 Web 瀏覽器上的前端 Web 技術。 - [網站圖標生成器](https://favicon.io/) 您是否曾經為了替自己的網站建立網站圖標而苦惱？不同的尺寸，不同的格式，不同的平台。從文本、圖像或從數百個表情符號中選擇快速生成您的網站圖標。 - [Font Awesome](https://fontawesome.com/) 免費和高級圖標庫。 - [OverAPI.com](https://overapi.com/) 以有組織的格式查找大量不同技術的備忘單。 - [Transform](https://transform.tools/) 多語言網絡轉換器。輕鬆將 HTML 轉換為 Pug、將 TypeScript 轉換為 JavaScript、將 Markdown 轉換為 HTML 等等... - [Frontend Tools](https://murtazajoo.github.io/tools/) 一個網站，您可以在其中找到具有更好用戶體驗的所有工具。 - [GitProtect](https://gitprotect.io/) 適用於所有 GitHub、GitLab、Bitbucket 和 Jira 資料的 DevOps 備份和災難恢復軟體。 - [Linear](https://linear.app/) 在團隊中組織問題和拉取請求的好工具。 ## 結論 🎉 希望您覺得這個列表有用。

0個讚 0留言 1,585瀏覽

小編精選 - 技術文章翻譯 · 12月21日

寫 React 時必備的幾個 VS Code Extensions：新手推薦

來看看一些對 React 開發人員最有用的 VS Code 外掛吧！ - 原文網址：https://dev.to/devland/vs-code-extensions-you-should-use-as-a-react-developer-2f6i ## ES7 React/Redux/GraphQL/React-Native snippets ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxlb7rz6gzkx906xfr5.jpg) 最流行的外掛之一，由 React 開發人員提供，也由 React-Native 開發人員參與。它帶有許多速記前綴，您可以輕鬆使用它來加快開發過程。這個外掛提供了很多你可能不知道的功能。一旦你安裝了這個驚人的外掛，創建一個新文件並輸入 rfce 然後按回車鍵，這將生成一個 React 功能組件，導入 React 並導出元件。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8m942g0szndpv3bwprrb.jpg) 它還允許您在幾秒鐘內創建不同的 es7 片段，只需輸入前綴簡寫並按 enter。此外，如果您使用的是 Redux 或 GraphQL，此外掛也為它們提供了程式碼片段。 ## VSCode React Refactor ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aa1etaf6lasubpmsjxgf.jpg) 簡單，但非常有用。允許您將 JSX 部分提取到新元件、文件等。使用類別、函數和箭頭函數並支持 TypeScript 和 TSX。 ## Prettier ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tddr5birva6pja6ygoa.jpg) 經過多年使用 Prettier，我認為它是任何專案的都好用的外掛。這是一個自動為你格式化程式碼的工具。它有助於保持程式庫的一致性，因為無論團隊中的開發人員有什麼個人偏好，所有程式碼都將以相同的方式格式化。 ## Eslint ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l039819s4qx6ngf0e8i.jpg) 用於查找程式碼中的錯誤和缺陷。它可以幫助開發人員編寫沒有錯誤和警告的優質程式碼。此外，它可以自動修復錯誤和警告。 ## Stylelint ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ufskyyg4id7ets3rcjnt.jpg) 和ESLint類似，也是一個linter，但是針對樣式。它可以檢測並突出顯示不正確的樣式，並有助於保持樣式一致和有序。更重要的是，它適用於純 CSS 以及 SCSS 和 LESS 等預處理器。 ## GitLens ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wmh3we9qrykvxari4mo.jpg) 增強了 Visual Studio Code 中內置的 Git 功能。它可以幫助您通過 Git 責備註釋和 code lens 一目了然地可視化代碼作者身份，無縫導航和探索 Git 存儲庫。 ## Git History ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzsboqxicv3bs8f0n7p1.jpg) 允許您查看 git 日誌和文件歷史記錄，並比較分支或提交。 ## Settings sync ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iphz26rbvb85pnuzcijf.jpg) 您是否曾經重新安裝作業系統或更改您編寫程式碼的設備、繼續安裝 VS Code、然後發現您需要重新安裝所有外掛？它可以自動保存你的外掛和 VS Code 設置，然後在另一台設備上安裝和配置它們。 ## Bracket Pair Colorization Toggler ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xw0embc8ohxzmaw54fq.jpg) 非常簡單但有用的擴展。突出顯示匹配的括號對。 ## Auto Close Tag ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yda8pr1303sn1kdzwoz8.jpg) 一個簡單但最有用的 React 外掛之一。它所做的是一件非常簡單的事情。 Auto close tag，顧名思義，為元素創建一個結束標籤，這意味著開發人員不需要編寫結束標籤。這可能看起來很簡單，但實際上，自動關閉標籤非常有用。 ## Auto Rename Tag ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kjq4bz8u1ccgxgk2w9t.jpg) 自動重命名成對的 HTML/XML 標籤。 ## Auto Import ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zy56itc3bb5jvecscf2v.jpg) 自動為所有可用導入查找、解析並提供代碼操作和代碼完成。適用於 TypeScript 和 TSX。 ## Import Cost ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wxw0io8difxgthdan5c.jpg) 在 React 中，安裝和導入套件是非常常見和必要的。導入大量套件可能會導致性能問題，因為其中一些包可能很重。此外掛在編輯器中顯示套件的大小。 ## Jumpy ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cp8cldekpyxyesyz1o8j.jpg) 您通常如何從一行程式碼轉到幾行和空格之外的特定關鍵字？多次使用鍵盤箭頭或單擊滑鼠？使用 Jumpy，您可以更有效率，因為它可以讓您快速跳轉到特定單詞。 ## i18n Ally ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmqx39hkds4lbeoytb1p.jpg) 如果您的應用程序支持多種語言，就非常好用。 Formatting toggle ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fhhj774y6xeapll2tomq.jpg) 在某些情況下，我們希望暫時禁用像 Prettier 這樣的代碼格式化程序。這可以通過 Formatting toggle 外掛來完成，無需修改編輯器設置。 ## Npm intellisense ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75wl3nmlkporzfsnxl6g.jpg) 為導入語句中的 npm 模塊提供自動完成功能。 ## Web Accessibility ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3lni8zqwdh4ngwyk1rm.jpg) 用於提高 Web 應用程序可訪問性的出色插件。它突出顯示了您應該考慮更改的元素，還提供了有關如何更新它們的提示。 ## Live Share ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/74okun8atu01lphpjo7c.jpg) 您願意與其他人協作編寫您的代碼嗎？此外掛使您能夠與他人實時編輯和調試代碼。 ## Better comments ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odj7yo1a5sntmhkl4x57.jpg) 用於在您的代碼中創建更人性化的註釋。它可以將評論分類為警報、查詢、待辦事項和突出顯示，並以不同的顏色顯示它們。 ## Docker ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/patpizcxw2hs6gu823em.jpg) 如果您的應用程序是使用 Docker 部署的，您可以考慮使用來簡化構建、管理和部署來自 VS Code 的容器化應用程序。 ## Remote — SSH ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk6amn6yubsmio7uen68.jpg) 您是否需要訪問服務器才能遠程編輯文件？遠程 SSH 讓您可以使用任何帶有 SSH 服務器的遠程機器作為您的開發環境。您可以輕鬆地在遠程和本地開發環境之間切換。 ## WSL ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kd4n337eomix1ba0tn7.jpg) 如果您更喜歡在 Linux 上開發您的應用程序，但您的主要操作系統是 Windows，您可以考慮使用 Windows 子系統 Linux (WSL)。如果這樣做，那麼您可能會發現 WSL 擴展很有用，因為它可以讓您在 Windows 上使用 Vs Code構建 Linux 應用程序。在使用基於 Linux 的工具、運行時和實用程序進行開發時，您可以獲得 Windows 的所有生產力。 ## 實時服務器 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzaylae1618ndvty1agf.jpg) 如果您需要在文件更改時通過實時瀏覽器重新加載來快速啟動實時服務器，很推薦。 ## Debugger for Chrome and Debugger for Firefox ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5hqzk58hdihl2syoctg5.jpg) 調試器提供了許多有用的功能，例如在斷點處暫停代碼執行、變量檢查等。這些擴展提供了 VS Code 編輯器內部的調試功能。 ## Change-case ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qeoqoevy2a6d646ht1ir.jpg) 顧名思義，此擴展允許您更改當前選擇或當前單詞的大小寫。如果您有很長的文本或想將多個變量轉換為相同的大小寫，這將非常有用。 ## Regex Previewer ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pr4eesyhl5bpj0afhhll.jpg) 大多數開發人員很少編寫 Regex 表達式。但是，如果必須，此擴展可能會非常方便。它在並排文檔中顯示當前正則表達式的匹配項。 ## DotENV ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19cpgt5rvygiysu87qi8.jpg) _.env_ 文件的語法突出顯示。 ## 結論希望對您有幫助！

0個讚 0留言 5,453瀏覽

‹
1
2
3
4
5
6
7
8
9
10
›

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）

熱門文章

🔥 JavaScript 中的三個點 (...)

🔥 關於 e2e 測試的一些筆記

🔥 適用於各種軟體開發技能：2023 推薦練習的專案開發

🔥 ✨ 如果您使用的是身分驗證提供者，請先執行此操作 🧙‍♂️ 🫵

🔥 設計模式 #4 - 發布者/訂閱者模式

近期留言

熱門搜尋：使用題工作 c 前 1 專案開發 component' 2 作為學習技術第一 4 語言 ci 網頁 . C 主題 20 作業 COM ＣＳＳ Java 研究研聊天測試 % 分享網站前端 10 ui 套件 js javasc github 19 git ul AWS 系列結構架構開源 bi app javascript py jav 編輯 50 後端 Ai JS with html api Line 工程師 for go id Html API node 入門 HTML 新創 json 遊戲搜尋 local ` console AI 謝謝資料庫 Git 查詢 JavaScript ? react 非同步 user 回答 create python GIT class REACT React todo cn import 2023 JAVA

CodeLove 愛寫扣論壇 © 2024

🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。