阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

原文出處:https://dev.to/lundjrl/vscode-extensions-to-magically-accelerate-your-productivity-2lad

閱讀本文的大多數人可能每天都會使用 VSCode 擴充功能。無論是檢查程式碼、顯示建議、類型推理還是讓您發笑的東西,它們都會影響您的工作流程並幫助您建立產品。

以下是我每天使用的擴充功能清單。可以肯定地說,如果沒有他們,我會完全迷失方向,而且我對門票的估計也會膨脹。

我希望這些對您的幫助就像對我的幫助一樣!


Auto Rename Tag

此清單的開頭是自動重命名標籤擴充。如果您使用大量 HTML,此擴充功能非常有用。它的一般要點是它將您正在編輯的標籤的結束標籤格式化為相同的名稱,這樣您就不必這樣做。當我處理具有包含 100 多個其他標籤的標籤的「*.html」檔案的舊網站時,這為我節省了大量時間。

ID:formulahendry.auto-rename-tag

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag


Code Spell Checker

如果您與國際團隊合作或您想要記錄專案中的單字或縮寫,這一點非常有用。

程式碼拼字檢查器可讓您修復拼字錯誤的單字或將它們儲存到專案的「settings.json」檔案中。這表明了對於可能不熟悉應用程式業務短語的新開發人員的巨大意圖。

ID:streetsidesoftware.code-spell-checker

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker


EditorConfig

EditorConfig 對我和我的團隊來說至關重要。透過建立格式化標準,它可以幫助我們在發出拉取請求時保持程式碼編輯器同步並減少差異日誌。

ID:EditorConfig.EditorConfig

VS Marketplace 連結:https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig


Eslint 和 Prettier

如果您進入 Webdev 世界很短一段時間,您可能已經遇到過這兩個。我不會在這裡討論太多細節,但簡而言之,Eslint 是一個 linter,Prettier 是一個格式化程式。您可以將它們一起使用以在專案中強制執行程式碼標準。

ID:dbaeumer.vscode-eslint

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ID:esbenp.prettier-vscode

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode


Git-Rename

如果您想重新命名檔案或更改檔案名稱的大小寫,Git-Rename 非常有用。 Git-Rename 允許您重命名檔案並幫助您追蹤 Git 中的這些更改,而不是刪除檔案以將其從 Git 歷史記錄中刪除以便更改其大小寫。

什麼?

假設您的專案中有一個名為“myfile”的文件,並且它已被版本控制追蹤。如果您將名稱更改為“myFile”,這只是大小寫更改,Git 預設不會關心它。您可以更改 git 設定來解決此問題,但如果您在團隊中工作,則需要說服其他開發人員也這樣做。一個更簡單的選擇是將此擴充功能包含在專案中的「extensions.json」檔案中,這樣他們每次開啟專案時都會收到提示,要求他們下載該擴充功能。

ID:ambooth.git-rename

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=ambooth.git-rename


Import Cost

導入成本讓您知道每個導入的包有多少位元組。它對於行動應用程式非常有用,因為您的捆綁包大小對最終用戶來說意義重大。

ID:wix.vscode-導入成本

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost


IntelliCode

TypeScript 和 JavaScript 的另一個很棒的擴充功能。 IntelliCode 就像那個試圖完成你的句子的煩人的朋友。它為在專案中找到的 TS 版本提供方法/物件補全,並為您推斷類型,讓您知道可以使用物件的哪些屬性。

對於 Django 粉絲來說,它也適用於 Python!

ID:VisualStudioExptTeam.vscodeintellicode

VS Marketplace 連結:https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode


Pretty Typescript Errors

這並不適合所有人,但我寫了很多 TypeScript,它可以幫助我解析 TS 錯誤。基本上,這個擴充功能將顯示一條更人性化的訊息,而不是 TypeScript 給你一個長而半複雜的訊息,以幫助你縮小程式碼中錯誤的範圍。

ID:yoavbls.pretty-ts-errors

VS 市場連結:https://marketplace.visualstudio.com/items?itemName=yoavbls.pretty-ts-errors


您使用這些擴充功能嗎?您是否有比這些更好的擴充功能的建議?請在下面的評論中告訴我!


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈