Artikel ini akan berkongsi dengan anda Vscode pemalam gesaan pintar: nutui-vscode-extension, dan memberi anda pemahaman 360 darjah dan cara menggunakannya berguna kepada semua orang!

Sudah satu tahun sejak versi NutUI v3 dikeluarkan kedua-dua pembangun dalaman dan luaran dalam kumpulan sedang membangun dan menggunakannya dalam senario perniagaan yang berbeza berasa bahawa saya bangga tetapi juga di bawah tekanan yang meningkat, saya secara aktif bekerja keras untuk menyelesaikan pelbagai isu yang dibangkitkan oleh pembangun, mengembangkan fungsi komponen dan memenuhi permintaan pembangun sebanyak mungkin. Sejak tahun ini, tindanan berbilang teknologi (React), penyesuaian UI peringkat komponen, pengantarabangsaan dan keupayaan segera pintar kod telah ditambah. Artikel ini akan memperkenalkan fungsi gesaan pintar kod (pemalam Vscode) dan memberi anda analisis terperinci tentang pelaksanaan NutUI-Vscode. [Pembelajaran yang disyorkan: "tutorial pengenalan vscode"]

Pengalaman intuitif

Apakah gesaan pintar kod ? Untuk memberi pemahaman yang intuitif kepada semua orang, mari kita perhatikan dengan teliti dua gif gambar berikut~

Pustaka komponen tidak mempunyai sebarang gesaan kod

Selepas perpustakaan komponen mempunyai gesaan pintar

Saya tertanya-tanya apa pendapat anda selepas melihat dua gambar di atas ? Jelas sekali, selepas kami menggunakan gesaan pintar, sama ada untuk melihat dokumen dengan cepat atau melihat sifat komponen, ia akan menjadi sangat mudah untuk menyemak Sudah tentu, kecekapan pembangunan pasti akan bertambah baik dengan ketara. Jadi, marilah kita datang dan alaminya sendiri~

Panduan Penggunaan

Petua: Laman web rasmi NutUI - sokongan alat pembangunan, di sini juga pengenalan ringkas Oh~

https://nutui.jd.com/#/ide

• Pasang vscode pemalam nutui-vscode-extension
??>



Pasang pemalam
• . Jika anda tidak tahu pemalam ini vetur di sini mempunyai pengenalan



Selepas memasang dua pemalam di atas, mulakan semula

dan anda boleh Pengalaman yang menyenangkan untuk mengalami fungsi peringatan pintar vscode, bukankah terlalu mudah NutUI

Pengalaman itu juga sudah berakhir, adakah masa untuk membiasakan diri dengannya? prinsip dengan saya? Memandangkan kami sedang membangunkan pemalam

, kami mesti membiasakan diri dengan proses pembangunan, penyahpepijatan dan keluarannya. Satu dokumen diberikan kepada anda. Lihat di sini: vscode

https://code.visualstudio.com/docs

Selepas anda biasa dengan proses pembangunan

asas, ikuti saya langkah demi langkah untuk mendedahkan perkara ini kecerdasan Misteri fungsi segera~vscode

360 tafsiran komprehensif



Pandangan pantas komponen Dokumen



Seperti yang anda lihat daripada gambar di atas, apabila kami menggunakan

untuk pembangunan, kami selesai menulis komponen NutUI, tetikus Hover Apabila anda sampai ke komponen, gesaan akan muncul. Klik gesaan untuk membuka dokumentasi rasmi komponen nut-button. Kami boleh melihat dengan cepat Button yang sepadan untuk dibangunkan dengannya. API

Mula-mula kita perlu mencari fungsi cangkuk yang sepadan

dalam projek yang dijana oleh vscode, daftarkan activate di dalamnya, dan kemudian sasarkan fail jenis yang ditentukan Provider melalui files ke menganalisis. provideHover

const files = ['vue', 'typescript', 'javascript', 'react'];

export function activate(context: vscode.ExtensionContext) {
  context.subscriptions.push(
    vscode.languages.registerHoverProvider(files, {
      provideHover
    })
  );
}

Sekarang kita boleh melihat dengan lebih dekat bagaimana

dilaksanakan? provideHover

const LINK_REG = /(?<=<nut-)([\w-]+)/g;
const BIG_LINK_REG = /(?<=<Nut-)([\w-])+/g;
const provideHover = (document: vscode.TextDocument, position: vscode.Position) => {
  const line = document.lineAt(position); //根據(jù)鼠標(biāo)的位置讀取當(dāng)前所在行
  const componentLink = line.text.match(LINK_REG) ?? [];//對 nut-開頭的字符串進(jìn)行匹配
  const componentBigLink = line.text.match(BIG_LINK_REG) ?? [];
  const components = [...new Set([...componentLink, ...componentBigLink.map(kebabCase)])]; //匹配出當(dāng)前Hover行所包含的組件

  if (components.length) {
    const text = components
      .filter((item: string) => componentMap[item])
      .map((item: string) => {
        const { site } = componentMap[item];

        return new vscode.MarkdownString(
          `[NutUI -> $(references) 請查看 ${bigCamelize(item)} 組件官方文檔](${DOC}${site})\n`,
          true
        );
      });

    return new vscode.Hover(text);
  }
};

mendapatkan komponen yang terkandung dalam baris

semasa melalui vscode yang disediakan oleh API dan padanan biasa yang sepadan, dan kemudian mengembalikan Hover yang sepadan dengan komponen berbeza melalui traversal, dan akhirnya Mengembalikan objek MarkDownString. vscode.Hover

Anda yang berhati-hati mungkin menyedari bahawa ia juga mengandungi

, iaitu objek yang mengandungi alamat pautan laman web rasmi semua komponen dan componentMap maklumat kandungan umumnya adalah seperti berikut :props

export interface ComponentDesc {
  site: string;
  props?: string[];
}

export const componentMap: Record<string, ComponentDesc> = {
    actionsheet: {
        site: &#39;/actionsheet&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    address: {
        site: &#39;/address&#39;,
        props: ["v-model:visible=&#39;&#39;"]
    },
    addresslist: {
        site: &#39;/addresslist&#39;,
        props: ["data=&#39;&#39;"]
    }
    ...
}

為了能夠保持每次組件的更新都會及時同步，componentMap 這個對象的生成會通過一個本地腳本執(zhí)行然后自動注入，每次在更新發(fā)布插件的時候都會去執(zhí)行一次，保證和現(xiàn)階段的組件以及對應(yīng)的信息保持一致。這里的組件以及它所包含的信息都需要從項目目錄中獲取，這里的實現(xiàn)和后面講的一些內(nèi)容相似，大家可以先想一下實現(xiàn)方式，具體實現(xiàn)細(xì)節(jié)在后面會一起詳解～

組件自動補(bǔ)全



我們使用 NutUI 組件庫進(jìn)行項目開發(fā)，當(dāng)我們輸入 nut- 時，編輯器會給出我們目前組件庫中包含的所有組件，當(dāng)我們使用上下鍵快速選中其中一個組件進(jìn)行回車，這時編輯器會自動幫我們補(bǔ)全選中的組件，并且能夠帶出當(dāng)前所選組件的其中一個 props,方便我們快速定義。

這里的實現(xiàn)，同樣我們需要在 vscode 的鉤子函數(shù) activate 中注冊一個 Provider。

vscode.languages.registerCompletionItemProvider(files, {
    provideCompletionItems,
    resolveCompletionItem
})

其中，provideCompletionItems ,需要輸出用于自動補(bǔ)全的當(dāng)前組件庫中所包含的組件 completionItems。

const provideCompletionItems = () => {
  const completionItems: vscode.CompletionItem[] = [];
  Object.keys(componentMap).forEach((key: string) => {
    completionItems.push(
      new vscode.CompletionItem(`nut-${key}`, vscode.CompletionItemKind.Field),
      new vscode.CompletionItem(bigCamelize(`nut-${key}`), vscode.CompletionItemKind.Field)
    );
  });
  return completionItems;
};

resolveCompletionItem 定義光標(biāo)選中當(dāng)前自動補(bǔ)全的組件時觸發(fā)的動作，這里我們需要重新定義光標(biāo)的位置。

const resolveCompletionItem = (item: vscode.CompletionItem) => {
  const name = kebabCase(<string>item.label).slice(4);
  const descriptor: ComponentDesc = componentMap[name];

  const propsText = descriptor.props ? descriptor.props : &#39;&#39;;
  const tagSuffix = `</${item.label}>`;
  item.insertText = `<${item.label} ${propsText}>${tagSuffix}`;

  item.command = {
    title: &#39;nutui-move-cursor&#39;,
    command: &#39;nutui-move-cursor&#39;,
    arguments: [-tagSuffix.length - 2]
  };
  return item;
};

其中， arguments代表光標(biāo)的位置參數(shù)，一般我們自動補(bǔ)全選中之后光標(biāo)會在 props 的引號中，便于用來定義，我們結(jié)合目前補(bǔ)全的字符串的規(guī)律，這里光標(biāo)的位置是相對確定的。就是閉合標(biāo)簽的字符串長度 -tagSuffix.length,再往前面 2 個字符的位置。即 arguments: [-tagSuffix.length - 2]。

最后，nutui-move-cursor 這個命令的執(zhí)行需要在 activate 鉤子函數(shù)中進(jìn)行注冊,并在 moveCursor 中執(zhí)行光標(biāo)的移動。這樣就實現(xiàn)了我們的自動補(bǔ)全功能。

const moveCursor = (characterDelta: number) => {
  const active = vscode.window.activeTextEditor!.selection.active!;
  const position = active.translate({ characterDelta });
  vscode.window.activeTextEditor!.selection = new vscode.Selection(position, position);
};

export function activate(context: vscode.ExtensionContext) {
  vscode.commands.registerCommand('nutui-move-cursor', moveCursor);
}

什么？有了這些還不夠？有沒有更加智能化的，我不用看組件文檔，照樣可以輕松開發(fā)。emm～～～，當(dāng)然，請聽下文講解

vetur 智能化提示

提到 vetur,熟悉 Vue 的同學(xué)一定不陌生，它是 Vue 官方開發(fā)的插件，具有代碼高亮提示、識別 Vue 文件等功能。通過借助于它，我們可以做到自己組件庫里的組件能夠自動識別 props 并進(jìn)行和官網(wǎng)一樣的詳細(xì)說明。

vetur詳細(xì)介紹看這里

https://vuejs.github.io/vetur/guide/component-data.html#workspace-component-data



像上面一樣，我們在使用組件 Button 時，它會自動提示組件中定義的所有屬性。當(dāng)按上下鍵快速切換時，右側(cè)會顯示當(dāng)前選中屬性的詳細(xì)說明，這樣，我們無需查看文檔，這里就可以看到每個屬性的詳細(xì)描述以及默認(rèn)值，這樣的開發(fā)簡直爽到起飛～

仔細(xì)讀過文檔就可以了解到，vetur 已經(jīng)提供給了我們配置項，我們只需要簡單配置下即可，像這樣：

//packag.json
{
    ...
    "vetur": {
        "tags": "dist/smartips/tags.json",
        "attributes": "dist/smartips/attributes.json"
    },
    ...
}

tags.json 和 attributes.json 需要包含在我們的打包目錄中。當(dāng)前這兩個文件的內(nèi)容，我們也可以看下：

// tags.json
{
  "nut-actionsheet": {
      "attributes": [
        "v-model:visible",
        "menu-items",
        "option-tag",
        "option-sub-tag",
        "choose-tag-value",
        "color",
        "title",
        "description",
        "cancel-txt",
        "close-abled"
      ]
  },
  ...
}

//attributes.json
{
    "nut-actionsheet/v-model:visible": {
        "type": "boolean",
        "description": "屬性說明：遮罩層可見，默認(rèn)值：false"
    },
    "nut-actionsheet/menu-items": {
        "type": "array",
        "description": "屬性說明：列表項，默認(rèn)值：[ ]"
    },
    "nut-actionsheet/option-tag": {
        "type": "string",
        "description": "屬性說明：設(shè)置列表項標(biāo)題展示使用參數(shù)，默認(rèn)值：'name'"
    },
    ...
}

很明顯，這兩個文件也是需要我們通過腳本生成。和前面提到的一樣，這里涉及到組件以及和它們關(guān)聯(lián)的信息，為了能夠保持一致并且維護(hù)一份，我們這里通過每個組件源碼下面的 doc.md 文件來獲取。因為，這個文件中包含了組件的 props 以及它們的詳細(xì)說明和默認(rèn)值。

組件 props 詳細(xì)信息

tags, attibutes, componentMap 都需要獲取這些信息。 我們首先來看看 doc.md 中都包含什么？

## 介紹
## 基本用法
...
### Prop

| 字段     | 說明                                                             | 類型   | 默認(rèn)值 |
| -------- | ---------------------------------------------------------------- | ------ | ------ |
| size     | 設(shè)置頭像的大小，可選值為：large、normal、small，支持直接輸入數(shù)字   | String | normal |
| shape    | 設(shè)置頭像的形狀，可選值為：square、round            | String | round  |
...

每個組件的 md 文檔，我們預(yù)覽時是通過 vite 提供的插件 vite-plugin-md,來生成對應(yīng)的 html,而這個插件里面引用到了 markdown-it 這個模塊。所以，我們現(xiàn)在想要解析 md 文件，也需要借助于 markdown-it 這個模塊提供的 parse API.

// Function getSources
let sources = MarkdownIt.parse(data, {});
// data代表文檔內(nèi)容，sources代表解析出的list列表。這里解析出來的是Token列表。



在Token 中，我們只關(guān)心 type 即可。因為我們要的是 props，這部分對應(yīng)的 Token 的 type 就是 table_open 和 table_close 中間所包含的部分?？紤]到一個文檔中有多個 table。這里我們始終取第一個，*** 這也是要求我們的開發(fā)者在寫文檔時需要注意的地方 ***。

拿到了中間的部分之后，我們只要在這個基礎(chǔ)上再次進(jìn)行篩選，選出 tr_open 和 tr_close 中間的部分，然后再篩選中間 type = inline 的部分。最后取 Token 這個對象中的 content 字段即可。然后在根據(jù)上面三個文件不同的需求做相應(yīng)的處理即可。

const getSubSources = (sources) => {
  let sourcesMap = [];
  const startIndex = sources.findIndex((source) => source.type === TYPE_IDENTIFY_OPEN);
  const endIndex = sources.findIndex((source) => source.type === TYPE_IDENTIFY_CLOSE);
  sources = sources.slice(startIndex, endIndex + 1);
  while (sources.filter((source) => source.type === TR_TYPE_IDENTIFY_OPEN).length) {
    let trStartIndex = sources.findIndex((source) => source.type === TR_TYPE_IDENTIFY_OPEN);
    let trEndIndex = sources.findIndex((source) => source.type === TR_TYPE_IDENTIFY_CLOSE);
    sourcesMap.push(sources.slice(trStartIndex, trEndIndex + 1));
    sources.splice(trStartIndex, trEndIndex - trStartIndex + 1);
  }
  return sourcesMap;
};

好了，以上就是解析的全部內(nèi)容了?？偨Y(jié)起來就那么幾點：

1、創(chuàng)建一個基于 vscode 的項目，在它提供的鉤子中注冊不同行為的 command 和 languages,并實現(xiàn)對應(yīng)的行為

2、結(jié)合 vetur,配置 packages.json

3、針對 map json 文件，需要提供相應(yīng)的生成腳本，確保信息的一致性。這里解析 md 需要使用 markdown-it 給我們提供的 parse 功能。

最后

本文從直觀體驗到實際使用再到實現(xiàn)原理分析，一步步帶著大家感受了 NutUI 和 VSCode 結(jié)合，給大家?guī)淼母＠?，讓大家能在開發(fā)上有了全新的體驗，同時，也讓我們的組件庫越發(fā)充滿了魅力。接下來，讓我們共同攜手，讓它發(fā)揮出更加強(qiáng)大的價值～

更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode教程??！

Atas ialah kandungan terperinci Perkongsian pemalam gesaan pintar Vscode: nutui-vscode-extension. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!