VScode 插件工具集，不求全但求好

[更多插件能夠到官網自行探索](https://marketplace.visualstudio.com/vscode)
複製代碼

對前端感興趣的小夥伴，能夠關注個人 Github 

根據調查發現，VScode 和 sublime 是前端開發者比較喜歡的 IDE 。「工欲善其事，必先利其器」，我是一個愛折騰的工具控，剛開始用 VScode 的時候，裝了一堆的插件，致使只要開啓 VScode 再接上大屏，個人 Mac 就會強烈的反抗，風扇一直呼嘯，😳😳....後來就開啓卸載模式，開始一直卸，最終保留一些小而美，使用率高的插件，整理一份以便不備之需。

而對於一個團隊而言，你們用同一套快捷鍵，同一個IDE，同一套插件，那麼結對編程將會是一件特別幸福的事情。和帥哥哥一塊兒編程仍是能夠學到不少東西的，嘻嘻～～

1、代碼快捷鍵

在 VScode 的首頁能夠設置通用快捷鍵，由於日常用sublime比較多，因此乾脆合併成一套。

2、代碼提示

1. Path Intellisense

自動路徑補全

2. Document this

js 的註釋模板 （注意：新版的 vscode 已經原生支持,在 function 上輸入 /** tab ）

3、代碼格式

1. ESlint

代碼規範，對不符合要求的代碼或者有語法錯誤的JS代碼進行提示，能夠自定製提示規則

2. HTMLHint

html代碼檢測

3. beautify

格式化代碼的工具

4、代碼可視化改善

1. colorize

可視化顏色哦，作組件涉及不少不一樣的主題，我的仍是蠻稀飯的

2. RegExp Preview and Editor

這個就厲害了.能夠完美的展現你寫的正則,圖形化給你看你寫正則的造成

3. Better Comments

最好用的註釋區域高亮,對於TODO這些支持也很好

4. BreadCrumb in StatusBar

----------------------------------------------------------------------------

華麗麗的分割線，如下插件根據框架語言選擇，用什麼裝什麼，不用就不要裝了，浪費內存

5、React 插件

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

涵蓋的代碼片斷賊豐富，React 相關代碼提示有這個就夠了

2. Useful React Snippets

固然若是你只用React,那用這個代碼提示吧，管夠了

3. CSS Blocks

支持css模塊化的智能提示，跳轉，牆裂推薦

4. styled-components-snippets 

styled-components的代碼片斷

6、Vue 插件

1. vetur

語法高亮、智能感知、Emmet 等

2. VueHelper

snippet 代碼片斷

3. Vue VSCode Snippets

很全面的vue代碼片斷

7、Node

1. eggjs

蛋框的相關幫助插件,代碼片斷,智能提示等

2. egg-jump-definition

蛋框的函數跳轉：Cmd+4

8、微信小程序

1. mpvue snippets

mpvue的一些代碼片斷,以及部分原生小程序的代碼提示

2. minapp

用VS Code寫小程序必備的插件,裏面有衆多實用的特性集成

9、Markdown 插件

1. Markdown All in One

Markdown 的提示插件用這一個足以，集成了語法快捷鍵、Math、預覽等，很實用

2. markdownlint

對 markdown 的語法格式規範進行代碼提示

10、代碼審查

1. CodeMetrics 

 能夠計算TS/JS內代碼的複雜度(好比函數這些),這些與代碼質量和性能是掛鉤的

2.Import Cost

就是你import一個東西的時候,能夠計算改引入模塊的大小!

3. Git Lens

暫時沒有發現比這個看git記錄更爲詳細了

11、其餘

下面的插件無關緊要，若有相應功能的需求，卻也是很是棒的插件

1. fileheader

頂部註釋模板，可定義做者、時間等信息，並會自動更新最後修改時間

ctrl+alt+i 

2. Paste JSON as Code

JSON 格式轉換成其餘的語言格式

3. Node.js Modules Intellisense

對於node_module的智能提示

4. npm-import-package-version

顯示導入的 npm 包的版本信息

5. File Tree View

提供幾個常見編程語言的函數或狀態的樹集合展現,能夠快速點擊跳轉!!

6. NPM-Scripts

在側邊欄可視化執行 npm 命令(項目內的 package.json),  小巧實用

7. :emojisense:

12、代碼片斷

兩種方式定義代碼片斷

• 菜單欄->文件->首選項->用戶代碼片斷
  
• ctrl+shift + p => snippet

toRem: 只是一個單純的描述

prefix: 是觸發snippet的簡寫

body: 是展開的代碼片斷

$1,$2：表示佔位符，用於用戶展開代碼片斷所須要替換的，也能夠寫成${1:label}鍵值對的方式

description : 用戶你在輸出snippet以前，方便本身識別的註釋，而不用強行記憶那些簡寫的

想找蘿蔔或者想找坑的童鞋，能夠加入咱們的 「前端內推羣」，裏面有BATJ等大廠的HR，同時也有精通React、Vue、Node、小程序的大佬。

若是加不進去，能夠請小妹喝杯咖啡，加我微信，我會拉你進去。(註明一下你的title哦）