我如何在兩天內創建一個代碼美化器

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

我一直在考慮構建一個新的代碼美化工具。這個想法並不獨特，但每次使用其他人的工具時，我都會發現自己一遍遍地重新應用相同的設置，並躲避廣告每次都是如此。 ??‍

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

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

查看成果

設計

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

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

底部，我創建了一個狀態欄，顯示有關代碼的實時統計信息，包括當前模式、縮進設置、行數、字符數和文檔大小（以字節為單位）。狀態欄的右側有“清除”和“清理並複制”按鈕。中間是炫耀我自己的服務的logo。

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

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

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

設置處理

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

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

 function saveSettings() {
  const settings = {};

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

每個設置都是一個數據屬性，它與localStorage同步。這是一種相當原始的狀態存儲方式，所以我以後可能會更新應用程序以使用狀態管理庫，例如Vuex。

要恢復設置，我有一個restoreSettings()函數，該函數在應用程序啟動時運行。

 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('加載之前的設置時出錯');
    }
  }
}

該函數從localStorage獲取設置，然後逐個應用它們，確保只導入settingsToStore中的有效設置。

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

應用主題

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

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

定義功能

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

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

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

我使用的工具和庫

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

 vue create beautify-code

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

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

執行所有美化工作的庫稱為JS Beautify，它處理JavaScript、HTML和CSS。 JS Beautify在客戶端運行，因此此應用程序實際上沒有後端——您的瀏覽器完成所有工作！

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

 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)

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

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

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

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

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

以上是我如何在兩天內創建一個代碼美化器的詳細內容。更多資訊請關注PHP中文網其他相關文章！