最近，我設(shè)計(jì)了一個(gè)代碼美化工具的線框圖。第二天，我決定把它變成一個(gè)真正的工具。整個(gè)項(xiàng)目不到兩天就完成了。

我一直在考慮構(gòu)建一個(gè)新的代碼美化工具。這個(gè)想法並不獨(dú)特，但每次使用其他人的工具時(shí)，我都會(huì)發(fā)現(xiàn)自己一遍遍地重新應(yīng)用相同的設(shè)置，並躲避廣告每次都是如此。 ???

我想要一個(gè)簡(jiǎn)單易用的工具，無(wú)需任何麻煩，所以上週我拿了一些紙，開始勾勒出一個(gè)線框圖。我非常喜歡手工繪製線框圖。用鉛筆和紙來(lái)設(shè)計(jì)，我的大腦比盯著屏幕工作得更好。

繪製線框圖後，我立刻受到了啟發(fā)。第二天，我從日常工作中抽出時(shí)間，把它變成了現(xiàn)實(shí)。 ????

查看成果

設(shè)計(jì)

我知道我希望代碼編輯器成為工具的焦點(diǎn)，所以我頂部創(chuàng)建了一個(gè)纖薄的菜單欄，用於控制模式（例如HTML、CSS、JavaScript）和設(shè)置。我還添加了一個(gè)“關(guān)於”按鈕。

編輯器本身佔(zhàn)據(jù)了大部分屏幕，但它與背景融合得很好，所以你幾乎不會(huì)注意到它。我沒(méi)有使用說(shuō)明來(lái)浪費(fèi)空間，而是使用了一個(gè)佔(zhàn)位符，當(dāng)你開始輸入時(shí)它會(huì)消失。

底部，我創(chuàng)建了一個(gè)狀態(tài)欄，顯示有關(guān)代碼的實(shí)時(shí)統(tǒng)計(jì)信息，包括當(dāng)前模式、縮進(jìn)設(shè)置、行數(shù)、字符數(shù)和文檔大小（以字節(jié)為單位）。狀態(tài)欄的右側(cè)有“清除”和“清理並複制”按鈕。中間是炫耀我自己的服務(wù)的logo。

我認(rèn)為沒(méi)有多少開發(fā)人員會(huì)在手機(jī)上編寫代碼，但我仍然希望這個(gè)工具能在移動(dòng)設(shè)備上運(yùn)行。除了常用的響應(yīng)式技術(shù)外，我還必須監(jiān)視窗口大小，並在屏幕變得太窄時(shí)調(diào)整選項(xiàng)卡位置。

我使用flexbox和視口單位進(jìn)行垂直大小調(diào)整。除了一個(gè)小小的iOS問(wèn)題外，這實(shí)際上很容易做到。這裡有一個(gè)筆，展示了基本的線框圖。請(qǐng)注意，文本區(qū)域如何拉伸以填充標(biāo)題和頁(yè)腳之間的未使用空間。

如果你查看JavaScript選項(xiàng)卡，你會(huì)看到iOS問(wèn)題和解決方法。我不確定如何檢測(cè)這樣的功能，所以現(xiàn)在它只是一個(gè)簡(jiǎn)單的設(shè)備檢查。

設(shè)置處理

我希望最常用的設(shè)置易於訪問(wèn)，但也為每種模式公開高級(jí)設(shè)置。為此，我將設(shè)置按鈕做成一個(gè)彈出窗口，其中包含指向更高級(jí)設(shè)置的鏈接。更改設(shè)置後，UI會(huì)立即更新，設(shè)置會(huì)持久保存到localStorage。

我在這裡利用了Vue.js。每個(gè)設(shè)置都映射到一個(gè)數(shù)據(jù)屬性，當(dāng)其中一個(gè)更改時(shí)，UI會(huì)（如果需要）更新，我調(diào)用saveSettings()。它大致是這樣的。

 function saveSettings() {
  const settings = {};

  // settingsToStore是一個(gè)將被持久化的屬性名稱數(shù)組// “this”引用當(dāng)前的Vue模型settingsToStore.map(key => settings[key] = this[key]);
  localStorage.setItem('settings', JSON.stringify(settings));
}

每個(gè)設(shè)置都是一個(gè)數(shù)據(jù)屬性，它與localStorage同步。這是一種相當(dāng)原始的狀態(tài)存儲(chǔ)方式，所以我以後可能會(huì)更新應(yīng)用程序以使用狀態(tài)管理庫(kù)，例如Vuex。

要恢復(fù)設(shè)置，我有一個(gè)restoreSettings()函數(shù)，該函數(shù)在應(yīng)用程序啟動(dòng)時(shí)運(yùn)行。

 function restoreSettings() {
  const json = localStorage.getItem('settings');

  if (json) {
    try {
      const settings = JSON.parse(json);

      Object.keys(settings).forEach(key => {
        if (settingsToStore.includes(key)) {
          this[key] = settings[key];
        }
      });
    } catch (err) {
      window.alert('加載之前的設(shè)置時(shí)出錯(cuò)');
    }
  }
}

該函數(shù)從localStorage獲取設(shè)置，然後逐個(gè)應(yīng)用它們，確保只導(dǎo)入settingsToStore中的有效設(shè)置。

“高級(jí)設(shè)置”鏈接打開一個(gè)帶有每個(gè)模式選項(xiàng)卡的對(duì)話框。儘管總共有超過(guò)30個(gè)設(shè)置，但所有內(nèi)容都井然有序且易於訪問(wèn)，因此用戶不會(huì)感到不知所措。

應(yīng)用主題

如今，暗模式非常流行，因此默認(rèn)情況下它是啟用的。對(duì)於那些喜歡它的人，還有一個(gè)亮色主題。整個(gè)UI都會(huì)改變，除了彈出窗口和對(duì)話框。

我考慮過(guò)使用prefers-color-scheme ，它最近恰好在Firefox 67中出現(xiàn)，但我決定切換按鈕可能更好。瀏覽器對(duì)顏色主題首選項(xiàng)查詢的支持還不是很好，而且開發(fā)人員很奇怪。 （例如，我使用帶有亮色主題的macOS，但我的文本編輯器是暗色的。）

定義功能

想出功能點(diǎn)很容易。限制初始版本的特性很難。以下是我立即發(fā)布的最相關(guān)的功能：

• 美化HTML、CSS和JavaScript代碼
• 帶有標(biāo)籤/括號(hào)匹配的語(yǔ)法高亮
• 粘貼或拖放文件以加載代碼
• 基於粘貼的代碼或拖放的文件自動(dòng)檢測(cè)縮進(jìn)首選項(xiàng)
• 亮色和暗色主題
• 一鍵清理和復(fù)制
• 鍵盤快捷鍵
• 大多數(shù)JS Beautify選項(xiàng)都是可配置的
• 設(shè)置無(wú)限期存儲(chǔ)在localStorage中
• 最小的UI，沒(méi)有廣告（只是對(duì)我自己服務(wù)的不起眼的宣傳）?

我還添加了一些彩蛋以增加趣味性。嘗試刷新頁(yè)面、探索快捷鍵以及在Facebook或Twitter上分享它以找到它們。 ?

我使用的工具和庫(kù)

我非常喜歡Vue.js。對(duì)於這個(gè)項(xiàng)目來(lái)說(shuō)，它可能有點(diǎn)過(guò)分了，但是Vue CLI讓我可以通過(guò)一個(gè)簡(jiǎn)單的命令開始使用所有最新的工具進(jìn)行構(gòu)建。

 vue create beautify-code

我不必浪費(fèi)任何時(shí)間搭建腳手架，這幫助我快速構(gòu)建了這個(gè)工具。此外，Vue在實(shí)時(shí)統(tǒng)計(jì)、更改主題、切換設(shè)置等方面非常方便。我使用了各種Element UI組件，例如按鈕、表單元素、彈出窗口和對(duì)話框。

編輯器由CodeMirror提供支持，並使用自定義樣式。這是一個(gè)支持良好且很棒的項(xiàng)目，我強(qiáng)烈推薦用於瀏覽器內(nèi)代碼編輯。

執(zhí)行所有美化工作的庫(kù)稱為JS Beautify，它處理JavaScript、HTML和CSS。 JS Beautify在客戶端運(yùn)行，因此此應(yīng)用程序?qū)嶋H上沒(méi)有後端——您的瀏覽器完成所有工作！

JS Beautify非常易於使用。使用npm install js-beautify安裝它，然後通過(guò)相應(yīng)的函數(shù)運(yùn)行您的代碼。

 import beautify from 'js-beautify';

const code = 'Your code here';
const settings = {
  // Your settings here
};

// HTML
const html = beautify.html(code, settings)

// CSS
const css = beautify.css(code, settings)

// JavaScript
const js = beautify.js(code, settings)

每個(gè)函數(shù)都返回一個(gè)包含已美化代碼的字符串。您可以通過(guò)傳入您自己的設(shè)置來(lái)更改每種語(yǔ)言的輸出方式。

我已經(jīng)多次被問(wèn)到關(guān)於Prettier的問(wèn)題，這是一個(gè)類似的工具，所以值得一提的是，我選擇JS Beautify是因?yàn)樗惶鋽?，而且更可配置。如果需求足夠大，我?huì)考慮添加一個(gè)選項(xiàng)來(lái)在JS Beautify和Prettier之間切換。

我以前都使用過(guò)這些庫(kù)，因此集成實(shí)際上非常容易。 ?

這個(gè)項(xiàng)目得益於我的應(yīng)用程序Surreal CMS。如果您正在尋找一個(gè)適用於靜態(tài)網(wǎng)站的優(yōu)秀CMS，請(qǐng)查看一下——它對(duì)個(gè)人、教育和非營(yíng)利性網(wǎng)站免費(fèi)！

哦，如果您想知道我使用了哪個(gè)編輯器……它是Visual Studio Code。 ????

以上是我如何在兩天內(nèi)創(chuàng)建一個(gè)代碼美化器的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！