前端開發推薦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)