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

weixin_33809981發表於2018-07-08
前端ReactVue

前言

時隔半年,這期間我又蒐羅了一波感覺比較好的外掛,

依舊是那句話,好的外掛需要作者去創造,時間去迭代...

廢話不多說,直入主題;

  • 2018/7/10: 又追加了幾個比較實用的(留言以及最新發現的)

React

Vue

Typescript

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

GraphQL

Node

微信小程式

  • 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 : 麵包屑的支援,在底部狀態列展示

主題

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

改善編碼體驗

  • 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了..好不好用..用了就知道..

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

相關文章