Pemahaman mendalam tentang prinsip pelaksanaan pratonton penurunan harga dalam vscode

Pratonton penurunan nilai

vscode ialah fungsi yang kami gunakan sepanjang hari. Pernahkah anda terfikir tentang cara ia dilaksanakan? Mungkin suatu hari nanti anda akan menerima permintaan untuk pratonton penurunan harga tersuai Apa yang perlu anda lakukan? [Pembelajaran yang disyorkan: "tutorial vscode"]

Malah, idea keseluruhannya agak mudah, iaitu mencipta panel paparan web, menetapkan kandungan kepada HTML yang dijana melalui penurunan nilai dan kemudian ubah suai paparan web secara serentak apabila penurunan harga dikemas kini.

Analisis Idea

Buat paparan web melalui vscode.window.createWebviewPanel, tentukannya untuk dibuka di sebelah, dan kemudian tetapkan html melalui atribut webview.html objek panel.

html dijana melalui kandungan penurunan nilai editor Kandungan editor diperoleh melalui editor.document.getText(), dan kemudian pustaka penukaran html pihak ketiga dipanggil untuk menjananya.

Ini melengkapkan pratonton turun harga.

Selepas pratonton perlu dikemas kini, dengarkan acara vscode.workspace.onDidSaveTextDocument dan vscode.workspace.onDidChangeTextDocument Apabila dokumen dikemas kini dan disimpan, dapatkan kandungan editor, jana semula html. dan kemudian tetapkannya kepada paparan web.

WebviewPanel menyokong webview.postMessage(message); untuk menghantar mesej dan menyokong satu siri arahan seperti updateHTML, yang boleh dicetuskan dengan menghantar mesej.

Tetapi bagaimana anda tahu dokumen yang mengemas kini paparan web mana?

Anda boleh mengekalkan peta dan merekodkannya ke dalam peta semasa membuat webviewPanel Kuncinya ialah laluan fail, supaya apabila mengemas kini, paparan web yang sepadan boleh ditemui dan dikemas kini.

Dengan cara ini, kemas kini kandungan penurunan harga selesai.

Malah, idea keseluruhannya agak mudah Mari kita tulis kod di bawah

Pelaksanaan kod

Mari kita lihat kod vscode-markdown-preview. -pemalam yang dipertingkatkan Ini juga merupakan pemalam untuk pratonton penurunan harga Kod ini agak mudah dan boleh digunakan untuk pembelajaran.

(Kod berikut ialah kod dipermudahkan)

Pertama, pemalam mesti menyatakan syarat pencetus, iaitu, nyatakan activationEvents dalam package.json:

"activationEvents": [
    "onLanguage:markdown",
    "onCommand:markdown-preview-enhanced.openPreviewToTheSide"
],

Di sini Satu diaktifkan apabila mengedit kandungan penurunan nilai, dan satu lagi diaktifkan apabila arahan dilaksanakan.

Logik pengaktifan khusus adalah dalam kaedah aktif:

export function activate(context: vscode.ExtensionContext) {

  const contentProvider = new MarkdownPreviewEnhancedView(context);

  context.subscriptions.push(
    vscode.commands.registerCommand(
      "markdown-preview-enhanced.openPreviewToTheSide",
      openPreviewToTheSide,
    ),
  );
  
  function openPreviewToTheSide(uri?: vscode.Uri) {
    let resource = uri;
    if (!(resource instanceof vscode.Uri)) {
      if (vscode.window.activeTextEditor) {
        resource = vscode.window.activeTextEditor.document.uri;
      }
    }
    contentProvider.initPreview(resource, vscode.window.activeTextEditor, {
      viewColumn: vscode.ViewColumn.Two,
      preserveFocus: true,
    });
  }
}

Kami telah mendaftarkan arahan dan melaksanakan arahan itu akan mendapat url editor semasa, dan kemudian pratonton penurunan harga.

Semua logik pratonton ditakrifkan secara berpusat dalam objek contoh MarkdownPreviewEnhancedView, dan initPreivew dilaksanakan apabila arahan dicetuskan.

public async initPreview(
    sourceUri: vscode.Uri,
    editor: vscode.TextEditor,
    viewOptions: { viewColumn: vscode.ViewColumn; preserveFocus?: boolean },
) {
    // 创建 webview
    let previewPanel: vscode.WebviewPanel = vscode.window.createWebviewPanel(
        "markdown-preview-enhanced",
        `Preview ${path.basename(sourceUri.fsPath)}`,
        viewOptions
    );

    // 监听 webview 的消息
    previewPanel.webview.onDidReceiveMessage((message) => {});

    // 记录 webview 到 map 中
    this.previewMaps[sourceUri.fsPath] = previewPanel;
    
    // 拿到编辑器的文本，生成 html
    const text = editor.document.getText();
    engine
      .generateHTMLTemplateForPreview({inputString: text})
      .then((html) => {
        // 设置 html 到 previewPanel
        previewPanel.webview.html = html;
      });
}

Buat webviewPanel dalam initWebivew dan simpan webviewPanel ke dalam peta Kuncinya ialah laluan fail dokumen. Dapatkan teks editor untuk menjana html dan tetapkannya kepada webview.html, sekali gus melengkapkan pratonton penurunan harga.

Selepas laluan ini dilalui, kami boleh melaksanakan pratonton penurunan harga.

Tetapi hanya pratonton sekali sahaja tidak mencukupi Selepas mengemas kini dokumen, ia perlu dikemas kini secara automatik Kami terus menambah pemantauan acara dalam kaedah aktif:

  context.subscriptions.push(
    vscode.workspace.onDidSaveTextDocument((document) => {
      if (isMarkdownFile(document)) {
        contentProvider.updateMarkdown(document.uri, true);
      }
    }),
  );

  context.subscriptions.push(
    vscode.workspace.onDidChangeTextDocument((event) => {
      if (isMarkdownFile(event.document)) {
        contentProvider.update(event.document.uri);
      }
    }),
  );

Apabila memantau pengubahsuaian teks. dan menyimpan, hubungi kaedah kemas kini.

public updateMarkdown(sourceUri: Uri) {

    // 从 map 中根据文件路径取出对应的 webviewPanel
    const previewPanel = this.previewMaps[sourceUri.fsPath];
    
    // 生成最新的 html 传递给 webview
    const text = document.getText();
    engine
        .parseMD(text)
        .then(({ markdown, html }) => {
            previewPanel.webview.postMessage({
              command: "updateHTML",
              html
            });
        }

}

Berikut ialah untuk menghantar mesej arahan updateHTML kepada kandungan html melalui webview.postMessage, mencetuskan kemas kini kandungan html.

Dengan cara ini, kami telah mencapai penyegaran segerak penurunan harga.

Ringkasan

Pratonton penurunan harga dalam vscode adalah fungsi yang biasa digunakan tetapi tidak sukar untuk dilaksanakan Kami telah melihat pada kod sumber pemalam vscode-markdown-preview-enhanced dan menjelaskan Proses keseluruhan:

• Buat webviewPanel melalui vscode.window.createWebviewPanel untuk memaparkan html
• html Dapatkan kandungan teks melalui editor.document.getText() dan jananya melalui pakej pihak ketiga. Tetapkannya kepada webviewPanel
• memantau ruang kerja.onDidSaveTextDocument dan ruang kerja.onDidChangeTextDocument untuk mendapatkan kandungan terkini, dan kemudian menjana HTML dan mengemas kininya ke paparan web dengan menghantar mesej udpateHTML melalui webview.postMessage .
• Perlu diambil perhatian bahawa peta perlu direkodkan untuk menyimpan surat-menyurat antara uri.fsPath dan webviewPanel, supaya kandungan teks berubah dan mengemas kini paparan web yang sepadan

Pratonton markdown adalah perkara biasa tetapi Ia bukan satu keperluan yang sukar dan lebih sesuai untuk pembangunan pemalam vscode peringkat permulaan Saya harap artikel ini dapat membantu anda menjelaskan idea anda.

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Pemahaman mendalam tentang prinsip pelaksanaan pratonton penurunan harga dalam vscode. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!