2024年高效Web前端開發必備的工具有哪些 ？

banq發表於2024-06-16
Web前端

隨著 Web 開發環境的不斷髮展，我們的工具包也在不斷髮展。我一直在完善我的設定，我很好奇其他人現在都在使用什麼。無論是文字編輯器、瀏覽器擴充套件、框架，還是任何能讓您的編碼更流暢、更高效的實用程式，我都很樂意聽聽他們的想法。

以下是我最近一直依賴的：

  1. VSCode——因為它具有令人難以置信的擴充套件和流暢的整合。
  2. Tailwind CSS——用於快速 UI 開發。
  3. Docker-用於確保我的環境在所有階段都是一致的。

您認為 2024 年不可或缺的工具有哪些？是否有任何新工具顯著改善了您的工作流程？此外，如果您對所用工具有任何提示或快捷方式，也請隨時分享！


網友：
1、好的背景音樂：

  • https://open.spotify.com/album/7aNclGRxTysfh6z0d8671k?si=zlxuralCTX-R9h0KwK14DA
  • https://open.spotify.com/playlist/40op0ZFAU6mN72y6zD2RgZ?si=gAVmnC0BRUaEF4Po8dIOhA&pi=FSJGwb8kSSqf1
  • https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=AQoAMOgZSkO6SDyhI_cREg&pi=a-UPfRrxIXTSiF
  • https://open.spotify.com/playlist/0oojX1qKDAWabjiWlk8uWX?si=2OT1ZA6KQsOCL_LzPQRz7w&pi=e-O9kN09FBTm2W
  • https://musicforprogramming.net/latest/<a>
  • https://everynoise.com

2、nvm 用於NodeJs版本管理
用於 elixir 和 erlang 版本管理的 asdf
git
DBeaver 或類似軟體
WCAG 瀏覽器擴充套件程式可幫助實現 a11y
Prettier / ESlint


3、Pesticide chrome外掛：它可以讓使用者看到所有 div 的輪廓，一般還有助於定位和跟蹤標籤。

4、TypeScript、一大堆 eslint 規則、OP 的媽媽、React、jest、react 測試庫、cucumber + 其他（webdriver.io、cypress 等）、jira、一支稱職的管理 / 領導團隊、scrum

5、彩虹屁 vscode外掛：是一個在你編碼時不斷給你稱讚的擴充套件。它會檢查程式碼中的關鍵字以播放相關聲音。

6、老實說，我現在很喜歡使用 copilot，如果我的連線或 vscode 出現問題導致它沒有響應，我會有點不高興。我已經習慣了使用註釋速記，讓它只輸出我需要的接下來的 6 行左右的內容。

7、擁有一套符合人體工程學的良好裝置。您應該使用符合人體工程學或舒適的鍵盤（我喜歡機械鍵，這樣不會觸底並給關節帶來壓力）和優質的滑鼠/平板電腦。您還應該有一把帶腳凳的支撐性好的椅子，以確保您的坐姿適合您的桌子高度（一般的桌子高度很差，特別是如果您比較矮/比較高）。要有良好的燈光、優質的顯示器，並確保休息。藍光防護眼鏡在編碼時非常有用，但如果您進行設計，請確保在高亮度螢幕和細節工作時經常休息。

8、PHPStorm 和 Spotify：我已經使用 PHPStorm 很多年了，但我似乎無法說服自己改用 VS Code。尤其是整合了 AI 助手的 IDE。它真的是一個糟糕的 IDE

9、大腦。我發現現在越來越多的開發人員缺乏大腦。

10、Ohmyzsh，wappalyzer 瀏覽器擴充套件

11、程式碼拼寫檢查器Vscode 外掛：適用於程式碼和文件的基本拼寫檢查器。此拼寫檢查器的目標是幫助捕捉常見的拼寫錯誤，同時保持較低的誤報數量。

12、Darcula 主題vscode外掛:基於Jetbrains IDE 的Darcula主題的Visual Studio Code主題擴充套件。

  • 主要專注於HTML5/CSS/JS（TS）開發。

相關文章