コンポーネント ライブラリの設計 | React コンポーネントにコード補完と属性ヒントを取得させます

前に書いてある

React コンポーネント ライブラリ Concis は、オープンソース プロジェクトの開発に参加する多数の小規模パートナーを募集しています。PC 側コンポーネントの拡張、モバイル側コンポーネント開発、Concis エコロジカル プラグイン開発など、まだ多くの計画が実行されています。 、など。詳細については、この記事を参照してください。

React コンポーネント ライブラリ Concis は、コミュニティで参加する興味のあるパートナーを探しています...

Concis コンポーネント ライブラリに関連するリンク。皆さんが励まし、サポートし、より多くの星を与え、作者にさらなるモチベーションを与えることを願っています。

Github
オンラインドキュメント

需要の源

コンポーネント ライブラリの開発と実際のプロジェクトのテスト プロセス中に、ブロガーはConcisコンポーネントを手動で記述する必要があることに突然気づき、antd/el過去にコンポーネント ライブラリを使用したときにコード ブロックが自動的に生成され、対応するいくつかのコード ブロックが生成されたことを思い出しました。 「情報」ラベルに移動するとプロンプトが表示されるため、ブロガーは Vscode プラグインの開発を検討し始めました。

プロジェクトを構築する

まず vscode スキャフォールディングをグローバルにインストールします

npm install -g yo generator-code

インストールが完了したら、コマンドラインに次のように入力します。

yo code

プロンプトで直接[新しい拡張機能]を選択して、 vscodeプラグイン プロジェクトを生成します。次の項目は、 vscodeによって提供される個々の関数開発の足場であり、小さなプラグインとして理解できます。これはプロジェクト全体に固有であるためConcis、選択します。最初の1つ。

次に、いくつかのプラグインの名前を入力してプロジェクトを生成します。処理されたプロジェクトのディレクトリは次のとおりです。

ここでは、後でカスタム パッケージの構成について説明します。

コード補完 (スニペット)

コード補完機能は比較的単純で、snippets.jsonプロジェクト内にファイルを作成し、その中にスニペットを設定するだけです。
コード スニペットをすばやく作成するのに役立つ Web サイトがありますhttps://snippet-generator.app/

次のように、対応するスニペットを生成して にコピーしますsnippets.json。

同時にpackage.jsonでcontributesプラグインを有効にするファイルを指定する設定をします bloggerはReactコンポーネントライブラリなのでjs/ts/jsx/tsx4つのファイルタイプが設定されています

非常にシンプルで、コードを一行書くのに頭を使う必要がなく、自動補完機能も実現されています。

賢いヒント

プロンプトが表示されたら、開始して vscode の API を作成し、extension.tsプロジェクトによって生成されたファイルを開いて、次のようなコードを記述する必要があります。

import * as vscode from 'vscode'

const compileFiles = ['react', 'typescript', 'javascript', 'javascriptreact', 'typescriptreact'];

function providerHover(document: vscode.TextDocument, position: vscode.Position) {
    
    }

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

export function deactivate() {
    
    }

上記のコードでは、vscode.languages.registerHoverProviderマウス移動イベントの登録とファイルの種類の指定を行っており、その中にcompileFilesプラグインで実現する業務機能が実現されています。provideHover

function provideHover(document: vscode.TextDocument, position: vscode.Position) {
    
    
  //移入Concis组件Dom，出现介绍
  const line = document.lineAt(position);
  let isConcisComponentDom = false;
  let matchComponent = '';
  for (let i = 0; i < componentList.length; i++) {
    
    
    const component = componentList[i];
    if (line.text.includes(`<${
      
      component}`)) {
    
    
      isConcisComponentDom = true;
      matchComponent = component;
    }
  }
  if (isConcisComponentDom) {
    
    
    const isCN = vscode.env.language === 'zh-cn';
    let componentDocPath = '';
    for (let i = 0; i < matchComponent.length; i++) {
    
    
      const str = matchComponent[i];
      if (i !== 0 && str.charCodeAt(0) >= 65 && str.charCodeAt(0) <= 90) {
    
    
        componentDocPath += '-';
      }
      componentDocPath += str;
    }
    let text = isCN
      ? `查看${
      
      matchComponent}组件官方文档\n
Concis -> http://react-view-ui.com:92/#/common/${
      
      componentDocPath.toLowerCase()}`
      : `View the official documentation of the Button component\n
Concis -> http://react-view-ui.com:92/#/common/${
      
      componentDocPath.toLowerCase()}`;

    return new vscode.Hover(text);
  }
}

次に、ここで関数を解釈してみましょう。

1. まず、document.lineAtコード行を取得して、コード内容にConcisコンポーネントのキーワードが出現するかどうかを判定しますline.text。
2. 条件が満たされる場合、コンポーネントのオンライン ドキュメント アドレスを取得し、プロンプトのコンテンツ情報を編集し、コード セグメントに対応させますtext。
3. ;textを介して返されます。new vscode.Hover

ここまでで、コードの自動補完 + スマート プロンプト機能が完成しました。その効果を見てみましょう。

パッケージリリース

1. 最初のステップは、vscode パッケージ化ツールをグローバルにインストールすることです

npm i -g vsce

2. 2 番目のステップは、vscode アカウントを作成することです

まずhttps://login.live.com/にアクセスして Microsoft アカウントにログインします。アカウントをお持ちでない場合は、まず登録してからhttps://aka.ms/SignupAzureDevOpsにアクセスしてください。 Azure を使用している場合は、最初に作成する必要があります。Azure DevOps 組織は、既定でメールボックス プレフィックスにちなんだ名前の組織を作成します。

3. 3 番目のステップは、組織トークンを作成することです。

右上隅の「ユーザー設定」をクリックし、「新しい個人アクセストークンの作成」をクリックします。

ここを選択してくださいAll accessible organizations。そうしないと、プラグインをデプロイできません。

作成後にトークンが表示されます。このトークンは公式が保存しないため、手動で記録してください。このトークンは公開時に使用されます。

4. 4 番目のステップは、パブリッシャーを作成することです。

プラグイン マーケットhttps://marketplace.visualstudio.com/にアクセスしてプラグイン マーケットを作成しpublisher、名前の一貫性を保ったままフィールドpackage.jsonを追加します。
publisher

構成

さて、これで準備作業は完了です。

ブロガーはrollupコードをパッケージ化し、vscode の組み込みパッケージを使用してリリースするため、パッケージ化プロセスは次のようになります。

1. ロールアップ包装
2. vsceのパッケージ化
3. vsceをリリースする

rollup.config.js構成は次のとおりです。

import typescript from 'rollup-plugin-typescript2';
import clear from 'rollup-plugin-clear';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import {
    
     terser } from 'rollup-plugin-terser';
import {
    
     uglify } from 'rollup-plugin-uglify';

export default {
    
    
  input: ['./src/extension.ts'],
  output: [
    {
    
    
      file: 'dist/extension.js',
      format: 'cjs',
      name: 'cjs.js',
    },
  ],
  plugins: [
    typescript(), // 会自动读取 文件tsconfig.json配置
    clear({
    
    
      targets: ['dist'],
    }),
    resolve(),
    commonjs(),
    terser(),
    uglify(),
  ],
  external: ['react', 'react-dom'],
};

package.json でコマンド ラインを構成し、パッケージ化および公開プロセスが次のようになります。

	"scripts": {
    
    
		"upgrade": "node ../../scripts/replace-version-in-vscode.ts",					//升级package.json中版本
		"compile": "rollup -c ./rollup.config.js",										//rollup打包														
		"build": "vsce package",														//vsce打包									
		"generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts",		//生成README.md内容
		"publish": "npm run compile && npm run build && vsce publish"					//部署
	},

ここに、Concis コンポーネント ライブラリ用にブロガーによって追加された 2 つのスクリプトがupgradeあります。見てみましょう 、パッケージ化と構築が上記の順序で実行され、コード レベルでの構成が完了していることがわかります。generate:readmepublish

を実行しnpm run publish、先ほど作成して保存したトークンを入力するとリリース成功です。

これを見て、プロジェクトの開発とリリース用のパッケージ化の内容をマスターしたことになりますvscode。コンポーネント ライブラリの要件に対するブロガーの拡張は、上記の 2 つのコマンドです。

npm run upgrade				//升级package.json中版本
npm run generate:readme		//根据组件项目目录，自动生成README.md

プラグインの紹介から、対応する各紹介をConcis-snippets紹介する以下の表があることがわかります。snippet現時点では、ブロガーはさらに 2 つのコンポーネントを開発しましたが、README.md を手動で更新したくないため、カスタム スクリプトが必要です。

README.mdを自動更新する

//根据项目目录写入vscode-snippets README.md
const fs = require('fs-extra');
const path = require('path');

const baseTemplate = fs.readFileSync(path.join(__dirname, 'base-template.md'), 'utf-8');
const componentList = fs.readdirSync(path.join(__dirname, '../../packages/concis-react/src'));

let tableTemplate = '';

componentList.forEach((f) => {
    
    
  if (f[0].charCodeAt(0) >= 65 && f[0].charCodeAt(0) <= 90) {
    
    
    //组件
    tableTemplate += `|c${
      
      f.toLowerCase()}|snippet a Concis ${
      
      f} Component|\n`;
  }
});

const fileContent = `${
      
      baseTemplate}${
      
      tableTemplate}`;
console.log(fileContent);

fs.writeFile(
  path.resolve(__dirname, '../../packages/concis-vscode-snippets/README.md'),
  fileContent,
  'utf-8',
).then(() => {
    
    
  console.log('生成concis-vscode-snippets 成功'); // eslint-disable-line
});

README.mdここでは、コードに対応する上部に決して変更されないコンテンツを含む基本テンプレートがありbase-template.md、コンポーネント ディレクトリを読み取り、基本テンプレートとテーブルのコンテンツを結合するだけです。

package.jsonのバージョンを自動的にアップグレードする

//更新concis-vscode-snippets/package.json中的版本
const fs = require('fs-extra');
const path = require('path');
const {
    
     version } = require('../packages/concis-vscode-snippets/package.json');

const fileText = fs.readFileSync(
  path.join(__dirname, '../packages/concis-vscode-snippets/package.json'),
  'utf-8',
);

const replacedVersion = fileText.split('\n').map((t) => {
    
    
  if (/"version":/.test(t)) {
    
    
    let newVersion = version.split('.');
    let [first, secord, third] = newVersion;
    if (third >= 10 || secord >= 10) {
    
    
      if (third >= 10) {
    
    
        third = 0;
        secord = Number(secord) + 1;
      }
      if (secord >= 10) {
    
    
        third = 0;
        secord = 0;
        first = Number(first) + 1;
      }
    } else {
    
    
      third = Number(third) + 1;
    }

    newVersion[newVersion.length - 1] = Number(newVersion[newVersion.length - 1]) + 1;
    console.log(`"version": "${
      
      first}.${
      
      secord}.${
      
      third}"`);
    return `  "version": "${
      
      first}.${
      
      secord}.${
      
      third}",`;
  }
  return t;
});

fs.outputFile(
  path.resolve(__dirname, '../packages/concis-vscode-snippets/package.json'),
  replacedVersion.join('\n'),
).then(() => {
    
    
  console.log('替换 package.json 中的 version 成功！'); // eslint-disable-line
});

このコードは、package.jsonファイル内のバージョンを置き換える機能を実装しています。これら 2 つの自動スクリプトのサポートにより、publish次のように変更できます。

"scripts": {
    
    
	"upgrade": "node ../../scripts/replace-version-in-vscode.ts",								
	"compile": "rollup -c ./rollup.config.js",																
	"build": "vsce package",																										
	"generate:readme": "node ../../scripts/vscode/generate-vscode-snippet.ts",		
	"publish": "npm run upgrade && npm run generate:readme && npm run compile && npm run build && vsce publish"								
}					

要約する

この記事では、vscode プラグインの開発準備から機能実現、パッケージ化、公開までを、ブロガーによる実際の Concis の事例を通して解説しています。

コンシスコンポーネントライブラリのアドレス

Concis コンポーネント ライブラリのオンライン リンク: http://react-view-ui.com:92
github: https://github.com/fengxinhh/Concis
npm: https://www.npmjs.com/package/concis

オープンソースは簡単ではありません。学び、経験することを歓迎します。気に入ったらサポートしてください。質問がある場合はメッセージを残してください。この記事が役に立った場合は、ブロガーはあなたのサポートを必要としています。ありがとうございます。