初入前端，你一定要安裝的VS Code插件

這幾天看了一些剛學習前端的新人發來代碼，總結幾款易用的插件，可供規範代碼和提升開發效率。

VS Code （https://code.visualstudio.com/）

首先2020年了，竟然真的還有同學竟然真的還有使用純文本編輯器寫代碼。可能也和當年學習前端的我一樣。看到有教程說，一定要注重基本功，在沒用代碼提示和代碼錯誤提示的前提下，寫出順利運行的代碼。這種類似苦行僧的學習方法，不討論實際意義，對於新人其實是低效的，會把他們從有趣輕鬆的代碼編輯帶進記憶和報錯的深淵。

所以首先給大家推薦的正是代碼基石，天下無敵的VS Code。

其由巨硬微軟以Electron開發，優秀的性能，豐富的插件，快速的個性化配置。對於前端同學還有一個天然的激勵效果因為他是由typescript開發的。

ESlint

ESlint是javascript代碼，發現問題，自動修正，和推行團隊規範的利器。這裡推薦所有前端開發人員安裝。另外使用typescript開發的同學，也請安裝，因為tslint團隊不再維護tslint，推薦使用eslint。

在VScode中ESlint中的安裝非常簡便，在擴展商店中，搜索ESlint。按照其安裝說明安裝即可。

有一點說明下，若要開啟保存自動修正，需要在VScode中如下配置即可。

gitLens

如果你已經通過學習進入一個團隊開發，並且團隊使用git管理代碼的話。這邊一定推薦GitLens，幫助你更好的團（jing）隊（xing）開（si）發（bi）。

他的功能只有一個，在光標處於的那還代碼尾部，顯示提交這行代碼的時間，hash,作者。

特別是作者！嗯，大家自行體會。

Debugger for chrome

這個插件幫助你可以在VScode中打斷點，動態插入代碼。

關於配置可以看下。

{ &34;: &34;, &34;: [ // 這份配置是針對服務 { &34;: &34;, &34;: &34;, &34;: &34;, //啟動頁面 &34;: &34;, //文件映射根目錄 &34;: &34; }, // 這份配置是針對本地文件的 { &34;: &34;, &34;: &34;, &34;: &34;, &34;: &34; }, ]}

調試js代碼就靠它了。

如果你不想折騰繁瑣的配置，看下這邊文章IDE的大戶：JetBrains，他們的IDE, webstorm可以讓你把更快的進入絲滑開發。

以上就是我認為在工具層面，對前端學習有所幫助的插件了。

大家有什麼好的想法可以發在評論裡。