2020必備VS Code 插件(內附 gif 圖)

推薦幾個很是實用的 VS Code 插件. 附 gif 圖.

提高開發效率的插件

1. Better Comments

Better Comments 你可使用不一樣的前綴來讓註釋顯示爲不一樣的顏色。 很是適合快速掃描並發現重要的代碼片斷。 若使用的話, 建議團隊統一規範.

感謝評論區推薦: Todo Tree，雖然只能標記TODO和 FIXME，可是能夠標註在html註釋當中，而且在邊上導航條有個小圖標，點進去能夠查看哪些文件哪一行被標記過. 你們能夠試一下.

2. Bracket Pair Colorizer

你是否常常在項目中出現查找是否缺失括號. 這是一件很是浪費時間的事情. 使用上面這款插件, 它能夠幫你用不一樣的顏色標識括號, 是否是很棒.

3. change-case

change-case 提供了一種簡單的方法來將單詞或變量名更改成各類狀況，包括 camelCase、snake_case、TitleCase…… 這種再多人合做, 遇到不一致的代碼時, 能夠極大地提升效率.

4. ES7 React/Redux/GraphQL/React-Native snippets

若是每建立一個組件都要重複地寫樣板代碼, 那真的是很是浪費時間. 這個插件有不少有用的 snippets 片斷, 你能夠快速初始化一個樣板代碼, 節省大量時間.

5. ESLint

這一個插件應該都有安裝, 好處很少講了. 直接看上圖吧~

6. GitLens

GitLens 是一個很是很是好用的插件，可讓您瞭解 git 的提交歷史。精確到行. 甩鍋怎麼甩得快, 就靠它了.

7. Import Cost

Import Cost 有助於你認識到你引入的文件大小。 它之內聯方式顯示每一個導入的大小，若是導入大於正常大小，則顯示紅色和黃色警告顏色。

8. indent-rainbow

經過顏色區分, 讓你一眼就看出縮進.

9. javascript console utils

力薦啊. 只須要找到你想 console.log 的變量, 按住快捷鍵, 便可出現一個帶變量名的 console

10. Prettier

這個是很是重要的。 用 alt + shift + F 自動格式化你的代碼，或者你可讓它在每次保存時自動格式化。節省了你不少縮進, 先後空格等代碼風格上的時間. 保持同樣的 prettier 配置, 在團隊合做中也是很是重要的.

11. Version Lens

跟蹤 npm 包 的全部最新版本可能很麻煩。 版本鏡頭顯示你如何內聯你安裝的版本包。將 json 與當前版本進行比較。

提高美觀的插件

file-icons

讓不一樣文件有不一樣的圖標

Fira Code

將 === 變成 三等號, 這個看我的喜愛.

再也不使用的插件

當太多插件被添加到 VScode 中, 電腦小風扇就會呼呼呼地響. 所以我會卸載一些不必的插件.

Auto-close tag & Auto Rename Tag

如今，這些功能大部分都包含在 VS 代碼中. 能夠移除這個插件了

Color Highlight

突出顯示任何 CSS 顏色值及其所表明的顏色。 一樣的, VS 中如今在值旁邊顯示了一個彩色的框，已經足夠了.

若是你內存夠. 儘管安裝.

最後

但願本篇文章對你有幫助~

• 歡迎關注「前端加加」, 按期分享優質文章
• 回覆加羣，邀你進技術羣，長期技術交流學習

參考翻譯文章地址