安裝及使用可能遇到的問題
- 如遇安裝問題，請更新vscode
- 安裝後不能正常使用，如下處理：
- 嘗試重新啟動vscode
- 反饋部分情況下，會存在需要輸入字元帶下劃線後，再刪除下劃線才能正常顯示所有的程式碼提示，原因暫不確定，文件更新做說明
專案地址
原因
寫程式碼本身是件快樂的事情，但開發中總有各種煩惱。
有時候一個很簡單的方法，因為不確定傳參的形式，不確定返回形式，不確定具體用法，就得翻牆，搜尋，查閱，讀些沒用的資訊後獲得用法示例，然後靠著示例去寫程式碼。漫長的周折，僅僅是為了使用一個方法，又沒快感。
程式碼補全不過是一個提示說明，也許作為一個為了提高效率的懶人，需要的是：直接給出demo，即改即用。
snippets + demo的小工具，讓寫程式碼更帶感。
Bingo，這就是 code-rhythm
安裝
開啟vscode應用，搜尋code-rhythm進行安裝.或者快速搜尋：
# mac通過 Command + P組合鍵開啟搜尋框
ext install code-rhythm
複製程式碼使用
即看即用.
約定以
@開頭，根據需要來獲demo,右側有程式碼片段的介紹，方便快速檢視。以下動圖演示了快速獲取js,moment,axios,antd等常用程式碼demo的方式.
注：目前僅對mac做了測試，window下是否有相容問題暫未知曉
程式碼示例介紹
@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 | 判斷資料型別 |
常見問題
Q：不想用了
A：直接解除安裝擴充套件，會隨同將對應的程式碼示例刪除。
目前測試vscode的禁用外掛功能，可能由於非同步機制存在問題，不一定能正確執行對應的禁用操作，所以建議直接解除安裝。
Q：不起作用
A：vscode擴充套件安裝後需要重新載入
Q：作用範圍
A：目前暫為全域性
Q：下一步準備做什麼
A：增加樣式及其他常用工具類demo，逐步擴充套件，希望能多多貢獻。