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

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

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

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

查看成果

設(shè)計

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

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

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

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

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

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

設(shè)置處理

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

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

 function saveSettings() {
  const settings = {};

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

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

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

 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ù)從localStorage獲取設(shè)置，然後逐個應(yīng)用它們，確保只導(dǎo)入settingsToStore中的有效設(shè)置。

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

應(yīng)用主題

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

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

定義功能

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

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

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

我使用的工具和庫

我非常喜歡Vue.js。對於這個項目來說，它可能有點過分了，但是Vue CLI讓我可以通過一個簡單的命令開始使用所有最新的工具進行構(gòu)建。

 vue create beautify-code

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

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

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

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

 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)

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

我已經(jīng)多次被問到關(guān)於Prettier的問題，這是一個類似的工具，所以值得一提的是，我選擇JS Beautify是因為它不太武斷，而且更可配置。如果需求足夠大，我會考慮添加一個選項來在JS Beautify和Prettier之間切換。

我以前都使用過這些庫，因此集成實際上非常容易。 ?

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

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

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