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

Web開發(fā)將大量堆棧捆綁在一起， 工具， 編程語言， 和更多。 這里的某些工具/工作流程在某些情況下會起作用， 其他一些。 為了更好地解決這個問題， 認為這篇文章是從WordPress前端開發(fā)人員的角度撰寫的， 盡管這些工具非常廣泛，并且可以在許多情況下使用。

我在工作流程中進行的最大更改之一是在計算機上設(shè)置了tmux（macOS，但它當然也適用于Linux）。 雖然我可能沒有充分利用它的潛力， 它做得很好，讓我立即在項目之間切換， 這樣可以節(jié)省很多時間。

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

那么，它如何改變了我的工作流程？

• 使用tmux，您只需兩個按鍵即可輕松拆分屏幕并在項目中導航。 因此，您可以在一個視圖中運行“ gulp”， 在另一個上運行的命令 SSH連接到第三臺服務(wù)器， 還有一些統(tǒng)計數(shù)據(jù)排在第四位。
• 它為每個項目提供了類似于“選項卡”的窗口。 在這里，您可以通過兩次按鍵切換到不同的項目。 我一直在選項卡中打開大約20多個項目，當我必須處理一個新項目時，我只是將其切換到那里， 并且gulp已經(jīng)在運行。 我在正確的目錄中，可以在2秒內(nèi)開始工作。
• 始終保持整個設(shè)置為ON。 您不必每次開始工作時都要做， 它總是在那里。 如果您的計算機關(guān)閉并重新啟動， 您只需將其“恢復”（使用簡單的插件）到您的標準設(shè)置即可，然后在大約5秒鐘內(nèi)再次恢復正常。 有趣的是，在I7-9900K上需要100％使用。
• 窗口中的每個面板都是其自己的實例。 因此，您可以輕松地為每個面板運行不同的Node版本。

來源

Alfred是適用于Mac的“生產(chǎn)力應(yīng)用程序”，同樣適用于Windows和Linux。 有些事情， 阿爾弗雷德（Alfred）所做的是：

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

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

它也可以用作快速訪問計算器， 在整個操作系統(tǒng)中管理代碼段（甚至無需訪問它， 它會自動將其展開）， 保存剪貼板歷史記錄（救星）， 與終端集成等。 您可以在應(yīng)用程序網(wǎng)站上找到有關(guān)它的所有信息。

我如何使用它：

• 首先，當然 打開應(yīng)用程序。 我沒有點擊圖標上的指針， 我只輸入字母，然后我們就可以了。
• 編寫CSS時將其用作計算器（通常帶有EM值）。
• 剪貼板歷史記錄–有時我會將5-6件東西疊放在剪貼板中，然后將它們粘貼到任何需要的代碼編輯器中。 或回去幾天找一些電子郵件， 一些片段， 等等，甚至是一個小功能，在一個項目中有所作為，并在另一個項目中有所幫助。 瀏覽代碼只需2-3秒，而不是10分鐘以上的時間。
• 在進行設(shè)計工作時轉(zhuǎn)到工作目錄，或者直接瀏覽到XD文件而不瀏覽查找器。 與取景器中的一分鐘左右相比，再次需要2-3秒。
• 代碼段–我為Asana準備了一個不錯的“注釋”代碼段，并提供了結(jié)果的屏幕截圖， 添加提交鏈接的地方， 給下一個開發(fā)人員的信息， 狀態(tài)（是否在暫存狀態(tài)等）。 這是團隊可以輕松遵循的所有評論中始終如一的信息。 只需不到2秒鐘的時間即可鍵入和展開代碼段。

哦，我的Zsh –使終端設(shè)備有用– ZSH是寶。 有270多個插件可供選擇。 它使用一個簡單的配置文件， 從我的舊設(shè)置遷移到新設(shè)置只花了幾分鐘。 tmux也一樣 因此整個開發(fā)過程只需幾分鐘。 有如此眾多的插件可供選擇， 您肯定會發(fā)現(xiàn)對您的工作流程有用的東西。

我使用的ZSH中最常用的插件之一是“ Z”， 了解您用于訪問事物的路徑。 然后，只需使用幾個關(guān)鍵字符，便可以將您帶到任何您想要的地方。

示例：將跳轉(zhuǎn)到 –之前去過的地方的捷徑。 使目錄之間的切換輕松自如。

考試 –更漂亮的LS輸出。 您可以在他們的網(wǎng)站上找到更多信息。 簡而言之， 它還提供文件和目錄的快速，美觀的輸出。 再次-漂亮。

ripgrep –超級快速的搜索。 當您需要使用數(shù)千行代碼查找數(shù)千個文件時， 你不應(yīng)該等待太多。 Ripgrep在這里拯救您。 而且當然， 它帶有大量其他有用的功能和有意義的標志。 它也隨之而來。gitignore文件以使結(jié)果有意義。

來源

git打開 – Paul Irish在Github上使用的一個小工具，它可以執(zhí)行其操作，它會打開git存儲庫。 您可能會說什么？ 您還記得您正在從事的那個項目的確切URL， 首次， 在六個月內(nèi)？ 導航到它需要多長時間？ 此命令將直接為您打開。 以及更多–它也將引導您到正確的分支。

您的CLI！ 就我而言 我們的工作圍繞WordPress。 作為CLI，您可以通過它愉快地進行WP安裝。 一個簡單的新站點設(shè)置采用基本命令，例如mkdir（創(chuàng)建文件夾）， git clone（克隆一個倉庫）， wp核心下載， wp db create， wp db導入（全部來自WP-CLI）。 鍵入所有內(nèi)容并進行快速配置，然后在1分鐘后運行新設(shè)置。

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

來源

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

對于下面的列表，我不會使用ESLint等超級著名的擴展， GitLense或主題/圖標包，幾乎在您會找到的所有文章中都有介紹。

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

還有一個提示/提醒-您可以使用VS代碼預覽圖像。 當您開發(fā)UI并遵循設(shè)計者的圖片時， 您可以將其拖動到視口并在側(cè)面查看。

那里到處都是驚人的工具和儀器。 每當您發(fā)現(xiàn)自己正在做一些重復的工作時，或者您想知道“是否應(yīng)該有一種更簡單的方法來做這件事”時， 只是搜索！ 實際上，很可能確實有一種更快的方法。 如果您一年四季都這樣做， 最后，您將獲得一個非常緊湊的工作流程，使您可以非?？焖俚赝瓿晒ぷ?。

如果可能的話， 還可以找到一些“安全措施”-設(shè)置棉絨， 自動化您的構(gòu)建設(shè)置， 建立可以使用的“入門模板”， 甚至為自己編寫一些CLI。

DevriX是一個由WordPress插件開發(fā)人員組成的團隊。 每當插件架構(gòu)不穩(wěn)定或容易拆卸時， 我們構(gòu)建了量身定制的插件，以最好的方式解決您的問題， 針對速度和用戶體驗進行了優(yōu)化。

DevriX的創(chuàng)意主管和前端開發(fā)人員
亞歷克斯（Alex）的熱情在于學習新的網(wǎng)絡(luò)技術(shù)， 探索創(chuàng)新的方法來優(yōu)化網(wǎng)站性能并改善用戶體驗。 亞歷克斯（Alex）喜歡騎自行車和數(shù)字藝術(shù)，最近開始在ELSYS技術(shù)學校教授設(shè)計。