前端開發推薦vscode安裝什麼外掛？

1，HTML snippets(Visual Studio Code HTML snippets)

這是一款前端開發者必備的擴充套件，它能將你從手動鍵入每個標籤中解放出來。只需輸入 div 然後按下回車，一對標籤就出現了。更厲害的是，對於需要巢狀的標籤，你可以直接用 ul>li>a 的格式表示，按下回車後就能看到你需要的巢狀。還有一點，這個擴充套件已經包括所有的 HMTL5 片段。

*2，JavaScript (ES6) code snippets**

在上面一段中你可能就已經注意到，程式碼片段很有用，它能夠有效減少拼寫錯誤和提高編碼效率。幾乎每個前端程式設計師都是 JavaScript 的使用者，為了提高編寫 JS 程式碼的效率，這個擴充套件很有用，並且它還支援 .ts, .tsx 和 .jsx 檔案。擴充套件中有很多快捷縮寫，比如想要呼叫 export default class ClassName{}，輸入 ecl 按下空格即可。

3，CSS Peek

既然已經分別介紹了 HTML 和 JS 的助手，我們也不能落下 CSS。CSS Peek 是一個支援 .html 和 .js 檔案的擴充套件，它能幫助開發者快速找到和檢視選定類或 id 所用的樣式。對於那些不喜歡來回切換檔案或者分屏的開發者來說這個擴充套件很有用。

4，Angular/React/Vue

既然提到了程式碼片段，我們最好也提一下每個框架下的不同擴充套件。對 AngularJS 來說，Angular Snippets(Version 8)是針對 AngularJS 8 的一款擴充套件，它為我們提供 Typescript 和 HTML 的程式碼片段。對於 React.js 框架，ES7 React/Redux/GraphQL/React-Native snippets 是一個優秀的擴充套件，它使用 ES7 提供 React 和 Redux 的程式碼片段，用法和 Javascript snippets 類似，都是按空格鍵。

對 Vue.js 開發，有一個叫 Vetur 的擴充套件相當棒，它目前的下載量已經有將近2,000萬。Vetur 的功能很強大，包括程式碼片段，Emmet，錯誤檢查，格式化，除錯和高亮語法等

。

5，ESLint

如果你想要寫出友好，易讀，乾淨的程式碼，我建議你在 VSC 中安裝一個 ESLint 擴充套件，它會幫助你持續養成好的編碼習慣，比如縮排等。

6，Prettier 程式碼格式工具

說到漂亮整潔的程式碼，Prettier 聽名字你就值得擁有。尤其在專案需要你和其他同事合作完成時，Prettier 會強勢地將程式碼格式全部統一，讓你再也不用和同事討論自己的程式碼。

7，GitLens

我在文章開頭就提到過，VSC 是整合了 git 功能的，通過安裝 GitLens 這個功能將會更強大，它能讓你看到每一行程式碼是由誰在什麼時候寫的，並且快速檢視程式碼提交詳情，在團隊協作中這個擴充套件很有用。

8，Auto import 自動匯入包

Auto import 是一個自動匯入包擴充套件。如果目前手頭的專案是基於不同元件的，那麼你需要做的就是給每個元件命名，剩下的事交給 Auto import 就好。

9，Path autocomplete 路徑自動補全

提到了匯入的問題，另一個重要的擴充套件就是能夠智慧補全匯入檔案路徑的 Path autocomplete。使用時，輸入 ./ 後你就會看到一個包含所有檔名的下拉選單。當檔案目錄繁雜時，這個擴充套件真的是很好用，它為你省去了很多一層一層刨開目錄的痛苦。

10，Bracket Pair Colorizer 括號著色器

括號著色器能讓我們一眼看出當前程式碼塊的反括號在哪裡。有時候在稍微複雜的函式中，找到正確的那對程式碼並不是那麼容易，但 Bracket Pair Colorizer 在你鍵入一個括號時就為這一對括號分配了自己的顏色，便於閱讀。

11，Indenticator 縮排指示器

Indenticator 可以高亮顯示出當前縮排的深度，深度由線和點表示，同樣使程式碼更整潔，提高程式碼易讀性。

12，Debugger for Chrome 偵錯程式

放在最後的是重磅級的除錯擴充套件 Debugger for Chrome。這個外掛能讓你在 VSC 裡面直接除錯 JS 檔案，效果和 Chrome 的控制檯中差不多，讓你不用開啟瀏覽器就直接打斷點。最後註明出處：[適合前端開發人員的vscode擴充套件外掛推薦-三人行慕課​u.com/people/otstar-25)