小編平時看代碼，最討厭看到那種沒什麼註釋、不規範、結構亂七八糟的代碼，看起來是真累。
在小編看來，保持整潔的編碼習慣，不僅有助於後來者對代碼含義的快速理解和定位，也可以幫助作者進行問題的定位及修復，哪怕過了再久，都可以快速上手，利人利己。
但往往編碼習慣這個東東，靠的是程序猿的自覺自律，那有沒有什麼輔助工具可以幫助大家編寫更規範有效的代碼呢？
AppWorks，就是今天小編要給大家介紹一款編碼利器，通過可視化編程和編碼輔助手段，更快更好地構建多端應用，支持 Web 、HTML 5 和小程序應用。
作爲一個輔助工具，AppWorks 編碼輔助提供了代碼自動補全、代碼信息提示和代碼重構等功能。
以代碼自動補全爲例，在開發者編寫代碼的過程中，自動預測開發者的編程意圖，連續向開發者推薦「即將書寫的下一段代碼」，開發者可以通過「一鍵補全」的方式，直接確認接下來要輸入的代碼，從而大大提升代碼的編寫效率。例如輸入樣式字段和值時，AppWorks 提供的代碼自動補全效果如下：
這裏可能有小夥伴擔心這個自動補全功能的實用性，小編自己用下來的感覺，AppWorks 的代碼自動補全能力基於語言語義和源代碼分析，完全本地執行，確保代碼安全；毫秒級響應，流暢進行編碼！
除了輔助功能，AppWorks還提供可視化開發，基於海量的物料和可視化消費物料的方式提升多端應用的開發效率。
例如，你可以使用模板快速創建項目；可以使用物料面板，將一些精品物料添加到項目當中。
如果已有的物料不能滿足你的需求，AppWorks 還提供了從生產到消費的自定義物料開發鏈路，完全打造業務專屬的物料庫。
對於差不多編完的代碼，AppWorks還提供一個編碼質效功能，包括質量檢查修復和編程時間管理兩個基本功能。
基於大量的企業級項目實踐，產出了質量評估模型，它能夠爲項目生成質量報告，並提供了修復相關質量問題的方法。編程時間管理則是通過自動跟蹤開發者的編碼活動從而度量開發者編碼效率的功能，它能夠幫助開發者回顧自己的編碼活動，生成編碼效率報告並給予相關的提效建議。
AppWorks使用十分簡單，點擊活動欄上的 AppWorks 圖標，打開側邊欄和創建應用流程：
應用創建完成，在 AppWorks 側邊欄上進行 npm 腳本執行、創建組件、生成頁面等操作：
AppWorks包含內容豐富的自研插件：
像自研插件有：
| 插件 | 簡介 |
|---|---|
| 應用管理器 | 從 UI 組織視角預覽應用的組織，提供 AppWorks 快速操作入口 |
| 創建應用 | 通過界面引導，使用模板創建多端應用 |
| 樣式開發輔助 | 提供在 JSX 內編寫行內樣式或使用 SASS/Less 等 CSS 預處理語言的代碼編輯智能輔助 |
| 組件開發輔助 | 更快更好地添加組件、編寫組件屬性 |
| 代碼更新輔助 | 一個幫助您進行大規模代碼庫重構的工具，這些重構是自動化的，但也提供了人爲監督和偶爾干預的方式。 |
| 質量檢測 | 安全和質量審覈工具，快速檢測到應用程序和基礎庫代碼中的各種安全漏洞和質量問題 |
| 時間管理 | 通過自動跟蹤您的編碼活動從而度量您的編碼效率 |
| 代碼重構 | 更簡單地重構你的 React / Rax 組件 |
其中，像質量檢測插件就是一個免費的安全和質量審覈工具。藉助基於集成多掃描儀 @appworks/doctor 的設計， 可以在一次掃描中快速檢測到應用程序和基礎庫代碼中的各種安全漏洞和質量問題，而無需訪問任何遠程服務！你可以一鍵修復所有報告的問題，或者導航到源代碼逐條來修復。
同時，AppWorks裏的第三方插件也不少：
-
GitLens: 增強 VS Code 中內置的 Git 功能 -
Code Spell Checker: 英文拼寫檢查器 -
ESLint: ESLint 配套的檢查器 -
stylelint: stylelint 配套的檢查器 -
Prettier: 代碼格式化工具 -
Auto Complete Tag: 自動閉合和重命名標籤 -
JavaScript (ES6) code snippets: ES6 語法的 JavaScript 代碼片段 -
Simple React Snippets: React 代碼片段 -
Code Runner: 快速運行文件和代碼片段，支持多種開發語言. -
Bookmarks: 源碼閱讀神器
更多的詳細內容，建議直接試用一下體驗一下，發掘各種實用功能，一起來吧：
點擊下方卡片，關注公衆號“TJ君”
回覆“輔助工具”，獲取項目地址
本文分享自微信公衆號 - 程序猿DD（didispace）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。