微信小程序> VSCode折腾记-(14)再来推荐一波大前端适用系列(Node/React/Vue/小程序/主题/代码体验等)的插件

VSCode折腾记-(14)再来推荐一波大前端适用系列(Node/React/Vue/小程序/主题/代码体验等)的插件

浏览量:3994 时间: 来源:crper

前言

时隔半年,这期间我又搜罗了一波感觉比较好的插件,

依旧是那句话,好的插件需要作者去创造,时间去迭代…

废话不多说,直入主题;

插件集

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 : 针对vuets代码片段
  • 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了,好不好用,用了就知道。

有不对之处请留言,会及时更正…

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎