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

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