總結(jié)分享一些前端值得了解的VSCode自動(dòng)化插件

本篇文章給大家總結(jié)分享一些面向前端開發(fā)人員的VSCode自動(dòng)化插件，可以為前端開發(fā)人員提高開發(fā)效率，希望對(duì)大家有所幫助！

編程是復(fù)雜的。在保證高生產(chǎn)力和代碼質(zhì)量的同時(shí)，有許多最優(yōu)的方案需要記住，有許多準(zhǔn)則需要遵循，還有許多 "已知問題 "需要避免。

現(xiàn)代開發(fā)過程如果沒有自動(dòng)化完成的工作，還是比較困難的。在本文中，我就將為大家介紹一些可以為前端開發(fā)人員提高開發(fā)效率的VSCode自動(dòng)化技巧。【推薦學(xué)習(xí)：《vscode入門教程》】

Live Server

一般情況下，當(dāng)你在VSCode修改代碼后，你需要手動(dòng)刷新瀏覽器才能看到效果。也就是說，如果你對(duì)代碼進(jìn)行了100次更新，你需要刷新瀏覽器100次，這是一件很累且耗時(shí)的工作。

Live Server是VSCode中的一個(gè)很酷的插件，它可以為你自動(dòng)完成上面說的這些工作，讓你不必每次在保存后都要手動(dòng)打開和刷新瀏覽器，這是由Live Reload這個(gè)Live Server的功能提供的，這個(gè)功能可以確保你的代碼可以在保存后立即呈現(xiàn)。另外，如果你啟用了VSCode的自動(dòng)保存功能，Live Reload將會(huì)變得更酷，更方便。

Turbo Console Log

Turbo Console Log是可以幫你自動(dòng)編寫日志信息的工具， 在Turbo Console Log的幫助下，你可以。

• 自動(dòng)嵌入有意義的日志信息。
• 對(duì)當(dāng)前文檔中所有由插件嵌入的日志信息進(jìn)行注釋和取消注釋。
• 從當(dāng)前文檔中刪除所有由插件嵌入的日志信息。

Live SASS編譯器

可以通過Live SASS編譯器將你的SASS或SCSS文件輕松地自動(dòng)編譯成CSS，并在代碼編輯器本身的內(nèi)部實(shí)時(shí)編譯，并自動(dòng)在瀏覽器中為你提供應(yīng)用程序或編譯后的樣式的實(shí)時(shí)預(yù)覽，就像這樣。

Live SASS 編譯器是VSCode一個(gè)便捷的擴(kuò)展插件，其中有很多很酷的功能，包括：

• 實(shí)時(shí)SASS和SCSS編譯。
• 快速狀態(tài)欄控制
• 可自定義擴(kuò)展名（.css或.min.css）
• 可自定義導(dǎo)出的CSS樣式（擴(kuò)展、壓縮、壓縮、嵌套）
• 可自定義導(dǎo)出CSS的文件位置

自動(dòng)重命名標(biāo)簽

在一個(gè)包含成百上千行代碼的應(yīng)用程序中，你是否有因?yàn)橐囊粋€(gè)HTML標(biāo)簽而忘記或錯(cuò)誤地更改了成對(duì)的另一個(gè)標(biāo)簽？這種工作很容易眼花且低效。

你現(xiàn)在有兩個(gè)選擇：一個(gè)是手工去維護(hù)成對(duì)標(biāo)簽再或是直接安裝Auto Rename Tag插件，交由它幫你自動(dòng)完成這些工作。

Auto Rename Tag是對(duì)開發(fā)人員很有幫助的插件，顧名思義，他會(huì)在更新其中一個(gè)承兌標(biāo)簽時(shí)自動(dòng)更新另外的標(biāo)簽。

ESLint

代碼檢測是用于檢查程序中的語法錯(cuò)誤或不按特定風(fēng)格準(zhǔn)則的代碼，

而ESLint這樣的代碼檢測工具允許開發(fā)人員在不執(zhí)行JavaScript代碼的情況下發(fā)現(xiàn)其代碼的問題。ESLint是VS Code中下載量最大的擴(kuò)展之一，有近1300萬次下載，它能確保你堅(jiān)持標(biāo)準(zhǔn)的代碼準(zhǔn)則，類似像定位、縮進(jìn)等。這個(gè)擴(kuò)展需要你在本地或全局電腦上安裝ESLint，你只需運(yùn)行npm install eslint即可。

以下是ESLint的一個(gè)演示

當(dāng)你的代碼量較小時(shí)，上面這個(gè)錯(cuò)誤還是很明顯的。但如果你的代碼超百行。通過運(yùn)行ESLint，您可以快速識(shí)別代碼中的問題，以提高代碼的完整性和質(zhì)量。

Prettier

Prettier，一個(gè)在前端開發(fā)者中流行的VSCode擴(kuò)展，擁有1100萬的下載量，并且還在不斷增長，它可以幫你快速格式化你的代碼，只需要按一個(gè)按鈕，代碼就格式化完成了。

• 在樣式指南更改時(shí)，Prettier可以自動(dòng)應(yīng)用到整個(gè)代碼庫中。
• 不需要花功夫去修正格式化。
• 不用在拉取請(qǐng)求中浪費(fèi)時(shí)間討論樣式。
• 不需要在樣式指南中查找規(guī)則。

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

還有其他類似的擴(kuò)展，其中最受歡迎的是，Beautify! 通過一些設(shè)置和配置，你再也不用擔(dān)心寫出丑陋的代碼了。Beautify可以將你的代碼變成漂亮而一致的代碼。

Pre-Commit Hooks

到目前為止，我已經(jīng)討論了VSCode中不同的擴(kuò)展，你可以使用這些擴(kuò)展來提升你的生產(chǎn)力。作為本文的最后一個(gè)提到的部分，我將討論pre-commit hooks。那么實(shí)際上什么是pre-commit hooks呢？有些人可能以前聽說過，有些人可能沒有聽說過。

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

Git 鉤子是一種自定義腳本，它可以在 git 命令之前或之后運(yùn)行，以自動(dòng)化手動(dòng)任務(wù)。有好幾個(gè) git 鉤子可用，而pre-commit hook是我最喜歡的一個(gè)。

以下是它一個(gè)很出色的功能簡介：

• 它們會(huì)在你輸入提交信息之前就開始自動(dòng)運(yùn)行。
• 用零以外的其他數(shù)據(jù)退出會(huì)中止提交。
• pre-commit hook用于檢查即將提交的快照。

通過使用pre-commit hook，您可以檢查代碼樣式、尾部多余的空格、不需要的導(dǎo)入，或者檢查有關(guān)新方法的適當(dāng)文檔。

總結(jié)

優(yōu)秀的工具可以幫助開發(fā)者寫出更快、更干凈、更一致的代碼。微軟推出的Visual Studio Code（VS Code）自推出之初，就逐漸贏得了很多人的青睞。

在這篇文章中，我只是列了一部分你可能在VSCode中使用的不同擴(kuò)展和方法，這些擴(kuò)展和方法將提高你的生產(chǎn)力，使開發(fā)過程自動(dòng)化。如果你發(fā)現(xiàn)其他值得分享的擴(kuò)展插件，請(qǐng)?jiān)谙旅娴脑u(píng)論中提及它們。

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