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

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

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

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

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

來源

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

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

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

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

我如何使用它：

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

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

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

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

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

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

來源

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

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

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

來源

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

對(duì)于下面的列表，我不會(huì)使用ESLint等超級(jí)著名的擴(kuò)展， GitLense或主題/圖標(biāo)包，幾乎在您會(huì)找到的所有文章中都有介紹。

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

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

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

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

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

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