Recently, I designed a wireframe diagram of a code beautification tool. The next day, I decided to turn it into a real tool. The entire project was completed in less than two days.

I've been thinking about building a new code beautification tool. The idea isn't unique, but every time I use someone else's tool, I find myself reapplying the same settings over and over again and avoiding ads every time . ???

I wanted a simple and easy-to-use tool without any hassle, so last week I took some paper and started sketching a wireframe. I really like to draw wireframes by hand. Designed with pencil and paper, my brain works better than staring at the screen.

I was immediately inspired after drawing the wireframe. The next day, I took time out of my daily work and turned it into reality. ????

View results

design

I know I want the code editor to be the focus of the tool, so I created a slim menu bar at the top for control modes (e.g. HTML, CSS, JavaScript) and settings. I also added an "About" button.

The editor itself takes up most of the screen, but it blends well with the background so you hardly notice it. Instead of using instructions to waste space, I used a placeholder that disappears when you start typing.

At the bottom, I created a status bar that displays real-time statistics about the code, including the current mode, indentation settings, line count, number of characters, and document size in bytes. There are Clear and Clean and Copy buttons on the right side of the status bar. In the middle is the logo showing off my own service.

I don't think many developers will write code on their phones, but I still want this tool to run on mobile devices. In addition to the commonly used responsive techniques, I also had to monitor the window size and adjust the tab position when the screen became too narrow.

I use flexbox and viewport units for vertical resizing. This is actually easy to do except for a little iOS problem. Here is a pen showing the basic wireframe. Note how the text area stretches to fill in the unused space between the title and the footer.

If you look at the JavaScript tab, you will see iOS problems and solutions. I'm not sure how to detect such a feature, so now it's just a simple device check.

Setting processing

I want the most commonly used settings to be easy to access, but also expose advanced settings for each mode. To do this, I made the settings button into a pop-up with links to more advanced settings. After changing the settings, the UI will be updated immediately and the settings will be saved to localStorage for a long time.

I'm using Vue.js here. Each setting is mapped to a data property, and when one of them changes, the UI updates (if needed) and I call saveSettings(). It's roughly like this.

 function saveSettings() {
  const settings = {};

  // settingsToStore is an array of attribute names that will be persisted // "this" refers to the current Vue model settingsToStore.map(key => settings[key] = this[key]);
  localStorage.setItem('settings', JSON.stringify(settings));
}

Each setting is a data property that is synchronized with localStorage. This is a rather primitive way of state storage, so I may update the application later to use state management libraries such as Vuex.

To restore settings, I have a restoreSettings() function that runs when the application starts.

 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('Error loading previous settings');
    }
  }
}

This function gets settings from localStorage and applies them one by one, making sure only valid settings in settingsToStore are imported.

The Advanced Settings link opens a dialog with each mode tab. Despite over 30 settings in total, everything is organized and accessible so users don’t feel overwhelmed.

Apply theme

Dark mode is very popular these days, so it is enabled by default. For those who like it, there is also a bright color theme. The entire UI will change except for popups and dialogs.

I've considered using prefers-color-scheme , which happened to be in Firefox 67 recently, but I decided to switch buttons might be better. The browser's support for color theme preference queries is not very good, and the developers are weird. (For example, I use macOS with a bright theme, but my text editor is dark.)

Define functions

It's easy to come up with a feature point. It is difficult to limit the features of the initial version. Here are the most relevant features I posted right away:

• Beautify HTML, CSS and JavaScript code
• Syntax highlighting with label/bracket matching
• Paste or drag and drop a file to load the code
• Automatically detect indentation preferences based on pasted code or drag-and-drop files
• Bright and dark themes
• One-click cleaning and copying
• Keyboard shortcuts
• Most JS Beautify options are configurable
• Settings are stored in localStorage indefinitely
• Minimal UI, no ads (just an inconspicuous publicity for my own service)?

I also added some easter eggs for fun. Try refreshing the page, exploring shortcuts, and sharing it on Facebook or Twitter to find them. ?

Tools and libraries I use

I really like Vue.js. It might be a bit too much for this project, but the Vue CLI allows me to start building with all the latest tools with a simple command.

 vue create beautiful-code

I didn't have to waste any time building scaffolding, which helped me build this tool quickly. In addition, Vue is very convenient in real-time statistics, changing themes, switching settings, etc. I've used various Element UI components such as buttons, form elements, popups, and dialogs.

The editor is powered by CodeMirror and uses custom styles. This is a well-supported and great project that I highly recommend for in-browser code editing.

The library that does all the beautification is called JS Beautify, which handles JavaScript, HTML, and CSS. JS Beautify runs on the client side, so this application doesn't actually have a backend – your browser does all the work!

JS Beautify is very easy to use. Install it using npm install js-beautify and run your code through the corresponding function.

 import beauty from 'js-beautify';

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

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

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

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

Each function returns a string containing the beautified code. You can change the output method of each language by passing in your own settings.

I've been asked several times about Prettier, which is a similar tool, so it's worth mentioning that I chose JS Beautify because it's not too arbitrary and more configurable. If the demand is large enough, I would consider adding an option to switch between JS Beautify and Prettier.

I've used these libraries before, so integration is actually very easy. ?

This project is thanks to my application Surreal CMS. If you are looking for an excellent CMS for static websites, check it out – it’s free for personal, educational and nonprofit sites!

Oh, if you want to know which editor I'm using...it's Visual Studio Code. ????

The above is the detailed content of How I Created a Code Beautifier in Two Days. For more information, please follow other related articles on the PHP Chinese website!