code snippets
Branch: master
Clone or download
Latest commit 299a705 Jul 4, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode init Jun 3, 2018
assets add gid & icons Jun 6, 2018
snippets add: 文档链接 Jun 26, 2018
uninstall v0.0.2 Jun 5, 2018
utils v1.0.5 - 去除冗余 & 修改文档 & 分类 Jun 7, 2018
.eslintrc.json init Jun 3, 2018
.gitignore init Jun 3, 2018
.vscodeignore init Jun 3, 2018
CHANGELOG.md v1.0.5 - 去除冗余 & 修改文档 & 分类 Jun 7, 2018
README.md Merge pull request #2 from morehardy/master Jul 4, 2018
extension.js v1.0.5 - 去除冗余 & 修改文档 & 分类 Jun 7, 2018
fork.Md add: table Jun 14, 2018
jsconfig.json init Jun 3, 2018
package-lock.json init Jun 3, 2018
package.json v1.0.6 publish Jul 4, 2018
version.js
vsc-extension-quickstart.md init Jun 3, 2018

README.md

code-rhythm

安装及使用可能遇到的问题

  • 如遇安装问题,请更新vscode

  • 安装后不能正常使用,如下处理:

    • 尝试重新启动vscode

    • 反馈部分情况下,会存在需要输入字符带下划线后,再删除下划线才能正常显示所有的代码提示,原因暂不确定,文档更新做说明

原因

写代码本身是件快乐的事情,但开发中总有各种烦恼。 有时候一个很简单的方法,因为不确定传参的形式,不确定返回形式,不确定具体用法,就得翻墙,搜索,查阅,读写没用的信息后获得用法示例。然后靠着示例去写代码。漫长的周折,仅仅是为了使用一个方法,又没快感。

代码补全不过是一个提示说明,也许作为一个为了提高效率的懒人,需要的是:直接给出demo,即改即用。

snippets + demo的小工具,让写代码更带感。

Bingo,这就是 code-rhythm

安装

打开vscode应用,搜索code-rhythm进行安装.或者快速搜索:

# mac通过 Command + P组合键打开搜索框
ext install code-rhythm

如遇到安装失败问题,请更新下vscode至最新版本(默认vscode会自动更新)。

使用

即看即用.

约定以@开头,根据需要来获demo,右侧有代码片段的介绍,方便快速查看。以下动图演示了快速获取js,moment,axios,antd等常用代码demo的方式.

注意:反馈部分情况下,会存在需要输入字符带下划线后,再删除下划线才能正常显示所有的代码提示,原因暂不明确。

代码示例介绍

@js

快捷 示例说明
@js_promise promise基本示例
@js_switch switch
@js_array.concat 数组合并
@js_array.every 检测数组中所有元素是否都大于x值
@js_array.forEach 数据遍历
@js_array.includes 数组是否包含某元素
@js_array.filter 数组返回符合指定条件的元素组
@js_array.indexOf 数组指定元素的序列
@js_array.join 转为字符串
@js_class_extends 继承示例
@js_class class基本示例
@js_async async用法
@js_function.apply 改变this,参数数组
@js_function.bind bind用法
@js_function.call call用法,参数依次传入
@js_object.defineProperties 定义属性
@js_object.defineProperty 单一属性
@js_object.freeze 冻结对象不能修改
@js_object.is 判断值是否相同
@js_object.keys 枚举:数组 & 对象
@js_object.values 返回数组:可枚举对象的values
@js_string.charAt 字符串指定索引内容
@js_string.concat 合并字符串
@js_string.endsWith boolen:是否以某字符串结尾
@js_string.includes boolen:是否包含字符
@js_string.match ary:匹配结果
@js_string.padEnd 尾填充
@js_string.padStart 头填充
@js_string.replace 替换
@js_string.slice 截取字符串
@js_string.split 分割成数组
@js_string.substr 返回指定长度字符串
@js_string.substring 索引范围内字符串
@js_string.low&up 大小写
@js_string.trim 去除空格
@js_array.from 类数组转为数组
@js_map 类Object对象
@js_async_all async并发
@js_async_promise_all 混合处理并发
@js_map_foreach map数据遍历
@js_object.hasOwnProperty 对象是否有某属性
@js_string.replace.reg 正则替换
@js_object_string obj转为string

@module

快捷 示例说明
@module_export es6模块导出
@module_import es6模块导入
@module_node_exports_children cmd导出子属性
@module_node_exports cmd导出默认模块

@reg

快捷 示例说明
@reg_email email验证
@reg_mobile 手机
@reg_id 身份证
@reg_chinese 中文
@reg_sentence 中英文及数字
@reg_url url

@axios

快捷 示例说明
@axios_get_base 基本get
@axios_get_params get参数形式
@axios_async es7异步写法
@axios_post_base 基本post
@axios_whole_config 完整配置
@axios_response_list 返回列表

@antd

快捷 示例说明
@antd_table_check 勾选框table
@antd_table_base 基本表格
@antd_table_nest_base 基本嵌套表格
@antd_form_base(login) 基本form表单(login)
@antd_modal_base 基本modal框
@antd_modal_confirm_warn modal基本确认警告框

@react

部分示例需要更新

快捷 示例说明
@react_comp_func func无状态组件
@react_comp_state_redux state组件with redux
@react_entry 入口 store,router,render
@react_comp_constructor base组件
@react_comp_ref 非受控组件ref
@react_comp_cycle 组件生命周期
@react_children 包含子组件写法
@react_proptypes_demo proptype校验
@react_img 插入图片
@react_img_folder 引入图片文件夹

@moment

快捷 示例说明
@moment_date 转为日期
@moment_convert 转为moment
@moment_compare 日期比较

@utils

包含了一些常用的小工具及设计模式

快捷 示例说明
@utils_data_format 日期时间格式化
@utils_countdown_simple 最简单倒计时
@utils_scroll_watch 滚动监听
@utils_scrolltop 返回顶部无动画
@utils_insertScript 动态插入script
@utils_getCookie 获取cookie
@utils_offset 距离document的位置
@utils_pattern_pub/sub 观察订阅模式
@utils_pattern_single 单体模式
@utils_pattern_factory 工厂模式
@utils_pattern_singleton 单例模式
@utils_pattern_adapter 交换头(适配器)模式
@utils_pattern_Decorator 装饰器:扩展现有接口
@utils_pattern_proxy 代理(缓存)模式.用于优化
@utils_pattern_flyweight 合并重复,非一般清爽
@utils_pattern_facade 外套模式,人模狗样
@utils_base64 base64转换
@utils_pattern_chain 链式写法
@utils_json_pretty_tab json美化形式
@utils_add_remove_class 增加删除类
@utils_data_type 判断数据类型

@element

element-UI 常见UI组件

快捷 示例说明
@element_radio 单选框
@element_radio_group 单选框组
@element_radio_group_button 按钮单选框组
@element_radio_border 带边框单选框组
@element_checkbox 多选框
@element_input 输入框
@element_input_icon 带icon输入框
@element_input_area 文本域
@element_input_complex 复合型输入框
@element_select 选择框
@element_select_group 分组选择框
@element_select_create_item 可创建条目选择框
@element_switch 开关
@element_slider 滑块
@element_time_picker 时间选择器
@element_date_picker 日期选择器
@element_date_rate 评级
@element_color_picker 颜色选择器
@element_form_validate 带验证表单
@element_table 表格
@element_table_multiple 多级表格
@element_table_filter 可筛选表格
@element_table_customer 自定义列表格
@element_table_toggle 可展开列表格
@element_tag 可删除标签
@element_tag_deleteable 可删除标签
@element_progress 标准进度条
@element_tree 树形表
@element_pagination 分页
@element_badge 标记
@element_alert 警告
@element_message 消息
@element_confirm 确认框
@element_notification 通知
@element_NavMenu 普通导航菜单
@element_NavMenu_vertical 纵向导航菜单
@element_tab 标准tab
@element_breadcrumb 面包屑
@element_drop 下拉菜单
@element_steps 步骤条
@element_dialog 对话框
@element_popover 弹出框
@element_card 卡片
@element_carousel 走马灯
@element_collapse 折叠面板

常见问题

Q:不想用了 A:直接卸载扩展,会随同将对应的代码示例删除。 目前测试vscode的禁用插件功能,可能由于异步机制存在问题,不一定能正确执行对应的禁用操作,所以建议直接卸载。

Q:不起作用 A:vscode扩展安装后需要重新加载,必要时重新打开应用

Q:作用范围 A:目前暂为全局

Q:会自动更新吗

A:vscode默认会自动更新所有扩展,可以在设置中更改

Q:下一步准备做什么 A:增加样式及其他常用工具类demo,逐步扩展,希望能多多贡献。