js-beautify を使ったコード整形ツールを Angular アプリとして作った

HTML・CSS・SCSS・JavaScript・JSON あたりをサクッと整形してくれるツールが欲しく、かといって色々なオンラインサービスをいちいち開くのもダルいので、希望のツールを自分で作ってみた。

• Angular Utilities - JavaScript Beautifier … JSON 整形にも対応
• Angular Utilities - HTML Beautifier … style・script 要素内の CSS・JS の整形にも対応
• Angular Utilities - CSS Beautifier … SCSS 整形にも対応

整形には js-beautify という npm パッケージを使っている。

• GitHub - beautify-web/js-beautify: Beautifier for javascript

名前は js-beautify だが、CSS と HTML の整形機能も持っているので、3種類の整形ツールが一気に作れたというワケ。「JSON や SCSS にも対応」と書いたが、たまたまイイカンジに整形できているだけで、js-beautify が対応しているとは書いていなかった。

ESLint みたいに各ルールを細かく設定できるワケではないが、「jslint-happy モード」という少し厳格なルールプリセットを適用してくれるモードがあったりする。

テキストの入力欄は [(ngModel)] で、出力欄は readonly 設定したテキストエリアに [value] でバインディング。DoCheck および ngDoCheck() を利用すると、コンポーネント中でバインディングしているデータに変更が入ったタイミングを検知してイベントが発火するので、コレを使って整形テキストを出力している。

import { Component, DoCheck } from '@angular/core';
import * as jsBeautify from 'js-beautify';

@Component({ /* 中略 */ })
export class BeautifierComponent implements DoCheck {
  /** 入力値 */
  public input: string = '';
  /** 出力値 */
  public output: string = '';
  /** 入力値の変更時に整形したテキストを出力する */
  public ngDoCheck(): void {
    // HTML 整形の時は jsBeautify.html()、CSS 整形の時は jsBeautify.css() を使う
    this.output = jsBeautify.js(this.input, { /* js-beautify 設定 */ });
  }
}

3画面ともほぼこのような作りなので、jsBeautify の関数名 (js・html・css のいずれか) と整形オプションを @Input で渡せる、共通コンポーネントを作って実装した。

試した限りだと、js-beautify は上手く変換できないテキストを渡しても例外を投げたりはしないようなので、try / catch などは用意していない。

コレでとりあえず欲しいモノができた。簡単簡単。