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了,好很差用,用了就知道。

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