轉載：VScode 好用插件集合

 

--------------------- 
做者：JayveeWong 
來源：CSDN 
原文：https://blog.csdn.net/weixin_42776111/article/details/86483630 
版權聲明：本文爲博主原創文章，轉載請附上博文連接！

 

什麼是VScode
　　Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎全部主流的開發語言的語法高亮、智能代碼補全、自定義快捷鍵、括號匹配和顏色區分、代碼片斷、代碼對比 Diff、GIT命令 等特性，支持插件擴展，並針對網頁開發和雲端應用開發作了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之做......

 

VSCode 下載地址：https://code.visualstudio.com/

 

根據調查發現，VScode 和 sublime 是前端開發者比較喜歡的 IDE 。相對與這兩個軟件，我更喜歡的實際上是 VSCode ，本博文就記錄一下比較好用的 VSCode 插件。

 

VSCode 插件

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

 

 

代碼提示
Path Intellisense

自動路徑補全

 

 

Document this

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

 

代碼格式
 ESlint

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

 

HTMLHint

html代碼檢測。

 

 

beautify

格式化代碼的工具。

代碼可視化改善
colorize

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

 

 

RegExp Preview and Editor

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

 

 

Better Comments

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

 

BreadCrumb in StatusBar

 

 

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

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

React 插件
ES7 React/Redux/GraphQL/React-Native snippets

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

 

Useful React Snippets

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

 

CSS Blocks

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

 

 

styled-components-snippets

styled-components 的代碼片斷。

Vue 插件
vetur

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

 

VueHelper

snippet 代碼片斷。

 

 

Vue VSCode Snippets

很全面的vue代碼片斷。

 

 

Node
eggjs

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

 

　

　　

 

egg-jump-definition

蛋框的函數跳轉：Cmd+4。

 

微信小程序
mpvue snippets

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

 

minapp

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

Markdown 插件
Markdown All in One

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

 

markdownlint

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

代碼審查
CodeMetrics

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

 

 

Import Cost

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

 

 

Git Lens

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

 

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

fileheader

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

1

ctrl+alt+i

 

 

Paste JSON as Code

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

 

 

Node.js Modules Intellisense

對於 node_module 的智能提示 。

 

 

npm-import-package-version

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

 

 

File Tree View

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

 

NPM-Scripts

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

 

 

:emojisense: