面向前端開發人員的VSCode自動化插件

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

原文參考：https://blog.bitsrc.io/vscode-automations-for-frontend-developers-6c66a6f36bc6

 

編程是複雜的。在保證高生產力和代碼質量的同時，有許多最優的方案須要記住，有許多準則須要遵循，還有許多 "已知問題 "須要避免。

現代開發過程若是沒有自動化完成的工做，仍是比較困難的。在本文中，我就將爲你們介紹一些能夠爲前端開發人員提升開發效率的VSCode自動化技巧。

Live Server

通常狀況下，當你在VSCode修改代碼後，你須要手動刷新瀏覽器才能看到效果。也就是說，若是你對代碼進行了100次更新，你須要刷新瀏覽器100次，這是一件很累且耗時的工做。

Live Server是VSCode中的一個很酷的插件，它能夠爲你自動完成上面說的這些工做，讓你沒必要每次在保存後都要手動打開和刷新瀏覽器，這是由Live Reload這個Live Server的功能提供的，這個功能能夠確保你的代碼能夠在保存後當即呈現。另外，若是你啓用了VSCode的自動保存功能，Live Reload將會變得更酷，更方便。

 

Turbo Console Log

Turbo Console Log是能夠幫你自動編寫日誌信息的工具， 在Turbo Console Log的幫助下，你能夠。

• 自動嵌入有意義的日誌信息。
• 對當前文檔中全部由插件嵌入的日誌信息進行註釋和取消註釋。
• 從當前文檔中刪除全部由插件嵌入的日誌信息。

 

Live SASS編譯器

能夠經過Live SASS編譯器將你的SASS或SCSS文件輕鬆地自動編譯成CSS，並在代碼編輯器自己的內部實時編譯，並自動在瀏覽器中爲你提供應用程序或編譯後的樣式的實時預覽，就像這樣。

 

Live SASS 編譯器是VSCode一個便捷的擴展插件，其中有不少很酷的功能，包括：

• 實時SASS和SCSS編譯。
• 快速狀態欄控制
• 可自定義擴展名（.css或.min.css）
• 可自定義導出的CSS樣式（擴展、壓縮、壓縮、嵌套）
• 可自定義導出CSS的文件位置

自動重命名標籤

在一個包含成百上千行代碼的應用程序中，你是否有由於要更改一個HTML標籤而忘記或錯誤地更改了成對的另外一個標籤？這種工做很容易眼花且低效。

你如今有兩個選擇：一個是手工去維護成對標籤再或是直接安裝Auto Rename Tag插件，交由它幫你自動完成這些工做。

Auto Rename Tag是對開發人員頗有幫助的插件，顧名思義，他會在更新其中一個承兌標籤時自動更新另外的標籤。

 

ESLint

代碼檢測是用於檢查程序中的語法錯誤或不按特定風格準則的代碼，

而ESLint這樣的代碼檢測工具容許開發人員在不執行JavaScript代碼的狀況下發現其代碼的問題。ESLint是VS Code中下載量最大的擴展之一，有近1300萬次下載，它能確保你堅持標準的代碼準則，相似像定位、縮進等。這個擴展須要你在本地或全局電腦上安裝ESLint，你只需運行npm install eslint便可。

如下是ESLint的一個演示

 

當你的代碼量較小時，上面這個錯誤仍是很明顯的。但若是你的代碼超百行。經過運行ESLint，您能夠快速識別代碼中的問題，以提升代碼的完整性和質量。

Prettier

Prettier，一個在前端開發者中流行的VSCode擴展，擁有1100萬的下載量，而且還在不斷增加，它能夠幫你快速格式化你的代碼，只須要按一個按鈕，代碼就格式化完成了。

• 在樣式指南更改時，Prettier能夠自動應用到整個代碼庫中。
• 不須要花功夫去修正格式化。
• 不用在拉取請求中浪費時間討論樣式。
• 不須要在樣式指南中查找規則。

Prettier不只支持JavaScript，還支持許多開箱即用的不一樣語法，包括TypeScript、CSS、JSON、JSX、GraphQL等等。

還有其餘相似的擴展，其中最受歡迎的是，Beautify! 經過一些設置和配置，你不再用擔憂寫出醜陋的代碼了。Beautify能夠將你的代碼變成漂亮而一致的代碼。

Pre-Commit Hooks

到目前爲止，我已經討論了VSCode中不一樣的擴展，你可使用這些擴展來提高你的生產力。做爲本文的最後一個提到的部分，我將討論pre-commit hooks。那麼實際上什麼是pre-commit hooks呢？有些人可能之前據說過，有些人可能沒有據說過。

你是否曾想在每次提交或推送代碼時都運行一條命令？那麼 git 鉤子就是你要找的東西了。

Git 鉤子是一種自定義腳本，它能夠在 git 命令以前或以後運行，以自動化手動任務。有好幾個 git 鉤子可用，而pre-commit hook是我最喜歡的一個。

如下是它一個很出色的功能簡介：

• 它們會在你輸入提交信息以前就開始自動運行。
• 用零之外的其餘數據退出會停止提交。
• pre-commit hook用於檢查即將提交的快照。

經過使用pre-commit hook，您能夠檢查代碼樣式、尾部多餘的空格、不須要的導入，或者檢查有關新方法的適當文檔。

總結

優秀的工具能夠幫助開發者寫出更快、更乾淨、更一致的代碼。微軟推出的Visual Studio Code（VS Code）自推出之初，就逐漸贏得了不少人的青睞。

在這篇文章中，我只是列了一部分你可能在VSCode中使用的不一樣擴展和方法，這些擴展和方法將提升你的生產力，使開發過程自動化。若是你發現其餘值得分享的擴展插件，請在下面的評論中說起它們。