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