[更多插件可以到官網(wǎng)自行探索](https://marketplace.visualstudio.com/vscode)
對(duì)前端感興趣的小伙伴，可以關(guān)注我的?Github
根據(jù)調(diào)查發(fā)現(xiàn)岗宣，VScode 和 sublime 是前端開(kāi)發(fā)者比較喜歡的 IDE ×苎“工欲善其事耗式，必先利其器”，我是一個(gè)愛(ài)折騰的工具控趁猴，剛開(kāi)始用 VScode 的時(shí)候刊咳，裝了一堆的插件，導(dǎo)致只要開(kāi)啟 VScode 再接上大屏儡司，我的 Mac 就會(huì)強(qiáng)烈的反抗娱挨，風(fēng)扇一直呼嘯，????....后來(lái)就開(kāi)啟卸載模式捕犬，開(kāi)始一直卸跷坝，最終保留一些小而美，使用率高的插件碉碉，整理一份以便不備之需探孝。
而對(duì)于一個(gè)團(tuán)隊(duì)而言，大家用同一套快捷鍵誉裆，同一個(gè)IDE，同一套插件缸濒，那么結(jié)對(duì)編程將會(huì)是一件特別幸福的事情足丢。和帥哥哥一起編程還是可以學(xué)到很多東西的，嘻嘻～～
一庇配、代碼快捷鍵
在 VScode 的首頁(yè)可以設(shè)置通用快捷鍵斩跌，因?yàn)槠匠Ｓ胹ublime比較多，所以干脆合并成一套捞慌。
二耀鸦、代碼提示
1. Path Intellisense
自動(dòng)路徑補(bǔ)全
2. Document this
js 的注釋模板 （注意：新版的 vscode 已經(jīng)原生支持,在 function 上輸入?/** tab?）
三、代碼格式
1. ESlint
代碼規(guī)范啸澡，對(duì)不符合要求的代碼或者有語(yǔ)法錯(cuò)誤的JS代碼進(jìn)行提示袖订，可以自定制提示規(guī)則
2. HTMLHint
html代碼檢測(cè)
3. beautify
格式化代碼的工具
四、代碼可視化改善
1.?colorize
可視化顏色哦嗅虏，做組件涉及很多不同的主題洛姑，個(gè)人還是蠻稀飯的
2.?RegExp Preview and Editor
這個(gè)就厲害了.可以完美的展示你寫的正則,圖形化給你看你寫正則的形成
3.?Better Comments
最好用的注釋區(qū)域高亮,對(duì)于TODO這些支持也很好
4. BreadCrumb in StatusBar
----------------------------------------------------------------------------
華麗麗的分割線，以下插件根據(jù)框架語(yǔ)言選擇皮服，用什么裝什么楞艾，不用就不要裝了参咙，浪費(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
語(yǔ)法高亮、智能感知谆刨、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è)足以刁岸，集成了語(yǔ)法快捷鍵、Math她我、預(yù)覽等虹曙，很實(shí)用
2. markdownlint
對(duì) markdown 的語(yǔ)法格式規(guī)范進(jìn)行代碼提示
十、代碼審查
1.?CodeMetrics?
?可以計(jì)算TS/JS內(nèi)代碼的復(fù)雜度(比如函數(shù)這些),這些與代碼質(zhì)量和性能是掛鉤的
2.Import Cost
就是你import一個(gè)東西的時(shí)候,可以計(jì)算改引入模塊的大小!
3.Git Lens
暫時(shí)沒(méi)有發(fā)現(xiàn)比這個(gè)看git記錄更為詳細(xì)了
十一番舆、其他
下面的插件可有可無(wú)酝碳，如有相應(yīng)功能的需求，卻也是非常棒的插件
1. fileheader
頂部注釋模板恨狈，可定義作者疏哗、時(shí)間等信息，并會(huì)自動(dòng)更新最后修改時(shí)間
ctrl+alt+i
2. Paste JSON as Code
JSON 格式轉(zhuǎn)換成其他的語(yǔ)言格式
3.?Node.js Modules Intellisense
對(duì)于 node_module 的智能提示?
4. npm-import-package-version
顯示導(dǎo)入的 npm 包的版本信息
5.?File Tree View
提供幾個(gè)常見(jiàn)編程語(yǔ)言的函數(shù)或狀態(tài)的樹(shù)集合展示,可以快速點(diǎn)擊跳轉(zhuǎn)!!
6.?NPM-Scripts
在側(cè)邊欄可視化執(zhí)行 npm 命令(項(xiàng)目?jī)?nèi)的package.json),? 小巧實(shí)用
7.?:emojisense:
十二禾怠、代碼片段
兩種方式定義代碼片段
菜單欄->文件->首選項(xiàng)->用戶代碼片段
ctrl+shift + p => snippet
toRem: 只是一個(gè)單純的描述
prefix: 是觸發(fā)snippet的簡(jiǎn)寫
body: 是展開(kāi)的代碼片段
$1,$2：表示占位符返奉，用于用戶展開(kāi)代碼片段所需要替換的，也可以寫成${1:label}鍵值對(duì)的方式
description: 用戶你在輸出snippet之前吗氏，方便自己識(shí)別的注釋芽偏，而不用強(qiáng)行記憶那些簡(jiǎn)寫的
>?小編是一名前端工程師，建了一個(gè)“前端內(nèi)推群”弦讽，里面有BAT等大廠的HR污尉，也有知名獵頭，但大部分是前端工程師往产。群里會(huì)不定期發(fā)布前端相關(guān)的學(xué)習(xí)資源被碗。群里的大佬們團(tuán)隊(duì)缺人，也會(huì)在群里招人仿村。也聯(lián)合一些組織不定期會(huì)舉辦一些活動(dòng)蛮放。逢年過(guò)節(jié)會(huì)有紅包。歡迎大家加入包颁，一起成長(zhǎng)蘑险，目前群人數(shù)較多贵少，已達(dá)上限，可以先加機(jī)器人微信，注明“加群目的”动猬，機(jī)器人會(huì)拉你入群免钻。
