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

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

我一直在考虑构建一个新的代码美化工具。这个想法并不独特，但每次我使用别人的工具时，我都会发现自己需要重新应用相同的设置并避开广告每次。🤦🏻‍

我想要一个简单易用的工具，无需任何麻烦，所以上周我拿了一些纸开始勾勒出一个草图。我非常喜欢手绘线框图。铅笔和纸张之间有一种特殊的东西，可以让我的大脑设计部分比盯着屏幕工作得更好。

在绘制完线框图后，我立即获得了灵感。第二天，我从日常工作中抽出时间，把它变成了一个真实的东西。👨🏻‍💻

查看它

设计

我知道我希望代码编辑器成为该工具的重点，因此我在顶部创建了一个细长的菜单栏，用于控制模式（例如 HTML、CSS、JavaScript）和设置。我最终还添加了一个“关于”按钮。

编辑器本身占据了大部分屏幕，但它融合得很好，因此您不会真正注意到它。我没有浪费空间来添加说明，而是使用了一个占位符，当您开始键入时它会消失。

在底部，我创建了一个状态栏，显示有关代码的实时统计信息，包括当前模式、缩进设置、行数、字符数和文档大小（以字节为单位）。状态栏的右侧有“清除”和“清理并复制”按钮。中间有一个标志，厚颜无耻地宣传我自己的服务。

我认为没有多少开发人员真的在手机上编写代码，但无论如何我都希望它能够在移动设备上工作。除了常用的响应式技术之外，我还必须监视窗口大小并在屏幕变得太窄时调整选项卡位置。

我正在使用 flexbox 和视口单位进行垂直大小调整。除了一个小 iOS 问题外，这实际上很容易做到。这是一个展示基本线框图的示例。请注意文本区域如何拉伸以填充标题和页脚之间的未用空间。

查看 CodePen 上的示例
带标题和页脚的全页面文本编辑器，作者：Cory LaViska (@claviska)
在 CodePen 上。

如果您查看 JavaScript 选项卡，您将看到 iOS 问题和解决方法。我不确定如何对此类问题进行功能检测，因此目前它只是一个简单的设备检查。

处理设置

我希望最常用的设置易于访问，但也为每种模式公开高级设置。为此，我将设置按钮做成了一个弹出窗口，并在其中包含指向更高级设置的链接。当设置更改时，UI 会立即更新，并且设置会持久保存到 localStorage。

最常见的设置包含在一个小型面板中，可快速访问它们，而高级设置仍然可以通过面板中的链接访问。

我在这里利用了 Vue.js。每个设置都映射到一个数据属性，当其中一个更改时，UI 会更新（如果需要），并且我调用 saveSettings()。它的工作原理大致如下。

function saveSettings() {
  const settings = {};

  // settingsToStore is an array of property names that will be persisted
  // and "this" is referencing the current Vue model
  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('There was an error loading your previous settings');
    }
  }
}

该函数从 localStorage 中获取设置，然后逐一应用它们，确保仅导入 settingsToStore 中的有效设置。

“高级设置”链接会打开一个带有每个模式选项卡的对话框。尽管总共有 30 多个设置，但所有内容都井井有条且易于访问，因此用户不会感到不知所措。

应用主题

如今，暗模式非常流行，因此默认情况下已启用。对于那些喜欢它的人，还有一个浅色主题。UI 会完全更改，除了弹出窗口和对话框。

我考虑过使用 prefers-color-scheme，它最近恰好出现在 Firefox 67 中，但我决定切换按钮可能更好。浏览器对颜色主题首选项查询的支持还不太好，而且开发人员很奇怪。（例如，我使用的是带有浅色主题的 macOS，但我的文本编辑器是深色的。）

定义功能

想出功能创意相当容易。对于初始版本来说，限制功能才是困难的。以下是我立即发布的最相关功能

美化 HTML、CSS 和 JavaScript 代码
带有标签/括号匹配的语法高亮显示
粘贴或拖放文件以加载代码
根据粘贴的代码或拖放的文件自动检测缩进首选项
浅色和深色主题
一键清理并复制
键盘快捷键
大多数 JS 美化选项都可配置
设置会无限期地存储在 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。👨🏻‍💻

设计

处理设置

应用主题

定义功能

我使用的工具和库

评论