Luxury the CodeMirror: Inline Widget

CodeMirror memberikan demo tentang apa yang dapat Anda kerjakan dengan code editor untuk mengintegrasikan peringatan kesalahan JSHint sebagai peringatan inline dengan kode seperti CodeMirror live editor: Inline Widget Demo Official. JSHint berisi semua petunjuk / pesan berupa identifier (pengidentifikasi) scripting dalam editor. Code sumber demo juga dapat di sertai didalam "AktiveLine" untuk menambah kemewahan sebuah editor dan memberi petunjuk mana saja yang JSHint lakukan.

Image dibawah ini adalah contoh "CodeMirror: Inline Widget" yang sudah disesuaikan dengan tag textarea (Not tag div). Demo ini menjalankan JSHint di atas code editor dan menyisipkan widget garis untuk menampilkan peringatan yang muncul dengan add-ons JSHint.
Pada umumnya JSHint menjalankan di baris "Gutters" di editor yang dapat dimodifikasi dengan pekerjaan baru (Warna Khusus) dan terlihat seperti contoh image.

Note:

• JSHint terlihat di baris gutter dengan warna khusus (merah dan kuning) warna hijau hilang / tidak dilengkapi seperti Ace Live Editor. JSHint dapat dimodifikasi dengan warna dalam blok kotak (image pertama) ataupun bullet points (image kedua). Dan Image kedua dapat juga dilakukan dengan menambahkan garis tebal (blok kotak) seperti image pertama.
• JSHint terlihat di baris activeline berisi petunjuk / pesan berupa identifier scripting dalam editor (image pertama).

• CSS Style

Pertama menambahkan pengaturan CodeMirror CSS style dibagian head.

<!--CodeMirror CSS Basic-->
<link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet"/>

<!--CodeMirror CSS Addon-->
<link href="https://codemirror.net/addon/lint/lint.css" rel="stylesheet"/>

Kedua menambahkan CSS "lint error icon". Pilih versi yang tersedia.

/* CSS Style */
/*width:50%; Pengaturan Lebar*/
.lint-error{font-family:arial;font-size:70%;background:#ffa;color:#a00;padding:2px 5px 3px}
.lint-error-icon{color:white;background-color:red;font-weight:bold;border-radius:50%;padding: 0 3px;margin-right:7px}

Tambahkan distribusi add-on Syntax Highlight ke editor kode menggunakan peningkatan properti Add-ons CodeMirror js di post sebelumnya. Silahkan berkunjung di "CodeMirror a Reliable and Luxurious Programming Editor". Kemudian sertakan Add-ons jshint.min.js dan beberapa properti add-ons lainnya.

<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jshint/2.9.5/jshint.min.js"></script>
<script src="https://codemirror.net/addon/lint/javascript-lint.js"></script>

• JavaScript

Jika sobat ingin mendapatkan hasil dari contoh lab image, silahkan rubah / modifikasi sebuah teka teki (JavaScript - CodeMirror Library) dibawah ini. Sobat dapat memindahkan baris, memodifikasi nama yang berbeda dan bahkan meghapus beberapa bagian JavaScript.

Code Sumber - CodeMirror: Inline Widget Library

// CodeMirror, copyright (c) by Marijn Haverbeke and others
// Distributed under an MIT license: https://codemirror.net/LICENSE
var widgets = []
function updateHints() {
  editor.operation(function(){
    for (var i = 0; i < widgets.length; ++i)
      editor.removeLineWidget(widgets[i]);
    widgets.length = 0;

    JSHINT(editor.getValue());
    for (var i = 0; i < JSHINT.errors.length; ++i) {
      var err = JSHINT.errors[i];
      if (!err) continue;
      var msg = document.createElement("div");
      var icon = msg.appendChild(document.createElement("span"));
      icon.innerHTML = "!!";
      icon.className = "lint-error-icon";
      msg.appendChild(document.createTextNode(err.reason));
      msg.className = "lint-error";
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
  });
  var info = editor.getScrollInfo();
  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  if (info.top + info.clientHeight < after)
    editor.scrollTo(null, after - info.clientHeight + 3);
}

window.onload = function() {
  var sc = document.getElementById("script");
  var content = sc.textContent || sc.innerText || sc.innerHTML;

  window.editor = CodeMirror(document.getElementById("code"), {
    lineNumbers: true,
    mode: "javascript",
    value: content
  });

  var waiting;
  editor.on("change", function() {
    clearTimeout(waiting);
    waiting = setTimeout(updateHints, 500);
  });

  setTimeout(updateHints, 100);
};

• HTML

Menjalankan JSHint di atas kode textarea untuk skrip yang digunakan pada halaman ini. Tag div migrasi ke tag textarea.

<!--Code Basic Demo Official - Tag div-->
<div id="code"></div>

Migrasi

<!--Textarea-->
<textarea id="code" name="jsarea" placeholder="Code goes here..." style="display: none;">
// Rekatkan contoh Code Sumber - CodeMirror: Inline Widget Library ...
</textarea>

<!--Setting mode: javascript-->

Tidak hanya itu, Sobat juga dapat menambahkan HTMLHint dan CSSHint (editor terpisah) seperti pada gambar labs di bawah ini.

Objek demo - CodeMirror HTMLHint CSSHint JSHint untuk editor area. Obyek add-ons dilakukan di setiap mode (editor terpisah).

JSHint mengembalikan array objek yang berisi detail kesalahan dan melanjutkan jika tidak ada kesalahan pada obyek. Kesalahan obyek terlihat di "baris Gutter" dan menampilkan kembali di "Inline Widget" editor. JSHint juga dapat mengetahui kemungkinan kode atau simbol JavaScript yang digunakan hilang. Ada kemungkinan bahwa beberapa kode tidak lengkap ketika dikompresi / dikurangi dengan pengubah ukuran JavaScript, sehingga JavaScript tidak berfungsi dengan benar. Sekian tutorial wisata coding Luxury the CodeMirror: Inline Widget.