加快Web開發人員工作流程的工具和方法

已發表: 2020-12-17

Web開發將大量的堆棧,工具,編程語言等捆綁在一起。 這裡的某些工具/工作流程在某些情況下會起作用,而在另一些情況下會起作用。 為了更好地解決這一問題,請考慮從WordPress前端開發人員的角度撰寫本文,儘管這些工具相當廣泛,並且可以在許多情況下使用。

1 – tmux

我在工作流程中進行的最大更改之一是在計算機上設置了tmux(macOS,但它當然也適用於Linux)。 雖然我可能沒有充分利用它的潛力,但它做得很好,可以讓我立即在項目之間切換,從而節省了大量時間。

tmux在項目的GitHub存儲庫上寫了一個冗長的“入門”頁面以進行檢出。 它也可以與包裝盒中的鍵盤配合使用,並且可以啟用鼠標支持。 tmux使用可在系統之間共享的配置文件以進行即時設置。

那麼,它如何改變了我的工作流程?

  • 使用tmux,您只需兩個按鍵即可輕鬆拆分屏幕並在項目中導航。 因此,您可以在一個視圖中運行一個“ gulp”,在另一個視圖中運行的命令,在第三個視圖上通過SSH到服務器的命令,在第四個視圖上運行一些統計信息。
  • 它為每個項目提供了類似於“選項卡”的窗口。 在這裡,您可以通過兩次按鍵切換到不同的項目。 我一直在選項卡中打開大約20多個項目,當我必須處理一個新項目時,我只是將其切換到那裡,並且gulp已經在運行。 我在正確的目錄中,可以在2秒內開始工作。
  • 始終保持整個設置為ON。 您不必每次開始工作時都要做,它總是存在的。 如果您的計算機關閉並重新啟動,則可以(使用簡單的插件)“恢復”至標准設置,然後在大約5秒鐘內重新啟動。 有趣的是,在I7-9900K上需要100%使用。
  • 窗口中的每個面板都是其自己的實例。 因此,您可以輕鬆地為每個面板運行不同的Node版本。
tmux sreenshot

資源

2 –阿爾弗雷德(或替代)

Alfred是適用於Mac的“生產力應用程序”,同樣適用於Windows和Linux。 Alfred所做的一些事情是:

  • 只需輸入幾個字母,即可快速訪問打開的程序
  • 快速轉到目錄
  • 瀏覽直到直接在彈出窗口中找到所需的內容
  • 使用不同的程序打開文件
  • 搜索網絡或已集成的程序等。

借助其Powerpack,還有許多其他“工作流”集成也可以使工作自動化。

阿爾弗雷德首頁

它也可以用作快速訪問計算器,在整個OS上管理代碼片段(甚至不需要訪問它,它只要自動擴展它們即可),保存剪貼板歷史記錄(救生員),與終端集成等。 您可以在應用程序網站上找到有關它的所有信息。

我如何使用它:

  • 當然首先要打開應用程序。 我沒有用圖標上的指針單擊,我只是輸入字母,然後我們就可以了。
  • 編寫CSS時將其用作計算器(通常帶有EM值)。
  • 剪貼板歷史記錄–有時我會將5-6件東西疊放在剪貼板中,然後將它們粘貼到任何需要的代碼編輯器中。 或返回幾天,以查找一些電子郵件,一些代碼段等,甚至是一個小功能,可以在一個項目中完成某些工作,而對另一個項目有所幫助。 瀏覽代碼只需2-3秒,而不是10多分鐘。
  • 在進行設計工作時轉到工作目錄,或者直接瀏覽到XD文件而不瀏覽查找器。 與取景器中的一分鐘左右相比,再次需要2-3秒。
  • 片段–我為Asana準備了一個不錯的“註釋”片段,其中包含結果的屏幕截圖,添加提交鏈接,向下一個開發人員發送消息的位置,是否處於暫存狀態的狀態等等。 這是團隊易於遵循的所有評論中一致的信息。 只需不到2秒鐘的時間即可鍵入和展開代碼段。

3 –終端工具/插件

噢,我的Zsh –使終端有用– ZSH是寶。 有270多個插件可供選擇。 它使用一個簡單的配置文件,從我的舊設置遷移到新設置只需幾分鐘。 tmux也是一樣,因此整個開發過程只需幾分鐘。 有如此眾多的插件可供選擇,您肯定會發現一些對您的工作流程有用的東西。

我使用的ZSH中最常用的插件之一是“ Z”,它了解您用於訪問事物的路徑。 然後,只需使用幾個關鍵字符,便可以將您帶到任何地方。

例如: $z te會跳轉到/folder/path/inner/more/content/testing testing-到您以前去過的地方的捷徑。 使目錄之間的切換輕鬆自如。

哦,我的zsh

exa –更漂亮的LS輸出。 您可以在他們的網站上找到更多信息。 簡而言之,它還提供了文件和目錄的快速,美觀的輸出。 再次-漂亮。

exa主頁

ripgrep –超級快速的搜索。 當您需要使用數千行代碼查找數千個文件時,您不必等待太多。 Ripgrep在這裡拯救您。 當然,它還包含許多其他有用的功能和有意義的標誌。 它還遵循.gitignore文件以使結果有意義。

資源

git-open – Paul Irish在Github上執行的一個小工具,它說了什麼–它將打開git存儲庫。 您可能會說什麼? 您還記得6個月來第一次從事該項目的確切URL嗎? 導航需要多長時間? 此命令將直接為您打開。 以及更多–它也將引導您到正確的分支。

您的CLI! 就我而言,我們的工作圍繞WordPress。 作為CLI,您可以通過它愉快地進行WP安裝。 一個簡單的新站點設置使用基本命令,例如mkdir(創建文件夾),git clone(克隆存儲庫),wp核心下載,wp db創建,wp db導入(全部來自WP-CLI)。 鍵入所有內容並進行快速配置,然後在1分鐘後運行新設置。

確保仔細檢查是否有其他類似的CLI可以與您使用的工具一起使用!

資源

4 – VS代碼插件

我選擇的代碼編輯器/ IDE是VS Code。 以前是崇高的,但是使用功能更強大的機器,我現在可以正常使用VS代碼,而無需向下滾動較大文檔時獲得的3 FPS。

VS代碼

對於下面的列表,我不會使用ESLint,GitLense或主題/圖標包之類的超級著名擴展,因為您幾乎可以在任何文章中找到它們。

  • 自動關閉標籤–這樣您不必每次都寫關閉標籤。 使用Emmet進行乾淨的HTML時無用,但在必須快速編輯時會有所幫助
  • 自動重命名標籤-在進行編輯時也很有幫助。 當您僅編輯其中的一個時,它將直接更改關閉/打開標籤。
  • 代碼拼寫檢查器–現在,當您用錯字寫東西時,不必在PR中感到尷尬。 或者只是使用它來保持開源項目的美觀。
  • 重複操作–從現有文件製作新文件非常有幫助。 這是與Cmd + P一起運行的命令。 在前端工作中製作新的sass / js文件效果非常好。
  • Jumpy –很棒的工具! 只需點擊您定義的快捷方式,它將在每個單詞旁邊輸出兩個小的字母框。 輸入它們,您的光標將跳到它。 一種無需使用鼠標即可瀏覽文件的快速方法。

還有一個提示/提醒-您可以使用VS代碼預覽圖像。 開發UI並遵循設計人員的圖像時,只需將其拖動到視口並在側面查看即可。

簡而言之:

那裡充滿了驚人的工具和儀器。 每當您發現自己正在做的重複性工作時,或者您想知道“應該沒有更簡單的方法來做”時,只需進行搜索即可! 確實有可能確實有更快的方法。 如果您一年中多次這樣做,您將得到一個非常緊湊的工作流程,使您可以非常快速地完成工作。

如果可能的話,還可以找到一些“安全措施” –設置一些棉絨,自動化構建設置,構建可以使用的“入門模板”,甚至可以自己編寫一些CLI。