Possible problems in installation and use

  • In case of installation problems, please update vscode
  • If the installation fails, handle the problem as follows:
    • Try restarting vscode
    • In the feedback part of the case, there will be input characters with underscores, and then delete the underscores to display all code prompts normally, the reason is not confirmed, the document will be updated to explain

The project address

Github – onvno/code-rhythm


Writing code is fun in and of itself, but development is always a hassle. Sometimes it’s very simple, because you’re not sure what form you’re going to pass, you’re not sure what form you’re going to return, you’re not sure how you’re going to use it, you have to go over the wall, search, look up, read some useless information and get a usage example, and then you write code based on that example. Long twists and turns, just to use a method, and no pleasure.

Code completion is just a reminder of what a lazy person might need to do to improve their efficiency: give the demo directly and use it as it changes.

Snippets + Demo widget to make writing code more fun.

Bingo, this is code-rhythm

The installation

Open the vscode app and search code-rhythm to install. Or a quick search:

# MAC opens the search box with Command + P
ext install code-rhythm
Copy the code


Read and use.

The convention begins with @, according to the need to get the demo, the right side of the introduction of code snippets, easy to view quickly. The following GIF shows how to quickly get js,moment, Axios, ANTD, and other common code demos.

Note: At present, only MAC has been tested. It is not known whether there are compatibility problems under Windows

Introduction to code Examples


quick example
@js_promise Basic Promise Examples
@js_switch switch
@js_array.concat An array of merger
@js_array.every Checks if all elements in the array are greater than the x value
@js_array.forEach Data traversal
@js_array.includes Whether an array contains an element
@js_array.filter Array returns the group of elements that meet the specified criteria
@js_array.indexOf An array specifies a sequence of elements
@js_array.join Convert to string
@js_class_extends Inheriting the sample
@js_class Class basic Example
@js_async Async usage
@js_function.apply Change this, the parameter array
@js_function.bind Use the bind
@js_function.call Call usage, the arguments are passed in sequence
@js_object.defineProperties Custom properties
@js_object.defineProperty A single attribute
@js_object.freeze Frozen objects cannot be modified
@js_object.is Check whether the values are the same
@js_object.keys Enumeration: arrays & objects
@js_object.values Returns an array: values of an enumerable object
@js_string.charAt String specifies the index content
@js_string.concat Merge string
@js_string.endsWith Boolen: BoolEN or not to end with a string
@js_string.includes Boolen: Whether to contain characters
@js_string.match Ary: matching result
@js_string.padEnd The tail filling
@js_string.padStart Head filling
@js_string.replace replace
@js_string.slice Intercept string
@js_string.split Split into arrays
@js_string.substr Returns a string of the specified length
@js_string.substring String in index range
@js_string.low&up case
@js_string.trim Remove the blank space
@js_array.from Class array to array
@js_map The class Object
@js_async_all Async concurrent
@js_async_promise_all Mixed processing concurrency
@js_map_foreach Map data traversal
@js_object.hasOwnProperty Whether the object has a property
@js_string.replace.reg Regular replacement
@js_object_string Obj to a string


quick example
@module_export Export the ES6 module
@module_import Es6 module import
@module_node_exports_children CMD exports child properties
@module_node_exports CMD exports the default module


quick example
@reg_email Email confirmation
@reg_mobile Mobile phone
@reg_id Id card
@reg_chinese Chinese
@reg_sentence English and Figures
@reg_url url


quick example
@axios_get_base Basic get
@axios_get_params Get argument form
@axios_async Es7 Asynchronous
@axios_post_base Basic post
@axios_whole_config Complete configuration
@axios_response_list Returns a list of


quick example
@antd_table_check Check box table
@antd_table_base The basic form
@antd_table_nest_base Basically nested tables
@antd_form_base(login) Basic Form form (login)
@antd_modal_base Basic modal dialog
@antd_modal_confirm_warn Modal Basic confirmation warning box


Some examples need to be updated

quick example
@react_comp_func Func stateless components
@react_comp_state_redux State component with Redux
@react_entry The entrance to the store, the router, and render
@react_comp_constructor The base components
@react_comp_ref Uncontrolled component ref
@react_comp_cycle Component life cycle
@react_children Contains subcomponent notation
@react_proptypes_demo Proptype check
@react_img Insert the picture
@react_img_folder Import images folder


quick example
@moment_date To date,
@moment_convert To my moment
@moment_compare Date is


Contains some common gadgets and design patterns

quick example
@utils_data_format Date and time formatting
@utils_countdown_simple Simplest countdown
@utils_scroll_watch Scroll to monitor
@utils_scrolltop Return to top without animation
@utils_insertScript Dynamically inserting script
@utils_getCookie To get a cookie
@utils_offset Distance from document
@utils_pattern_pub/sub Observe the subscription model
@utils_pattern_single A singleton
@utils_pattern_factory The factory pattern
@utils_pattern_singleton The singleton pattern
@utils_pattern_adapter Switch head (adapter) pattern
@utils_pattern_Decorator Decorator: Extends an existing interface
@utils_pattern_proxy Proxy (cache) mode. To optimize
@utils_pattern_flyweight Merge repetition, not generally refreshing
@utils_pattern_facade Coat pattern, like a dog
@utils_base64 Base64 conversion
@utils_pattern_chain The chain of writing
@utils_json_pretty_tab Json embellished form
@utils_add_remove_class Add delete class
@utils_data_type Determine the data type


A: Uninstall the extension directly, and the corresponding code sample will be removed along with it. Currently, we are testing the function of vscode to disable the plug-in. However, due to problems with the asynchronous mechanism, the corresponding disabling operation may not be executed correctly. Therefore, it is recommended to uninstall the plug-in directly.

Q: this extension does not work. A: The vscode extension needs to be reloaded after installation

Q: Scope A: This parameter is global

Q: What do you plan to do next A: Add style and other common tool classes demo, gradually expand, hope to contribute more.