動圖演示11個必備 VS Code 插件
推薦幾個非常實用的 VS Code 插件. 附 gif 圖.
參考文章:?翻譯文章[1]
提升開發(fā)效率的插件
1. Better Comments
Better Comments 你可以使用不同的前綴來讓注釋顯示為不同的顏色。非常適合快速掃描并發(fā)現(xiàn)重要的代碼片段。若使用的話, 建議團隊統(tǒng)一規(guī)范.
2. Bracket Pair Colorizer
你是否經(jīng)常在項目中出現(xiàn)查找是否缺失括號. 這是一件非常浪費時間的事情. 使用上面這款插件, 它可以幫你用不同的顏色標識括號, 是不是很棒.
3. change-case
change-case 提供了一種簡單的方法來將單詞或變量名更改為各種情況，包括 camelCase、snake_case、TitleCase…… 這種再多人合作, 遇到不一致的代碼時, 可以極大地提高效率.
4. ES7 React/Redux/GraphQL/React-Native snippets
如果每創(chuàng)建一個組件都要重復地寫樣板代碼, 那真的是非常浪費時間. 這個插件有很多有用的 snippets 片段, 你可以快速初始化一個樣板代碼, 節(jié)省大量時間.
5. ESLint
6. GitLens
GitLens 是一個非常非常好用的插件，可以讓您了解 git 的提交歷史。精確到行. 甩鍋怎么甩得快, 就靠它了.
滑動到行,?就可以看到提交作者, 提交日期, 以及 commit 的內(nèi)容.?
7. Import Cost
Import Cost 有助于你認識到你引入的文件大小。它以內(nèi)聯(lián)方式顯示每個導入的大小，如果導入大于正常大小，則顯示紅色和黃色警告顏色。
8. indent-rainbow
通過顏色區(qū)分, 讓你一眼就看出縮進.
9. javascript console utils
力薦啊. 只需要找到你想 console.log 的變量, 按住快捷鍵, 即可出現(xiàn)一個帶變量名的 console
10. Prettier
這個是非常重要的。用 alt + shift + F 自動格式化你的代碼，或者你可以讓它在每次保存時自動格式化。節(jié)省了你很多縮進, 前后空格等代碼風格上的時間. 保持一樣的 prettier 配置, 在團隊合作中也是非常重要的.
11. Version Lens
跟蹤 npm 包 的所有最新版本可能很麻煩。版本鏡頭顯示你如何內(nèi)聯(lián)你安裝的版本包。將 json 與當前版本進行比較。
提升美觀的插件
file-icons
讓不同文件有不同的圖標
Fira Code
將 === 變成 三等號, 這個看個人喜好.
不再使用的插件
當太多插件被添加到 VScode 中, 電腦小風扇就會呼呼呼地響. 因此我會卸載一些沒必要的插件.
Auto-close tag & Auto Rename Tag
現(xiàn)在，這些功能大部分都包含在 VS 代碼中. 可以移除這個插件了
Color Highlight
突出顯示任何 CSS 顏色值及其所代表的顏色。同樣的, VS 中現(xiàn)在在值旁邊顯示了一個彩色的框，已經(jīng)足夠了.
如果你內(nèi)存夠. 盡管安裝.
最后
希望本篇文章對你有幫助~
推薦閱讀
我的公眾號能帶來什么價值？(文末有送書規(guī)則，一定要看)
每個前端工程師都應該了解的圖片知識(長文建議收藏)
為什么現(xiàn)在面試總是面試造火箭？