2日間でコードビューティファイアを作成する方法

最近、コード美化ツールのワイヤーフレーム図を設計しました。翌日、私はそれを本物のツールに変えることにしました。プロジェクト全体が2日以内に完了しました。

新しいコード美化ツールの構築を考えてきました。アイデアはユニークではありませんが、他の誰かのツールを使用するたびに、同じ設定を何度も何度も再適用し、毎回広告を避けています。 ?? ‍

手間をかけずにシンプルで使いやすいツールが欲しかったので、先週、紙を取り、ワイヤーフレームをスケッチし始めました。私は本当に手でワイヤーフレームを描くのが好きです。鉛筆と紙で設計された私の脳は、画面を見つめるよりもうまく機能します。

ワイヤーフレームを描いた後、私はすぐにインスピレーションを受けました。翌日、私は毎日の仕事から時間を取り、それを現実に変えました。 ??？

結果を表示します

デザイン

コードエディターをツールの焦点にしたいと思っているので、コントロールモード（HTML、CSS、JavaScriptなど）および設定用に上部にスリムなメニューバーを作成しました。また、「Arout」ボタンを追加しました。

編集者自体は画面の大部分を占有しますが、背景とうまくブレンドされているため、ほとんど気付かないことになります。指示を使用してスペースを無駄にする代わりに、入力を開始すると消えるプレースホルダーを使用しました。

下部に、現在のモード、インデント設定、行数、文字数、ドキュメントサイズなど、コードに関するリアルタイム統計を表示するステータスバーを作成しました。ステータスバーの右側には、クリアでクリーンなボタンがあります。真ん中には、自分のサービスを披露するロゴがあります。

多くの開発者が携帯電話にコードを書くことはないと思いますが、このツールがモバイルデバイスで実行されたいと考えています。一般的に使用されるレスポンシブテクニックに加えて、ウィンドウサイズを監視し、画面が狭くなりすぎたときにタブの位置を調整する必要がありました。

FlexBoxとViewPortユニットを使用して、垂直方向のサイズを変更します。これは実際には、小さなiOSの問題を除いて簡単です。これが基本的なワイヤーフレームを示すペンです。テキスト領域がどのように伸びて、タイトルとフッターの間の未使用スペースを埋める方法に注意してください。

JavaScriptタブを見ると、iOSの問題と解決策が表示されます。このような機能を検出する方法がわかりませんので、今では単純なデバイスチェックにすぎません。

処理の設定

最も一般的に使用される設定を簡単にアクセスできるだけでなく、各モードの高度な設定も公開したいと考えています。これを行うために、設定ボタンを作成し、より高度な設定へのリンクを備えたポップアップにしました。設定を変更した後、UIはすぐに更新され、設定は長い間LocalStorageに保存されます。

ここでvue.jsを使用しています。各設定はデータプロパティにマッピングされ、そのうちの1つが変更されると、UIの更新（必要に応じて）と私はSavesettings（）を呼び出します。それは大まかにこのようです。

 function savesettings（）{
  const settings = {};

  // SettingStostoreは、永続化される属性名の配列です
  localStorage.setItem（ 'settings'、json.stringify（settings））;
}

各設定は、LocalStorageと同期されるデータプロパティです。これはかなり原始的な州ストレージの方法であるため、後でアプリケーションを更新して、Vuexなどの州の管理ライブラリを使用することができます。

設定を復元するために、アプリケーションが開始されたときに実行される復元機能（）関数があります。

 function restoresettings（）{
  const json = localstorage.getitem（ 'settings'）;

  if（json）{
    試す {
      const settings = json.parse（json）;

      object.keys（settings）.foreach（key => {
        if（settingstostore.includes（key））{
          この[key] = settings [key];
        }
      }）;
    } catch（err）{
      window.alert（ '以前の設定の読み込みエラー'）;
    }
  }
}

この関数は、LocalStorageから設定を取得し、それらを1つずつ適用し、Settostoreの有効な設定のみがインポートされていることを確認します。

Advanced Settingsリンクは、各モードタブでダイアログを開きます。合計30を超える設定にもかかわらず、すべてが整理され、アクセス可能であるため、ユーザーは圧倒されません。

テーマを適用します

Dark Modeは最近非常に人気があるため、デフォルトで有効になっています。それが好きな人には、明るい色のテーマもあります。 UI全体がポップアップとダイアログを除いて変更されます。

私は最近Firefox 67に登場していたが、 prefers-color-schemeを使用することを検討しましたが、ボタンを切り替えることはより良いかもしれません。カラーテーマ選好クエリに対するブラウザのサポートはあまり良くなく、開発者は奇妙です。 （たとえば、私は明るいテーマでmacosを使用していますが、私のテキストエディターは暗いです。）

関数を定義します

機能ポイントを作成するのは簡単です。初期バージョンの機能を制限することは困難です。ここに私がすぐに投稿した最も関連性の高い機能は次のとおりです。

• HTML、CSS、JavaScriptコードをBeautify
• ラベル/ブラケットのマッチングで強調表示されます
• ファイルを貼り付けてドラッグアンドドロップしてコードをロードします
• 貼り付けられたコードまたはドラッグアンドドロップファイルに基づいてインデンテーション設定を自動的に検出する
• 明るく暗いテーマ
• ワンクリッククリーニングとコピー
• キーボードショートカット
• ほとんどのJS Beautifyオプションは構成可能です
• 設定は、LocalStorageに無期限に保存されます
• 最小限のUI、広告なし（私自身のサービスに対する目立たない宣伝）？

また、楽しみのためにイースターエッグを追加しました。ページを更新し、ショートカットを探索し、FacebookやTwitterで共有して、それらを見つけてみてください。 ？

私が使用するツールとライブラリ

私はvue.jsが本当に好きですこのプロジェクトには少し多すぎるかもしれませんが、Vue CLIでは、簡単なコマンドで最新のすべてのツールを使用して構築を開始できます。

 Vueは美しいコードを作成します

私は時間の構築の足場を無駄にする必要はなかったので、このツールを迅速に構築するのに役立ちました。さらに、VUEは、リアルタイムの統計、テーマの変更、スイッチング設定などで非常に便利です。ボタン、フォーム要素、ポップアップ、ダイアログなどのさまざまな要素UIコンポーネントを使用しました。

編集者はCodemirrorを搭載しており、カスタムスタイルを使用しています。これは、ブラウザ内のコード編集に強くお勧めします。

すべての美化を行うライブラリは、JavaScript、HTML、およびCSSを処理するJS Beautifyと呼ばれます。 JS Beautifyはクライアント側で実行されるため、このアプリケーションには実際にはバックエンドがありません。ブラウザはすべての作業を行います。

JS Beautifyは非常に使いやすいです。 npm install js-beautify 、対応する関数を介してコードを実行します。

 「js-beautify」から美しさをインポートします。

const code = 'ここにコード';
const settings = {
  //ここの設定
};

// html
const html = beautiful.html（code、settings）

// CSS
const css = beautiful.css（code、settings）

// javascript
const js = beautiful.js（コード、設定）

各関数は、美化されたコードを含む文字列を返します。独自の設定を渡すことにより、各言語の出力方法を変更できます。

私は同様のツールであるきれいなことについて何度か尋ねられたので、JS Beautifyを選んだことは、それがあまりにもarbitrary意的で構成可能ではないので、私が選択したことを言及する価値があります。需要が十分に大きい場合は、JS Beautifyとよりきれいなものを切り替えるオプションを追加することを検討します。

これらのライブラリを以前に使用したことがあるので、統合は実際には非常に簡単です。 ？

このプロジェクトは、私のアプリケーションのシュールなCMSのおかげです。静的なWebサイト用の優れたCMSを探している場合は、それをチェックしてください。個人、教育、非営利のサイトは無料です。

ああ、私が使用しているエディターを知りたい場合は...それがビジュアルスタジオコードです。 ??？

以上が2日間でコードビューティファイアを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。