前言
時隔半年,這期間我又蒐羅了一波感覺比較好的外掛,
依舊是那句話,好的外掛需要作者去創造,時間去迭代…
廢話不多說,直入主題;
- 2018/7/10: 又追加了幾個比較實用的(留言以及最新發現的)
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了..好不好用..用了就知道..
有不對之處請留言,會及時更正…