VS Code 折騰記 - (14) 再來推薦一波大前端適用系列 (Node/React/Vue/小程序/主題/代碼體驗等) 的插件

前言

時隔半年,這期間我又蒐羅了一波感受比較好的插件,

依舊是那句話,好的插件須要做者去創造,時間去迭代...

廢話很少說,直入主題;

插件集

React

• ES7 React/Redux/GraphQL/React-Native snippets :最好用的snippet彙總,很是全面,牆裂推薦!!!
• react-explorer-addons: 增長鼠標右鍵直接生成react的組件模板,好很差用,用過的才知道
• CSS Blocks: 支持css模塊化的智能提示,跳轉
• perfect-css-modules: css modules ,做用相似同上
• React PropTypes Intellisense: React props的智能提示
• vscode-styled-components: 對styled-componnents的支持,高亮包括智能提示
• styled-components-snippets : styled-components的代碼片斷

Vue

• Vue TypeScript Snippets : 針對vue的ts代碼片斷
• Axios Snippets : axios的默認api智能提示,ts/html/js/vue都支持..不支持react(看它的發包json)

Typescript

• Comments in Typescript: 針對TS的註釋插件,基於JSDoc定製
• Class IO : 能夠顯示引用類相關的關係(在代碼編輯區域顯示一個對應的標誌位)
• ClassLens : 快速跳轉到類的相關引用
• TSLens: tslens的gutter,可讓你更直觀的看到不一樣類型的引用,支持五種類型

GraphQL

• GraphQL: 讓VS Code支持GraphQL

Node

• npm-import-package-version : 在引入模塊的時候直接展現該模塊的版本,很實用!!
• eggjs: 蛋框的相關幫助插件,代碼片斷,智能提示等
• egg-jump-definition: 蛋框的函數跳轉

微信小程序

• mpvue snippets: mpvue的一些代碼片斷,以及部分原生小程序的代碼提示
• minapp : 用VS Code寫小程序必備的插件,裏面有衆多實用的特性集成

代碼測試

• js-test-gen-vscode : 能夠針對部分函數直接生成jest單元測試代碼
• Jest: 讓你寫Jest代碼有IDE的感受
• Mocha Test Explorer: 針對mocha測試的GUI話,會給編輯器多一個獨立的版塊
• Coverage Gutters : 能夠直觀的看到你代碼覆蓋率的區域

代碼可視化改善

• Polacode : 生成精美的代碼截圖,很漂亮,根據你當前主題配色生成的
• vscode-pigments: 代碼頁面展現顏色代碼並展現對應的顏色,很是實用
• Json Editor : 很是實用的可視化JSON編輯,不容錯過
• Subtle Match Brackets:快速高亮你配置的閉合,對於聚焦咱們的光標區塊代碼頗有幫助
• vscode-live-server : 很是全面的HTML預覽工具,支持衆多實際開發須要的特性,好比https,代理,cros
• Filter Line : 對於處理日誌文件,能夠快速篩選出咱們須要聚焦的內容
• Better Comments: 最好用的註釋區域高亮,對於TODO這些支持也很好
• :emojisense: : 可配置化(針對語言),智能提示emoji,很是實用..走過路過不要錯過
• Markdown Header Coloring : 給Markdown的標題區域添加一個亮瞎眼的顏色...
• BreadCrumb in StatusBar : 麪包屑的支持,在底部狀態欄展現

主題

主題這塊,蘿蔔青菜各有所愛,這些都是我用過感受都不錯的

• Eva Theme: 目前用的款式,很喜歡這個調調
• Outrun
• Night Owl
• Noctis
• Cobalt Next
• Beautiful UI

改善編碼體驗

• Vim : 王牌插件,讓vscode支持vim的經常使用特性,還集成幾種經常使用vim插件的特性,喜歡的不容錯過
• Class Helper : 對class快速編輯,支持ts,js,php
• Bash IDE: 對bash提供相似IDE的體驗,跳轉,智能提示這些
• JSON Helper : 提供大綱功能,能夠快速跳轉編輯
• Shortcut Menu Bar: 把幾個很經常使用的行爲作成圖標內置在編輯區域內,對於非快捷鍵熟練的小夥伴有所用處
• YAML Support by Red Hat Preview : 涵蓋了對YAML的校驗,智能提示,對於用這個寫配置文件的頗有用處
• indent-rainbow: 會給縮進添加一種顏色,讓你更加直觀的看到代碼層次
• Web Search: 選擇代碼內容,快速跳轉到搜索引擎,支持Google, DuckDuckGo, StackOverflow三種引擎,打開的是默認本地瀏覽器
• vscode-pdfviewer: 讓VS Code能夠閱讀PDF文檔,支持目錄這些
• Projects+: 項目管理必備插件,能夠快速錄入本地項目的地址,打開..很是實用

總結

VS Code目前依舊保持每月迭代一個版本,每一個版本都能看到改善的地方;

這裏也不比較其餘編輯器乃至IDE了,好很差用,用了就知道。

有不對之處請留言,會及時更正...