八個大幅提升開發效率的VS Code插件
VS Code 是功能豐富的編輯器,提供了許多強大的功能,使其成為最受歡迎的集成開發環境之一。盡管如此,仍然有一些方面需改進,插件的存在正是為了填補這些空白,為用戶提供額外的功能和工具,以滿足特定的需求。
在 VS Code 中,有一些特定的插件對提高工作效率非常重要。這些插件可以幫助開發人員更快速、更高效地編寫代碼。本文重點介紹8個實用的插件。
1 GitLens
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
圖片
雖然 Visual Studio Code 自帶了基本的 Git 功能支持,但其中功能非常有限。
為了更好地理解代碼,可以安裝 GitLens 插件。通過此插件能夠快速了解誰在什么時候、因為什么修改了某行代碼或代碼塊。回溯歷史記錄可以進一步了解代碼的演變過程和修改的原因。這個插件功能強大、豐富多樣,并且高度可定制,能滿足你的需求。
盡管有其他插件也旨在填補這一空白,但都無法與 GitLens 的功能相媲美。因此,建議只需要安裝這一個插件,就能覆蓋所有功能。
2 Live Share
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
圖片
在進行雙人編程時,通常是通過 Zoom 或其他屏幕共享提供商來實現。然而,這種方式存在一些缺點,有很大的改進空間。為了填補這一空白,Live Share插件能夠提供幫助。
這個插件旨在讓你能夠遠程進行雙人編程,甚至支持多達30人。它提供了全面的功能,你甚至不再需要使用Zoom進行通話,這個插件內置了聊天和語音通話功能。
圖片
開始會話非常簡單。創建會話后,會獲得一個URL,可以提供給你的同事。
圖片
3 VS Code Remote Development
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack
圖片
這個擴展可以在物理或虛擬機器上實現無縫遠程容器開發。不用在服務器上運行任何額外的軟件,只需使用此擴展通過SSH連接到目標機器即可。這樣,就可以方便地在遠程環境中進行容器開發了。
圖片
使用這個擴展開發人員可以更好地檢查遠程機器上的代碼,或者在一個遠程機器上擁有所有的開發工具并編輯代碼。這意味著可以將筆記本電腦僅作為客戶端,讓所有的資源在另一臺機器上執行。這樣一來,就可以把和工作相關的代碼與個人數據隔離開來。
需要注意的是,在遠程機器上安裝的插件不會自動安裝在客戶端機器上。這樣做可以保持事情的井然有序,確保插件只存在于遠程機器上。
圖片
有的公司甚至向員工提供遠程機器。這樣做的好處是大大減少了配置開發環境所需的時間和成本。同時,公司還可以確保員工擁有能夠滿足產品開發需求的高性能機器。
4 Peacock
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock
圖片
如果需要經常在不同的項目之間切換嗎,這個插件可以用來自定義每個項目,以便開發人員能夠在當前工作的項目上得到一些視覺反饋。
圖片
它有一些不錯的預定義顏色,但也支持自己添加顏色。
5 Bracket Pair Colorizer 2
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
圖片
這是個非常簡單但十分有用的插件。此插件可以通過顏色來標識匹配的括號。用戶可以定義要匹配的字符和要使用的顏色。
圖片
6 Color Highlight
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight
圖片
另一個簡單且有用的工具是Color Highlight。它會在文檔中高亮顯示找到的 CSS/Web 顏色。
圖片
7 ESLint
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
圖片
這是一個將 ESLint 集成到 VS Code 中的插件。需要安裝 ESLint,并提供 .eslintrc 配置文件。
此插件有很多值得查看的配置選項。
8 Prettier
安裝鏈接:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
圖片
這是一個支持 Prettier 的擴展,Prettier 是一款強制統一代碼格式的工具,會移除所有原始樣式,并確保所有輸出的代碼符合一致的風格。
在大型項目中,這個工具絕對是必備的,這樣可以保證代碼庫的強可讀性。由于 Prettier 可高度配置,開發團隊只需要在其配置上達成一致即可。
需要告訴 VS Code .prettierrc 配置文件的位置,或者將其放在根文件夾中。