我如何在两天内创建一个代码美化器

最近，我设计了一个代码美化工具的线框图。第二天，我决定把它变成一个真正的工具。整个项目不到两天就完成了。

我一直在考虑构建一个新的代码美化工具。这个想法并不独特，但每次使用其他人的工具时，我都会发现自己一遍遍地重新应用相同的设置，并躲避广告每次都是如此。??‍

我想要一个简单易用的工具，无需任何麻烦，所以上周我拿了一些纸，开始勾勒出一个线框图。我非常喜欢手工绘制线框图。用铅笔和纸来设计，我的大脑比盯着屏幕工作得更好。

绘制线框图后，我立刻受到了启发。第二天，我从日常工作中抽出时间，把它变成了现实。??‍?

查看成果

设计

我知道我希望代码编辑器成为工具的焦点，所以我顶部创建了一个纤薄的菜单栏，用于控制模式（例如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中文网其他相关文章！