Baru -baru ini, saya merancang gambarajah wireframe alat pengindahan kod. Keesokan harinya, saya memutuskan untuk menjadikannya alat sebenar. Seluruh projek telah siap dalam masa kurang dari dua hari.

Saya telah berfikir tentang membina alat pengindahan kod baru. Idea ini tidak unik, tetapi setiap kali saya menggunakan alat orang lain, saya mendapati diri saya memohon semula tetapan yang sama berulang kali dan mengelakkan iklan setiap kali . ?? ?

Saya mahukan alat yang mudah dan mudah digunakan tanpa sebarang masalah, jadi minggu lepas saya mengambil beberapa kertas dan mula melukis wireframe. Saya sangat suka melukis wireframes dengan tangan. Direka dengan pensil dan kertas, otak saya berfungsi lebih baik daripada menatap skrin.

Saya segera diilhamkan selepas melukis wireframe. Keesokan harinya, saya mengambil masa keluar dari kerja harian saya dan menjadikannya realiti. ????

Lihat Keputusan

reka bentuk

Saya tahu saya mahu editor kod menjadi tumpuan alat, jadi saya membuat bar menu tipis di bahagian atas untuk mod kawalan (mis. HTML, CSS, JavaScript) dan tetapan. Saya juga menambah butang "Mengenai".

Editor itu sendiri mengambil sebahagian besar skrin, tetapi ia menggabungkan dengan baik dengan latar belakang supaya anda tidak menyedarinya. Daripada menggunakan arahan untuk membuang ruang, saya menggunakan pemegang tempat yang hilang apabila anda mula menaip.

Di bahagian bawah, saya mencipta bar status yang memaparkan statistik masa nyata mengenai kod, termasuk mod semasa, tetapan lekukan, kiraan talian, bilangan aksara, dan saiz dokumen dalam bait. Terdapat butang yang jelas dan bersih dan salin di sebelah kanan bar status. Di tengah -tengah adalah logo yang memamerkan perkhidmatan saya sendiri.

Saya tidak fikir ramai pemaju akan menulis kod pada telefon mereka, tetapi saya masih mahu alat ini dijalankan pada peranti mudah alih. Sebagai tambahan kepada teknik responsif yang biasa digunakan, saya juga perlu memantau saiz tetingkap dan menyesuaikan kedudukan tab apabila skrin menjadi terlalu sempit.

Saya menggunakan unit Flexbox dan Viewport untuk saiz semula menegak. Ini sebenarnya mudah dilakukan kecuali sedikit masalah iOS. Berikut adalah pen yang menunjukkan wireframe asas. Perhatikan bagaimana kawasan teks terbentang untuk mengisi ruang yang tidak digunakan antara tajuk dan footer.

Jika anda melihat tab JavaScript, anda akan melihat masalah dan penyelesaian iOS. Saya tidak pasti bagaimana untuk mengesan ciri sedemikian, jadi sekarang ini hanya pemeriksaan peranti mudah.

Menetapkan pemprosesan

Saya mahu tetapan yang paling biasa digunakan untuk menjadi mudah diakses, tetapi juga mendedahkan tetapan lanjutan untuk setiap mod. Untuk melakukan ini, saya membuat butang Tetapan ke dalam pop timbul dengan pautan ke tetapan yang lebih maju. Selepas menukar tetapan, UI akan dikemas kini dengan serta -merta dan tetapan akan disimpan ke LocalStorage untuk masa yang lama.

Saya menggunakan vue.js di sini. Setiap tetapan dipetakan ke harta data, dan apabila salah satu daripada mereka berubah, kemas kini UI (jika diperlukan) dan saya panggil SaveSettings (). Ia kira -kira seperti ini.

 fungsi savesettings () {
  tetapan const = {};

  // SettingStortore adalah pelbagai nama atribut yang akan berterusan // "ini" merujuk kepada model Vue semasaStostore.map (key => tetapan [key] = ini [kunci]);
  localStorage.setItem ('Tetapan', JSON.Stringify (Tetapan));
}

Setiap tetapan adalah harta data yang disegerakkan dengan localStorage. Ini adalah cara penyimpanan negara yang agak primitif, jadi saya boleh mengemas kini permohonan kemudian menggunakan perpustakaan pengurusan negeri seperti VUEX.

Untuk memulihkan tetapan, saya mempunyai fungsi pemulihan () yang berjalan apabila aplikasi bermula.

 fungsi restoresettings () {
  const json = localStorage.getItem ('Tetapan');

  jika (json) {
    Cuba {
      setting const = json.parse (json);

      Object.keys (tetapan) .foreach (key => {
        jika (settingStortore.includes (kunci)) {
          Ini [kunci] = tetapan [kunci];
        }
      });
    } menangkap (err) {
      window.alert ('Ralat memuatkan tetapan sebelumnya');
    }
  }
}

Fungsi ini mendapat tetapan dari LocalStorage dan menggunakannya satu demi satu, pastikan hanya tetapan yang sah di settostore diimport.

Pautan Tetapan Lanjutan membuka dialog dengan setiap tab Mod. Walaupun lebih daripada 30 tetapan secara keseluruhan, semuanya dianjurkan dan boleh diakses supaya pengguna tidak merasa terharu.

Sapukan tema

Mod gelap sangat popular pada hari -hari ini, jadi ia didayakan secara lalai. Bagi mereka yang menyukainya, terdapat juga tema warna yang cerah. Seluruh UI akan berubah kecuali popup dan dialog.

Saya telah mempertimbangkan untuk menggunakan prefers-color-scheme , yang berlaku di Firefox 67 baru-baru ini, tetapi saya memutuskan untuk menukar butang mungkin lebih baik. Sokongan penyemak imbas untuk pertanyaan keutamaan tema warna tidak begitu baik, dan pemaju pelik. (Sebagai contoh, saya menggunakan macOS dengan tema yang cerah, tetapi editor teks saya gelap.)

Tentukan fungsi

Sangat mudah untuk menghasilkan titik ciri. Sukar untuk mengehadkan ciri -ciri versi awal. Berikut adalah ciri -ciri yang paling relevan yang saya hantar segera:

• Mencantikkan kod HTML, CSS dan JavaScript
• Sintaks yang menyoroti dengan padanan label/pendakap
• Tampal atau seret dan jatuhkan fail untuk memuatkan kod
• Mengesan keutamaan lekukan secara automatik berdasarkan kod yang disisipkan atau fail drag-and-drop
• Tema cerah dan gelap
• Satu klik pembersihan dan penyalinan
• Pintasan papan kekunci
• Kebanyakan pilihan JS mencantikkan boleh dikonfigurasikan
• Tetapan disimpan di localStorage selama -lamanya
• UI yang minimum, tiada iklan (hanya publisiti yang tidak mencolok untuk perkhidmatan saya sendiri)?

Saya juga menambah beberapa telur Paskah untuk bersenang -senang. Cuba menyegarkan halaman, meneroka pintasan, dan berkongsi di Facebook atau Twitter untuk mencari mereka. ?

Alat dan perpustakaan yang saya gunakan

Saya sangat suka vue.js. Ia mungkin terlalu banyak untuk projek ini, tetapi Vue CLI membolehkan saya memulakan bangunan dengan semua alat terkini dengan arahan yang mudah.

 Vue membuat kod cantik

Saya tidak perlu membuang masa membina perancah, yang membantu saya membina alat ini dengan cepat. Di samping itu, VUE sangat mudah dalam statistik masa nyata, menukar tema, tetapan menukar, dan lain-lain. Saya telah menggunakan pelbagai komponen UI elemen seperti butang, elemen bentuk, popup, dan dialog.

Editor ini dikuasakan oleh Codemirror dan menggunakan gaya tersuai. Ini adalah projek yang disokong dengan baik dan hebat yang saya sangat mengesyorkan untuk penyuntingan kod dalam penyemak imbas.

Perpustakaan yang melakukan semua pengindahan dipanggil JS Beautify, yang mengendalikan JavaScript, HTML, dan CSS. JS Beautify berjalan di sisi pelanggan, jadi aplikasi ini sebenarnya tidak mempunyai backend - penyemak imbas anda melakukan semua kerja!

JS Beautify sangat mudah digunakan. Pasangnya menggunakan npm install js-beautify dan jalankan kod anda melalui fungsi yang sepadan.

 Import Kecantikan dari 'JS-Beautify';

const code = 'kod anda di sini';
tetapan const = {
  // Tetapan anda di sini
};

// html
const html = cantik.html (kod, tetapan)

// css
const css = cantik.css (kod, tetapan)

// JavaScript
const js = cantik.js (kod, tetapan)

Setiap fungsi mengembalikan rentetan yang mengandungi kod cantik. Anda boleh menukar kaedah output setiap bahasa dengan lulus dalam tetapan anda sendiri.

Saya telah ditanya beberapa kali tentang Prettier, yang merupakan alat yang sama, jadi patut disebutkan bahawa saya memilih JS mencantikkan kerana ia tidak terlalu sewenang -wenang dan lebih dikonfigurasikan. Jika permintaan cukup besar, saya akan mempertimbangkan untuk menambah pilihan untuk beralih antara JS mencantikkan dan lebih cantik.

Saya telah menggunakan perpustakaan ini sebelum ini, jadi integrasi sebenarnya sangat mudah. ?

Projek ini adalah terima kasih kepada permohonan saya Surreal CMS. Jika anda mencari CMS yang sangat baik untuk laman web statik, periksa - ia percuma untuk laman peribadi, pendidikan dan bukan keuntungan!

Oh, jika anda ingin tahu editor mana yang saya gunakan ... ia adalah kod studio visual. ????

Atas ialah kandungan terperinci Bagaimana saya membuat cantik kod dalam dua hari. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!