[更多插件可以到官網(wǎng)自行探索](https://marketplace.visualstudio.com/vscode)
對前端感興趣的小伙伴，可以關(guān)注我的?Github
根據(jù)調(diào)查發(fā)現(xiàn)，VScode 和 sublime 是前端開發(fā)者比較喜歡的 IDE 。“工欲善其事，必先利其器”，我是一個(gè)愛折騰的工具控，剛開始用 VScode 的時(shí)候，裝了一堆的插件，導(dǎo)致只要開啟 VScode 再接上大屏，我的 Mac 就會強(qiáng)烈的反抗，風(fēng)扇一直呼嘯，????....后來就開啟卸載模式，開始一直卸，最終保留一些小而美，使用率高的插件，整理一份以便不備之需。
而對于一個(gè)團(tuán)隊(duì)而言，大家用同一套快捷鍵，同一個(gè)IDE，同一套插件，那么結(jié)對編程將會是一件特別幸福的事情。和帥哥哥一起編程還是可以學(xué)到很多東西的，嘻嘻～～
一、代碼快捷鍵
在 VScode 的首頁可以設(shè)置通用快捷鍵，因?yàn)槠匠Ｓ胹ublime比較多，所以干脆合并成一套。
二、代碼提示
1. Path Intellisense
自動路徑補(bǔ)全
2. Document this
js 的注釋模板 （注意：新版的 vscode 已經(jīng)原生支持,在 function 上輸入?/** tab?）
三、代碼格式
1. ESlint
代碼規(guī)范，對不符合要求的代碼或者有語法錯(cuò)誤的JS代碼進(jìn)行提示，可以自定制提示規(guī)則
2. HTMLHint
html代碼檢測
3. beautify
格式化代碼的工具
四、代碼可視化改善
1.?colorize
可視化顏色哦，做組件涉及很多不同的主題，個(gè)人還是蠻稀飯的
2.?RegExp Preview and Editor
這個(gè)就厲害了.可以完美的展示你寫的正則,圖形化給你看你寫正則的形成
3.?Better Comments
最好用的注釋區(qū)域高亮,對于TODO這些支持也很好
4. BreadCrumb in StatusBar
----------------------------------------------------------------------------
華麗麗的分割線，以下插件根據(jù)框架語言選擇，用什么裝什么，不用就不要裝了，浪費(fèi)內(nèi)存
五、React 插件
1.?ES7 React/Redux/GraphQL/React-Native snippets
涵蓋的代碼片段賊豐富，React 相關(guān)代碼提示有這個(gè)就夠了
2.?Useful React Snippets
當(dāng)然如果你只用React,那用這個(gè)代碼提示吧，管夠了
3.?CSS Blocks
支持 css 模塊化的智能提示，跳轉(zhuǎn)，墻裂推薦
4.?styled-components-snippets?
styled-components 的代碼片段
六、Vue 插件
1. vetur
語法高亮、智能感知、Emmet 等
2. VueHelper
snippet 代碼片段
3.?Vue VSCode Snippets
很全面的vue代碼片段
七、Node
1. eggjs
蛋框的相關(guān)幫助插件,代碼片段,智能提示等
2.?egg-jump-definition
蛋框的函數(shù)跳轉(zhuǎn)：Cmd+4
八、微信小程序
1.?mpvue snippets
mpvue的一些代碼片段,以及部分原生小程序的代碼提示
2.?minapp
用VS Code寫小程序必備的插件,里面有眾多實(shí)用的特性集成
九、Markdown 插件
1. Markdown All in One
Markdown 的提示插件用這一個(gè)足以，集成了語法快捷鍵、Math、預(yù)覽等，很實(shí)用
2. markdownlint
對 markdown 的語法格式規(guī)范進(jìn)行代碼提示
十、代碼審查
1.?CodeMetrics?
?可以計(jì)算TS/JS內(nèi)代碼的復(fù)雜度(比如函數(shù)這些),這些與代碼質(zhì)量和性能是掛鉤的
2.Import Cost
就是你import一個(gè)東西的時(shí)候,可以計(jì)算改引入模塊的大小!
3.Git Lens
暫時(shí)沒有發(fā)現(xiàn)比這個(gè)看git記錄更為詳細(xì)了
十一、其他
下面的插件可有可無，如有相應(yīng)功能的需求，卻也是非常棒的插件
1. fileheader
頂部注釋模板，可定義作者、時(shí)間等信息，并會自動更新最后修改時(shí)間
ctrl+alt+i
2. Paste JSON as Code
JSON 格式轉(zhuǎn)換成其他的語言格式
3.?Node.js Modules Intellisense
對于 node_module 的智能提示?
4. npm-import-package-version
顯示導(dǎo)入的 npm 包的版本信息
5.?File Tree View
提供幾個(gè)常見編程語言的函數(shù)或狀態(tài)的樹集合展示,可以快速點(diǎn)擊跳轉(zhuǎn)!!
6.?NPM-Scripts
在側(cè)邊欄可視化執(zhí)行 npm 命令(項(xiàng)目內(nèi)的package.json),? 小巧實(shí)用
7.?:emojisense:
十二、代碼片段
兩種方式定義代碼片段
菜單欄->文件->首選項(xiàng)->用戶代碼片段
ctrl+shift + p => snippet
toRem: 只是一個(gè)單純的描述
prefix: 是觸發(fā)snippet的簡寫
body: 是展開的代碼片段
$1,$2：表示占位符，用于用戶展開代碼片段所需要替換的，也可以寫成${1:label}鍵值對的方式
description: 用戶你在輸出snippet之前，方便自己識別的注釋，而不用強(qiáng)行記憶那些簡寫的
>?小編是一名前端工程師，建了一個(gè)“前端內(nèi)推群”，里面有BAT等大廠的HR，也有知名獵頭，但大部分是前端工程師。群里會不定期發(fā)布前端相關(guān)的學(xué)習(xí)資源。群里的大佬們團(tuán)隊(duì)缺人，也會在群里招人。也聯(lián)合一些組織不定期會舉辦一些活動。逢年過節(jié)會有紅包。歡迎大家加入，一起成長，目前群人數(shù)較多，已達(dá)上限，可以先加機(jī)器人微信，注明“加群目的”，機(jī)器人會拉你入群。
