onvno / Code Rhythm
code snippets
Stars: ✭ 47
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Code Rhythm
Vscode Vlang
V Language extension for Visual Studio Code.
Stars: ✭ 190 (+304.26%)
Mutual labels: vscode, snippets
Vscode Es7 Javascript React Snippets
Extension for Javascript/React snippets with search supporting ES7 and babel features
Stars: ✭ 435 (+825.53%)
Mutual labels: vscode, snippets
Processing Vscode
A Visual Studio Code extension for the programming language Processing
Stars: ✭ 141 (+200%)
Mutual labels: vscode, snippets
Vscode Unity Code Snippets
All snippets for Unity3D development
Stars: ✭ 26 (-44.68%)
Mutual labels: vscode, snippets
Omi Snippets
🔖Visual Studio Code Syntax Highlighting For Single File React And Omi Components - 编写React和Omi单文件组件的VSC语法高亮插件
Stars: ✭ 149 (+217.02%)
Mutual labels: vscode, snippets
Vscode Vuehelper
🐵vscode插件，vue，vue-router和vuex的代码提示
Stars: ✭ 351 (+646.81%)
Mutual labels: vscode, snippets
Vscode Angular Typescript Snippets
Visual Studio Code TypeScript snippets (TypeScript, Html, Angular Material, Flex Layout, ngRx, RxJS & Testing) for Angular 5
Stars: ✭ 82 (+74.47%)
Mutual labels: vscode, snippets
Vscode Angular Snippets
Angular Snippets for VS Code
Stars: ✭ 530 (+1027.66%)
Mutual labels: vscode, snippets
Rocketseat Vscode Reactjs Snippets
Rocketseat ReactJS snippets for Visual Studio Code Editor
Stars: ✭ 136 (+189.36%)
Mutual labels: vscode, snippets
Vscode Smarty
Smarty syntax highlight extension for Visual Studio Code
Stars: ✭ 10 (-78.72%)
Mutual labels: vscode, snippets
Coddx Alpha
Coddx - a collection of tools that help developers program efficiently. One of the features is generating multiple files from templates quickly.
Stars: ✭ 132 (+180.85%)
Mutual labels: vscode, snippets
Rocketseat Vscode React Native Snippets
Rocketseat React Native snippets for Visual Studio Code Editor
Stars: ✭ 166 (+253.19%)
Mutual labels: vscode, snippets
Vscode Nestjs Snippets
💥 Vscode NestJS Code Snippets
Stars: ✭ 88 (+87.23%)
Mutual labels: vscode, snippets
Graphql For Vscode
GraphQL syntax highlighting, linting, auto-complete, and more!
Stars: ✭ 265 (+463.83%)
Mutual labels: vscode, snippets
Vue Vscode Snippets
These snippets were built to supercharge my workflow in the most seamless manner possible.
Stars: ✭ 1,083 (+2204.26%)
Mutual labels: vscode, snippets
Laravel Blade Snippets Vscode
Laravel blade snippets and syntax highlight support for Visual Studio Code
Stars: ✭ 80 (+70.21%)
Mutual labels: vscode, snippets
Vscode R
R Extension for Visual Studio Code (execution, snippet, lint, R documantation, R Markdown)
Stars: ✭ 445 (+846.81%)
Mutual labels: vscode, snippets
Snipsnap
The ultimate snippets collection for VS Code
Stars: ✭ 840 (+1687.23%)
Mutual labels: vscode, snippets
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_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_export | es6模块导出 |
| @module_import | es6模块导入 |
| @module_node_exports_children | cmd导出子属性 |
| @module_node_exports | cmd导出默认模块 |
| 快捷 | 示例说明 |
|---|---|
| @reg_email | email验证 |
| @reg_mobile | 手机 |
| @reg_id | 身份证 |
| @reg_chinese | 中文 |
| @reg_sentence | 中英文及数字 |
| @reg_url | url |
| 快捷 | 示例说明 |
|---|---|
| @axios_get_base | 基本get |
| @axios_get_params | get参数形式 |
| @axios_async | es7异步写法 |
| @axios_post_base | 基本post |
| @axios_whole_config | 完整配置 |
| @axios_response_list | 返回列表 |
| 快捷 | 示例说明 |
|---|---|
| @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_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_date | 转为日期 |
| @moment_convert | 转为moment |
| @moment_compare | 日期比较 |
包含了一些常用的小工具及设计模式
| 快捷 | 示例说明 |
|---|---|
| @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-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，逐步扩展，希望能多多贡献。
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].