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

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

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

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

結(jié)果を表示します

デザイン

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

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

下部に、現(xiàn)在のモード、インデント設(shè)定、行數(shù)、文字?jǐn)?shù)、ドキュメントサイズなど、コードに関するリアルタイム統(tǒng)計(jì)を表示するステータスバーを作成しました。ステータスバーの右側(cè)には、クリアでクリーンなボタンがあります。真ん中には、自分のサービスを披露するロゴがあります。

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

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

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

処理の設(shè)定

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

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

 function savesettings（）{
  const settings = {};

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

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

設(shè)定を復(fù)元するために、アプリケーションが開始されたときに実行される復(fù)元機(jī)能（）関數(shù)があります。

 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（ '以前の設(shè)定の読み込みエラー'）;
    }
  }
}

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

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

テーマを適用します

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

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

関數(shù)を定義します

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

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

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

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

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

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

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

編集者はCodemirrorを搭載しており、カスタムスタイルを使用しています。これは、ブラウザ內(nèi)のコード編集に強(qiáng)くお?jiǎng)幛幛筏蓼埂?/p>

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

JS Beautifyは非常に使いやすいです。 npm install js-beautify 、対応する関數(shù)を介してコードを?qū)g行します。

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

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

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

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

// javascript
const js = beautiful.js（コード、設(shè)定）

各関數(shù)は、美化されたコードを含む文字列を返します。獨(dú)自の設(shè)定を渡すことにより、各言語の出力方法を変更できます。

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

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

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

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

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